/* ═══════════════════════════════════════
   正熠恒 · iOS 27 弹性动画体系
   Spring · FadeUp · Bounce · Pulse
   ═══════════════════════════════════════ */

:root {
  /* Base Light — Premium Gray */
  --s0:#F7F7F9;--s50:#EEEFF1;--s100:#E2E3E6;--t9:#1A1A1E;--t6:#6B6B74;--t5:#94949E;--t4:#B8B8C0;
  --a:#0055D4;--q:#00C8E8;--n:#7B2FFF;--sc:#00B578;--w:#F08300;--d:#E02020;
  --gb:rgba(255,255,255,.72);--gbr:rgba(0,0,0,.05);--div:rgba(0,0,0,.04);
  --rxl:20px;--rlg:14px;--rmd:10px;--rf:9999px;
  /* iOS 27 弹性曲线 */
  --sp:cubic-bezier(.34,1.56,.64,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --e:.32s;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
  --fn:'SF Mono','JetBrains Mono','Fira Code',monospace;
  --shadow-sm:0 1px 3px rgba(0,0,0,.04);
  --shadow-md:0 8px 32px rgba(0,0,0,.06);
  --shadow-lg:0 20px 60px rgba(0,0,0,.1);
}

/* ═══ Theme: Dark ═══ */
.dark,[data-theme=dark]{
  --s0:#0E0E12;--s50:#1A1A20;--s100:#26262E;--t9:#EEEEF2;--t6:#94949E;--t5:#6B6B74;
  --a:#3388FF;--q:#00E0F5;--n:#9D5CFF;--sc:#00CC7A;--w:#FF9E1F;--d:#FF4242;
  --gb:rgba(26,26,32,.85);--gbr:rgba(255,255,255,.06);--div:rgba(255,255,255,.05);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 8px 32px rgba(0,0,0,.4);
  --shadow-lg:0 20px 60px rgba(0,0,0,.5);
}

/* ═══ Theme: Midnight ═══ */
.midnight,[data-theme=midnight]{
  --s0:#0B0E1A;--s50:#111830;--s100:#1A2245;--t9:#E8ECF8;--t6:#8A93B8;--t5:#5E6890;
  --a:#4D9FFF;--q:#00E4FF;--n:#AF6EFF;--sc:#00E070;--w:#FFAE2E;--d:#FF5050;
  --gb:rgba(17,24,48,.85);--gbr:rgba(100,130,255,.08);--div:rgba(100,130,255,.06);
  --shadow-sm:0 1px 3px rgba(0,0,30,.4);
  --shadow-md:0 8px 32px rgba(0,0,40,.5);
  --shadow-lg:0 20px 60px rgba(0,0,50,.6);
}

/* ═══ Theme: Forest ═══ */
.forest,[data-theme=forest]{
  --s0:#F5F8F5;--s50:#EBF0EA;--s100:#D8E2D6;--t9:#1A2418;--t6:#5C6B58;--t5:#849582;
  --a:#1A7A3A;--q:#00BFA0;--n:#6B3FA0;--sc:#00A050;--w:#CC7A00;--d:#CC2828;
  --gb:rgba(245,248,245,.8);--gbr:rgba(0,40,0,.05);--div:rgba(0,40,0,.04);
  --shadow-sm:0 1px 3px rgba(0,20,0,.04);
  --shadow-md:0 8px 32px rgba(0,20,0,.06);
  --shadow-lg:0 20px 60px rgba(0,20,0,.1);
}

/* ═══ Theme: Cyber ═══ */
.cyber,[data-theme=cyber]{
  --s0:#0D0D0D;--s50:#1A1A1A;--s100:#262626;--t9:#E6E6E6;--t6:#A0A0A0;--t5:#737373;
  --a:#00FF88;--q:#00D4FF;--n:#CC44FF;--sc:#00FF66;--w:#FF8800;--d:#FF2244;
  --gb:rgba(26,26,26,.88);--gbr:rgba(0,255,136,.06);--div:rgba(0,255,136,.05);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 8px 32px rgba(0,0,0,.6);
  --shadow-lg:0 20px 60px rgba(0,0,0,.7);
}

/* ═══ Theme: Paper ═══ */
.paper,[data-theme=paper]{
  --s0:#FDFBF7;--s50:#F5F1E8;--s100:#EBE4D5;--t9:#2C2416;--t6:#6B5E4A;--t5:#9B8C72;
  --a:#8B4513;--q:#2E8B8B;--n:#6A0DAD;--sc:#2E7D32;--w:#D2691E;--d:#B22222;
  --gb:rgba(253,251,247,.82);--gbr:rgba(44,36,22,.05);--div:rgba(44,36,22,.04);
  --shadow-sm:0 1px 3px rgba(44,36,22,.03);
  --shadow-md:0 8px 32px rgba(44,36,22,.05);
  --shadow-lg:0 20px 60px rgba(44,36,22,.08);
}

/* ═══ iOS 27 关键帧 ═══ */
@keyframes cardFadeUp{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes modalFadeUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
@keyframes maskFadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes progressSpring{0%{width:0%}100%{width:var(--p)}} 

/* ═══ Resets ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','PingFang SC','Microsoft YaHei',sans-serif;font-size:14px;line-height:1.6;color:var(--t9);background:var(--s0);transition:background var(--e),color var(--e);min-height:100dvh;padding-left:220px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
a{color:var(--a);text-decoration:none}

/* ═══ Layout ═══ */
.app{display:flex;min-height:100dvh}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:220px;padding:24px 12px 16px;background:var(--gb);backdrop-filter:blur(80px) saturate(2);-webkit-backdrop-filter:blur(80px) saturate(2);border-right:1px solid var(--div);z-index:300;display:flex;flex-direction:column}
.sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--t5),transparent);opacity:.12}
.main{width:100%;padding:24px 32px 48px;overflow-x:hidden}
.content{max-width:1200px;margin:0 auto;padding:0 16px 64px}
@media(max-width:900px){body{padding-left:0!important}.sidebar{left:-240px;transition:left .3s var(--ease-spring)}.sidebar.open{left:0}.main{width:100%;padding:16px 16px 40px}.phead h1{font-size:24px!important}}
@media(max-width:600px){.modal{width:94vw!important;max-height:88vh!important;border-radius:16px!important;padding:20px!important}.phead h1{font-size:20px!important}}

/* ═══ Cards — Spring FadeUp ═══ */
.card{position:relative;background:var(--gb);backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);border:1px solid var(--gbr);border-radius:var(--rxl);padding:16px;transition:all .25s var(--ease);will-change:transform;overflow:hidden;animation:cardFadeUp .35s var(--ease) both}
.card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 50%,rgba(255,255,255,.01) 100%);pointer-events:none}
.card:hover{transform:translateY(-1px)}
.card-sm{padding:var(--s4);border-radius:var(--rlg)}
.card,.btn,.tab,.si,.inp{transition:all .3s var(--ease-spring)}

/* ═══ Modal — Spring Bounce ═══ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;animation:maskFadeIn .15s ease}
.modal{width:100%;max-width:560px;max-height:85vh;overflow-y:auto;background:var(--s0);border:1px solid var(--gbr);border-radius:var(--rxl);padding:28px;box-shadow:var(--shadow-lg);animation:modalFadeUp .35s var(--ease)}
.modal::-webkit-scrollbar{width:4px}.modal::-webkit-scrollbar-thumb{background:var(--s100);border-radius:2px}

/* ═══ Button — Premium Gray System ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;font:inherit;font-size:13px;font-weight:500;border:1px solid var(--gbr);border-radius:var(--rmd);cursor:pointer;transition:all .15s var(--ease);letter-spacing:0;background:var(--gb);color:var(--t9);line-height:1.4}
.btn:hover{background:var(--s100);border-color:var(--div);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.4;pointer-events:none}
/* Primary — 深灰主色调 */
.btn-p{background:var(--t9);color:var(--s0);border-color:var(--t9)}
.btn-p:hover{background:var(--t6);border-color:var(--t6)}
/* Success — 中灰 */
.btn-s{background:var(--s100);color:var(--t9)}
.btn-s:hover{background:var(--t4);color:var(--t9)}
/* Danger — 保持微红但克制 */
.btn-d{background:rgba(224,32,32,.06);color:var(--d);border-color:rgba(224,32,32,.1)}
.btn-d:hover{background:rgba(224,32,32,.12)}
/* Ghost — 透明灰 */
.btn-g{background:transparent;color:var(--t6);border-color:transparent}
.btn-g:hover{background:var(--s50);color:var(--t9)}
/* Warning outline */
.btn-w{background:rgba(240,131,0,.06);color:var(--w);border-color:rgba(240,131,0,.1)}
.btn-w:hover{background:rgba(240,131,0,.12)}
/* Accent outline */
.btn-a{background:rgba(123,47,255,.06);color:var(--n);border-color:rgba(123,47,255,.1)}
.btn-a:hover{background:rgba(123,47,255,.12)}
/* Red outline — subtle */
.btn-r{background:rgba(224,32,32,.06);color:var(--d);border-color:rgba(224,32,32,.08)}
.btn-r:hover{background:rgba(224,32,32,.12)}
/* Small and Large */
.btn-sm{padding:5px 10px;font-size:12px;border-radius:var(--rmd)}
.btn-lg{padding:10px 20px;font-size:14px}
/* Dark mode buttons */
.dark .btn,.midnight .btn,.cyber .btn{background:rgba(255,255,255,.06);color:var(--t9);border-color:rgba(255,255,255,.08)}
.dark .btn:hover,.midnight .btn:hover,.cyber .btn:hover{background:rgba(255,255,255,.1)}
.dark .btn-p,.midnight .btn-p,.cyber .btn-p{background:var(--t9);color:var(--s0);border-color:var(--t9)}
.dark .btn-p:hover,.midnight .btn-p:hover,.cyber .btn-p:hover{background:var(--t5)}
.dark .btn-s,.midnight .btn-s,.cyber .btn-s{background:rgba(255,255,255,.08)}
.dark .btn-s:hover,.midnight .btn-s:hover,.cyber .btn-s:hover{background:rgba(255,255,255,.12)}
.dark .btn-d,.midnight .btn-d,.cyber .btn-d{background:rgba(255,66,66,.12);border-color:rgba(255,66,66,.15)}
.dark .btn-w,.midnight .btn-w,.cyber .btn-w{background:rgba(255,158,31,.1)}
.dark .btn-a,.midnight .btn-a,.cyber .btn-a{background:rgba(157,92,255,.1)}
.dark .btn-r,.midnight .btn-r,.cyber .btn-r{background:rgba(255,66,66,.1);border-color:rgba(255,66,66,.12)}
.dark .btn-g:hover,.midnight .btn-g:hover,.cyber .btn-g:hover{background:rgba(255,255,255,.1)}

/* ═══ Input — Focus Glow ═══ */
.inp{width:100%;padding:8px 12px;font:inherit;font-size:13px;color:var(--t9);background:var(--s50);border:1px solid var(--gbr);border-radius:var(--rmd);outline:none;transition:all .2s var(--ease)}
.inp:focus{background:var(--s0);border-color:var(--t6);box-shadow:0 0 0 2px var(--s100)}
.inp-s{padding-left:38px}
.sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%2386868B'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.dark .sel,.midnight .sel,.cyber .sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%239999AA'/%3E%3C/svg%3E")}

/* ═══ Badges — Gray System ═══ */
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;font-size:11px;font-weight:500;border-radius:var(--rmd);letter-spacing:0;background:var(--s50);color:var(--t6)}
.badge-s{background:rgba(0,181,120,.08);color:var(--sc)}.badge-w{background:rgba(240,131,0,.08);color:var(--w)}.badge-i{background:var(--s100);color:var(--t6)}.badge-d{background:rgba(224,32,32,.08);color:var(--d)}.badge-p{background:var(--t9);color:var(--s0)}.badge-n{background:var(--s50);color:var(--t6)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%}.dot-a{background:var(--sc);animation:dotPulse 2.5s ease-in-out infinite}.dot-w{background:var(--w)}

/* ═══ Typography ═══ */
.cap{font-size:11px;font-weight:600;color:var(--t6);text-transform:uppercase;letter-spacing:.03em}
.mono{font-family:var(--fn);font-size:13px;letter-spacing:-.01em}
.h1{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.15;background:linear-gradient(135deg,var(--t9),var(--t5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.h2{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.val{font-family:var(--fn);font-size:1.75rem;font-weight:700;letter-spacing:-.02em;position:relative;z-index:1}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(140px,auto);gap:16px}.bento>.card{padding:var(--s4)}
.sp2{grid-column:span 2}.sr2{grid-row:span 2}
@media(max-width:1024px){.bento{grid-template-columns:repeat(2,1fr)}.sp2{grid-column:span 2}}@media(max-width:640px){.bento{grid-template-columns:1fr}.sp2{grid-column:span 1}}
.phead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px;gap:12px;flex-wrap:wrap;position:relative}
.phead::after{content:'';position:absolute;bottom:-14px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--t5),transparent);pointer-events:none;opacity:.12}

/* ═══ Tabs — Gray Switch ═══ */
.tabs{display:flex;gap:2px;margin-bottom:20px;border-bottom:1px solid var(--div);padding-bottom:0;flex-wrap:wrap}
.tab{padding:6px 12px;border-radius:var(--rmd);cursor:pointer;font-size:13px;font-weight:500;transition:all .15s var(--ease);white-space:nowrap;background:transparent;border:0;color:var(--t5)}
.tab:hover{background:var(--s50);color:var(--t9)}
.tab.act{background:var(--s100);color:var(--t9);font-weight:500}

/* ═══ Table ═══ */
.table-w{border:1px solid var(--div);border-radius:var(--rmd);overflow:hidden}
table{width:100%;border-collapse:collapse}th{text-align:left;padding:8px 12px;font-size:11px;font-weight:600;color:var(--t5);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--div);background:var(--s50)}td{padding:8px 12px;font-size:13px;border-bottom:1px solid var(--div)}
tr:last-child td{border-bottom:0}tr:hover td{background:rgba(0,85,212,.015)}
tr:nth-child(1){animation:cardFadeUp .35s var(--ease-spring) both}
.iwrap{position:relative}.iwrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--t4);pointer-events:none}
.fade{animation:fadein .45s var(--ease-spring) both}
@keyframes fadein{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}

/* ═══ Sidebar ═══ */
.si{display:flex;align-items:center;gap:8px;padding:7px 12px;margin-bottom:1px;font-size:13px;font-weight:500;color:var(--t6);border-radius:var(--rmd);cursor:pointer;transition:all .15s var(--ease);text-decoration:none;border-left:2px solid transparent}
.si:hover{color:var(--t9);background:var(--s50)}
.si:active{transform:scale(.97)}
.si.act{color:var(--t9);background:var(--s100);font-weight:500;border-left-color:var(--t6)}
.si-badge{margin-left:auto;padding:1px 6px;font-size:10px;font-weight:600;background:var(--d);color:#fff;border-radius:8px;animation:cardFadeUp .3s var(--ease-spring)}
.oa-active{color:var(--a)!important;background:rgba(0,85,212,.06);border-radius:var(--rmd);font-weight:600}
.sec-title{font-size:10px;font-weight:600;color:var(--t5);text-transform:uppercase;letter-spacing:.06em;padding:0 14px;margin:16px 0 4px}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--rlg);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:all .3s var(--ease-spring);border:2px solid transparent}.oauth-btn:hover{transform:translateY(-2px)}.oauth-btn:active{transform:scale(.96)}
.oa-btn-wecom{background:#07c160;color:#fff}.oa-btn-feishu{background:#3370ff;color:#fff}.oa-btn-dingtalk{background:#0089ff;color:#fff}

/* ═══ Notify ═══ */
@keyframes notifySlide{0%{opacity:0;transform:translateY(-16px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes badgePop{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ═══ Misc ═══ */
#particle-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:768px){.grid2{grid-template-columns:1fr}}
.form-gap{display:flex;flex-direction:column;gap:12px}
.section-glow{height:1px;background:linear-gradient(90deg,transparent,var(--q),var(--a),var(--n),transparent);margin:24px 0;opacity:.2}
.toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:10px 16px;background:var(--gb);backdrop-filter:blur(40px);border:1px solid var(--gbr);border-radius:var(--rmd);box-shadow:var(--shadow-md);font-size:13px;animation:cardFadeUp .25s var(--ease);max-width:320px;cursor:pointer}
.toast-s{background:var(--sc);color:#fff}.toast-w{background:var(--w);color:#fff}.toast-e{background:var(--d);color:#fff}

/* ═══ Watermark ═══ */
.watermark{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.02;font-size:13px;color:var(--t6);display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:60px;transform:rotate(-20deg);overflow:hidden}.watermark span{white-space:nowrap}

/* ═══ Print ═══ */
@media print{
body{background:#fff!important;color:#000!important;padding:0!important;font-size:12px!important}
.sidebar,#particle-canvas,.mobile-nav,.mob-menu-btn,.toast-container,.ctx-menu{display:none!important}
.card{border:1px solid #ddd!important;box-shadow:none!important;break-inside:avoid;background:#fff!important}
.btn,.no-print{display:none!important}.print-only{display:block!important}
.modal{position:relative!important;max-width:100%!important;box-shadow:none!important;border:none!important;animation:none!important}
.overlay{position:relative!important;background:#fff!important;backdrop-filter:none!important;padding:0!important}
@page{size:A4;margin:15mm}}.print-only{display:none}

/* ═══ Components ═══ */
.switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:var(--s100);border-radius:var(--rf);transition:.3s}.slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s var(--ease-spring);box-shadow:0 1px 4px rgba(0,0,0,.12)}.switch input:checked+.slider{background:var(--a)}.switch input:checked+.slider::before{transform:translateX(20px)}
.table-w{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:600px){.table-w table{min-width:480px}th,td{padding:8px 10px;font-size:12px}th{font-size:11px}}
.oa-page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.oa-page-title{font-size:15px;font-weight:600;color:var(--t9)}
.stat-row{display:flex;gap:10px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.stat-row .card-sm{flex:1;min-width:100px;text-align:center;padding:12px 8px}
.empty-state{text-align:center;padding:40px 20px;color:var(--t5);font-size:13px}.empty-state .empty-icon{font-size:36px;margin-bottom:8px;opacity:.35}
.filter-bar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.flow-node{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--s50);border-radius:var(--rmd);font-size:13px;transition:.2s}
.flow-node:hover{background:var(--s100)}
.flow-node.active{border-left:3px solid var(--a);background:rgba(0,85,212,.03)}
.flow-node.completed{border-left:3px solid var(--sc);background:rgba(0,181,120,.03);opacity:.8}
.announcement-item{padding:14px;border-radius:var(--rlg);cursor:pointer;transition:.2s;border:1px solid var(--gbr);background:var(--gb)}.announcement-item:hover{transform:translateY(-1px);border-color:rgba(0,200,232,.12)}
.announcement-item.unread{border-left:3px solid var(--a)}
.worklog-item{padding:12px 14px;border-radius:var(--rmd);border:1px solid var(--gbr);background:var(--gb);transition:.2s}.worklog-item:hover{border-color:rgba(0,200,232,.08);background:var(--s50)}
.room-card{padding:12px;border-radius:var(--rmd);border:1px solid var(--gbr);background:var(--gb);transition:.2s;cursor:pointer}.room-card:hover{transform:translateY(-1px)}.room-card.available{border-left:3px solid var(--sc)}.room-card.occupied{border-left:3px solid var(--d)}
.backup-success{color:var(--sc)}.backup-failed{color:var(--d)}
.pwa-prompt{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--gb);backdrop-filter:blur(40px);border:1px solid var(--gbr);border-radius:var(--rlg);padding:14px 20px;box-shadow:var(--shadow-md);z-index:9998;display:flex;align-items:center;gap:14px;max-width:380px;animation:modalFadeUp .3s var(--ease)}
.var-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-family:var(--fn);background:rgba(0,85,212,.05);color:var(--a);border-radius:var(--rf);cursor:pointer;transition:.2s}.var-chip:hover{background:rgba(0,85,212,.1)}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--s100);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--t4)}

/* ═══ Progress bar spring ═══ */
.progress-bar{height:6px;background:var(--s100);border-radius:3px;overflow:hidden}.progress-bar>div{height:100%;background:linear-gradient(90deg,var(--a),var(--q),var(--n));border-radius:3px;transition:width .7s var(--ease-spring);will-change:width}

/* ═══ Animations ═══ */
.fade-up{animation:cardFadeUp .45s var(--ease-spring) both}
.count-anim{animation:cardFadeUp .5s var(--ease-spring) both}
.approval-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--rlg);border:1px solid var(--gbr);transition:.2s;cursor:pointer;background:var(--gb)}.approval-card:hover{transform:translateY(-1px);border-color:rgba(0,200,232,.12)}
.touch-area{min-height:44px;min-width:44px}
.sci-glow{box-shadow:0 0 20px rgba(0,200,232,.05)}.sci-border{border:1px solid rgba(0,200,232,.06)!important}
.skeleton{background:linear-gradient(90deg,var(--s50) 25%,var(--s100) 50%,var(--s50) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--rmd)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-h{height:40px;margin-bottom:12px}.skel-p{height:16px;margin-bottom:8px;width:70%}.skel-card{height:140px}.skel-row{height:20px;margin-bottom:8px}
.page-loader{position:fixed;inset:0;z-index:10000;background:var(--s0);display:flex;align-items:center;justify-content:center;transition:opacity .3s}
.page-loader.hide{opacity:0;pointer-events:none}
.page-loader-inner{width:36px;height:36px;border:3px solid var(--s100);border-top-color:var(--a);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pwa-install-banner{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--gb);backdrop-filter:blur(40px);border:1px solid var(--gbr);border-radius:var(--rxl);padding:16px 20px;box-shadow:var(--shadow-md);z-index:9998;display:flex;align-items:center;gap:14px;max-width:400px;animation:modalFadeUp .3s var(--ease)}.pwa-install-banner .pwa-close{position:absolute;top:8px;right:12px;background:0;border:0;cursor:pointer;font-size:16px;color:var(--t5)}
.drag-handle{cursor:grab;opacity:.25;transition:.2s}.drag-handle:hover{opacity:.6}.drag-item.dragging{opacity:.35;transform:scale(.97);border:2px dashed var(--a)!important}.drag-item.over{border-top:2px solid var(--a)!important;padding-top:8px}
.inp.error{border-color:var(--d)!important;box-shadow:0 0 0 3px rgba(224,32,32,.08)!important}
.inp.success{border-color:var(--sc)!important}.val-msg{font-size:11px;margin-top:4px}.val-msg.error{color:var(--d)}.val-msg.success{color:var(--sc)}
.chart-container{position:relative}.chart-container canvas{transition:opacity .3s}.chart-loading canvas{opacity:.5}
@media(prefers-color-scheme:dark){.dark img:not([src]){filter:brightness(.9)}}

/* ═══ Performance optimizations — 60fps ═══ */
.card,.modal,.sidebar,.phead,.stat-row>*,.btn,.tab{will-change:transform}
.content>*[x-show],.content>*[x-if]{contain:layout style}
.content [x-show],.content [x-if]{contain:layout style paint;content-visibility:auto;contain-intrinsic-size:auto 200px}
table{contain:layout style}
img,canvas{image-rendering:auto}
*{scroll-behavior:smooth}

/* ═══ v20260626: Mobile responsive + UI polish ═══ */
@media(max-width:768px){
  .sidebar{width:260px!important}
  .phead{flex-direction:column!important;gap:8px!important}
  .phead>div:first-child{width:100%!important}
  .modal{width:94%!important;min-width:0!important;margin:10px auto!important;padding:16px!important;max-height:90vh!important}
  .card{padding:14px!important}
  .card-sm{padding:10px!important}
  .table-w{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .table-w table{font-size:11px!important}
  .table-w th,.table-w td{padding:4px 6px!important;white-space:nowrap!important}
  .tabs{flex-wrap:wrap!important;gap:4px!important}
  .tab{font-size:12px!important;padding:4px 8px!important}
  .btn{font-size:12px!important;padding:6px 14px!important}
  .btn-sm{font-size:11px!important;padding:3px 8px!important}
  .inp{font-size:13px!important;padding:8px 10px!important}
  .form-gap>*{min-width:120px!important}
  .stats{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .mono{font-size:12px!important}.h1{font-size:16px!important}
  .stat-row>*{padding:8px!important}
  .overlay{align-items:flex-start!important;padding-top:40px!important}
  .content{padding:8px!important}
}
/* 小屏额外优化 */
@media(max-width:480px){
  [style*="display:flex"]{flex-wrap:wrap!important}
  .btn{padding:8px 16px!important;font-size:13px!important}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ═══ Staff Online ═══ */
.staff-chip{transition:all .15s var(--ease)}.staff-chip:hover{background:var(--s100)!important}
.dot-a{animation:dotPulse 2s ease-in-out infinite}