*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;}
:root{
  --bg:#F2F1EC;--surface:#FFFFFF;--surface2:#F7F6F1;--border:rgba(0,0,0,.08);
  --text:#1A1A1A;--text2:#666;--text3:#AAA;
  --gold:#D4A843;--gold-light:#FFF3D6;--gold-dark:#8a6200;
  --blue:#2563EB;--blue-light:#EFF6FF;
  --green:#16A34A;--green-light:#F0FDF4;
  --red:#DC2626;--red-light:#FEF2F2;
  --amber:#D97706;--amber-light:#FFFBEB;
  --purple:#7C3AED;--purple-light:#F5F3FF;
  --teal:#0D9488;--teal-light:#F0FDFA;
  --topbar:#1a2e3a;
  --glass:rgba(255,255,255,0.55);
  --glass-border:rgba(255,255,255,0.7);
  --glass-shadow:0 4px 16px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04);
  --r:16px;--r-sm:10px;--r-pill:50px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-lift:0 8px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.06);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.25,.46,.45,.94);
  --ease-in-out:cubic-bezier(.45,0,.55,1);
}

html{height:100%;background:#d9d9d9;}input,textarea{user-select:text;-webkit-user-select:text;}
body{min-height:100%;background:#d9d9d9;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;display:flex;justify-content:center;align-items:flex-start;}
#app-shell{width:100%;max-width:640px;min-height:100vh;background:var(--bg);position:relative;}

/* TOPBAR */
.topbar{background:var(--topbar);color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,0.1);}
.topbar-title{font-size:16px;font-weight:600;letter-spacing:-.3px;flex-shrink:0;}
.topbar-right{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex:1;min-width:0;}

/* ROLE TABS - pill switcher */
.role-tabs{display:flex;background:rgba(255,255,255,.08);border-radius:var(--r-pill);padding:3px;gap:2px;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.role-btn{background:transparent;border:none;color:rgba(255,255,255,.6);padding:6px 12px;border-radius:var(--r-pill);font-size:12px;font-weight:500;cursor:pointer;transition:background .6s var(--ease-out),color .3s,transform .56s var(--ease-spring);white-space:nowrap;will-change:transform;}
.role-btn:active{transform:scale(.93);}
.role-btn.active{background:#fff;color:#1C1C1E;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.2);}

/* ACTION BUTTONS */
.act-btn{border:none;padding:7px 14px;border-radius:var(--r-pill);font-size:12px;font-weight:600;cursor:pointer;transition:all .56s var(--ease-out);white-space:nowrap;}
.act-btn:active{transform:scale(.92);}
.act-btn.green{background:var(--green);color:#fff;}
.act-btn.gold{background:var(--gold);color:#fff;}

/* CONTENT */
.content{padding:16px;max-width:680px;margin:0 auto;overflow-x:hidden;}
.view{display:none;}
.view.active{display:block;animation:fadeSlide .44s var(--ease-out) both;}
@keyframes fadeSlide{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.stat-card{background:var(--glass,var(--surface));border-radius:var(--r);padding:10px 11px;box-shadow:var(--glass-shadow,var(--shadow));border:1px solid var(--glass-border,var(--border));backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);}
.stat-label{font-size:12px;color:var(--text2);margin-bottom:4px;font-weight:500;}
.stat-num{font-size:26px;font-weight:700;color:var(--text);}
.stat-num.amber{color:var(--amber);}.stat-num.green{color:var(--green);}.stat-num.purple{color:var(--purple);}

/* SECTION TITLE */
.sec-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:.3px;}

/* ORDER CARDS */
.order-grid{display:flex;flex-direction:column;gap:10px;}
.order-card{background:var(--glass,var(--surface));border:1px solid var(--glass-border,var(--border));border-radius:var(--r);overflow:hidden;box-shadow:var(--glass-shadow,var(--shadow));backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);transition:box-shadow .44s var(--ease-out),background .2s,border-color .2s;}
.order-card.pinned{border-left:3px solid var(--gold);background:rgba(212,168,67,0.12);backdrop-filter:blur(20px) saturate(200%);-webkit-backdrop-filter:blur(20px) saturate(200%);}
.order-card.urgent-red{background:#FEE2E2;border-color:var(--red);}
.order-card.delayed:not(.pinned){border-left:3px solid var(--red);}
.order-card.super-urgent{border-left:3px solid #ff0000;background:rgba(255,0,0,0.04);}
.order-card.drag-lift{transform:scale(1.025) rotate(.5deg);box-shadow:var(--shadow-lift);z-index:20;position:relative;}
.order-card.drop-above{border-top:2.5px solid var(--purple);transition:border .30s ease;}
.order-card.drop-below{border-bottom:2.5px solid var(--purple);transition:border .30s ease;}
.order-card.ghost{opacity:.3;}

/* CARD LAYOUT */
.card-row{display:flex;align-items:stretch;}
.drag-handle{display:flex;align-items:center;padding:0 10px;color:var(--text3);cursor:grab;font-size:18px;user-select:none;flex-shrink:0;touch-action:none;transition:color .15s;}
.drag-handle:active{cursor:grabbing;color:var(--text2);}
.card-img{width:72px;background:var(--surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-right:0.5px solid var(--border);}
.card-body{flex:1;padding:11px 13px;display:flex;flex-direction:column;gap:7px;min-width:0;overflow:hidden;}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.part-num{font-size:13px;font-weight:600;display:flex;align-items:center;gap:5px;flex-wrap:wrap;color:var(--text);}
.urg-badge{background:var(--gold-light);color:var(--gold-dark);font-size:9px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);border:0.5px solid var(--gold);}
.card-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:var(--r-pill);font-size:11px;font-weight:500;white-space:nowrap;}
.b-blue{background:var(--blue-light);color:var(--blue);}
.b-gray{background:var(--surface2);color:var(--text2);}
.b-yellow{background:var(--amber-light);color:var(--amber);}
.b-teal{background:var(--teal-light);color:var(--teal);}
.b-black{background:#1C1C1E;color:#E5E5EA;}
.b-red{background:var(--red-light);color:var(--red);}
.b-green{background:var(--green-light);color:var(--green);}
.b-purple{background:var(--purple-light);color:var(--purple);}
.card-mid{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.qty-info{font-size:12px;color:var(--text2);}
.qty-info b{color:var(--text);font-weight:600;}

/* ICON BUTTONS */
.ic-btn{background:var(--surface2);border:0.5px solid var(--border);color:var(--text2);cursor:pointer;padding:0;border-radius:var(--r-sm);font-size:15px;transition:all .30s var(--ease-spring);font-weight:500;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.ic-btn:active{transform:scale(.88);}
.ic-btn.pin-on{background:var(--gold-light);border-color:var(--gold);color:var(--gold-dark);}
.ic-btn.sup-on{background:rgba(220,38,38,0.1);border-color:#dc2626;color:#dc2626;}
.ic-btn.del-btn:active{background:var(--red-light);border-color:var(--red);color:var(--red);}
.ic-btn.edit-btn:active{background:var(--blue-light);border-color:var(--blue);color:var(--blue);}

/* PROCESS STRIP */
.proc-strip{border-top:0.5px solid var(--glass-border,var(--border));padding:10px 13px;background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.proc-steps{display:flex;align-items:flex-start;gap:2px 0;}
.proc-steps::-webkit-scrollbar{display:none;}
.sw{display:flex;flex-direction:column;align-items:center;flex:1;min-width:38px;}
.sd{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:background .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;}
.sd:active{transform:scale(.82);}
.sd.done{background:var(--green);color:#fff;border-color:var(--green);}
.sd.active{background:rgba(255,255,255,0.55);color:var(--blue);border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.sd.wait{background:var(--surface2);color:var(--text3);border-color:var(--border);}
.sl{flex:1;height:2px;margin:11px 1px 0;flex-shrink:0;}
.sl.done{background:var(--green);}.sl.wait{background:var(--border);}
.slbl{font-size:8.5px;margin-top:3px;text-align:center;white-space:nowrap;color:var(--text3);}
.slbl.done{color:var(--green);font-weight:600;}.slbl.active{color:var(--blue);font-weight:600;}

/* SHIP BUTTON */
.ship-btn{background:var(--purple);color:#fff;border:none;padding:6px 14px;border-radius:var(--r-sm);font-size:12px;font-weight:600;cursor:pointer;margin-top:7px;transition:all .30s var(--ease-spring);}
.ship-btn:active{transform:scale(.92);}

/* INLINE STRIPS */
.i-strip{padding:12px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:0.5px solid var(--border);animation:slideDown .36s var(--ease-out) both;}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.i-strip.ship-s{background:var(--purple-light);}
.i-strip.del-s{background:var(--red-light);}
.i-strip.edit-s{background:var(--surface2);}
.i-title{font-size:13px;font-weight:600;}
.i-sub{font-size:11px;color:var(--text2);margin-top:2px;}
.i-btns{display:flex;gap:6px;flex-wrap:wrap;}

/* BUTTONS */
.btn{border:none;padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer;transition:all .30s var(--ease-spring);}
.btn:active{transform:scale(.92);}
.btn.outline{background:rgba(255,255,255,0.55);border:0.5px solid var(--border);color:var(--text);}
.btn.purple{background:var(--purple);color:#fff;}
.btn.red{background:var(--red);color:#fff;}
.btn.amber{background:var(--amber);color:#fff;}
.btn.dark{background:var(--topbar);color:#fff;}
.btn.green{background:var(--green);color:#fff;}

/* EDIT FORM */
.edit-form{padding:13px 14px;border-top:0.5px solid var(--glass-border,var(--border));background:rgba(255,255,255,0.3);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:slideDown .4s var(--ease-out) both;overflow:visible;}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.ef{display:flex;flex-direction:column;gap:4px;}
.ef.full{grid-column:1/-1;}
.ef label{font-size:11px;color:var(--text2);font-weight:600;}
.ef input,.ef select{font-size:13px;padding:8px 10px;border:0.5px solid var(--border);border-radius:var(--r-sm);background:rgba(255,255,255,0.55);color:var(--text);outline:none;-webkit-appearance:none;transition:border .15s,box-shadow .15s;}
.ef input:focus,.ef select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);}

/* PWD */
.pwd-row{display:flex;gap:6px;margin-bottom:6px;}
.pwd-in{flex:1;padding:9px 12px;border:0.5px solid var(--border);border-radius:var(--r-sm);font-size:14px;letter-spacing:5px;background:rgba(255,255,255,0.55);color:var(--text);outline:none;-webkit-appearance:none;transition:border .15s,box-shadow .15s;}
.pwd-in:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.1);}
.pwd-err{font-size:11px;color:var(--red);margin-bottom:6px;display:none;font-weight:500;}

/* NO RESULTS */
.no-res{text-align:center;padding:40px 20px;color:var(--text3);font-size:14px;}



/* WORKER BOARD */
.worker-board{display:flex;flex-direction:column;gap:10px;}
.ws-sec{background:var(--glass,var(--surface));border:1px solid var(--glass-border,var(--border));border-radius:var(--r);overflow:hidden;box-shadow:var(--glass-shadow,var(--shadow));backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);animation:fadeSlide .4s var(--ease-out) both;}
.ws-hdr{padding:12px 14px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;}
.ws-hdr.c0{background:var(--surface2);color:var(--text2);}
.ws-hdr.c1{background:var(--blue-light);color:var(--blue);}
.ws-hdr.c2{background:var(--amber-light);color:var(--amber);}
.ws-hdr.c3{background:var(--green-light);color:var(--green);}
.ws-hdr.c4{background:var(--purple-light);color:var(--purple);}
.ws-hdr.c5{background:var(--red-light);color:var(--red);}
.ws-hdr.c6{background:#FFF0F3;color:#BE185D;}
.ws-hdr.c7{background:var(--teal-light);color:var(--teal);}
.ws-hdr.c8{background:var(--amber-light);color:var(--amber-dark,#92400E);}
.ws-hdr.cdone{background:var(--green-light);color:var(--green);}
.ws-items{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;}
.wf-btn{padding:7px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface2);font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .2s;}
.wf-btn.wf-active{background:var(--text);color:#fff;border-color:var(--text);}
.wi{background:var(--surface2);border:0.5px solid var(--border);border-radius:var(--r-sm);padding:8px 12px;min-width:130px;transition:transform .30s var(--ease-spring);}
.wi.sup{border-left:3px solid #dc2626;background:rgba(220,38,38,0.12);}
.wi.urg{border-left:3px solid var(--gold);background:rgba(245,158,11,0.12);}
.wi:active{transform:scale(.96);}
.wi.pin{border-left:3px solid var(--gold);}
.wi-num{font-size:15px;font-weight:700;color:var(--text);}
.wi-det{font-size:12px;color:var(--text2);margin-top:3px;}
.ws-empty{font-size:12px;color:var(--text3);padding:10px 14px;}
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* SHIPPED */
.shipped-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.sh-title{font-size:18px;font-weight:700;}
.sh-cnt{background:var(--purple);color:#fff;padding:3px 12px;border-radius:var(--r-pill);font-size:12px;font-weight:600;}
.sh-month-hdr{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;margin:12px 0 6px;}
.sh-card{background:var(--glass,var(--surface));border:1px solid var(--glass-border,var(--border));border-radius:var(--r);overflow:hidden;margin-bottom:8px;box-shadow:var(--glass-shadow,var(--shadow));backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);animation:fadeSlide .4s var(--ease-out) both;}
.sh-main{display:flex;align-items:stretch;}
.sh-img{width:64px;background:var(--purple-light);display:flex;align-items:center;justify-content:center;border-right:0.5px solid var(--border);flex-shrink:0;}
.sh-body{flex:1;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sh-id{font-size:13px;font-weight:600;color:var(--text);}
.sh-desc{font-size:11px;color:var(--text2);margin-top:2px;}
.sh-tag{display:inline-block;margin-top:4px;background:var(--purple-light);color:var(--purple);padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:600;}
.rev-strip{border-top:0.5px solid var(--border);background:var(--amber-light);padding:12px 14px;animation:slideDown .36s var(--ease-out) both;}
.empty-sh{text-align:center;padding:48px 20px;color:var(--text3);font-size:14px;}

/* CUSTOMER */
.cust-hero{background:#1C1C1E;color:#fff;border-radius:var(--r);padding:20px;margin-bottom:14px;box-shadow:var(--shadow-lift);text-align:center;}
.cust-items{display:flex;flex-direction:column;gap:8px;}
.cc{background:var(--glass,var(--surface));border:1px solid var(--glass-border,var(--border));border-radius:var(--r);padding:12px 13px;box-shadow:var(--glass-shadow,var(--shadow));backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);animation:fadeSlide .4s var(--ease-out) both;}
.cc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.cc-shipped{background:var(--purple-light);border-radius:var(--r-sm);padding:8px 12px;display:flex;align-items:center;justify-content:space-between;margin-top:6px;}

/* ADD/EDIT MODAL */
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;z-index:200;overscroll-behavior:contain;transition:opacity 0.32s ease,visibility 0s ease 0s;visibility:visible;}
.modal-wrap.hidden{display:flex !important;opacity:0;pointer-events:none;visibility:hidden;transition:opacity 0.32s ease,visibility 0s ease 0.35s;}
.modal-wrap .modal{transition:transform 0.42s cubic-bezier(.32,1.2,.64,1),opacity 0.28s ease;}
.modal-wrap.hidden .modal{transform:scale(0.88) translateY(16px);opacity:0;}
.modal-wrap:not(.hidden) .modal{transform:scale(1) translateY(0);opacity:1;}
.modal{background:rgba(255,255,255,0.75);border-radius:20px;padding:18px 16px 24px;width:calc(100% - 32px);max-width:640px;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);border:1px solid rgba(255,255,255,0.8);box-shadow:0 20px 60px rgba(0,0,0,0.2);}
.modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px;}
.modal-title{font-size:17px;font-weight:700;margin-bottom:12px;color:var(--text);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;min-width:0;align-items:start;}
.fg{display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden;}
.fg.full{grid-column:1/-1;}
.fg label{font-size:12px;color:var(--text2);font-weight:600;}
.fg input,.fg select{font-size:14px;padding:10px 12px;border:0.5px solid var(--border);border-radius:var(--r-sm);background:var(--surface2);color:var(--text);outline:none;-webkit-appearance:none;transition:border .15s,box-shadow .15s;width:100%;box-sizing:border-box;}
.fg input:focus,.fg select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.img-up{border:1.5px dashed var(--border);border-radius:var(--r-sm);padding:16px;text-align:center;cursor:pointer;font-size:13px;color:var(--text3);}
.modal-actions{display:flex;gap:8px;margin-top:14px;}
.modal-actions .btn{flex:1;padding:13px;}

/* CENTER MODAL (for Packaging) */
#pkg-modal-wrap { align-items: center; padding: 24px; }
#prod-modal-wrap { align-items: center; padding: 24px; }
#modal-wrap { align-items: center; padding: 12px 16px; }
#pkg-modal-wrap .modal { border-radius: 24px; padding-bottom: 24px; }
#pkg-modal-wrap .modal-handle { display: none; }
#modal-wrap .modal-handle { display: none; }
#cust-mgr-wrap { align-items: center; padding: 12px 16px; }
#cust-mgr-wrap .modal-handle { display: none; }
#cust-pwd-wrap { align-items: center; padding: 12px 16px; }
#cust-pwd-wrap .modal-handle { display: none; }
#equip-modal-wrap { align-items: center; padding: 12px 16px; }
#equip-modal-wrap .modal-handle { display: none; }
@keyframes popIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* TOAST */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(8px);background:rgba(28,28,30,.92);backdrop-filter:blur(20px);color:#fff;padding:11px 22px;border-radius:var(--r-pill);font-size:13px;font-weight:500;opacity:0;pointer-events:none;z-index:300;white-space:nowrap;transition:opacity .50s var(--ease-out),transform .50s var(--ease-out);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* iOS BANNER NOTIFICATIONS */
#notif-stack{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:640px;z-index:500;display:flex;flex-direction:column;align-items:center;pointer-events:none;padding-top:8px;gap:8px;}
.notif-banner{
  width:calc(100% - 24px);max-width:420px;
  position:relative;
  overflow:hidden;
  background:rgba(30,28,40,0.42);
  backdrop-filter:blur(48px) saturate(200%) brightness(0.95);
  -webkit-backdrop-filter:blur(48px) saturate(200%) brightness(0.95);
  border-radius:26px;
  padding:13px 16px;
  display:flex;align-items:center;gap:12px;
  /* 折射边框：外层彩虹光晕 + 内层白色高光 */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.55),
    0 0 0 1.5px rgba(120,180,255,0.25),
    0 0 0 2.5px rgba(255,120,200,0.12),
    0 20px 56px rgba(0,0,0,0.22),
    0 4px 16px rgba(0,0,0,0.12),
    inset 0 2px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(255,255,255,0.15),
    inset 1px 0 0 rgba(255,255,255,0.25),
    inset -1px 0 0 rgba(255,255,255,0.1);
  pointer-events:auto;
  cursor:pointer;
  transform:translateY(-130%) scale(0.86);
  opacity:0;
  transition:transform 0.62s cubic-bezier(.22,1.45,.36,1),opacity 0.3s cubic-bezier(.4,0,.2,1);
  will-change:transform,opacity;
  user-select:none;
}
/* 玻璃内折射高光 */
.notif-banner::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:26px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.03) 35%,
      rgba(255,255,255,0.0) 55%,
      rgba(180,220,255,0.04) 75%,
      rgba(255,200,230,0.05) 100%);
  pointer-events:none;
  z-index:0;
}
/* 顶部棱镜光带 */
.notif-banner::after{
  content:'';
  position:absolute;
  top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(120,200,255,0.6) 20%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,160,220,0.6) 80%,
    transparent 100%);
  pointer-events:none;
  z-index:1;
}
.notif-banner>*{position:relative;z-index:2;}
.notif-banner.show{transform:translateY(0) scale(1);opacity:1;}
.notif-banner.hide{transform:translateY(-130%) scale(0.86);opacity:0;transition:transform 0.4s cubic-bezier(.4,0,1,1),opacity 0.22s ease;}
.notif-icon{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(0,0,0,0.08);}
.notif-icon.green{background:rgba(22,163,74,0.22);}
.notif-icon.blue{background:rgba(37,99,235,0.22);}
.notif-icon.amber{background:rgba(217,119,6,0.22);}
.notif-icon.purple{background:rgba(124,58,237,0.22);}
.notif-icon.red{background:rgba(220,38,38,0.22);}
.notif-icon.teal{background:rgba(13,148,136,0.22);}
.notif-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.notif-icon.green{background:rgba(22,163,74,0.25);border:1px solid rgba(22,163,74,0.35);}
.notif-icon.blue{background:rgba(37,99,235,0.25);border:1px solid rgba(37,99,235,0.35);}
.notif-icon.amber{background:rgba(217,119,6,0.25);border:1px solid rgba(217,119,6,0.35);}
.notif-icon.purple{background:rgba(124,58,237,0.25);border:1px solid rgba(124,58,237,0.35);}
.notif-icon.red{background:rgba(220,38,38,0.25);border:1px solid rgba(220,38,38,0.35);}
.notif-icon.teal{background:rgba(13,148,136,0.25);border:1px solid rgba(13,148,136,0.35);}
.notif-body{flex:1;min-width:0;}
.notif-app{font-size:10px;font-weight:700;color:rgba(255,255,255,0.5);letter-spacing:.6px;text-transform:uppercase;margin-bottom:2px;}
.notif-title{font-size:13px;font-weight:700;color:rgba(255,255,255,0.95);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notif-sub{font-size:11px;color:rgba(255,255,255,0.6);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notif-time{font-size:10px;color:rgba(255,255,255,0.35);flex-shrink:0;align-self:flex-start;margin-top:2px;}

/* NOTIF LOG */
.nl-empty{text-align:center;padding:60px 20px;color:var(--text3);font-size:14px;}
.nl-card{background:var(--glass,var(--surface));border:1px solid var(--glass-border,var(--border));border-radius:var(--r);padding:13px 14px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px;box-shadow:var(--glass-shadow,var(--shadow));animation:fadeSlide .3s var(--ease-out) both;}
.nl-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.nl-icon.green{background:rgba(22,163,74,0.15);}.nl-icon.blue{background:rgba(37,99,235,0.12);}.nl-icon.amber{background:rgba(217,119,6,0.12);}.nl-icon.purple{background:rgba(124,58,237,0.12);}.nl-icon.red{background:rgba(220,38,38,0.12);}.nl-icon.teal{background:rgba(13,148,136,0.12);}
.nl-body{flex:1;min-width:0;}
.nl-who{font-size:11px;font-weight:700;color:var(--blue);margin-bottom:2px;}
.nl-title{font-size:13px;font-weight:600;color:var(--text);}
.nl-sub{font-size:11px;color:var(--text2);margin-top:2px;}
.nl-time{font-size:10px;color:var(--text3);flex-shrink:0;white-space:nowrap;margin-top:3px;}
.nl-date-hdr{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin:14px 0 6px;padding-left:2px;}
/* BADGE on bell */
.notif-tab-wrap{position:relative;display:inline-flex;}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;pointer-events:none;line-height:1;border:1.5px solid var(--topbar);display:none;}
.notif-badge.show{display:flex;}

/* Enhanced glass + silky interactions */
*{-webkit-tap-highlight-color:transparent;}

.order-card{
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  transition:transform .10s cubic-bezier(.34,1.56,.64,1),box-shadow .8s cubic-bezier(.25,.46,.45,.94),background .3s,opacity .3s !important;
  will-change:transform;
}
.order-card:active{transform:scale(0.985);}

.stat-card{
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  transition:transform .76s cubic-bezier(.34,1.56,.64,1);
}
.stat-card:active{transform:scale(0.96);}

.ws-sec,.sh-card,.cc{
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
}

/* Silky buttons */
.btn,.ic-btn,.act-btn,.ship-btn,.role-btn{
  transition:transform .64s cubic-bezier(.34,1.56,.64,1),background .25s,opacity .22s !important;
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
}
.btn:active,.ic-btn:active,.act-btn:active,.ship-btn:active{
  transform:scale(0.90) !important;
}
.role-btn:active{transform:scale(0.93) !important;}

/* Silky step dots */
.sd{
  transition:transform .76s cubic-bezier(.34,1.56,.64,1),background .25s,box-shadow .25s !important;
  will-change:transform;
}
.sd:active{transform:scale(0.80) !important;}

/* Drag card lift */
.order-card.drag-lift{
  box-shadow:0 24px 56px rgba(0,0,0,0.22),0 8px 20px rgba(0,0,0,0.12) !important;
  opacity:0.96;
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  transition:box-shadow .70s cubic-bezier(.25,.46,.45,.94),opacity .2s !important;
}

/* Smooth view transitions */
.view.active{animation:fadeSlide .8s cubic-bezier(.25,.46,.45,.94) both;}

/* Modal silky sheet */
.modal{animation:sheetUp .10s cubic-bezier(.34,1.56,.64,1) both !important;}

/* Inline strips */
.i-strip{animation:stripIn .70s cubic-bezier(.25,.46,.45,.94) both;}
@keyframes stripIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.edit-form{animation:stripIn .70s cubic-bezier(.25,.46,.45,.94) both;}

/* Scroll */
.proc-steps{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;}

/* Touch feedback on worker items */
.wi{transition:transform .64s cubic-bezier(.34,1.56,.64,1) !important;cursor:pointer;}
.wi:active{transform:scale(0.94) !important;}

/* Worker Detail Drawer */
.wd-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:200;pointer-events:none;transition:background .3s var(--ease-out);}
.wd-overlay.open{background:rgba(0,0,0,0.45);pointer-events:auto;}
.wd-drawer{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(0.94);background:var(--bg);border-radius:24px;z-index:201;transition:transform .35s cubic-bezier(.32,1.2,.64,1),opacity .25s var(--ease-out);max-height:88vh;width:calc(100% - 32px);max-width:640px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 48px rgba(0,0,0,0.22);opacity:0;pointer-events:none;}
.wd-drawer.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;}
.wd-handle{display:none;}
.wd-header{padding:16px 20px 12px;flex-shrink:0;background:var(--bg);border-bottom:1px solid var(--border);position:relative;}
.wd-title{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--text);}
.wd-sub{font-size:13px;color:var(--text2);margin-top:4px;display:flex;flex-direction:column;gap:4px;}.wd-sub-row{display:flex;gap:6px;align-items:center;}
.wd-body{padding:0 20px 28px;overflow-y:auto;flex:1;}
.wd-sec-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;}
.wd-step-badge{display:inline-flex;align-items:center;gap:6px;background:var(--blue-light);color:var(--blue);border-radius:var(--r-pill);padding:6px 14px;font-size:13px;font-weight:700;}
.wd-step-badge.done{background:var(--green-light);color:var(--green);}
.wd-advance-btn{width:100%;padding:16px;border:none;border-radius:var(--r);background:var(--green);color:#fff;font-size:16px;font-weight:700;cursor:pointer;margin-top:20px;transition:transform .3s var(--ease-spring),opacity .2s;}
.wd-advance-btn:active{transform:scale(.97);}
.wd-advance-btn:disabled{background:var(--border);color:var(--text3);cursor:default;}
.wd-close-btn{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(0,0,0,0.08);color:var(--text2);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
/* Step timing rows */
.wd-step-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.wd-step-row:last-child{border-bottom:none;}
.wd-step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;margin-top:2px;}
.wd-step-dot.done{background:var(--green);color:#fff;}
.wd-step-dot.active{background:var(--blue);color:#fff;}
.wd-step-dot.wait{background:var(--surface2);color:var(--text3);border:1.5px solid var(--border);}
.wd-step-info{flex:1;min-width:0;}
.wd-step-name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px;}
.wd-step-name.wait{color:var(--text3);font-weight:500;}
.wd-step-time{font-size:11px;color:var(--text2);margin-top:2px;display:flex;align-items:center;gap:4px;}
.wd-time-btns{display:flex;gap:8px;margin-top:8px;}
.wd-time-btn{padding:7px 18px;border-radius:var(--r-pill);border:none;font-size:13px;font-weight:700;cursor:pointer;transition:transform .3s var(--ease-spring);}
.wd-time-btn:active{transform:scale(.94);}
.wd-time-btn.start{background:var(--blue);color:#fff;}
.wd-time-btn.end{background:var(--red);color:#fff;}
.wd-done-btn{flex-shrink:0;padding:4px 12px;border-radius:var(--r-pill);border:1.5px solid var(--green);background:transparent;color:var(--green);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s;}
.wd-done-btn:disabled{border-color:var(--border);color:var(--text3);cursor:not-allowed;}
.wd-duration{font-size:12px;font-weight:700;color:var(--text);margin-top:6px;display:flex;align-items:center;gap:6px;}
.wd-addtime-row{display:flex;align-items:center;gap:6px;margin-top:6px;}
.wd-addtime-input{width:72px;padding:5px 8px;border-radius:8px;border:1.5px solid var(--border);font-size:13px;text-align:center;}
.wd-addtime-btn{padding:5px 12px;border-radius:var(--r-pill);border:none;font-size:12px;font-weight:700;cursor:pointer;}
.wd-addtime-btn.ok{background:var(--blue);color:#fff;}
.wd-addtime-btn.cancel{background:var(--surface2);color:var(--text2);}

/* Topbar - dark */
.topbar{
  background:var(--topbar) !important;
  border-bottom:0.5px solid rgba(255,255,255,0.1);
  flex-direction:column !important;
  align-items:flex-start !important;
  padding:14px 16px 10px !important;
  gap:10px !important;
  overflow-x:clip !important;
}
.topbar-title{color:#fff !important;font-size:22px !important;font-weight:800 !important;text-align:left !important;letter-spacing:-0.5px;line-height:1.15;display:block !important;flex:1;}
.topbar-right{display:block !important;width:100% !important;overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.topbar-right::-webkit-scrollbar{display:none;}
.topbar-sub{font-weight:500;color:rgba(255,255,255,0.5);font-size:12px;letter-spacing:0.2px;display:block;margin-top:1px;}
.role-btn{color:rgba(255,255,255,0.85) !important;border:1.5px solid rgba(255,255,255,0.25) !important;white-space:nowrap;flex-shrink:0;padding:6px 14px !important;}
.role-btn.active{background:#fff !important;color:#1C1C1E !important;border-color:#fff !important;}
.role-tabs{background:rgba(0,0,0,0.08) !important;flex-wrap:nowrap !important;width:max-content;}
.act-btn.green{background:#1D9E75 !important;color:#fff !important;border:none !important;}
.act-btn.gold{background:#D4A843 !important;color:#fff !important;border:none !important;}

@keyframes cardSettle{
  0%{transform:translateY(14px) scale(0.96);opacity:0.6;}
  60%{transform:translateY(-4px) scale(1.01);}
  80%{transform:translateY(2px) scale(0.995);}
  100%{transform:translateY(0) scale(1);opacity:1;}
}
@keyframes nudgeUp{
  0%{transform:translateY(-8px);}
  60%{transform:translateY(3px);}
  100%{transform:translateY(0);}
}
@keyframes nudgeDown{
  0%{transform:translateY(8px);}
  60%{transform:translateY(-3px);}
  100%{transform:translateY(0);}
}
.card-just-dropped{animation:cardSettle .110s cubic-bezier(.34,1.56,.64,1) both !important;}
.card-nudge-up{animation:nudgeUp .90s cubic-bezier(.34,1.56,.64,1) both !important;}
.card-nudge-down{animation:nudgeDown .90s cubic-bezier(.34,1.56,.64,1) both !important;}

@keyframes swipeRight{
  0%{transform:translateX(0);opacity:1;}
  60%{transform:translateX(110%);opacity:0.4;}
  100%{transform:translateX(110%);opacity:0;}
}
.card-shipping{
  animation:swipeRight .90s cubic-bezier(.55,0,.1,1) forwards !important;
  pointer-events:none;
}

@keyframes swipeLeft{
  0%{transform:translateX(0);opacity:1;}
  60%{transform:translateX(-110%);opacity:0.4;}
  100%{transform:translateX(-110%);opacity:0;}
}
.card-deleting{
  animation:swipeLeft .84s cubic-bezier(.55,0,.1,1) forwards !important;
  pointer-events:none;
}

.search-bar{margin-bottom:14px;}
.search-wrap{position:relative;width:100%;}
.search-wrap input{
  display:block;
  width:100%;
  padding:11px 14px 11px 40px;
  border:0.5px solid var(--border);
  border-radius:50px;
  font-size:14px;
  background:rgba(255,255,255,0.55);
  color:var(--text);
  outline:none;
  -webkit-appearance:none;
  transition:border .4s,box-shadow .4s;
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
}
.search-wrap input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.search-wrap input::placeholder{color:var(--text3);}
.search-icon{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.search-icon svg{width:16px;height:16px;display:block;}
.pur-card{background:var(--glass,var(--surface));border:1px solid var(--glass-border,var(--border));border-radius:var(--r);padding:14px;margin-bottom:10px;box-shadow:var(--glass-shadow,var(--shadow));}
.pur-s{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.pur-s-pending{background:rgba(245,158,11,0.12);color:var(--amber);}
.pur-s-approved{background:rgba(37,99,235,0.1);color:var(--blue);}
.pur-s-done{background:rgba(34,197,94,0.1);color:var(--green);}
#purchase-modal-wrap { align-items: center; padding: 20px; }
#purchase-modal-wrap .modal { border-radius: 20px; padding: 0; width: calc(100% - 40px); max-width: 440px; box-sizing: border-box; overflow: hidden; max-height: 88vh; display: flex; flex-direction: column; }
#purchase-modal-wrap .modal-handle { display: none !important; }
#purchase-modal-wrap .modal-scroll { flex: 1; overflow-y: auto; padding: 0 16px 16px; -webkit-overflow-scrolling: touch; }
#purchase-modal-wrap .modal-title { padding: 16px 16px 12px; flex-shrink: 0; }
#purchase-modal-wrap .modal-actions { padding: 12px 16px; flex-shrink: 0; border-top: 1px solid var(--border); background: var(--surface); }
#purchase-modal-wrap .edit-grid { display: flex; flex-wrap: wrap; gap: 8px; }
#purchase-modal-wrap .ef { box-sizing: border-box; margin-bottom: 0; }
#purchase-modal-wrap .ef.full { width: 100%; }
#purchase-modal-wrap input, #purchase-modal-wrap #pur-img-preview { width: 100%; box-sizing: border-box; }
#purchase-modal-wrap input { padding: 8px 12px; font-size: 13px; }
.pur-item-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;animation:fadeSlide .25s var(--ease-out) both;}
.pur-item-row input{border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:13px;background:var(--surface);color:var(--text);outline:none;box-sizing:border-box;}
.pur-item-row input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.08);}
.pur-item-name{flex:2;}
.pur-item-qty{flex:0 0 72px;}
.pur-item-rm{width:30px;height:30px;border:none;background:none;color:var(--text3);font-size:18px;cursor:pointer;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s;}
.pur-item-rm:hover{color:var(--red);background:rgba(220,38,38,.08);}
.pur-item-label{display:flex;gap:8px;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:4px;padding:0 2px;}
.pur-item-label span:first-child{flex:2;}
.pur-item-label span:last-child{flex:0 0 72px;}
/* ANNOUNCEMENT PAGE */
.ann-feed{display:flex;flex-direction:column;gap:0;padding-bottom:120px;}
.ann-date-hdr{text-align:center;margin:18px 0 10px;}
.ann-date-pill{display:inline-block;background:rgba(0,0,0,0.07);color:var(--text2);font-size:11px;font-weight:600;padding:4px 14px;border-radius:20px;letter-spacing:.3px;}
.ann-msg{display:flex;flex-direction:column;margin-bottom:4px;animation:fadeSlide .3s var(--ease-out) both;}
.ann-msg.mine{align-items:flex-end;}
.ann-msg.theirs{align-items:flex-start;}
.ann-meta{font-size:11px;color:var(--text3);margin-bottom:4px;padding:0 4px;display:flex;align-items:center;gap:5px;}
.ann-avatar{width:28px;height:28px;border-radius:50%;background:var(--topbar);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ann-bubble{max-width:82%;padding:10px 13px;border-radius:18px;font-size:14px;line-height:1.5;word-break:break-word;position:relative;}
.ann-msg.mine .ann-bubble{background:var(--topbar);color:#fff;border-bottom-right-radius:5px;}
.ann-msg.theirs .ann-bubble{background:var(--surface);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:5px;box-shadow:var(--shadow);}
.ann-bubble-img{max-width:220px;border-radius:12px;display:block;cursor:pointer;margin-top:4px;}
.ann-bubble-file{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.12);border-radius:10px;padding:8px 10px;margin-top:4px;cursor:pointer;text-decoration:none;}
.ann-msg.theirs .ann-bubble-file{background:var(--surface2);}
.ann-file-icon{font-size:22px;flex-shrink:0;}
.ann-file-info{flex:1;min-width:0;}
.ann-file-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ann-file-size{font-size:10px;opacity:0.6;margin-top:1px;}
.ann-time{font-size:10px;opacity:0.5;margin-top:5px;padding:0 4px;}
.ann-msg.mine .ann-time{text-align:right;}

/* Input bar */
.ann-input-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:640px;background:rgba(242,241,236,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;}
.ann-input-row{display:flex;align-items:flex-end;gap:8px;max-width:680px;margin:0 auto;}
.ann-attach-preview{max-width:680px;margin:0 auto 8px;display:flex;gap:6px;flex-wrap:wrap;}
.ann-attach-thumb{position:relative;width:60px;height:60px;border-radius:10px;overflow:hidden;flex-shrink:0;border:1px solid var(--border);}
.ann-attach-thumb img{width:100%;height:100%;object-fit:cover;}
.ann-attach-thumb .rm{position:absolute;top:2px;right:2px;width:18px;height:18px;background:rgba(0,0,0,0.55);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;cursor:pointer;border:none;}
.ann-attach-file-prev{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px 10px;font-size:12px;color:var(--text);max-width:180px;}
.ann-attach-file-prev .rm{background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;padding:0;margin-left:auto;}
.ann-textarea{flex:1;border:1px solid var(--border);border-radius:22px;padding:10px 14px;font-size:14px;resize:none;background:var(--surface);color:var(--text);outline:none;max-height:120px;line-height:1.4;font-family:inherit;-webkit-appearance:none;}
.ann-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.ann-send-btn{width:40px;height:40px;border-radius:50%;background:var(--topbar);border:none;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s var(--ease-spring),background .2s;}
.ann-send-btn:active{transform:scale(.88);}
.ann-send-btn:disabled{background:var(--border);cursor:not-allowed;}
.ann-add-btn{width:36px;height:36px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--text2);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s var(--ease-spring);}
.ann-add-btn:active{transform:scale(.88);}
.ann-del-menu{position:fixed;background:rgba(28,28,30,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px;padding:6px;z-index:400;box-shadow:0 8px 32px rgba(0,0,0,0.3);animation:popIn .2s var(--ease-spring) both;min-width:140px;}
.ann-del-item{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:500;color:#ff3b30;cursor:pointer;border:none;background:none;width:100%;text-align:left;}
.ann-del-item:active{background:rgba(255,59,48,0.15);}
.ann-bubble.long-press-active{opacity:0.7;transform:scale(0.97);transition:transform .15s,opacity .15s;}
/* 有 token 时刷新页面跳过登录界面 */
html.skip-login #login-screen{display:none!important;}
/* LOGIN SCREEN */
#login-screen{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;transition:opacity .32s ease;background:linear-gradient(-45deg,#0f0c29,#302b63,#24243e,#0a0826,#141e30,#243b55);background-size:300% 300%;animation:loginBg 10s ease infinite;overflow:hidden;}
@keyframes loginBg{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* Stars layer 1 — small 1px dots (80颗), full 1920px coverage */
#login-screen::before{content:'';position:absolute;top:0;left:0;width:1px;height:1px;border-radius:50%;background:#fff;pointer-events:none;z-index:0;animation:starTwinkle1 3s ease-in-out infinite alternate;box-shadow:23px 18px #fff,87px 95px #fff,163px 42px #fff,245px 128px #fff,318px 67px #fff,412px 110px #fff,489px 28px #fff,567px 88px #fff,634px 145px #fff,712px 55px #fff,45px 178px #fff,128px 225px #fff,204px 268px #fff,289px 195px #fff,367px 242px #fff,443px 288px #fff,521px 165px #fff,598px 210px #fff,676px 275px #fff,754px 188px #fff,67px 318px #fff,142px 392px #fff,218px 345px #fff,296px 428px #fff,374px 368px #fff,452px 315px #fff,528px 440px #fff,607px 382px #fff,685px 325px #fff,762px 410px #fff,34px 468px #fff,115px 532px #fff,192px 485px #fff,271px 558px #fff,349px 512px #fff,427px 578px #fff,505px 495px #fff,583px 545px #fff,661px 488px #fff,738px 565px #fff,56px 615px #fff,134px 678px #fff,211px 632px #fff,288px 712px #fff,366px 658px #fff,444px 725px #fff,522px 642px #fff,601px 695px #fff,679px 628px #fff,757px 742px #fff,78px 768px #fff,156px 842px #fff,233px 795px #fff,311px 868px #fff,389px 812px #fff,468px 875px #fff,546px 788px #fff,624px 855px #fff,836px 815px #fff,936px 862px #fff,1048px 38px #fff,1134px 142px #fff,1218px 72px #fff,1305px 195px #fff,1392px 55px #fff,1478px 168px #fff,1565px 92px #fff,1652px 228px #fff,1738px 48px #fff,1825px 155px #fff,1048px 418px #fff,1134px 528px #fff,1218px 365px #fff,1305px 488px #fff,1392px 605px #fff,1478px 342px #fff,1565px 452px #fff,1652px 572px #fff,1738px 395px #fff,1825px 512px #fff,1048px 728px #fff,1134px 845px #fff,1218px 768px #fff,1305px 858px #fff,1392px 715px #fff,1478px 825px #fff,1565px 688px #fff,1652px 792px #fff,1738px 648px #fff,1825px 872px #fff;}
/* Stars layer 2 — medium 2px dots (40颗), full 1920px coverage */
#login-screen::after{content:'';position:absolute;top:0;left:0;width:2px;height:2px;border-radius:50%;background:#fff;pointer-events:none;z-index:0;animation:starTwinkle2 5s ease-in-out infinite alternate-reverse;box-shadow:55px 148px #fff,178px 62px #fff,302px 185px #fff,426px 78px #fff,548px 162px #fff,672px 48px #fff,795px 138px #fff,918px 72px #fff,92px 278px #fff,215px 342px #fff,338px 258px #fff,462px 322px #fff,586px 278px #fff,708px 355px #fff,832px 298px #fff,954px 335px #fff,128px 448px #fff,252px 518px #fff,374px 462px #fff,498px 528px #fff,622px 472px #fff,744px 538px #fff,866px 495px #fff,38px 648px #fff,162px 712px #fff,285px 668px #fff,408px 735px #fff,532px 682px #fff,655px 748px #fff,778px 708px #fff,1072px 115px #fff,1248px 258px #fff,1425px 88px #fff,1602px 195px #fff,1778px 142px #fff,1072px 498px #fff,1248px 628px #fff,1425px 758px #fff,1602px 538px #fff,1778px 668px #fff;}
/* Stars layer 3 — large 3px dots (25颗), full 1920px coverage */
#login-stars3{position:absolute;top:0;left:0;width:3px;height:3px;border-radius:50%;background:#fff;pointer-events:none;z-index:0;animation:starTwinkle3 7s ease-in-out infinite alternate;box-shadow:95px 95px #fff,285px 45px #fff,475px 128px #fff,665px 62px #fff,855px 105px #fff,142px 328px #fff,332px 272px #fff,522px 358px #fff,712px 295px #fff,902px 342px #fff,188px 548px #fff,378px 495px #fff,568px 572px #fff,758px 518px #fff,948px 558px #fff,235px 768px #fff,425px 825px #fff,615px 772px #fff,805px 842px #fff,65px 815px #fff,1125px 185px #fff,1385px 428px #fff,1645px 112px #fff,1785px 548px #fff,1905px 295px #fff;}
@keyframes starTwinkle1{0%{opacity:0.2;}100%{opacity:1;}}
@keyframes starTwinkle2{0%{opacity:0.1;}100%{opacity:0.85;}}
@keyframes starTwinkle3{0%{opacity:0.05;}100%{opacity:0.9;}}
#login-screen .login-card{position:relative;z-index:1;background:rgba(255,255,255,0.1);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:var(--r);padding:24px 20px 28px;box-shadow:0 8px 40px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.2);width:100%;max-width:360px;}
#login-screen .login-card label{color:rgba(255,255,255,0.7);}
#login-screen .login-card input{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;}
#login-screen .login-card input::placeholder{color:rgba(255,255,255,0.3);}
#login-screen .login-card input:focus{border-color:rgba(150,180,255,0.6);outline:none;box-shadow:0 0 0 3px rgba(100,150,255,0.15);}
#login-screen [style*="font-size:26px"]{color:#fff !important;}
#login-screen [style*="font-size:13px"]{color:rgba(255,255,255,0.45) !important;}
#login-screen [style*="font-size:18px"]{color:#fff !important;}
/* LOADING OVERLAY */
#pb-loading{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .4s ease;}
#pb-loading .pl-logo{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.3px;}
#pb-loading .pl-sub{font-size:12px;color:var(--text3);margin-top:-8px;}
#pb-loading .pl-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:plSpin .7s linear infinite;}
@keyframes plSpin{to{transform:rotate(360deg);}}
#pb-loading .pl-text{font-size:13px;color:var(--text2);font-weight:500;}