/* SMI SOP v11 styles
 * 1) v10 base (unchanged)  2) users + PD (moved from app JS)  3) v11 polish + responsive layout */
/* ===== 1) v10 base ===== */

:root { --bg:#f6f7f9; --card:#fff; --text:#1a1a1a; --muted:#5c6570; --line:#e2e5ea; --primary:#0b57d0; --ok:#0d7a3f; --warn:#9a6700; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans Tamil", "Latha", "Noto Sans Bengali", "Vrinda", sans-serif; background:var(--bg); color:var(--text); }
header { background:var(--card); border-bottom:1px solid var(--line); padding:14px 18px; position:sticky; top:0; z-index:2; }
.hdr { max-width:920px; margin:0 auto; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:flex-start; }
header h1 { margin:0; font-size:18px; }
header p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.hdr-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.who { font-size:12px; color:var(--muted); word-break:break-all; text-align:right; }
.who strong { color:var(--text); font-weight:600; }
main { max-width:920px; margin:0 auto; padding:16px; }
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px; }
.tabs button { border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 12px; cursor:pointer; font-size:13px; }
.tabs button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; }
.card h2 { margin:0 0 12px; font-size:16px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:700px){ .grid { grid-template-columns:1fr; } .hdr-right { align-items:flex-start; } .who { text-align:left; } }
label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
input, select, textarea { font:inherit; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fff; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
button.primary { background:var(--primary); color:#fff; border:none; border-radius:8px; padding:10px 14px; cursor:pointer; }
button.primary:disabled { opacity:.6; cursor:default; }
button.ghost { background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 14px; cursor:pointer; }
button.ghost.active { border-color:var(--primary); color:var(--primary); background:#eef3ff; }
button.danger { background:#fff; color:#b3261e; border:1px solid #f0c7c4; border-radius:8px; padding:8px 12px; cursor:pointer; }
.muted { color:var(--muted); font-size:13px; }
.pill { display:inline-block; background:#eef3ff; color:var(--primary); border-radius:999px; padding:2px 8px; font-size:12px; }
.ok { color:var(--ok); }
.warn { color:var(--warn); }
.props { display:grid; gap:6px; margin-top:10px; font-size:13px; }
.props div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--line); padding:6px 0; }
.hidden { display:none !important; }
.line-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.line-tabs button { font-size:12px; border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 10px; cursor:pointer; }
.line-tabs button.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* language pills */
.lang { display:inline-flex; flex-wrap:wrap; gap:4px; background:#eef1f5; border-radius:999px; padding:3px; }
.lang button { border:none; background:transparent; border-radius:999px; padding:5px 10px; font-size:12px; cursor:pointer; color:var(--muted); }
.lang button.active { background:#fff; color:var(--primary); box-shadow:0 1px 2px rgba(0,0,0,.12); font-weight:600; }

/* login screen — brand style: dark navy + lime */
:root { --navy:#0b1326; --navy2:#131b2e; --navy3:#26324a; --lime:#81FE02; --lime2:#78ee00; --ink:#e8eefc; --ink2:#9fb0d3; }
body.login-mode { background:var(--navy); }
#loginView { min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px 16px 40px;
  background:radial-gradient(1200px 600px at 10% -10%, #1b3a7a 0%, rgba(11,19,38,0) 60%), radial-gradient(800px 500px at 110% 110%, #16402a 0%, rgba(11,19,38,0) 55%), var(--navy);
  color:var(--ink); position:relative; }
.login-card { width:100%; max-width:400px; background:var(--navy2); border:1px solid var(--navy3); border-radius:20px; padding:26px 20px 22px;
  box-shadow:0 20px 50px rgba(0,0,0,.45); }
.login-top { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.logo { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:14px; background:var(--lime); color:var(--navy);
  font-weight:900; font-size:18px; letter-spacing:1px; flex:none; }
.login-card h1 { margin:0; font-size:19px; color:#fff; }
.login-card .sub { margin:3px 0 0; color:var(--ink2); font-size:12px; }
.login-card .lang { background:rgba(255,255,255,.06); margin-bottom:18px; }
.login-card .lang button { color:var(--ink2); }
.login-card .lang button.active { background:var(--lime); color:var(--navy); box-shadow:none; }
.login-card h2 { margin:0 0 14px; font-size:16px; color:#fff; font-weight:700; }
.login-card .flabel { display:block; font-size:12px; color:var(--ink2); margin:0 0 6px; }
.phone-row { display:flex; align-items:stretch; background:var(--navy); border:1.5px solid var(--navy3); border-radius:12px; overflow:hidden; margin-bottom:16px; }
.phone-row:focus-within { border-color:var(--lime); }
.cc-chip { display:flex; align-items:center; gap:6px; padding:0 12px; background:rgba(129,254,2,.12); color:var(--lime); font-weight:700; font-size:16px; border-right:1px solid var(--navy3); }
.phone-row input { flex:1; min-width:0; border:none; background:transparent; color:#fff; font-size:18px; padding:13px 12px; letter-spacing:.5px; outline:none; }
.phone-row input::placeholder { color:#52628a; }
.pin-row { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin-bottom:14px; }
.pin-row input { width:100%; aspect-ratio:1/1.15; text-align:center; font-size:22px; font-weight:700; color:#fff; background:var(--navy);
  border:1.5px solid var(--navy3); border-radius:12px; padding:0; outline:none; caret-color:var(--lime); -webkit-text-security:disc; }
.pin-row input:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(129,254,2,.18); }
.pin-row input.filled { border-color:var(--lime2); }
.remember-row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink2); margin:0 0 14px; flex-direction:row; }
.remember-row input { width:18px; height:18px; padding:0; margin:0; accent-color:var(--lime); }
.btn-lime { width:100%; background:var(--lime); color:var(--navy); border:none; border-radius:12px; padding:14px; font-size:17px; font-weight:800; cursor:pointer; letter-spacing:.5px; }
.btn-lime:active { background:var(--lime2); }
.btn-lime:disabled { opacity:.55; cursor:default; }
.login-card .err { margin:0 0 12px; padding:10px 12px; border-radius:10px; background:rgba(255,92,92,.12); border:1px solid rgba(255,92,92,.35); color:#ffb4b4; font-size:13px; }
.login-card .warnbox { margin:0 0 12px; padding:10px 12px; border-radius:10px; background:rgba(255,196,0,.1); border:1px solid rgba(255,196,0,.35); color:#ffd36b; font-size:13px; }
.login-card .hint { margin:14px 0 0; font-size:12px; color:var(--ink2); line-height:1.5; text-align:center; }
.login-card .checking { color:var(--ink2); font-size:14px; text-align:center; padding:22px 0; }
#bootProbe { margin:0 0 10px; font-size:12px; color:var(--lime); }
.ver { position:absolute; right:12px; bottom:10px; font-size:11px; color:#4b5b82; }
.bound-phone .bound-row { justify-content:space-between; }
.bound-phone strong { font-size:1.05rem; letter-spacing:.02em; }
button.linkish { background:none; border:none; color:#81FE02; font:inherit; font-size:.9rem; cursor:pointer; text-decoration:underline; padding:0; }

.logout-btn { background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:12px; cursor:pointer; color:#b3261e; margin-left:6px; }

/* step workflow */
.navrow { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 14px; }
.navrow button { border:1px solid var(--line); background:#fff; border-radius:999px; padding:7px 11px; cursor:pointer; font-size:12px; }
.navrow button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.navrow .cnt { display:inline-block; min-width:18px; margin-left:4px; padding:0 5px; border-radius:999px; background:#fde7c8; color:#7a4b00; font-size:11px; }
.navrow button.active .cnt { background:#fff; color:var(--primary); }
.list { display:flex; flex-direction:column; gap:6px; }
.item { display:flex; justify-content:space-between; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:9px 11px; cursor:pointer; background:#fff; font-size:13px; }
.item:hover { border-color:var(--primary); }
.item.sel { border-color:var(--primary); background:#f2f6ff; }
.item small { color:var(--muted); display:block; margin-top:2px; }
.sec-title { font-size:13px; font-weight:600; margin:14px 0 6px; }
.sec-title:first-of-type { margin-top:0; }
.st { display:inline-block; border-radius:999px; padding:2px 8px; font-size:11px; white-space:nowrap; }
.st-pending { background:#fde7c8; color:#7a4b00; }
.st-in_progress { background:#e3ecff; color:#0b57d0; }
.st-done { background:#dff3e6; color:#0d7a3f; }
.st-none { background:#eef1f5; color:#5c6570; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.inv { border:2px solid #f2c97d; background:#fffaf0; border-radius:10px; padding:12px; margin-top:12px; }
.inv h3 { margin:0 0 10px; font-size:14px; color:#7a4b00; }
.check { flex-direction:row !important; align-items:center; gap:8px !important; font-size:14px !important; color:var(--text) !important; }
.check input { width:20px; height:20px; }
.msg { border-radius:10px; padding:10px 12px; margin-bottom:14px; font-size:14px; }
.msg.ok { background:#dff3e6; color:#0d7a3f; }
.msg.bad { background:#fdecea; color:#b3261e; }
.msg.info { background:#eef3ff; color:#0b57d0; }
.missing { font-size:13px; margin-top:8px; }
.hub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.hub-card h2 { margin-bottom:6px; }
.urlbox { width:100%; font-size:11px; padding:6px 8px; margin-top:8px; color:var(--muted); }
.req::after { content:' *'; color:#b3261e; }
input:disabled, select:disabled, textarea:disabled { background:#f3f4f6; color:#444; }
/* ===== v10: whole app in the login look (dark navy + lime) ===== */
body { background:var(--navy); color:var(--ink); }
#appView { min-height:100vh; min-height:100dvh;
  background:radial-gradient(1000px 500px at 0% -10%, #17336c 0%, rgba(11,19,38,0) 60%), radial-gradient(700px 400px at 110% 100%, #123a26 0%, rgba(11,19,38,0) 55%), var(--navy);
  --bg:var(--navy); --card:var(--navy2); --text:var(--ink); --muted:var(--ink2); --line:var(--navy3); --primary:var(--lime); --ok:#5fe08f; --warn:#ffc65c; }
#appView header { background:rgba(11,19,38,.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--navy3); }
.brand { display:flex; align-items:center; gap:12px; }
.logo.sm { width:40px; height:40px; border-radius:11px; font-size:14px; }
#appView header h1 { color:#fff; }
#appView header p { color:var(--ink2); }
.who strong { color:#fff; }
#appView .lang { background:rgba(255,255,255,.06); }
#appView .lang button { color:var(--ink2); }
#appView .lang button.active { background:var(--lime); color:var(--navy); box-shadow:none; }
.logout-btn { background:transparent; border:1px solid rgba(255,92,92,.45); color:#ff9c9c; }
#appView .card { background:var(--navy2); border:1px solid var(--navy3); border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.25); }
#appView .card h2 { color:#fff; }
.card-hd { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.card-hd h2 { margin:0 !important; }
#appView label { color:var(--ink2); }
#appView input, #appView select, #appView textarea { background:var(--navy); color:#fff; border:1.5px solid var(--navy3); border-radius:12px; outline:none; }
#appView input::placeholder, #appView textarea::placeholder { color:#52628a; }
#appView input:focus, #appView select:focus, #appView textarea:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(129,254,2,.18); }
#appView input:disabled, #appView select:disabled, #appView textarea:disabled { background:#0d1b3a; color:#8a9bc0; border-color:#16274f; }
#appView input[type=checkbox] { accent-color:var(--lime); }
#appView .check { color:var(--ink) !important; }
#appView button.primary { background:var(--lime); color:var(--navy); font-weight:800; border-radius:12px; padding:11px 16px; }
#appView button.primary:active { background:var(--lime2); }
#appView button.primary:disabled { opacity:.45; }
#appView button.ghost { background:transparent; color:var(--ink); border:1.5px solid var(--navy3); border-radius:12px; }
#appView button.ghost:hover { border-color:var(--lime2); }
#appView button.ghost.active { border-color:var(--lime); color:var(--lime); background:rgba(129,254,2,.1); }
#appView button.ghost.sm { padding:6px 12px; font-size:12px; }
#appView button.danger { background:transparent; color:#ff9c9c; border:1px solid rgba(255,92,92,.4); border-radius:10px; }
#appView .pill { background:rgba(129,254,2,.14); color:var(--lime); }
#appView .ok { color:#5fe08f; } #appView .warn { color:#ffc65c; }
#appView .props div { border-bottom:1px dashed var(--navy3); }
#appView .props strong { color:#fff; }
#appView .line-tabs button, .navrow button { background:var(--navy2); color:var(--ink2); border:1px solid var(--navy3); }
#appView .line-tabs button.active, .navrow button.active { background:var(--lime); color:var(--navy); border-color:var(--lime); font-weight:700; }
.navrow button { padding:8px 13px; font-size:13px; }
.navrow .cnt { background:#ffb020; color:#2a1700; font-weight:800; }
.navrow button.active .cnt { background:var(--navy); color:var(--lime); }
#appView .item { background:var(--navy); border:1px solid var(--navy3); border-radius:12px; color:var(--ink); }
#appView .item:hover { border-color:var(--lime2); }
#appView .item.sel { border-color:var(--lime); background:rgba(129,254,2,.07); }
#appView .item small { color:var(--ink2); }
#appView .sec-title { color:#fff; }
.st-pending { background:rgba(255,176,32,.16); color:#ffc65c; border:1px solid rgba(255,176,32,.35); }
.st-in_progress { background:rgba(129,254,2,.12); color:var(--lime); border:1px solid rgba(129,254,2,.3); }
.st-done { background:rgba(60,200,120,.15); color:#5fe08f; border:1px solid rgba(60,200,120,.35); }
.st-none { background:rgba(255,255,255,.05); color:#7f90b5; border:1px solid var(--navy3); }
#appView .inv { border:1.5px solid rgba(255,176,32,.45); background:rgba(255,176,32,.06); border-radius:14px; }
#appView .inv h3 { color:#ffc65c; }
#appView .msg { border-radius:14px; }
#appView .msg.ok { background:rgba(60,200,120,.12); color:#8ff0b4; border:1px solid rgba(60,200,120,.35); }
#appView .msg.bad { background:rgba(255,92,92,.12); color:#ffb4b4; border:1px solid rgba(255,92,92,.35); }
#appView .msg.info { background:rgba(129,254,2,.08); color:var(--lime); border:1px solid rgba(129,254,2,.25); }
#appView .urlbox { color:var(--ink2); font-size:11px; }
#appView a { color:var(--lime); }
.req::after { color:#ff8f8f; }
/* to-do handoff banner */
.msg.handoff { display:flex; gap:12px; align-items:flex-start; padding:14px; background:linear-gradient(135deg, rgba(129,254,2,.16), rgba(129,254,2,.04)) !important;
  border:1.5px solid var(--lime) !important; color:var(--ink) !important; }
.handoff-ic { flex:none; width:36px; height:36px; border-radius:50%; background:var(--lime); color:var(--navy); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; }
.handoff-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.handoff-title { color:var(--lime); font-weight:800; font-size:15px; }
.handoff-body button { align-self:flex-start; margin-top:8px; }
.flow { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:6px; }
.fl { font-size:11px; padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.05); color:#7f90b5; border:1px solid var(--navy3); }
.fl.done { color:#5fe08f; border-color:rgba(60,200,120,.35); }
.fl.now { background:rgba(255,176,32,.16); color:#ffc65c; border-color:rgba(255,176,32,.5); font-weight:700; }
.fl-arrow { color:#52628a; font-size:11px; }
/* hub to-do counter */
.todo-num { display:flex; flex-direction:column; align-items:center; min-width:54px; padding:4px 8px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--navy3); }
.todo-num b { font-size:22px; color:#7f90b5; line-height:1.1; }
.todo-num span { font-size:10px; color:var(--ink2); }
.todo-num.has { background:rgba(255,176,32,.12); border-color:rgba(255,176,32,.45); }
.todo-num.has b { color:#ffc65c; }
/* Drive PO card */
.drive-card { border-color:rgba(129,254,2,.35) !important; }
.drive-ic { display:inline-flex; width:24px; height:24px; border-radius:7px; background:var(--lime); color:var(--navy); font-size:12px; align-items:center; justify-content:center; vertical-align:2px; }
.drive-card .muted.small { font-size:12px; margin:-4px 0 8px; }
.drive-item .use-btn { flex:none; font-size:12px; font-weight:800; color:var(--navy); background:var(--lime); border-radius:999px; padding:5px 11px; }
.drive-ok { margin-top:10px; padding:10px 12px; border-radius:12px; background:rgba(129,254,2,.1); border:1px solid rgba(129,254,2,.35); color:var(--lime); font-size:13px; }
.preview { margin-top:8px; font-size:12px; color:var(--ink2); }
.preview summary { cursor:pointer; }
.preview pre { white-space:pre-wrap; word-break:break-word; background:var(--navy); border:1px solid var(--navy3); border-radius:10px; padding:10px; max-height:220px; overflow:auto; color:#c9d5f0; }
#appView label.autofill input, #appView label.autofill textarea { border-color:var(--lime2); background:rgba(129,254,2,.06); }
.af-tag { font-style:normal; font-size:10px; color:var(--navy); background:var(--lime); border-radius:999px; padding:1px 6px; margin-left:4px; }

/* ===== v10 daka-style login (bg #0b1326 · card #131b2e · lime #81FE02) ===== */
.industrial-grid { background-image:radial-gradient(rgba(129,254,2,.08) 1px, transparent 0); background-size:24px 24px; }
body.login-mode { background-color:#0b1326; }
#loginView.industrial-grid { background:radial-gradient(rgba(129,254,2,.08) 1px, transparent 0) 0 0/24px 24px, #0b1326; align-items:flex-start; }
.login-wrap { width:100%; max-width:440px; display:flex; flex-direction:column; gap:14px; padding-top:4vh; }
.login-brand { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.logo.xl { width:96px; height:96px; border-radius:26px; font-size:30px; letter-spacing:2px; background:#81FE02; color:#0b1326;
  box-shadow:0 0 0 6px rgba(129,254,2,.12), 0 10px 30px rgba(129,254,2,.25); }
.login-brand h1 { margin:6px 0 0; font-size:24px; font-weight:800; color:#fff; letter-spacing:-.01em; }
.login-brand .sub { margin:0; color:#94a3b8; font-size:12px; }
.login-card { background:rgba(19,27,46,.92); border:1px solid rgba(30,41,59,.85); border-radius:18px; padding:16px; box-shadow:0 25px 50px -12px rgba(0,0,0,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lc-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid rgba(30,41,59,.7); }
.lc-title { display:flex; align-items:center; gap:6px; }
.login-card .lc-title h2 { margin:0; font-size:14px; font-weight:700; letter-spacing:.02em; }
.pin-badge { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10px; font-weight:700; padding:2px 9px; border-radius:999px; background:#1e2738; color:#81FE02; border:1px solid rgba(129,254,2,.3); }
.frow { display:flex; justify-content:space-between; align-items:center; margin:0 2px 5px; }
.frow-l { display:flex; align-items:center; gap:6px; }
.login-card .flabel { margin:0; font-size:11px; color:#94a3b8; }
.mono, .mono-hint { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.mono-hint { font-size:10px; color:#64748b; }
.mono-hint.lime { color:#81FE02; }
.mono-hint.ok-dot { color:#78ee00; }
.phone-row { align-items:center; background:#0b1326; border:1px solid rgba(51,65,85,.8); border-radius:12px; margin-bottom:14px; padding:0 8px 0 10px; transition:border-color .15s; }
.phone-row:focus-within { border-color:#81FE02; }
.cc-chip { background:none; border:none; padding:0; color:#fff; font-size:13px; font-weight:600; }
.cc-sep { width:1px; height:16px; background:#334155; margin:0 8px; flex:none; }
.phone-row input { font-size:16px; padding:12px 4px; }
.phone-row input::placeholder { color:#64748b; }
.phone-clear { flex:none; background:#1e2738; border:none; color:#94a3b8; width:22px; height:22px; border-radius:50%; font-size:11px; cursor:pointer; padding:0; }
.phone-clear:hover { color:#fff; }
.pin-eye { background:none; border:none; color:#94a3b8; cursor:pointer; padding:0 2px; font-size:13px; line-height:1; opacity:.8; }
.pin-eye.on { color:#81FE02; opacity:1; }
.pin-row { gap:7px; margin-bottom:12px; }
.pin-row input { aspect-ratio:auto; height:46px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:20px; background:#0b1326; border:1px solid #334155; border-radius:12px; caret-color:#81FE02; }
.pin-row input:focus { border-color:#81FE02; box-shadow:0 0 0 3px rgba(129,254,2,.15); }
.pin-row input.filled { border-color:rgba(129,254,2,.55); color:#81FE02; }
.pin-row.show input { -webkit-text-security:none; }
.remember-row { font-size:12px; color:#94a3b8; margin:0 0 12px; }
.btn-lime { background:#81FE02; color:#0b1326; font-weight:900; font-size:16px; border-radius:12px; padding:13px; box-shadow:0 0 20px rgba(129,254,2,.3); transition:filter .15s, transform .1s; }
.btn-lime:hover { filter:brightness(1.08); }
.btn-lime:active { background:#78ee00; transform:scale(.99); }
.login-card .hint { margin:12px 0 0; font-size:11px; color:#64748b; letter-spacing:.02em; }
.login-card .err { background:rgba(147,0,10,.3); border:1px solid rgba(255,180,171,.3); color:#ffb4ab; font-size:12px; font-weight:600; }
.bound-row { display:flex; align-items:center; gap:10px; background:#0b1326; border:1px solid rgba(129,254,2,.35); border-radius:12px; padding:10px 10px 10px 12px; margin-bottom:14px; }
.bound-av { flex:none; width:38px; height:38px; border-radius:50%; background:#1e2738; color:#81FE02; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; border:1px solid rgba(129,254,2,.3); }
.bound-who { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bound-who strong { color:#fff; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bound-who .mono { color:#94a3b8; font-size:12px; letter-spacing:.03em; }
.bound-who strong:empty { display:none; }
.bound-who strong:empty + .mono { color:#fff; font-size:15px; }
.switch-chip { flex:none; background:#1e2738; color:#81FE02; border:1px solid rgba(129,254,2,.3); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.switch-chip:hover { background:rgba(129,254,2,.12); }
.login-foot { display:flex; flex-direction:column; gap:8px; }
.lang-line { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding:0 4px; }
.lang-hd { font-size:11px; color:#94a3b8; }
.login-foot .lang { background:transparent; padding:0; gap:2px; }
.login-foot .lang button { color:#94a3b8; font-size:11px; padding:4px 8px; border-radius:8px; }
.login-foot .lang button.active { background:#81FE02; color:#0b1326; font-weight:800; box-shadow:none; }
.login-foot .ver { position:static; text-align:center; margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:10px; color:#475569; }
#bootProbe { text-align:center; }
#bootProbe:empty { display:none; }
  
/* ===== 2a) users (v10) ===== */
  .u-head-card{position:relative;overflow:hidden}
  .u-head{display:flex;align-items:center;gap:12px}
  .u-head-card::before{content:'';position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#78ee00,#81FE02,#38bdf8);opacity:.85}
  .u-head .u-ic{flex:none;width:46px;height:46px;border-radius:50%;border:3px solid #81FE02;display:flex;align-items:center;justify-content:center;font-size:20px}
  .u-head .u-ttl{flex:1;min-width:0}
  .u-head .u-ttl b{display:block;color:#fff;font-size:17px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .u-head .u-ttl span{color:#81FE02;font-size:12px;font-weight:700}
  .u-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
  .u-kpi{background:#0b1326;border:1px solid var(--navy3,#26324a);border-radius:12px;padding:8px 10px}
  .u-kpi small{display:block;color:#94a3b8;font-size:11px}
  .u-kpi b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:22px;line-height:1.2}
  .u-search{display:flex;align-items:center;gap:8px;padding:10px 14px !important}
  .u-search input{flex:1;min-width:0;border:none !important;background:transparent !important;box-shadow:none !important;padding:6px 0 !important;font-size:15px}
  .u-list{display:grid;gap:8px}
  @media (min-width:760px){ .u-list{grid-template-columns:1fr 1fr} }
  .u-row{display:flex;flex-direction:column;gap:8px;background:#0b1326;border:1px solid var(--navy3,#26324a);border-radius:14px;padding:10px 12px}
  .u-row.off{opacity:.6;border-left:3px solid rgba(239,68,68,.6)}
  .u-row.me{border-color:rgba(129,254,2,.45)}
  .u-top{display:flex;align-items:center;gap:10px}
  .u-av{flex:none;width:40px;height:40px;border-radius:50%;background:#1e2738;color:#e2e8f0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
  .u-row.me .u-av{color:#81FE02;border:1px solid rgba(129,254,2,.35)}
  .u-who{flex:1;min-width:0}
  .u-who b{display:block;color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .u-who span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#94a3b8;font-size:12px}
  .u-pills{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
  .upill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;white-space:nowrap}
  .upill.boss{color:#81FE02;background:rgba(129,254,2,.13);border:1px solid rgba(129,254,2,.4)}
  .upill.supervisor{color:#7dd3fc;background:rgba(125,211,252,.13);border:1px solid rgba(125,211,252,.4)}
  .upill.worker{color:#cbd5e1;background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.3)}
  .upill.off{color:#ef4444;background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.4)}
  .u-acts{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px;border-top:1px dashed var(--navy3,#26324a)}
  .u-acts button{background:#1e2738 !important;color:#e2e8f0 !important;border:1px solid #334155 !important;border-radius:999px !important;padding:5px 11px !important;font-size:12px !important;font-weight:600;cursor:pointer}
  .u-acts button:hover{border-color:#81FE02 !important;color:#81FE02 !important}
  .u-acts button.danger{color:#fca5a5 !important;border-color:rgba(239,68,68,.45) !important}
  .u-acts button.go{color:#81FE02 !important;border-color:rgba(129,254,2,.45) !important}
  .u-meta{font-size:11px;color:#64748b;margin-left:auto;align-self:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  #appView .u-form button.primary{width:100%;box-shadow:0 0 20px rgba(129,254,2,.3)}
  .u-nomatch{color:#94a3b8;text-align:center;padding:14px 0;font-size:13px}
/* ===== 2b) PD (v10) ===== */
  .pd-card { border-left:4px solid var(--lime); }
  .pd-ref { background:linear-gradient(180deg, rgba(129,254,2,.08), rgba(129,254,2,0) 60%), var(--navy2); }
  .pd-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:10px 12px; margin:6px 0 10px; border:1px solid var(--navy3); border-radius:12px; background:var(--navy); }
  .pd-head div { display:flex; flex-direction:column; } .pd-head span { font-size:11px; color:var(--ink2); letter-spacing:.5px; } .pd-head b { font-size:16px; color:#fff; }
  .pd-chip { display:inline-block; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:700; }
  .pd-chip.sealed { background:var(--lime); color:var(--navy); margin-left:auto; }
  .pd-chip.draft { background:#fde7c8; color:#7a4b00; margin-left:auto; }
  .pd-chip.sc { background:rgba(129,254,2,.15); color:var(--lime); border:1px solid var(--lime2); }
  .pd-setup { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
  .pd-big { background:var(--navy); border:1.5px solid var(--lime2); border-radius:12px; padding:10px 12px; }
  .pd-big span { display:block; font-size:12px; color:var(--ink2); } .pd-big b { font-size:24px; color:var(--lime); font-variant-numeric:tabular-nums; }
  .pd-sec { margin-top:12px; border:1px solid var(--navy3); border-radius:12px; overflow:hidden; }
  .pd-sec-hd { background:var(--lime); color:var(--navy); font-weight:800; padding:6px 12px; font-size:13px; letter-spacing:.3px; }
  .pd-sec .grid { padding:10px 12px; }
  .pd-sec label.wide { grid-column:1/-1; }
  .sc-banner { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 12px; margin-bottom:10px; border:1.5px solid var(--lime2); border-radius:12px; background:rgba(129,254,2,.08); color:var(--ink); font-weight:600; }
  .today-card { border-left:4px solid #ffc65c; }
  .today-item .pill { margin-right:4px; }
  
/* ===== 3) v11 polish + responsive ===== */
/* Same navy + lime look as v10, cleaner spacing, bigger touch targets, and multi-column layout on wide screens.
 * Breakpoints: < 760 phone (1 column) · 760–1199 tablet / foldable open (2 columns) · ≥ 1200 desktop (side menu + 2 columns). */
:root { --navy:#0b1326; --navy2:#131b2e; --navy3:#26324a; --lime:#81FE02; --lime2:#78ee00; --ink:#e8eefc; --ink2:#9fb0d3;
  --radius:18px; --tap:48px; --gap:16px; }
html { -webkit-text-size-adjust:100%; }
body { -webkit-tap-highlight-color:transparent; line-height:1.45; }
button, .item, a { touch-action:manipulation; }
:focus-visible { outline:3px solid rgba(129,254,2,.65); outline-offset:2px; }
.hidden { display:none !important; }

/* ---------- header ---------- */
#appView header { padding:10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
.hdr { max-width:1360px; align-items:center; }
#appView header h1 { font-size:19px; font-weight:800; letter-spacing:-.01em; }
#appView header p { font-size:12px; }
.logo { display:flex; align-items:center; justify-content:center; font-weight:900; background:var(--lime); color:var(--navy); }
.logo.sm { box-shadow:0 0 0 4px rgba(129,254,2,.12); }
.hdr-right { gap:8px; }
.who { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.logout-btn { min-height:44px; padding:6px 14px; border-radius:12px; font-weight:700; cursor:pointer; font-size:13px; }
#appView .lang { border-radius:12px; padding:3px; display:inline-flex; flex-wrap:wrap; gap:2px; }
#appView .lang button { min-height:36px; padding:6px 11px; border-radius:10px; font-size:13px; }

/* ---------- main frame ---------- */
main { max-width:1360px; padding:16px max(14px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
#appView .card { padding:18px; margin-bottom:var(--gap); border-radius:var(--radius); }
#appView .card h2 { font-size:17px; font-weight:800; letter-spacing:-.005em; line-height:1.3; }
#appView .muted { line-height:1.5; }

/* ---------- touch targets ---------- */
#appView button.primary, #appView button.ghost, #appView button.danger { min-height:var(--tap); padding:12px 18px; font-size:15px; cursor:pointer; transition:filter .15s, transform .08s, border-color .15s; }
#appView button.ghost.sm { min-height:44px; padding:8px 14px; font-size:13px; }
#appView button.primary { box-shadow:0 6px 18px rgba(129,254,2,.18); }
#appView button.primary:hover { filter:brightness(1.06); }
#appView button:active { transform:scale(.985); }
#appView input, #appView select, #appView textarea { min-height:var(--tap); font-size:16px; padding:11px 13px; width:100%; }
#appView textarea { min-height:72px; }
#appView label { font-size:13px; gap:7px; }
#appView .check { min-height:var(--tap); font-size:15px !important; padding:4px 0; cursor:pointer; }
#appView .check input { width:24px; height:24px; min-height:0; flex:none; }
#appView .row { gap:10px; margin-top:14px; }
#appView .item { min-height:60px; padding:12px 14px; font-size:14px; transition:border-color .15s, background .15s; }
#appView .item strong { font-size:15px; }
#appView .item small { font-size:12.5px; }
#appView .sec-title { font-size:14px; margin:16px 0 8px; letter-spacing:.01em; }
#appView .line-tabs button { min-height:44px; padding:8px 14px; font-size:13px; }
.st { padding:3px 10px; font-size:12px; font-weight:700; }
#appView .inv { padding:14px; }
#appView .urlbox { min-height:44px; font-size:12px; }
.u-acts button { min-height:44px; padding:8px 14px !important; font-size:13px !important; }
.drive-item .use-btn { padding:8px 14px; font-size:13px; }

/* ---------- step menu ---------- */
.navrow { gap:8px; margin:2px 0 16px; }
.navrow button { min-height:44px; padding:10px 16px; font-size:14px; border-radius:999px; font-weight:600; white-space:nowrap; cursor:pointer; }
.navrow .cnt { min-width:22px; padding:1px 7px; font-size:12px; margin-left:6px; text-align:center; }

/* ---------- login ---------- */
#loginView { min-height:100vh; min-height:100dvh; display:flex; justify-content:center; padding:16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
.login-card { padding:20px 18px; }
.phone-row { display:flex; min-height:56px; }
.phone-row input { flex:1; min-width:0; border:none; background:transparent; color:#fff; outline:none; font-size:18px; }
.pin-row { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; }
.pin-row input { height:58px; width:100%; text-align:center; color:#fff; font-size:24px; padding:0; }
.btn-lime { width:100%; min-height:56px; border:none; cursor:pointer; font-size:17px; }
.btn-lime:disabled { opacity:.5; cursor:default; }
.remember-row { display:flex; align-items:center; gap:10px; min-height:44px; font-size:13px; cursor:pointer; }
.remember-row input { width:22px; height:22px; accent-color:var(--lime); }
.pin-eye { min-width:36px; min-height:32px; font-size:16px; }
.phone-clear { width:30px; height:30px; font-size:13px; }
.switch-chip { min-height:44px; padding:8px 14px; font-size:13px; }
.login-foot .lang button { min-height:44px; padding:8px 12px; font-size:13px; }
.login-card .err { border-radius:12px; padding:10px 12px; margin:0 0 12px; }
.warnbox { background:rgba(255,176,32,.12); color:#ffc65c; border:1px solid rgba(255,176,32,.4); border-radius:12px; padding:10px 12px; margin-bottom:12px; font-size:13px; }
.checking { color:var(--ink2); text-align:center; padding:18px 0; }

/* ---------- hub ---------- */
.hub-grid { grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:var(--gap); }
#appView .hub-card { display:flex; flex-direction:column; gap:6px; margin-bottom:0; transition:border-color .15s, transform .15s; }
#appView .hub-card:hover { border-color:rgba(129,254,2,.45); }
#appView .hub-card .row { margin-top:auto; padding-top:8px; justify-content:space-between; }
#appView .hub-card .row button.primary { flex:1; }
#appView .today-card .item { border-left:3px solid rgba(255,198,92,.6); }
.today-item .use-btn { flex:none; font-size:13px; font-weight:800; color:var(--navy); background:#ffc65c; border-radius:999px; padding:8px 14px; }

/* ---------- phone (< 760): one column, menu scrolls sideways ---------- */
@media (max-width:759px) {
  #appView header { position:sticky; }
  .hdr { flex-direction:column; align-items:stretch; gap:8px; }
  .hdr-right { align-items:stretch; }
  .who { justify-content:space-between; }
  #appView .lang { justify-content:space-between; width:100%; }
  #appView .lang button { flex:1; padding:6px 4px; }
  .navrow { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -14px 14px; padding:2px 14px 4px; scroll-snap-type:x proximity; }
  .navrow::-webkit-scrollbar { display:none; }
  .navrow button { flex:none; scroll-snap-align:start; }
  #appView .card { padding:16px; }
  #appView .row button.primary { flex:1 1 auto; }
  .u-kpi b { font-size:20px; }
}

/* ---------- tablet / foldable open (≥ 760): two columns ---------- */
@media (min-width:760px) {
  .cols { display:grid; gap:0 var(--gap); align-items:start; }
  .cols-step { grid-template-columns:minmax(290px, 360px) minmax(0, 1fr); grid-template-areas:"sum main"; }
  .cols-order { grid-template-columns:minmax(290px, 380px) minmax(0, 1fr); grid-template-areas:"drive form" "sum form"; grid-template-rows:auto 1fr; }
  .a-sum { grid-area:sum; min-width:0; } .a-main { grid-area:main; min-width:0; }
  .a-drive { grid-area:drive; min-width:0; } .a-form { grid-area:form; min-width:0; }
  .a-form > .card:first-child, .a-main > .card:first-child { margin-top:0; }
  .a-sum { position:sticky; top:96px; max-height:calc(100vh - 112px); overflow:auto; border-radius:var(--radius); scrollbar-width:thin; }
  .cols-order .a-sum { position:static; max-height:none; }
  .hub-wrap .hub-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* between 760 and 1099 the right column is narrow: one field per row inside it */
@media (min-width:760px) and (max-width:1099px) {
  .a-main .grid, .a-form .grid { grid-template-columns:1fr; }
}
@media (min-width:1000px) {
  .hub-wrap { display:grid; grid-template-columns:minmax(320px, 420px) minmax(0, 1fr); gap:var(--gap); align-items:start; }
  .hub-wrap .a-today { position:sticky; top:96px; }
  .hub-wrap .a-today .card { margin-bottom:0; }
}

/* ---------- desktop (≥ 1200): menu on the left ---------- */
@media (min-width:1200px) {
  main { display:grid; grid-template-columns:220px minmax(0, 1fr); column-gap:22px; align-items:start; }
  #stepNav { grid-column:1; grid-row:1 / span 2; flex-direction:column; flex-wrap:nowrap; position:sticky; top:96px; margin:0;
    background:var(--navy2); border:1px solid var(--navy3); border-radius:var(--radius); padding:10px; }
  #stepNav button { width:100%; text-align:left; border-radius:12px; display:flex; justify-content:space-between; align-items:center; min-height:48px; border-color:transparent; }
  #msgBox, #panel { grid-column:2; min-width:0; }
  .cols-step { grid-template-columns:minmax(320px, 400px) minmax(0, 1fr); }
  .hub-wrap { grid-template-columns:minmax(340px, 440px) minmax(0, 1fr); }
  .hub-wrap .hub-grid { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (min-width:1600px) { .hdr, main { max-width:1520px; } }

/* print: just the content */
@media print { header, #stepNav, .lang { display:none !important; } #appView { background:#fff !important; } }
/* v11 invite pill */
.upill.invite{background:rgba(250,204,21,.15);color:#facc15;border:1px solid rgba(250,204,21,.35)}
#panel #drvRefresh, #panel .card-hd button { min-height:44px !important; }
/* v11.1 phone binding line in 用户管理 */
.u-dev{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(148,163,184,.08);border:1px dashed rgba(148,163,184,.25);font-size:13px;line-height:1.45;color:#cbd5e1}
.u-dev.bound{background:rgba(129,254,2,.07);border:1px solid rgba(129,254,2,.28)}
.u-dev b{color:#e8eefc} .u-dev small{color:#94a3b8;font-size:12px} .u-dev-ic{font-size:18px;line-height:1.2}
.u-acts button.warn{background:rgba(250,204,21,.12);color:#facc15;border:1px solid rgba(250,204,21,.4)}

/* ---------- v11.1.1: ⚙️ settings menu (name + phone, language, log out) ---------- */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hdr-right { flex-direction:row; align-items:center; }
.set-btn { width:46px; height:46px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--navy3); border-radius:14px; color:#fff; transition:background .15s, border-color .15s, transform .15s; }
.set-btn:hover { background:rgba(129,254,2,.10); border-color:rgba(129,254,2,.45); }
.set-btn[aria-expanded="true"] { background:rgba(129,254,2,.14); border-color:var(--lime); }
.set-ico { font-size:21px; line-height:1; transition:transform .25s; }
.set-btn[aria-expanded="true"] .set-ico { transform:rotate(60deg); }
.set-back { position:fixed; inset:0; z-index:40; background:transparent; }
.set-menu { position:fixed; z-index:50; top:70px; right:16px; width:320px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 90px); overflow:auto;
  background:var(--navy2); color:var(--ink); border:1px solid var(--navy3); border-radius:18px; padding:14px; box-shadow:0 22px 50px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:12px; animation:setIn .16s ease-out; }
@keyframes setIn { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
.set-grip { display:none; }
.set-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.set-title { font-weight:800; color:#fff; font-size:15px; }
.set-x { width:44px; height:44px; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--ink2); font-size:18px; cursor:pointer; }
.set-x:hover { background:rgba(255,255,255,.06); color:#fff; }
.set-who { display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:rgba(129,254,2,.07); border:1px solid rgba(129,254,2,.22); }
.set-av { flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; background:var(--lime); color:var(--navy); }
.set-id { display:flex; flex-direction:column; gap:2px; min-width:0; }
.set-id strong { color:#fff; font-size:16px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.set-id span:last-child { color:var(--ink2); font-size:13px; }
.set-lbl { font-size:11px; color:var(--ink2); letter-spacing:.04em; }
.set-sec { display:flex; flex-direction:column; gap:8px; }
.set-langs { display:flex; flex-direction:column; gap:4px; }
.set-langs button { min-height:46px; display:flex; align-items:center; justify-content:space-between; padding:8px 14px; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid transparent; color:var(--ink); font-size:15px; text-align:left; }
.set-langs button:hover { background:rgba(255,255,255,.08); }
.set-langs button.active { background:rgba(129,254,2,.12); border-color:var(--lime); color:#fff; font-weight:800; }
.set-langs button.active::after { content:'✓'; color:var(--lime); font-weight:900; }
.set-logout { min-height:48px; width:100%; border-radius:12px; cursor:pointer; font-size:15px; font-weight:800;
  background:rgba(255,92,92,.10); border:1px solid rgba(255,92,92,.5); color:#ff8a8a; }
.set-logout:hover { background:rgba(255,92,92,.2); color:#fff; }
#appView .hdr { flex-direction:row; flex-wrap:nowrap; align-items:center; }
#appView .brand { min-width:0; }
#appView .brand > div:last-child { min-width:0; }
#appView header h1, #appView header p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* phones: bottom sheet */
@media (max-width:599px) {
  #appView .hdr { flex-direction:row; align-items:center; }
  #appView .hdr-right { align-items:center; }
  .set-back { background:rgba(3,8,20,.6); }
  .set-menu { top:auto !important; right:0 !important; left:0; bottom:0; width:auto; max-width:none; max-height:85dvh; border-radius:22px 22px 0 0; border-bottom:none;
    padding:10px 16px max(18px, env(safe-area-inset-bottom)); animation:setUp .2s ease-out; }
  @keyframes setUp { from { transform:translateY(30px); opacity:0; } to { transform:none; opacity:1; } }
  .set-grip { display:block; width:42px; height:5px; border-radius:3px; background:var(--navy3); margin:0 auto 2px; }
  body.set-open { overflow:hidden; }
}
@media (max-width:759px) { #appView .hdr { flex-direction:row; align-items:center; gap:10px; } }
@media print { .set-btn, .set-menu, .set-back { display:none !important; } }