/* ═══════════════════════════════════════════════════════════════════
   KITCHEN HQ — GLOBAL STYLESHEET
   Extracted from kitchen.html (lines 10–209)
   Loaded by index.html via <link rel="stylesheet" href="style.css">
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0d1117;--s1:#161b24;--s2:#1c2232;--s3:#222840;--s4:#2a3250;
  --accent:#ff6b35;--yellow:#ffbe0b;--green:#06ffa5;--blue:#4cc9f0;--purple:#b19cd9;
  --red:#ff4757;--text:#eef0f8;--t2:#8892b3;--t3:#4a5270;
  --border:#252d45;--radius:10px;--rsm:7px;
  --ff:'DM Sans',sans-serif;--fd:'Bebas Neue',sans-serif;--fm:'DM Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--ff);min-height:100vh;overflow-x:hidden;margin-left:200px;}
nav{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:18px 0 14px;width:200px;height:100vh;background:var(--s1);border-right:1px solid var(--border);border-bottom:none;position:fixed;top:0;left:0;z-index:200;overflow-y:auto;}
.logo{font-family:var(--fd);font-size:20px;letter-spacing:2px;background:linear-gradient(90deg,var(--accent),var(--yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;}
.sub-logo{font-size:10px;color:var(--t2);font-family:var(--fm);white-space:nowrap;border-right:none;padding-right:0;margin-top:2px;}
.nav-tabs{display:flex;flex-direction:column;gap:2px;flex:1;overflow-x:visible;overflow-y:auto;padding:0 10px;margin-top:8px;}
.nt{padding:9px 12px;border-radius:var(--rsm);border:none;background:transparent;color:var(--t2);font-family:var(--ff);font-size:12px;font-weight:500;cursor:pointer;transition:all .18s;white-space:nowrap;text-align:left;width:100%;}
.nt:hover{color:var(--text);background:var(--s3);}
.nt.active{color:#fff;background:var(--accent);}
.date-badge{font-family:var(--fm);font-size:10px;color:var(--t2);background:var(--s3);border:1px solid var(--border);padding:3px 9px;border-radius:20px;white-space:nowrap;margin:0 0 10px;display:inline-block;}
.page{display:none;padding:24px;max-width:1440px;margin:0 auto;animation:fi .25s ease;}
.page.active{display:block;}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.drop-zone{border:2px dashed var(--border);border-radius:12px;padding:50px 40px;text-align:center;cursor:pointer;transition:all .25s;background:var(--s1);position:relative;}
.drop-zone:hover,.drop-zone.drag{border-color:var(--accent);background:var(--s2);}
.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.dz-icon{font-size:40px;display:block;margin-bottom:12px;}
.dz-title{font-family:var(--fd);font-size:28px;letter-spacing:1px;margin-bottom:6px;}
.dz-sub{color:var(--t2);font-size:13px;}
.dz-hint{margin-top:14px;font-family:var(--fm);font-size:11px;color:var(--t3);border:1px solid var(--border);border-radius:20px;display:inline-block;padding:4px 14px;}
.info-box{background:var(--s1);border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:0 var(--rsm) var(--rsm) 0;padding:10px 14px;font-size:12px;color:var(--t2);margin:14px 0;}
.info-box strong{color:var(--text);}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.st{font-family:var(--fd);font-size:22px;letter-spacing:1px;display:flex;align-items:center;gap:9px;}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.stats{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.stat{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;flex:1;min-width:100px;}
.sv{font-family:var(--fd);font-size:28px;line-height:1;}
.sl{font-size:10px;color:var(--t2);text-transform:uppercase;letter-spacing:1px;font-family:var(--fm);margin-top:2px;}
.card{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
table{width:100%;border-collapse:collapse;}
th{background:var(--s2);color:var(--t2);font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;padding:8px 12px;text-align:left;font-family:var(--fm);}
td{padding:9px 12px;font-size:12px;border-top:1px solid var(--border);vertical-align:middle;}
tr:hover td{background:var(--s2);}
.chip{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;font-family:var(--fm);}
.c-bagels{background:#4cc9f018;color:#4cc9f0;border:1px solid #4cc9f035;}
.c-hotbagels{background:#ff475718;color:#ff4757;border:1px solid #ff475735;}
.c-muffins{background:#ffbe0b18;color:#ffbe0b;border:1px solid #ffbe0b35;}
.c-rolls{background:#b19cd918;color:#b19cd9;border:1px solid #b19cd935;}
.c-salads{background:#06ffa518;color:#06ffa5;border:1px solid #06ffa535;}
.c-yoghurt{background:#a8dadc18;color:#a8dadc;border:1px solid #a8dadc35;}
.c-avocado{background:#52b78818;color:#52b788;border:1px solid #52b78835;}
.c-platters{background:#f7717118;color:#f77171;border:1px solid #f7717135;}
.c-drinks{background:#74c0fc18;color:#74c0fc;border:1px solid #74c0fc35;}
.c-inhouse{background:#e9967a18;color:#e9967a;border:1px solid #e9967a35;}
.c-bakery{background:#ff6b3518;color:#ff6b35;border:1px solid #ff6b3535;}
.c-other{background:#55527018;color:#8b92b3;border:1px solid #55527035;}
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px;}
.pc{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);padding:14px;transition:all .18s;}
.pc:hover{border-color:var(--s4);transform:translateY(-2px);box-shadow:0 6px 20px #0005;}
.pc-cat{margin-bottom:7px;}
.pc-name{font-weight:600;font-size:12px;line-height:1.4;margin-bottom:3px;}
.pc-note{font-size:10px;color:var(--accent);font-style:italic;margin-bottom:4px;line-height:1.4;}
.prep-list-note{font-size:10px;color:var(--accent);font-style:italic;}
.pc-qty{font-family:var(--fd);font-size:34px;line-height:1;}
.pc-meta{font-size:10px;color:var(--t2);margin-top:3px;}
.prog{height:3px;background:var(--s3);border-radius:2px;margin-top:9px;}
.prog-fill{height:100%;border-radius:2px;}
.dc{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:start;}
.dc-num{font-family:var(--fd);font-size:32px;color:var(--accent);line-height:1;text-align:center;}
.dc-time{font-size:10px;color:var(--t2);font-family:var(--fm);text-align:center;margin-top:2px;}
.dc-name{font-weight:600;font-size:13px;}
.dc-addr{font-size:12px;color:var(--t2);margin-top:2px;line-height:1.5;}
.dc-phone{font-size:11px;color:var(--t2);margin-top:3px;font-family:var(--fm);}
.dc-note{margin-top:6px;background:var(--s2);border-left:2px solid var(--yellow);padding:6px 9px;border-radius:0 var(--rsm) var(--rsm) 0;font-size:11px;color:var(--t2);line-height:1.5;}
.dc-blue{border-left-color:var(--blue)!important;}
.dc-right{text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end;}
.dc-val{font-family:var(--fd);font-size:20px;color:var(--green);}
.dc-val-label{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;font-family:var(--fm);}
.maps-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;background:var(--s3);border:1px solid var(--border);border-radius:var(--rsm);font-size:11px;font-weight:600;color:var(--blue);text-decoration:none;transition:all .18s;white-space:nowrap;}
.maps-btn:hover{background:var(--blue);color:var(--bg);}
.ck{background:var(--s1);border:1px solid var(--border);border-left:3px solid var(--t3);border-radius:var(--radius);padding:14px;display:flex;align-items:center;gap:12px;}
.ck-icon{font-size:22px;width:38px;text-align:center;flex-shrink:0;}
.ck-info{flex:1;min-width:0;}
.ck-name{font-weight:600;font-size:13px;}
.ck-detail{font-size:11px;color:var(--t2);margin-top:2px;}
.ck-right{text-align:right;flex-shrink:0;}
.ck-batches{font-family:var(--fd);font-size:24px;color:var(--yellow);}
.ck-bl{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;font-family:var(--fm);}
.ck-per{font-size:10px;color:var(--t2);font-family:var(--fm);margin-top:1px;}
/* RECIPES */
.rf{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.frow{display:flex;gap:10px;margin-bottom:11px;flex-wrap:wrap;}
.fg{display:flex;flex-direction:column;gap:5px;flex:1;min-width:130px;}
label{font-size:10px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.8px;font-family:var(--fm);}
input,select,textarea{background:var(--s2);border:1px solid var(--border);border-radius:var(--rsm);color:var(--text);font-family:var(--ff);font-size:13px;padding:7px 10px;transition:border-color .2s;outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
select option{background:var(--s2);}
.btn{padding:7px 16px;border:none;border-radius:var(--rsm);font-family:var(--ff);font-size:12px;font-weight:600;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:6px;}
.bp{background:var(--accent);color:#fff;} .bp:hover{background:#e55a28;}
.bg{background:var(--s2);color:var(--t2);border:1px solid var(--border);} .bg:hover{color:var(--text);}
.bd{background:#ff475715;color:var(--red);border:1px solid #ff475730;} .bd:hover{background:var(--red);color:#fff;}
.bs{padding:4px 9px;font-size:11px;}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.rc{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .18s;}
.rc:hover{border-color:var(--accent);}
.rc-head{padding:13px 15px;background:var(--s2);cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
.rc-title{font-weight:600;font-size:13px;}
.rc-sub{font-size:11px;color:var(--t2);margin-top:3px;}
.rc-body{padding:13px 15px;display:none;border-top:1px solid var(--border);}
.rc-body.open{display:block;}
.ir{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border);font-size:12px;}
.ir:last-child{border:none;}
.ir-name{color:var(--t2);}
.ir-qty{font-family:var(--fm);font-size:11px;color:var(--yellow);}
.ing-row{display:flex;gap:7px;align-items:center;margin-bottom:6px;}
.ing-row input:first-child{flex:2;}
.ing-row input:nth-child(2){max-width:75px;}
.ing-row select{max-width:80px;}
/* SUPPLIERS */
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.sup-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .18s;}
.sup-card:hover{border-color:var(--accent);}
.sup-head{padding:14px 16px;background:var(--s2);display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.sup-name{font-weight:600;font-size:13px;}
.sup-meta{font-size:11px;color:var(--t2);margin-top:2px;}
.sup-body{display:none;max-height:320px;overflow-y:auto;}
.sup-body.open{display:block;}
.sup-item{display:flex;justify-content:space-between;align-items:center;padding:7px 14px;border-top:1px solid var(--border);font-size:12px;}
.sup-item:hover{background:var(--s2);}
.sup-item-name{flex:1;color:var(--t2);}
.sup-item-price{font-family:var(--fm);font-size:11px;color:var(--green);margin-left:8px;}
.sup-item-uom{font-family:var(--fm);font-size:10px;color:var(--t3);margin-left:4px;}
.sup-item-cat{font-size:10px;color:var(--t3);}
.search-bar{position:relative;margin-bottom:16px;}
.search-bar input{width:100%;padding:9px 12px 9px 36px;background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--ff);font-size:13px;}
.search-bar input:focus{border-color:var(--accent);outline:none;}
.search-bar::before{content:"🔍";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;}
.filter-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.filter-btn{padding:4px 12px;border-radius:20px;border:1px solid var(--border);background:var(--s2);color:var(--t2);font-size:11px;cursor:pointer;transition:all .18s;font-family:var(--fm);}
.filter-btn:hover{color:var(--text);}
.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
/* INNER TABS */
.itabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:9px;}
.itab{padding:4px 13px;border-radius:var(--rsm);border:none;background:transparent;color:var(--t2);font-family:var(--ff);font-size:12px;cursor:pointer;transition:all .18s;}
.itab:hover{color:var(--text);}
.itab.active{background:var(--s2);color:var(--text);font-weight:600;border:1px solid var(--border);}
.ipanel{display:none;animation:fi .2s ease;}
.ipanel.active{display:block;}
.empty{text-align:center;padding:50px 20px;color:var(--t3);}
.empty .ei{font-size:34px;margin-bottom:10px;}
.toast{position:fixed;bottom:20px;right:20px;background:var(--s3);border:1px solid var(--border);border-radius:var(--radius);padding:10px 16px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:8px;transform:translateY(80px);opacity:0;transition:all .28s;z-index:999;}
.toast.show{transform:translateY(0);opacity:1;}
.drivers-list,.cook-list{display:flex;flex-direction:column;gap:9px;}
::-webkit-scrollbar{width:4px;} ::-webkit-scrollbar-track{background:var(--bg);} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
/* ── LIGHT MODE ── */
body.light{
  --bg:#f0f2f5;--s1:#ffffff;--s2:#f5f7fa;--s3:#eaedf2;--s4:#dde1ea;
  --text:#1a1d2e;--t2:#5a6080;--t3:#9099b5;--border:#d0d5e8;
  --accent:#e85d25;--yellow:#c49500;--green:#0d7a50;--blue:#1a6fa3;--purple:#6040a0;--red:#cc2200;
}
body.light ::-webkit-scrollbar-track{background:var(--s2);}
body.light ::-webkit-scrollbar-thumb{background:var(--border);}

/* ── SITE THEMES ──────────────────────────────────────────────────
   Full theme change, not just a recolor: each block below redefines
   palette, corner radius AND typefaces. Dark/light mode (body.light,
   above) only applies to the Classic theme — the other three are each
   a single fixed look. data-theme is set on <body> by setSiteTheme() in
   main.js and persisted via DB.saveSettings({siteTheme}). */

body[data-theme="professional"]{
  --bg:#f7f8fa;--s1:#ffffff;--s2:#f1f3f6;--s3:#e7eaf0;--s4:#dde1e9;
  --accent:#2f5fdb;--yellow:#b8860b;--green:#1a7f5a;--blue:#2f5fdb;--purple:#5b4b9e;--red:#c0392b;
  --text:#1c2333;--t2:#5b6478;--t3:#98a1b3;--border:#e1e4eb;
  --radius:6px;--rsm:4px;
  --ff:'Inter',sans-serif;--fd:'Sora',sans-serif;--fm:'DM Mono',monospace;
}
body[data-theme="professional"] .logo{letter-spacing:0;text-transform:none;}
body[data-theme="professional"] .st,body[data-theme="professional"] .dz-title{letter-spacing:0;text-transform:none;}

body[data-theme="playful"]{
  --bg:#fff8f0;--s1:#ffffff;--s2:#fff1e6;--s3:#ffe4cc;--s4:#ffd6ad;
  --accent:#ff5da2;--yellow:#ffd23f;--green:#06d6a0;--blue:#4cc9f0;--purple:#a78bfa;--red:#ef476f;
  --text:#2d2438;--t2:#7c6f93;--t3:#b8aed1;--border:#f0d9c0;
  --radius:20px;--rsm:14px;
  --ff:'Quicksand',sans-serif;--fd:'Baloo 2',sans-serif;--fm:'DM Mono',monospace;
}
body[data-theme="playful"] .logo{letter-spacing:0;text-transform:none;}
body[data-theme="playful"] .st,body[data-theme="playful"] .dz-title{letter-spacing:0;text-transform:none;}
body[data-theme="playful"] .btn,body[data-theme="playful"] .nt,body[data-theme="playful"] .itab,body[data-theme="playful"] .filter-btn{border-radius:999px;}

body[data-theme="warm"]{
  --bg:#faf6f0;--s1:#ffffff;--s2:#f4ede3;--s3:#ece0d1;--s4:#e2d3bd;
  --accent:#c1622d;--yellow:#d1a331;--green:#5c7a52;--blue:#4d7c8a;--purple:#8c6a8f;--red:#b5432f;
  --text:#2b241d;--t2:#6b5f52;--t3:#a89985;--border:#e6dac8;
  --radius:12px;--rsm:8px;
  --ff:'DM Sans',sans-serif;--fd:'Fraunces',serif;--fm:'DM Mono',monospace;
}
body[data-theme="warm"] .logo{letter-spacing:0;text-transform:none;}
body[data-theme="warm"] .st,body[data-theme="warm"] .dz-title{letter-spacing:0;text-transform:none;}

body[data-theme="futuristic"]{
  --bg:#05070d;--s1:#0b0f1a;--s2:#0f1526;--s3:#141c33;--s4:#1c2640;
  --accent:#00f0ff;--yellow:#f5d90a;--green:#39ff14;--blue:#00b8ff;--purple:#b026ff;--red:#ff2079;
  --text:#e8faff;--t2:#7fa8c9;--t3:#4a6580;--border:#1c3352;
  --radius:4px;--rsm:2px;
  --ff:'Rajdhani',sans-serif;--fd:'Orbitron',sans-serif;--fm:'Share Tech Mono',monospace;
}
body[data-theme="futuristic"] .logo{letter-spacing:2px;text-transform:uppercase;}
body[data-theme="futuristic"] .st,body[data-theme="futuristic"] .dz-title{letter-spacing:1px;text-transform:uppercase;}
body[data-theme="futuristic"] .btn.bp,body[data-theme="futuristic"] .nt.active{box-shadow:0 0 10px var(--accent);}
body[data-theme="futuristic"] .card,body[data-theme="futuristic"] .sup-card{border-color:var(--s4);}

/* "Surprise Me" — retro diner, picked for you rather than left blank */
body[data-theme="surprise"]{
  --bg:#fff8ee;--s1:#ffffff;--s2:#fff0dc;--s3:#ffe4c4;--s4:#ffd39b;
  --accent:#e8433d;--yellow:#ffc93c;--green:#2ec4b6;--blue:#4cc9f0;--purple:#c86dd7;--red:#e8433d;
  --text:#2b1810;--t2:#8a6250;--t3:#c4a48f;--border:#f0d5b0;
  --radius:18px;--rsm:12px;
  --ff:'Poppins',sans-serif;--fd:'Righteous',cursive;--fm:'DM Mono',monospace;
}
body[data-theme="surprise"] .logo{letter-spacing:0;text-transform:none;}
body[data-theme="surprise"] .st,body[data-theme="surprise"] .dz-title{letter-spacing:0;text-transform:none;}
body[data-theme="surprise"] .btn,body[data-theme="surprise"] .nt,body[data-theme="surprise"] .itab,body[data-theme="surprise"] .filter-btn{border-radius:999px;}

/* Site-theme switcher UI (Settings → Appearance) */
.theme-swatch-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--rsm);border:1px solid var(--border);background:var(--s1);color:var(--t2);font-family:var(--ff);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;}
.theme-swatch-btn:hover{color:var(--text);border-color:var(--s4);}
.theme-swatch-btn.active{border-color:var(--accent);color:var(--text);box-shadow:0 0 0 1px var(--accent);}
.theme-swatch-dots{display:flex;gap:3px;}
.theme-swatch-dots i{width:10px;height:10px;border-radius:50%;display:inline-block;}
.theme-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0;padding:0 18px;margin-top:auto;}
.theme-toggle input{display:none;}
.toggle-track{width:36px;height:20px;background:var(--s3);border:1px solid var(--border);border-radius:10px;position:relative;transition:background .2s;cursor:pointer;}
.toggle-track::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--t2);transition:transform .2s;}
body.light .toggle-track{background:var(--accent);}
body.light .toggle-track::after{transform:translateX(16px);background:#fff;}
.toggle-label{font-size:12px;color:var(--t2);}
.ing-autocomplete{position:absolute;top:100%;left:0;right:0;background:var(--s1);border:1px solid var(--accent);border-top:none;border-radius:0 0 var(--rsm) var(--rsm);z-index:999;max-height:180px;overflow-y:auto;box-shadow:0 4px 12px #0004;}
.ing-ac-item{padding:7px 11px;font-size:12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);}
.ing-ac-item:hover,.ing-ac-item.kbd-active{background:var(--s3);}
.ing-ac-name{font-weight:500;color:var(--text);}
.ing-ac-sup{font-size:10px;color:var(--purple);font-family:var(--fm);}
.assign-checks{display:flex;gap:12px;flex-shrink:0;}
.assign-check{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;}
.assign-check span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-family:var(--fm);}
.assign-check.van span{color:#ff6b35;}
.assign-check.bike span{color:#06ffa5;}
.assign-check.ext span{color:#4cc9f0;}
input.van-chk{accent-color:#ff6b35!important;width:16px;height:16px;cursor:pointer;}
input.bike-chk{accent-color:#06ffa5!important;width:16px;height:16px;cursor:pointer;}
input.ext-chk{accent-color:#4cc9f0!important;width:16px;height:16px;cursor:pointer;}

/* ── PRINT STYLES ---------------------------------------- */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* Hide everything first */
  body > * { display: none !important; }
  /* Then show only the print target */
  body > #print-frame { display: block !important; }
  #print-frame { all: unset; display: block !important; }
}

/* ── PREP DRAG TO REORDER ── */
.prep-cat-block{cursor:default;}
.prep-cat-block.dragging{opacity:.4;box-shadow:0 8px 32px #0008;}
.prep-cat-block.drag-over{outline:2px dashed var(--accent);outline-offset:2px;}
.drag-handle{cursor:grab;padding:0 8px;color:var(--t3);font-size:16px;user-select:none;flex-shrink:0;}
.drag-handle:hover{color:var(--t2);}
.drag-handle:active{cursor:grabbing;}

