:root{
  --bg:#ffffff;
  --page:#ffffff;
  --sidebar:#f7f8fa;
  --panel:#ffffff;
  --panel-soft:#f8f9fb;
  --text:#17191c;
  --muted:#6b7280;
  --muted-2:#8c939f;
  --line:#e7e9ed;
  --line-strong:#d8dce2;
  --primary:#2490ef;
  --primary-soft:#eaf4ff;
  --danger:#d33b3b;
  --success:#15915f;
  --warning:#bb7615;
  --radius:10px;
  --shadow:0 1px 2px rgba(17,24,39,.03),0 8px 28px rgba(17,24,39,.035);
  --sidebar-w:206px;
  --top-h:48px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:#1f75c8;text-decoration:none}
a:hover{text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
input,select,textarea{width:100%;min-width:0;border:1px solid var(--line-strong);background:#fff;border-radius:6px;padding:7px 9px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
input:hover,select:hover,textarea:hover{border-color:#c9ced6}
input:focus,select:focus,textarea:focus{border-color:#8abef0;box-shadow:0 0 0 2px rgba(36,144,239,.11)}
textarea{resize:vertical}
input[type="checkbox"],input[type="radio"]{width:auto}
kbd{font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#8a919b;background:#fff;border:1px solid var(--line);border-bottom-color:#d5d9df;border-radius:4px;padding:1px 4px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.ui-icon{width:17px;height:17px;display:block;flex:0 0 auto}

/* Desk shell */
.desk-shell{min-height:100vh;background:#fff}
.desk-sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--sidebar);border-right:1px solid var(--line);z-index:60;display:flex;flex-direction:column;overflow:hidden}
.workspace-brand{height:64px;padding:10px 10px 8px 14px;display:flex;align-items:center;gap:9px;flex:0 0 auto}
.workspace-mark{width:28px;height:28px;border-radius:8px;background:#e6f1fb;color:#2681cd;display:grid;place-items:center;font-weight:700;font-size:15px;box-shadow:inset 0 0 0 1px rgba(36,144,239,.08)}
.workspace-name{display:flex;min-width:0;flex:1;flex-direction:column;color:var(--text)}
.workspace-name strong{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.workspace-name span{font-size:10px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sidebar-collapse{display:none;width:28px;height:28px;border:0;background:transparent;border-radius:6px;font-size:19px;cursor:pointer;color:var(--muted)}
.sidebar-tools{padding:3px 8px 8px}
.sidebar-tool{width:100%;height:34px;padding:0 9px;border:0;background:transparent;border-radius:7px;display:flex;align-items:center;gap:9px;color:#43484f;cursor:pointer;text-align:left}
.sidebar-tool:hover{background:#eef0f3;color:#17191c}
.sidebar-tool span{flex:1}
.sidebar-tool kbd{margin-left:auto;background:#fbfbfc}
.nav-count{min-width:18px;height:18px;border-radius:9px;background:#eef0f3;color:#676e78;font-size:10px;display:grid;place-items:center;padding:0 5px;font-weight:600}
.desk-nav{flex:1;overflow:auto;padding:0 7px 12px;scrollbar-width:thin;scrollbar-color:#d8dce2 transparent}
.nav-item,.nav-group-title{height:34px;width:100%;border:0;background:transparent;border-radius:7px;padding:0 9px;display:flex;align-items:center;gap:9px;color:#4b515a;font-size:13px;text-align:left;cursor:pointer}
.nav-item:hover,.nav-group-title:hover,.nav-subitem:hover{background:#eef0f3;color:#1d2024}
.nav-item.active,.nav-subitem.active{background:#fff;box-shadow:0 1px 2px rgba(17,24,39,.05),inset 0 0 0 1px rgba(17,24,39,.04);color:#17191c;font-weight:600}
.nav-group{margin-top:2px}
.nav-group-title .ui-icon:last-child{width:13px;height:13px;margin-left:auto;color:#959ba4;transition:transform .16s ease}
.nav-group.open .nav-group-title .ui-icon:last-child{transform:rotate(90deg)}
.nav-group-items{display:none;padding:1px 0 4px 34px}
.nav-group.open .nav-group-items{display:block}
.nav-subitem{height:30px;border-radius:6px;color:#5e646d;display:flex;align-items:center;padding:0 8px;margin:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user{flex:0 0 auto;border-top:1px solid var(--line);padding:9px 10px;display:flex;align-items:center;gap:8px;background:rgba(247,248,250,.96)}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#dff4e8;color:#247a52;font-size:12px;font-weight:700}
.user-summary{min-width:0;flex:1;display:flex;flex-direction:column;color:var(--text)}
.user-summary strong{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-summary span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-link{width:28px;height:28px;display:grid;place-items:center;border-radius:6px;color:#727983}
.icon-link:hover{background:#eceef1;color:#33383f}
.icon-link .ui-icon{width:15px;height:15px}

.desk-main{margin-left:var(--sidebar-w);min-width:0;min-height:100vh;background:#fff}
.desk-topbar{height:var(--top-h);position:fixed;left:var(--sidebar-w);right:0;top:0;z-index:45;background:rgba(255,255,255,.94);backdrop-filter:blur(7px);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px;gap:12px}
.mobile-menu{display:none;width:32px;height:32px;border:0;background:transparent;border-radius:6px;align-items:center;justify-content:center;cursor:pointer}
.breadcrumb{display:flex;align-items:center;gap:7px;color:#8c939c;min-width:0;flex:1}
.breadcrumb a{color:#8a919b;display:grid;place-items:center}
.breadcrumb .ui-icon{width:14px;height:14px}
.breadcrumb strong{font-weight:600;color:#3f444c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:6px}
.top-search,.more-button{height:30px;border:0;background:transparent;border-radius:6px;color:#707780;display:flex;align-items:center;gap:6px;padding:0 8px;cursor:pointer}
.top-search:hover,.more-button:hover{background:#f3f4f6;color:#30343a}
.top-search .ui-icon,.more-button .ui-icon{width:15px;height:15px}
.more-button{width:31px;padding:0;justify-content:center}
.desk-content{padding:calc(var(--top-h) + 22px) 28px 36px;max-width:1280px;margin:0 auto;min-height:100vh}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 16px}
.page-head h1{font-size:20px;line-height:1.35;margin:1px 0 0;font-weight:650;letter-spacing:-.01em}
.page-kicker{font-size:11px;color:#9298a1;margin:0;text-transform:none}
.desk-footer{border-top:1px solid #f0f1f3;margin-top:34px;padding:14px 2px 0;color:#9aa0a9;font-size:10px;display:flex;justify-content:space-between;gap:12px}
.sidebar-backdrop{display:none}

/* Frappe-like surfaces */
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:none;padding:15px;margin-bottom:14px}
.card:hover{border-color:#e0e3e7}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.card-head h2,.card h2{font-size:14px;font-weight:600;margin:0;color:#30343a}
.card > h2{margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.grid{display:grid;gap:13px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cards{align-items:start}
.span2{grid-column:span 2}
.compact{margin-top:14px}
.align-end{display:flex;align-items:end}
.form-card{padding:18px 20px}
.form-card label,.auth-card label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:600;color:#707780}
.form-card input,.form-card select,.form-card textarea{font-size:13px;color:#20242a;font-weight:400}
.check{flex-direction:row!important;align-items:center!important}
.check input{width:auto}
.form-actions,.actionbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:15px}
.actionbar{margin-bottom:14px}
.actionbar form{display:inline-flex;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #d8dce2;background:#fff;color:#3a4048;border-radius:6px;padding:6px 10px;min-height:31px;cursor:pointer;white-space:nowrap;text-decoration:none;font-weight:500;transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover{background:#f7f8fa;border-color:#cfd4da;text-decoration:none}
.btn.primary{background:#17191c;border-color:#17191c;color:#fff}
.btn.primary:hover{background:#2c3035;border-color:#2c3035}
.btn.danger{border-color:#eccaca;color:#b83232;background:#fffafa}
.btn.danger:hover{background:#fff3f3}
.btn.small{padding:4px 8px;min-height:27px;font-size:11px}
.btn.block{width:100%}
.icon-btn{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.toolbar.wrap{flex-wrap:wrap}
.toolbar form{margin:0}
.inline-form{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.inline-form input,.inline-form select{width:auto;min-width:130px}
.inline-form label{display:flex;align-items:center;gap:5px;color:#69707a;font-size:11px;font-weight:600}
.inline-form label input{font-weight:400;color:#23272d}
.table-wrap{overflow:auto;width:100%;border-radius:7px}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px}
th,td{border-bottom:1px solid #eceef1;padding:9px 10px;text-align:left;vertical-align:middle}
th{font-size:10.5px;letter-spacing:.01em;color:#858c96;background:#f8f9fa;font-weight:600;position:sticky;top:0;z-index:1;text-transform:none}
th:first-child{border-top-left-radius:6px}th:last-child{border-top-right-radius:6px}
td{color:#393e45;font-size:12px}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fafbfc}
td a{font-weight:500;color:#276da8}
.num{text-align:right;font-variant-numeric:tabular-nums}
.line-editor input{min-width:105px}
.line-editor .qty,.line-editor .price{min-width:90px}
.badge{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border-radius:10px;background:#f0f2f4;color:#606771;font-size:10px;white-space:nowrap;font-weight:600}
.status-submitted{background:#e9f7f0;color:#23734f}
.status-draft{background:#eef0f3;color:#646b74}
.status-pending-approval{background:#fff5df;color:#94620d}
.status-cancelled{background:#fdecec;color:#a63a3a}
.alert{padding:9px 11px;border-radius:7px;margin-bottom:12px;border:1px solid;font-size:12px}
.alert.success{background:#eff9f4;border-color:#d5eee1;color:#27684d}
.alert.error{background:#fff1f1;border-color:#f0d1d1;color:#9a3535}
.alert.warning{background:#fff8e8;border-color:#f0e0b8;color:#835c16}
.muted{color:var(--muted);font-size:11.5px}

/* KPI cards / dashboard */
.stat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 13px;min-width:0;min-height:74px}
.stat span{display:block;color:#6e757f;font-size:10.5px;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat strong{font-size:17px;line-height:1.35;font-weight:620;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;display:block;color:#2b3036}
.workspace-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}
.workspace-card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:13px 14px;min-height:150px}
.workspace-card h3{font-size:12px;font-weight:650;margin:0 0 8px;color:#4a5058}
.workspace-links{display:grid;gap:1px}
.workspace-links a{display:flex;align-items:center;justify-content:space-between;padding:5px 2px;color:#40464e;border-radius:5px;font-size:12px}
.workspace-links a:hover{color:#1f75c8;background:#fafbfc;padding-left:5px}
.workspace-links a::after{content:'↗';font-size:10px;color:#9ca2aa}
.workspace-hero{border:1px solid var(--line);border-radius:10px;background:#fff;padding:14px;margin-bottom:12px}
.workspace-hero-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.workspace-hero-head h2{font-size:13px;margin:0;font-weight:620;color:#3e444b}
.spark-chart{width:100%;height:190px;display:block}
.spark-chart .gridline{stroke:#eceef1;stroke-width:1}
.spark-chart .axis-label{fill:#8a919b;font-size:10px}
.spark-chart .revenue{fill:none;stroke:#f16b9a;stroke-width:2}
.spark-chart .cost{fill:none;stroke:#3c91d9;stroke-width:2}
.spark-chart .profit{fill:none;stroke:#37ae70;stroke-width:2}
.chart-legend{display:flex;gap:24px;align-items:center;margin-top:3px;padding:0 4px;color:#606771;font-size:11px}
.chart-legend span{display:flex;align-items:center;gap:6px}
.chart-dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.chart-dot.revenue{background:#f16b9a}.chart-dot.cost{background:#3c91d9}.chart-dot.profit{background:#37ae70}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.metric-card{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff;min-width:0}
.metric-card span{display:block;color:#636a73;font-size:10.5px;margin-bottom:3px}
.metric-card strong{display:block;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#32373e}
.metric-card small{font-size:10px;color:#9aa0a8}

.tabs{display:flex;gap:2px;overflow:auto;margin:0 0 12px;padding:0 0 1px;border-bottom:1px solid var(--line)}
.tabs a{padding:7px 9px 8px;color:#646b75;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:#24282e}
.tabs a.active{color:#24282e;font-weight:600;border-bottom-color:#24282e}
.dropdown{position:relative}
.dropdown-menu{display:none;position:absolute;right:0;top:35px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 34px rgba(22,34,60,.13);min-width:178px;padding:5px;z-index:30}
.dropdown-menu.show{display:block}
.dropdown-menu a{display:block;padding:6px 8px;border-radius:5px;color:#3f454d;font-size:12px}
.dropdown-menu a:hover{background:#f4f5f7;text-decoration:none}
.doc-header{display:flex;justify-content:space-between;gap:20px;align-items:center}
.doc-header h2{margin:2px 0 7px;font-size:20px;font-weight:620}
.eyebrow{font-size:10px;color:#8e959e;text-transform:uppercase;letter-spacing:.04em}
.doc-meta{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:7px 20px}
.doc-meta span{color:#8b929b;font-size:10px}
.doc-meta strong{display:block;color:#363b42;font-size:12px;font-weight:560}
.file-list{list-style:none;margin:9px 0 0;padding:0}
.file-list li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #edf0f2}
.kv{display:grid;grid-template-columns:120px 1fr;gap:7px 12px;margin:0}
.kv dt{color:#8b929b}.kv dd{margin:0;color:#353a41}
.secret{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:17px;letter-spacing:2px;background:#f6f7f8;padding:10px;border-radius:6px;word-break:break-all;margin:9px 0}
.wrap-code{display:block;white-space:normal;word-break:break-all;background:#f7f8fa;padding:7px;border-radius:5px}
.chip-list{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-block;padding:5px 8px;background:#f4f5f7;border:1px solid #eceef1;border-radius:6px;color:#4f5660;font-size:11px}
.chip:hover{background:#eef0f3;color:#2f343b}
.permission-table{font-size:11px}
.permission-table th,.permission-table td{text-align:center;padding:6px}
.permission-table th:first-child,.permission-table td:first-child{text-align:left;position:sticky;left:0;background:#fff;z-index:2}
.permission-table input{width:auto}
.error-log{max-width:500px;max-height:220px;overflow:auto;white-space:pre-wrap}
.hint{background:#fafbfc}

/* Auth */
.auth-main{min-height:100vh;display:grid;place-items:center;padding:24px;background:#f7f8fa}
.auth-card{width:min(420px,100%);background:#fff;border:1px solid var(--line);border-radius:12px;padding:25px;box-shadow:0 14px 42px rgba(17,24,39,.06)}
.auth-card.wide{width:min(760px,100%)}
.auth-card h1{font-size:20px;margin:7px 0 3px;font-weight:650}
.auth-card>p{color:#7b828c;margin:2px 0}
.auth-card form{display:grid;gap:12px;margin-top:18px}
.auth-links{text-align:center;margin-top:13px}
.logo-mark{display:grid;place-items:center;width:42px;height:42px;background:#e8f2fb;color:#267fc7;border-radius:10px;font-weight:750}
.checklist{list-style:none;margin:13px 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.checklist li{padding:6px 8px;background:#f6f7f8;border-radius:6px}
.checklist li.ok{color:var(--success)}.checklist li.bad{color:var(--danger)}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

/* Quick command palette */
.command-layer{position:fixed;inset:0;z-index:120;background:rgba(30,34,40,.25);display:grid;place-items:start center;padding-top:11vh;backdrop-filter:blur(2px)}
.command-layer[hidden]{display:none!important}
.command-dialog{width:min(560px,calc(100vw - 28px));background:#fff;border:1px solid #dfe2e6;border-radius:12px;box-shadow:0 22px 65px rgba(18,24,32,.19);overflow:hidden}
.command-input-wrap{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;padding:0 13px;color:#858c95}
.command-input-wrap input{border:0;box-shadow:none;padding:0;background:transparent;height:40px;font-size:14px}
.command-input-wrap input:focus{box-shadow:none}
.command-input-wrap kbd{margin-left:auto}
.command-results{max-height:390px;overflow:auto;padding:6px}
.command-results a{height:38px;border-radius:7px;padding:0 9px;display:flex;align-items:center;justify-content:space-between;color:#343940}
.command-results a:hover,.command-results a.focused{background:#f2f4f6}
.command-results small{color:#959ba4;font-size:10px}
.command-empty{text-align:center;color:#8b929a;padding:28px 15px}

/* Responsive */
@media(max-width:1180px){
  .stat-grid{grid-template-columns:repeat(3,1fr)}
  .grid.three{grid-template-columns:repeat(2,1fr)}
  .workspace-grid{grid-template-columns:repeat(2,1fr)}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  :root{--sidebar-w:220px}
  .desk-sidebar{transform:translateX(-100%);transition:transform .18s ease;box-shadow:12px 0 32px rgba(20,25,32,.10)}
  body.nav-open .desk-sidebar{transform:translateX(0)}
  .sidebar-collapse{display:grid;place-items:center}
  .desk-main{margin-left:0}
  .desk-topbar{left:0;padding:0 10px}
  .mobile-menu{display:flex}
  body.nav-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(24,29,35,.24);z-index:55}
  .desk-content{padding:calc(var(--top-h) + 16px) 15px 28px}
  .top-search span{display:none}
}
@media(max-width:700px){
  .grid.two,.grid.three{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-grid{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar{align-items:stretch;flex-direction:column}
  .inline-form{width:100%}
  .inline-form input,.inline-form select{flex:1;min-width:110px}
  .doc-header{align-items:flex-start;flex-direction:column}
  .doc-meta{grid-template-columns:repeat(2,1fr);width:100%}
  .card{padding:12px}
  .form-card{padding:14px}
  .checklist{grid-template-columns:1fr}
  .page-head h1{font-size:18px}
  .workspace-hero{padding:11px}
}
@media(max-width:430px){
  .stat-grid,.metric-grid{grid-template-columns:1fr}
  .doc-meta{grid-template-columns:1fr}
  .desk-content{padding-left:10px;padding-right:10px}
  .breadcrumb strong{max-width:190px}
}

.section-title{font-size:14px;font-weight:620;color:#555c65;margin:15px 0 9px}
