:root { --bg:#0f0f10; --panel:#18181a; --panel-2:#202024; --text:#f5f2e8; --muted:#a7a29a; --line:#303035; --yellow:#f7c600; --red:#df2e38; --green:#2eb872; --shadow:0 20px 50px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; }
button,input,select { font:inherit; }
.app-shell { display:grid; grid-template-columns:280px 1fr; min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; padding:24px 18px; background:#070708; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:22px; }
.brand { display:flex; gap:14px; align-items:center; }
.brand-mark { width:52px; height:52px; display:grid; place-items:center; background:var(--yellow); color:#080808; font-weight:900; border-radius:8px; box-shadow:8px 8px 0 var(--red); }
.brand h1 { margin:0; font-size:20px; letter-spacing:0; }
.brand p,.panel-heading span,.eyebrow { margin:4px 0 0; color:var(--muted); font-size:12px; }
.nav { display:grid; gap:8px; }
.nav-main,.nav-sub button,.module-card { border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:8px; cursor:pointer; }
.nav-main { width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; text-align:left; padding:0 14px; }
.nav-sub { display:none; gap:6px; padding:6px 0 0 12px; }
.nav-group.open .nav-sub { display:grid; }
.nav-group.open .nav-main,.nav [data-view].active,.nav-main:hover,.nav-sub button:hover { border-color:var(--yellow); color:var(--yellow); }
.nav-sub button { min-height:36px; text-align:left; padding:0 12px; background:#111113; font-size:13px; }
.main { padding:28px; overflow:hidden; }
.hero { display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.hero h2 { margin:6px 0 0; font-size:34px; letter-spacing:0; }
.hero-stats { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.stat-pill { min-width:112px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.stat-pill strong { display:block; font-size:20px; color:var(--yellow); }
.stat-pill span { font-size:12px; color:var(--muted); }
.view { display:none; }
.view.active { display:block; }
.module-grid { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:16px; }
.module-card { min-height:168px; padding:22px; text-align:left; position:relative; overflow:hidden; }
.module-card::after { content:""; position:absolute; right:-24px; bottom:-24px; width:110px; height:110px; border:18px solid rgba(247,198,0,.16); border-radius:50%; }
.module-card:hover { transform:translateY(-2px); border-color:var(--yellow); }
.module-card strong { display:block; font-size:22px; margin-bottom:12px; }
.module-card span { color:var(--muted); line-height:1.65; }
.two-column,.three-column { display:grid; gap:16px; margin-bottom:16px; }
.two-column { grid-template-columns:repeat(2,minmax(0,1fr)); }
.three-column { grid-template-columns:repeat(3,minmax(0,1fr)); }
.narrow-form { max-width:720px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px; box-shadow:var(--shadow); min-width:0; margin-bottom:16px; }
.panel-heading { margin-bottom:14px; }
.panel h3 { margin:0; font-size:18px; }
form { display:grid; gap:12px; align-content:start; }
label { display:grid; gap:6px; color:var(--muted); font-size:13px; }
input,select { width:100%; min-height:40px; color:var(--text); background:#111113; border:1px solid var(--line); border-radius:6px; padding:0 10px; outline:none; }
input:focus,select:focus { border-color:var(--yellow); }
.toolbar { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.toolbar label { min-width:180px; }
.primary-button,.ghost-button,.small-button { min-height:40px; border-radius:6px; border:1px solid transparent; cursor:pointer; }
.primary-button { background:var(--yellow); color:#0a0a0a; font-weight:800; }
.ghost-button { background:transparent; color:var(--text); border-color:var(--line); }
.ghost-button:hover,.small-button:hover { border-color:var(--yellow); color:var(--yellow); }
.danger { color:#ff757d; border-color:rgba(223,46,56,.45); margin-top:auto; }
.small-button { min-height:30px; padding:0 9px; background:var(--panel-2); color:var(--text); border-color:var(--line); }
.table-wrap { width:100%; overflow-x:auto; }
.table-tools { display:flex; align-items:end; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.table-tools label { min-width:160px; }
.table-tools label span { color:var(--muted); font-size:12px; }
.table-tools .table-search { flex:1; min-width:220px; }
.table-tools input { min-height:36px; }
.table-pager { min-height:42px; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:10px; color:var(--muted); font-size:12px; }
.table-page-button { width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--panel-2); color:var(--text); cursor:pointer; font-size:22px; }
.table-page-button:hover:not(:disabled) { border-color:var(--yellow); color:var(--yellow); }
.table-page-button:disabled { opacity:.35; cursor:not-allowed; }
.table-page-info { min-width:130px; text-align:center; }
table { width:100%; border-collapse:collapse; min-width:560px; }
th,td { padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; white-space:nowrap; }
th { color:var(--yellow); font-size:12px; font-weight:800; background:#101011; }
td { color:#e6e1d5; font-size:13px; }
.empty { color:var(--muted); border:1px dashed var(--line); border-radius:8px; padding:18px; text-align:center; }
.badge { display:inline-flex; align-items:center; min-height:24px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:800; }
.badge.green { background:rgba(46,184,114,.14); color:#6de1a6; }
.badge.red { background:rgba(223,46,56,.16); color:#ff757d; }
.badge.yellow { background:rgba(247,198,0,.16); color:var(--yellow); }
.badge.neutral { background:#242428; color:var(--muted); }
.summary-panel { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-content:start; }
.summary-box { background:#111113; border:1px solid var(--line); border-radius:8px; padding:16px; }
.summary-box span { color:var(--muted); font-size:12px; }
.summary-box strong { display:block; margin-top:8px; font-size:22px; }
.product-summary .summary-box { border-left:4px solid var(--yellow); }
.product-summary small { display:block; margin-top:8px; color:var(--muted); line-height:1.6; }
.selected-product-card { display:grid; gap:14px; align-content:start; }
.product-series-group { border-top:1px solid var(--line); }
.product-series-group:last-child { border-bottom:1px solid var(--line); }
.product-series-group summary { min-height:52px; padding:0 10px; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; }
.product-series-group summary::-webkit-details-marker { display:none; }
.product-series-group summary::before { content:"+"; width:22px; color:var(--yellow); font-size:20px; font-weight:800; }
.product-series-group[open] summary::before { content:"-"; }
.product-series-group summary span { flex:1; min-width:0; color:var(--text); font-weight:800; overflow-wrap:anywhere; }
.product-series-group summary strong { color:var(--muted); font-size:12px; white-space:nowrap; }
.product-series-group[open] summary { color:var(--yellow); }
.product-series-group .table-wrap { padding-bottom:8px; }
.segmented-field { margin:0; padding:0; border:0; min-width:0; }
.segmented-field legend { margin-bottom:6px; color:var(--muted); font-size:13px; }
.segmented-control { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:4px; background:#111113; border:1px solid var(--line); border-radius:6px; }
.segmented-control label { position:relative; display:block; cursor:pointer; }
.segmented-control input { position:absolute; opacity:0; pointer-events:none; }
.segmented-control span { min-height:34px; display:grid; place-items:center; padding:0 8px; color:var(--muted); border-radius:4px; font-size:13px; font-weight:700; }
.segmented-control input:checked + span { background:var(--yellow); color:#0a0a0a; }
.payroll-preview { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:12px 14px; border-left:4px solid var(--yellow); background:#111113; }
.payroll-preview span { color:var(--muted); font-size:13px; }
.payroll-preview strong { color:var(--yellow); font-size:24px; }
.payroll-status-cell .small-button { margin-left:8px; }
@media (max-width:1080px) { .app-shell{grid-template-columns:1fr;} .sidebar{position:static;height:auto;} .nav{grid-template-columns:repeat(2,1fr);} .two-column,.three-column,.module-grid{grid-template-columns:1fr;} }
@media (max-width:640px) { .main,.sidebar{padding:18px;} .hero{display:block;} .hero-stats{justify-content:flex-start;margin-top:16px;} .nav{grid-template-columns:1fr;} .summary-panel{grid-template-columns:1fr;} .table-tools label,.table-tools .table-search{width:100%;min-width:0;} .table-pager{justify-content:center;} }
.hero-tools { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.settings-button { width:44px; height:44px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--yellow); cursor:pointer; font-size:20px; }
.settings-button:hover { border-color:var(--yellow); }
.modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.62); }
.modal-backdrop[hidden] { display:none; }
.settings-panel { width:min(420px, 100%); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px; box-shadow:var(--shadow); display:grid; gap:14px; }
.modal-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.modal-heading h3 { margin:0; }
.settings-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px; background:#111113; border:1px solid var(--line); border-radius:8px; }
.settings-row span { color:var(--muted); font-size:13px; }
.settings-row strong { color:var(--yellow); }
.cloud-settings { display:grid; gap:12px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#111113; }
.settings-actions { display:grid; gap:8px; }
.cloud-status { min-height:20px; margin:0; color:var(--muted); font-size:13px; line-height:1.5; }

.data-file-settings { display:grid; gap:12px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#111113; }
.data-file-settings h4 { margin:0; font-size:14px; color:var(--yellow); }