:root {
    color-scheme: light;
    --surface: #fff;
    --surface-soft: #f7f9f4;
    --surface-raised: #fff;
    --table-head: #f9fbf7;
    --row-line: #edf1ec;
    --row-hover: #fcfdfb;
    --tree-text: #536863;
    --tree-hover: #f2f6f0;
    --accent-soft: #e8f2ed;
    --control-line: #dce4db;
    --control-hover: #93b4a5;
    --focus: #80b8a2;
    --notice-bg: #fff8e8;
    --notice-line: #ecddc2;
    --notice-text: #7d6437;
    --description: #526761;
    --stock-bg: #e8f3e7;
    --stock-text: #397648;
    --order-bg: #f4eddf;
    --order-text: #906b30;
    --neutral-bg: #edf0ed;
    --neutral-text: #64756b;
    --action-bg: #166c56;
    --action-text: #fff;
    --mark-bg: #166c56;
    --mark-text: #fff;
    --backdrop: #142e2d55;
    --panel-shadow: #162d2b18;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e5eee9;
    --muted: #a0b3aa;
    --line: #2c3d36;
    --green: #82d5b3;
    --paper: #101814;
    --surface: #18221d;
    --surface-soft: #1e2c25;
    --surface-raised: #1d2a23;
    --table-head: #1d2a23;
    --row-line: #283a30;
    --row-hover: #1d2c24;
    --tree-text: #bdd0c5;
    --tree-hover: #203328;
    --accent-soft: #253f33;
    --control-line: #365045;
    --control-hover: #82d5b3;
    --focus: #93ddbd;
    --notice-bg: #322b1c;
    --notice-line: #655431;
    --notice-text: #e4c782;
    --description: #bdcdc4;
    --stock-bg: #213e2c;
    --stock-text: #b3e6c1;
    --order-bg: #3d321e;
    --order-text: #efd19b;
    --neutral-bg: #2b3730;
    --neutral-text: #b6c6bd;
    --action-bg: #82d5b3;
    --action-text: #0b2b1c;
    --mark-bg: #2a7659;
    --backdrop: #020704b3;
    --panel-shadow: #0006;
}

header, aside, .stat, .table-frame, dialog, .detail-head, .login-card,
.source-item, .job-card {
    background: var(--surface);
}
.columns-panel {
    background: var(--surface-raised);
    box-shadow: 0 8px 35px var(--panel-shadow);
}
input, select, textarea, .outline {
    background: var(--surface);
    border-color: var(--control-line);
    color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"] { accent-color: var(--green); }
input:focus, select:focus, textarea:focus, button:focus-visible,
.theme-toggle:focus-visible { outline-color: var(--focus); }
.outline:hover { border-color: var(--control-hover); }
.tree-button { color: var(--tree-text); }
.tree-button.active, .pill { background: var(--accent-soft); color: var(--green); }
.tree-button:hover { background: var(--tree-hover); }
.tree-count { color: var(--muted); }
th { background: var(--table-head); }
td { border-bottom-color: var(--row-line); }
tr:hover td { background: var(--row-hover); }
.notice { background: var(--notice-bg); border-color: var(--notice-line); color: var(--notice-text); }
.status.in_stock { background: var(--stock-bg); color: var(--stock-text); }
.status.on_order { background: var(--order-bg); color: var(--order-text); }
.status.unknown, .status.check_with_manager, .status.expected,
.status.out_of_stock { background: var(--neutral-bg); color: var(--neutral-text); }
.close, .detail-box, .raw-data { background: var(--surface-soft); color: var(--ink); }
.description { color: var(--description); }
.primary { background: var(--action-bg); color: var(--action-text); }
.mark { background: var(--mark-bg); color: var(--mark-text); }
dialog::backdrop { background: var(--backdrop); }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 38px;
    padding: 8px;
    border: 1px solid var(--control-line);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.theme-toggle:hover { border-color: var(--control-hover); background: var(--surface-soft); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }
.login-brand { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.login-card .theme-toggle { width: 40px; margin-top: 0; }

@media (max-width: 1000px) {
    header { flex-wrap: wrap; height: auto; min-height: 94px; gap: 12px; padding-top: 18px; padding-bottom: 18px; }
    nav { flex-wrap: wrap; }
}