:root{--bg: #f3f4f9;--card: #ffffff;--card-muted: #f1f2f7;--border: #e7e8f0;--accent: #16181d;--accent-deep: #000000;--accent-soft: #eef0f5;--accent-mid: #aab0b9;--ink: #16181d;--ink-deep: #000000;--ink-soft: #5b606b;--ink-mute: #9aa0ab;--green: #059669;--amber: #d97706;--red: #dc2626;--red-soft: #fbe3e3;--green-soft: #d8f5e6;--amber-soft: #fbeecb;--r-xs: 8px;--r-sm: 10px;--r-md: 12px;--r-lg: 20px;--r-pill: 999px;--shadow: 0 1px 2px rgba(22, 24, 40, .05), 0 8px 24px rgba(22, 24, 40, .06);--shadow-sm: 0 1px 2px rgba(22, 24, 40, .04), 0 3px 10px rgba(22, 24, 40, .05);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}button{font-family:inherit;cursor:pointer;border:none;background:none}input,textarea{font-family:inherit}:focus-visible{outline:2px solid var(--accent-mid);outline-offset:2px}.app{display:flex;flex-direction:column;gap:18px;height:100vh;padding:18px}.app-body{flex:1;min-height:0;display:grid;grid-template-columns:76px 1fr;gap:18px}.appbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 6px 0;flex:none}.brand{display:flex;align-items:center;gap:16px}.brand-mark{color:var(--accent);display:grid;place-items:center;flex:none}.brand-logo{height:32px;width:auto;display:block}.brand-logo.login{height:36px}.page-head{margin-bottom:20px;flex:none}.page-head .kicker{font-size:13px;color:var(--ink-mute);margin:0 0 4px;font-weight:500}.page-head h1{margin:0;font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.02;color:var(--ink)}.appbar-actions{display:flex;align-items:center;gap:12px}.search{display:flex;align-items:center;background:var(--card);box-shadow:var(--shadow-sm);border-radius:var(--r-pill);padding:0 6px 0 18px;height:52px;min-width:300px}.search input{border:none;outline:none;background:none;flex:1;font-size:14px;color:var(--ink)}.search input::placeholder{color:var(--ink-mute)}.search .search-btn{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:background-color .15s ease}.search .search-btn:hover{background:var(--ink-deep)}.icon-btn{width:52px;height:52px;border-radius:50%;background:var(--card);box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--ink-soft);position:relative;transition:background-color .15s ease}.icon-btn:hover{background:var(--card-muted)}.icon-btn .dot{position:absolute;top:13px;right:14px;width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid var(--card)}.sidebar{background:var(--card);box-shadow:var(--shadow-sm);border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:10px}.nav-btn{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--ink-mute);transition:background-color .15s ease,color .15s ease}.nav-btn:hover{background:var(--card-muted);color:var(--ink-soft)}.nav-btn.active{background:var(--ink);color:#fff}.sidebar .spacer{flex:1}.avatar{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px;margin-top:4px}.main{min-width:0;display:flex;flex-direction:column;gap:16px;overflow:hidden}.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex:none;margin-bottom:22px}.head-row .page-head{margin-bottom:0}.view-tabs{display:inline-flex;gap:4px;flex:none;background:var(--card);box-shadow:var(--shadow-sm);border-radius:var(--r-pill);padding:5px}.view-tab{padding:9px 20px;border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--ink-soft);background:transparent;transition:background-color .18s ease,color .18s ease}.view-tab:hover{color:var(--ink)}.view-tab.active{background:var(--accent);color:#fff}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;flex:none}.stat-card{background:var(--card);box-shadow:var(--shadow);border-radius:var(--r-lg);padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:132px}.stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.stat-card .label{font-size:13px;font-weight:500;color:var(--ink-mute)}.stat-icon{width:38px;height:38px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--ink-soft);display:grid;place-items:center;flex:none}.stat-card.alarm .stat-icon{background:var(--red-soft);color:var(--red)}.stat-body{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.stat-card .value{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1}.stat-card.alarm .value{color:var(--red)}.sparkline{width:88px;height:34px;flex:none;overflow:visible}.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;flex:1;min-height:0}.bento{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;flex:none}.mail-card{flex:1;min-height:0}.card{background:var(--card);box-shadow:var(--shadow);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;min-height:0}.card h2{margin:0 0 4px;font-size:17px;font-weight:700;letter-spacing:-.2px}.card .card-sub{color:var(--ink-mute);font-size:13px;margin-bottom:18px}.queue-list,.card-scroll{flex:1;min-height:0;overflow-y:auto;margin-right:-8px;padding-right:8px}.cat-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;flex:none}.cat-chip{padding:7px 13px;border-radius:var(--r-pill);font-size:12.5px;background:var(--card-muted);color:var(--ink-soft);display:flex;align-items:center;gap:6px;transition:background-color .15s ease,color .15s ease}.cat-chip:hover{background:#e8ebe2}.cat-chip.active{background:var(--accent);color:#fff}.cat-chip .count{font-weight:700}.queue-row{display:flex;align-items:center;gap:14px;padding:13px 8px;border-top:1px solid #eef1ea;text-align:left;width:100%;transition:background-color .12s ease}.queue-row:hover{background:var(--card-muted)}.queue-row:first-child{border-top:none}.ampel{width:11px;height:11px;border-radius:50%;flex-shrink:0}.ampel.green{background:var(--green)}.ampel.amber{background:var(--amber)}.ampel.red{background:var(--red)}.queue-row .row-main{flex:1;min-width:0}.queue-row .row-from{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-row .row-sub{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-row .row-age{font-size:12px;color:var(--ink-mute);white-space:nowrap}.badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap}.badge-dot{width:8px;height:8px;border-radius:50%;flex:none}.detail .detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.detail .meta-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0;font-size:13px;color:var(--ink-soft)}.detail .mail-body{background:var(--card-muted);border-radius:var(--r-md);padding:16px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;flex:1;min-height:120px;overflow-y:auto;margin:8px 0 16px;color:var(--ink-soft)}.detail textarea{width:100%;min-height:120px;border:1px solid #e3e7df;border-radius:var(--r-md);padding:14px;font-size:14px;resize:vertical;outline:none;color:var(--ink);transition:border-color .15s ease}.detail textarea:focus{border-color:var(--accent-mid)}.detail .actions{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}.checkbox{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft)}.btn{padding:11px 20px;border-radius:var(--r-pill);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:background-color .15s ease,transform .12s ease}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-deep)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{background:var(--card-muted);color:var(--ink-soft)}.btn-ghost:hover{background:var(--border)}.mini-chart{display:flex;flex-direction:column;gap:12px;margin-top:4px;flex:1;min-height:0;overflow-y:auto}.mini-bar-row{display:grid;grid-template-columns:104px 1fr 30px;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft)}.mini-bar-track{height:12px;background:var(--card-muted);border-radius:var(--r-pill);overflow:hidden}.mini-bar-fill{height:100%;border-radius:var(--r-pill)}.mini-bar-row .n{text-align:right;font-weight:600;color:var(--ink)}.banner{background:var(--red-soft);color:#97412f;border-radius:var(--r-md);padding:10px 16px;font-size:13px;flex:none}.empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-mute);padding:48px 0;min-height:180px;font-size:14px}.login-wrap{height:100vh;display:grid;place-items:center}.login-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:36px;width:360px}.login-card .logo{display:flex;margin-bottom:22px}.login-card h1{font-size:20px;margin:0 0 4px}.login-card p{color:var(--ink-mute);font-size:13px;margin:0 0 22px}.field{margin-bottom:14px}.field label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:6px}.field input{width:100%;height:44px;border:1px solid #e3e7df;border-radius:var(--r-md);padding:0 14px;font-size:14px;outline:none;transition:border-color .15s ease}.field input:focus{border-color:var(--accent-mid)}.login-card .btn-primary{width:100%;margin-top:6px;justify-content:center}.login-error{background:var(--red-soft);color:#97412f;border-radius:var(--r-sm);padding:9px 12px;font-size:13px;margin-bottom:14px}.mail-row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-top:1px solid var(--border)}.mail-row:first-child{border-top:none}.avatar-sm{width:34px;height:34px;border-radius:50%;background:var(--card-muted);color:var(--ink-soft);font-size:12px;font-weight:700;display:grid;place-items:center;flex:none;position:relative}.mail-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.mail-from{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mail-time{font-size:11.5px;color:var(--ink-mute)}.status-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;white-space:nowrap;color:var(--ink-mute)}.status-pill .status-dot{width:6px;height:6px;border-radius:50%;flex:none}.status-pill.open .status-dot{background:var(--amber)}.status-pill.done{color:var(--ink-soft)}.status-pill.done .status-dot{background:var(--green)}.ampel-badge{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--card)}.ampel-badge.green{background:var(--green)}.ampel-badge.amber{background:var(--amber)}.ampel-badge.red{background:var(--red)}.radial-chart{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px;flex:1;min-height:0}.radial-svg-wrap{display:flex;justify-content:center;flex:none}.radial-svg{width:184px;height:184px;max-width:100%;opacity:0;transform:scale(.96);transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1)}.radial-svg.shown{opacity:1;transform:scale(1)}.donut-seg{transition:opacity .15s ease;cursor:default}.radial-total{fill:var(--ink);font-size:32px;font-weight:800;text-anchor:middle;letter-spacing:-.04em}.radial-total-label{fill:var(--ink-mute);font-size:11px;text-anchor:middle}.radial-legend{list-style:none;margin:0;padding:0;flex:1;min-width:150px;display:flex;flex-direction:column;gap:10px}.radial-legend-item{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-soft);cursor:default;transition:opacity .15s ease}.radial-legend-item.dim{opacity:.4}.radial-legend-item .dot{width:9px;height:9px;border-radius:50%;flex:none}.radial-legend-item .lg-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.radial-legend-item .lg-val{font-weight:700;color:var(--ink)}.radial-legend-item .lg-pct{color:var(--ink-mute);width:36px;text-align:right}.trend-chart{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;justify-content:center}.trend-legend{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap}.trend-legend li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft)}.trend-legend .dot{width:9px;height:9px;border-radius:50%;flex:none}.trend-legend .tl-val{font-weight:800;color:var(--ink);letter-spacing:-.01em}.trend-svg{display:block;width:100%;height:auto;aspect-ratio:640 / 248;opacity:0;animation:fade-in .5s ease .1s both}.trend-grid{stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}.trend-xtick{fill:var(--ink-mute);font-size:12px;text-anchor:middle}.trend-cursor-line{stroke:var(--accent-mid);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.trend-tip-bg{fill:var(--card);filter:drop-shadow(0 6px 18px rgba(22,24,40,.14))}.trend-tip-title{fill:var(--ink-mute);font-size:11px;font-weight:600}.trend-tip-row{fill:var(--ink-soft);font-size:12px}.trend-tip-val{fill:var(--ink);font-size:12px;font-weight:800;text-anchor:end}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.stat-card,.card{transition:transform .16s ease,box-shadow .16s ease}.stat-card:hover,.card:hover{transform:translateY(-2px);box-shadow:0 2px 4px #1618280f,0 14px 32px #1618281a}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.stat-card{animation:rise .5s cubic-bezier(.22,.61,.36,1) both}.stat-card:nth-child(2){animation-delay:.06s}.stat-card:nth-child(3){animation-delay:.12s}.stat-card:nth-child(4){animation-delay:.18s}.grid>.card,.bento>.card,.mail-card{animation:rise .5s cubic-bezier(.22,.61,.36,1) both}.grid>.card:nth-child(2),.bento>.card:nth-child(2){animation-delay:.1s}.mail-card{animation-delay:.16s}@media(prefers-reduced-motion:reduce){.stat-card,.grid>.card,.bento>.card,.mail-card{animation:none}.trend-svg{opacity:1;animation:none}.stat-card:hover,.card:hover{transform:none}.radial-svg{opacity:1;transform:none;transition:none}.donut-seg{transition:none}}@media(max-width:900px){.app{height:auto;min-height:100vh}.app-body{display:flex;flex-direction:column;min-height:0}.sidebar{flex-direction:row;align-items:center;padding:10px 14px;gap:12px}.sidebar .spacer{flex:1}.avatar{margin-top:0}.main{overflow:visible}.stat-row{grid-template-columns:repeat(2,1fr)}.grid,.bento{grid-template-columns:1fr;flex:initial}.head-row{flex-direction:column;align-items:flex-start;gap:14px}.queue-list,.card-scroll{overflow:visible}}@media(max-width:640px){.app{padding:14px;gap:14px}.appbar{flex-direction:column;align-items:stretch}.appbar-actions{width:100%}.search{min-width:0;flex:1}.stat-card{padding:16px;min-height:108px}.card{padding:18px}}@media(max-width:440px){.stat-row{grid-template-columns:1fr}}