/* Type system: Noto Sans (latin) + Noto Sans Myanmar (Burmese) loaded
   from the self-hosted /css/fonts.css. No other fonts ship. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* Canonical palette - kept in sync with index.html. d1 alignment: warm
     cream wash, warm hairlines, Noto Sans + Noto Sans Myanmar, 6px button radius. */
  --primary:#F9B541; --primary-light:#FFF8E7; --primary-dark:#966600;
  --bg:#FBF7EC; --surface:#FFFFFF; --border:#E5E0D6;
  --error:#CC2020; --money-net:#1A6B28; --money-comm:#8B5000;
  --text:#1A1A1A; --text-2:#555; --muted:#6E6E6E; --text-3:#999;
  --font: 'Noto Sans', 'Noto Sans Myanmar', sans-serif;
  --radius:12px; --r-sm:6px; --r-md:8px; --r-lg:12px;
  --shadow:0 1px 2px rgba(20,20,30,.05), 0 5px 18px rgba(20,20,30,.07);
  --ease:cubic-bezier(.32,.72,0,1); --t-fast:120ms; --t-med:180ms;
  /* Aliases used by checkin.html's existing class references */
  --gold:var(--primary); --card:var(--surface);
  --green:var(--money-net); --red:var(--error); --blue:#3174BA;

  /* Unified button tokens - identical .btn block across admin + staff. */
  --btn-primary: var(--primary);
  --btn-primary-ink: var(--text);
  --btn-ghost-bg: var(--surface);
  --btn-ghost-border: var(--border);
  --btn-ghost-ink: var(--text-2);
  --btn-danger: var(--error);
  --btn-subtle-ink: var(--muted);
  --btn-focus-ring: 0 0 0 3px rgba(249, 181, 65, .22);
  --btn-radius: 6px;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;}

/* ── FOCUS RING (a11y, all interactive elements) ── */
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,
.gen-option:focus-visible,.lang-btn:focus-visible,.btn-signout:focus-visible,
.dta-check-label:focus-within,.photo-upload-area:focus-within{
  outline:3px solid rgba(249,181,65,.55);outline-offset:2px;
}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none;}

/* ── HEADER ── d1: flat, hairline only. */
.header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 20px; position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.header-brand, .header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-logo { height: 36px; width: auto; display: block; flex-shrink: 0; }
.header-title { font-size:17px; font-weight: 700; color: var(--text); white-space: nowrap; }
.header-sub { font-size:14px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── LANGUAGE TOGGLE (pill, 999px per d1) ── */
.lang-toggle { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.lang-btn { padding: 4px 14px; font-size: 13px; font-weight: 500; color: var(--text-2); font-family: var(--font); background: none; border: none; cursor: pointer; white-space: nowrap; transition: all 0.15s; line-height: 1.4; min-height: 28px; }
.lang-btn.active { background: var(--primary); color: var(--text); }

/* Sign-out pill: explicit shape override on top of the .btn ghost preset. */
.btn-signout { border-radius: 999px; min-height: 32px; padding: 4px 14px; font-size: 13px; }
.btn-signout:hover { color: var(--error); border-color: var(--error); }

/* ── LOGIN SCREEN ── */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 60px);padding:24px;}
/* d1: flat - hairline border, no drop shadow. */
.login-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;width:100%;max-width:380px;}
.login-logo{display:block;width:56px;margin:0 auto 16px;}
.login-title{text-align:center;font-size:20px;font-weight:700;margin-bottom:4px;}
.login-sub{text-align:center;font-size:15px;color:var(--muted);margin-bottom:24px;}
.form-group{margin-bottom:16px;}
/* d1: sentence-case labels. */
.form-label{font-size:13px;font-weight:500;color:var(--text);display:block;margin-bottom:6px;line-height:1.4;}
/* d1: 1px hairline border, 6px radius, gold focus ring at .22 alpha. */
.form-input{width:100%;border:1px solid var(--border);border-radius:6px;padding:9px 12px;font-size:14px;font-family:var(--font);background:var(--surface);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);box-sizing:border-box;}
input[type="date"].form-input,input[type="time"].form-input{padding:6px 10px;font-size:14px;width:auto;max-width:100%;}
.gen-fields{display:flex;flex-wrap:wrap;gap:10px;}
.gen-fields>div{flex:1;min-width:120px;}
.gen-run-hours-row .form-input{padding:8px 10px;font-size:14px;min-width:0;}
.form-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(249,181,65,.22);}
.form-input.error{border-color:var(--red);}
.login-error{background:#fef2f2;color:var(--red);border:1px solid #fecaca;border-radius:8px;padding:10px 14px;font-size:15px;margin-bottom:16px;display:none;}
/* ─────────────────────────────────────────────────────────────────────
   UNIFIED BUTTON SYSTEM - same declaration as css/admin.css and
   css/index.css. Three sizes × four intents. .btn-primary aliases into
   the .btn--lg primary preset for the login + submit CTAs.
   ───────────────────────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-signout,
.retry-btn {
  --_btn-h:36px; --_btn-px:16px; --_btn-py:8px; --_btn-fs:14px;
  --_btn-bg:var(--btn-primary); --_btn-fg:var(--btn-primary-ink); --_btn-border:var(--btn-primary);
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--_btn-h); padding:var(--_btn-py) var(--_btn-px);
  border:1px solid var(--_btn-border); border-radius:var(--btn-radius);
  background:var(--_btn-bg); color:var(--_btn-fg);
  font-family:var(--font); font-size:var(--_btn-fs); font-weight:500;
  line-height:1.2; white-space:nowrap; cursor:pointer; user-select:none; text-decoration:none;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),filter var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.btn--sm { --_btn-h:28px; --_btn-px:12px; --_btn-py:4px; --_btn-fs:13px; }
.btn--lg, .btn-primary { --_btn-h:44px; --_btn-px:20px; --_btn-py:12px; --_btn-fs:15px; }
.btn--ghost, .btn-signout, .retry-btn {
  --_btn-bg:var(--btn-ghost-bg); --_btn-fg:var(--btn-ghost-ink); --_btn-border:var(--btn-ghost-border);
}
.btn--danger {
  --_btn-bg:transparent; --_btn-fg:var(--btn-danger); --_btn-border:var(--btn-danger);
}
.btn--subtle {
  --_btn-bg:transparent; --_btn-fg:var(--btn-subtle-ink); --_btn-border:transparent;
}
.btn--danger.is-confirming, .btn--danger.is-filled { background:var(--btn-danger); color:var(--surface); }

.btn:not(:disabled):not(.is-loading):hover, .btn-primary:not(:disabled):not(.is-loading):hover { filter:brightness(1.04); }
.btn--ghost:not(:disabled):not(.is-loading):hover, .btn-signout:not(:disabled):not(.is-loading):hover, .retry-btn:not(:disabled):not(.is-loading):hover {
  filter:none; border-color:var(--btn-primary); color:var(--btn-primary-ink);
}
.btn--danger:not(:disabled):not(.is-loading):hover { filter:none; background:var(--btn-danger); color:var(--surface); }
.btn--subtle:not(:disabled):not(.is-loading):hover { filter:none; color:var(--btn-primary-ink); background:rgba(0,0,0,.04); }

.btn:not(:disabled):active, .btn-primary:not(:disabled):active { transform:translateY(1px); filter:brightness(.94); }
.btn--ghost:not(:disabled):active, .btn-signout:not(:disabled):active, .btn--subtle:not(:disabled):active { transform:translateY(1px); filter:none; }

.btn:focus-visible, .btn-primary:focus-visible, .btn-signout:focus-visible {
  outline:none; box-shadow:var(--btn-focus-ring); border-color:var(--btn-primary);
}

.btn:disabled, .btn.is-disabled, .btn-primary:disabled { opacity:.45; cursor:not-allowed; transform:none; filter:none; }

.btn.is-loading, .btn-primary.is-loading { position:relative; color:transparent !important; pointer-events:none; }
.btn.is-loading::after, .btn-primary.is-loading::after {
  content:''; position:absolute; top:50%; left:50%;
  width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; border:2px solid var(--_btn-fg); border-top-color:transparent;
  color:var(--_btn-fg); animation:btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform:rotate(360deg); } }
.btn--block { display:flex; width:100%; }

/* Login submit stretches to full width. */
.btn-primary { width:100%; }

/* Skeleton shimmer */
.skeleton{display:inline-block;vertical-align:middle;height:14px;background:linear-gradient(90deg,#eee 0%,#f5f5f5 50%,#eee 100%);background-size:200% 100%;border-radius:6px;animation:shimmer 1.4s ease-in-out infinite;}
.skeleton.lg{height:18px;}
.skeleton.sm{height:11px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── MAIN APP ── */
#app-screen{display:none;padding:20px;max-width:600px;margin:0 auto;}
/* d1: flat card. */
.staff-badge{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;gap:14px;}
.staff-avatar{width:44px;height:44px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:#1A1A1A;flex-shrink:0;}
.staff-info{}
.staff-name{font-size:17px;font-weight:700;}
.staff-role{font-size:14px;color:var(--muted);margin-top:2px;}
.staff-role-badge{display:inline-flex;align-items:center;background:var(--blue);color:#fff;border-radius:20px;padding:3px 10px;font-size:13px;font-weight:700;margin-top:4px;line-height:1;}
.staff-role-badge.fo{background:var(--green);}
.staff-role-badge.sg{background:#555;}

/* ── NOTIFICATION BANNERS ── */
.notif-banner{border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;font-size:15px;font-weight:600;display:none;}
.notif-banner.approved{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7;}
.notif-banner.rejected{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;}

/* ── CARD ── d1: flat. */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;}
/* d1: sentence-case section header. */
.card-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:16px;line-height:1.3;}
.card-error{background:#fef2f2;color:var(--red);border:1px solid #fecaca;border-radius:8px;padding:10px 14px;font-size:15px;margin-bottom:14px;display:none;}
.card-success{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7;border-radius:8px;padding:10px 14px;font-size:15px;margin-bottom:14px;display:none;}
textarea.form-input{resize:vertical;min-height:90px;}

/* ── SUMMARY STATS ── */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:0;}
.stat-box{background:var(--bg);border-radius:10px;padding:14px;text-align:center;}
.stat-value{font-size:24px;font-weight:700;color:var(--text);}
.stat-value.green{color:var(--green);}
.stat-value.gold{color:#c8860a;}
.stat-label{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4;}
.progress-bar-wrap{margin-top:14px;}
.progress-bar-label{font-size:14px;color:var(--muted);margin-bottom:5px;display:flex;justify-content:space-between;}
.progress-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;}
.progress-fill{height:100%;background:var(--green);border-radius:4px;transition:width .4s;}
.progress-fill.warning{background:var(--gold);}
.progress-fill.full{background:var(--red);}

/* ── LIMIT REACHED NOTICE ── */
.limit-notice{background:#fef9ec;border:1.5px solid var(--gold);border-radius:var(--radius);padding:16px;margin-bottom:20px;text-align:center;}
.limit-notice h3{font-size:17px;font-weight:700;color:#92400e;margin-bottom:6px;}
.limit-notice p{font-size:15px;color:#78350f;}

/* ── PHOTO UPLOAD ── */
.photo-upload-area{border:2px dashed var(--border);border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:border-color .15s;position:relative;}
.photo-upload-area:hover,.photo-upload-area.drag-over{border-color:var(--gold);}
.photo-upload-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.photo-upload-icon{font-size:32px;margin-bottom:8px;}
.photo-upload-text{font-size:15px;color:var(--muted);}
.photo-preview{width:100%;max-height:220px;object-fit:cover;border-radius:8px;margin-top:12px;display:none;}

/* ── GENERATOR / DAY TYPE TOGGLE ── */
.gen-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;}
.gen-option{position:relative;border:2px solid var(--border);border-radius:10px;padding:14px;text-align:center;cursor:pointer;transition:all .15s;background:#fafafa;color:var(--muted);min-height:64px;}
.gen-option:hover{border-color:var(--gold);background:#fff;color:var(--text);}
.gen-option.selected{background:#fff;color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.gen-option.yes.selected{border-color:var(--green);background:#d1fae5;color:#065f46;}
.gen-option.no.selected{border-color:var(--red);background:#fee2e2;color:#991b1b;}
.gen-option.half.selected{border-color:#d97706;background:#fef3c7;color:#92400e;}
.gen-option.selected::after{content:'✓';position:absolute;top:6px;right:8px;font-size:16px;font-weight:700;line-height:1;}
.gen-option.yes.selected::after{color:var(--green);}
.gen-option.no.selected::after{color:var(--red);}
.gen-option.half.selected::after{color:#d97706;}
.gen-option-icon{font-size:24px;margin-bottom:4px;}
.gen-option-label{font-size:15px;font-weight:700;line-height:1.2;}
input[name=generator_running]{display:none;}
.gen-details{background:#f0fdf4;border:1.5px solid #86efac;border-radius:10px;padding:14px;margin-top:12px;display:none;}
.gen-details.visible{display:block;}
.gen-details-title{font-size:15px;font-weight:700;color:#166534;margin-bottom:12px;}
.gen-field-label{font-size:14px;font-weight:600;color:#555;margin-bottom:4px;}
.gen-run-hours-row{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:nowrap;}
.gen-run-hours-row .form-input{flex:1;min-width:0;}
.gen-run-hours-sep{font-weight:700;color:#555;flex-shrink:0;}
.gen-detail-info{font-size:13px;color:#166534;margin-top:4px;}

/* ── HISTORY LIST ── */
.history-list{list-style:none;}
.history-item{padding:12px 0;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:flex-start;}
.history-item:last-child{border-bottom:none;}
.ci-del{background:none;border:none;color:#999;font-size:18px;padding:4px 8px;cursor:pointer;line-height:1;align-self:flex-start;}
.ci-del:hover{color:var(--error);}
.ci-actions{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;}
.ci-edit{background:none;border:none;color:#999;font-size:16px;padding:4px 8px;cursor:pointer;line-height:1;}
.ci-edit:hover{color:var(--primary-dark);}
.history-date{font-size:14px;font-weight:700;color:var(--muted);min-width:80px;padding-top:2px;}
.history-body{flex:1;}
.history-desc{font-size:16px;color:var(--text);}
.history-meta{font-size:13px;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
/* "0.5 day" is a quantity, not a status - neutral warm chip, not green. */
.badge-fraction{display:inline-flex;align-items:center;background:var(--bg);color:var(--muted);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px 9px;font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;}
/* Status pills - d1 style: soft tint + hairline border + 6px radius + a
   leading dot that carries the colour. No solid fills, no ✓ emoji, sentence
   case. The dot lets two adjacent pills stay legible without two heavy blocks. */
.s-pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-sm);padding:3px 9px;font-size:12px;font-weight:600;line-height:1.3;border:1px solid var(--border);background:var(--surface);color:var(--text-2);white-space:nowrap;}
.s-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.s-pill.ok  {background:#F1F8E9;border-color:rgba(26,107,40,.28);color:var(--money-net);}
.s-pill.warn{background:#FFF8E7;border-color:rgba(150,102,0,.30);color:var(--primary-dark);}
.s-pill.bad {background:#FEF2F2;border-color:rgba(204,32,32,.28);color:var(--error);}
/* Mixed-state badge for "check-in approved, DTA rejected" — gold base
   plus a small red dot so the joint state reads at a glance. */
.s-pill.mixed {background:linear-gradient(90deg,#F1F8E9 0%,#F1F8E9 70%,#FEF2F2 70%,#FEF2F2 100%);border-color:rgba(150,102,0,.30);color:var(--primary-dark);}
/* DTA is a sub-status of the check-in - render it as a quiet neutral chip so
   it never duplicates the primary "Approved" pill when both are approved.
   Only its dot carries the status colour. */
.s-pill.sub{background:var(--surface);border-color:var(--border);color:var(--muted);font-weight:500;}
.s-pill.sub.ok::before  {background:var(--money-net);}
.s-pill.sub.warn::before{background:var(--primary-dark);}
.s-pill.sub.bad::before {background:var(--error);}
.badge-gen-yes{display:inline-flex;align-items:center;background:#d1fae5;color:#065f46;border-radius:20px;padding:3px 10px;font-size:13px;font-weight:700;line-height:1;}
.badge-gen-no{display:inline-flex;align-items:center;background:#fee2e2;color:#991b1b;border-radius:20px;padding:3px 10px;font-size:13px;font-weight:700;line-height:1;}
.history-photo-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid var(--border);}
.empty-list{text-align:center;color:var(--muted);padding:24px 20px;font-size:15px;list-style:none;}
.empty-list-icon{font-size:32px;line-height:1;margin-bottom:8px;}
.retry-btn{margin-top:12px;padding:7px 16px;border-radius:8px;border:1px solid var(--border);background:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--text);cursor:pointer;}
.retry-btn:hover{border-color:var(--primary);}

/* ── REQUESTS LIST ── */
.req-item{padding:12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;}
.req-item:last-child{margin-bottom:0;}
.req-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.req-date{font-size:15px;font-weight:700;}
/* Request status - same pill language as .s-pill so the two lists read as one system. */
.req-status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;border-radius:var(--r-sm);padding:3px 10px;line-height:1.3;border:1px solid var(--border);white-space:nowrap;}
.req-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.req-status.pending {background:#FFF8E7;border-color:rgba(150,102,0,.30);color:var(--primary-dark);}
.req-status.approved{background:#F1F8E9;border-color:rgba(26,107,40,.28);color:var(--money-net);}
.req-status.rejected{background:#FEF2F2;border-color:rgba(204,32,32,.28);color:var(--error);}
.req-plan{font-size:15px;color:var(--muted);}
.req-note{font-size:14px;color:var(--red);margin-top:4px;}

/* ── DTA CHECKBOX ── */
.dta-check-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:16px;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;transition:border-color .15s;line-height:1.4;}
.dta-check-label:hover{border-color:var(--gold);}
.dta-check-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--green);flex-shrink:0;}

/* ── TOAST ── */
.toast{position:fixed;bottom:calc(72px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:#1a1a1a;color:#fff;padding:12px 20px;border-radius:24px;font-size:16px;font-weight:700;font-family:var(--font);line-height:1;box-shadow:0 4px 20px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .3s;z-index:999;max-width:calc(100vw - 32px);text-align:center;}
.toast.show{opacity:1;}

/* ── NOTIFICATIONS BELL ── */
.bell-btn{position:relative;background:none;border:none;padding:8px;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.bell-btn svg{width:24px;height:24px;stroke:var(--text);fill:none;stroke-width:2;}
.bell-badge{position:absolute;top:4px;right:4px;min-width:18px;height:18px;border-radius:9px;background:var(--error);color:#fff;font-size:11px;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 5px;line-height:1;}
.bell-badge.show{display:flex;}
.notif-overlay{position:fixed;inset:0;background:transparent;z-index:202;display:none;}
.notif-overlay.open{display:block;}
.notif-panel{position:fixed;top:64px;right:8px;width:360px;max-width:calc(100vw - 16px);max-height:calc(100vh - 80px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18);z-index:203;display:none;flex-direction:column;overflow:hidden;}
.notif-panel.open{display:flex;}
.notif-hdr{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:700;font-size:16px;color:var(--text);}
.notif-mark-all{background:none;border:none;color:var(--primary-dark);font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;padding:4px 8px;}
.notif-list{overflow-y:auto;max-height:calc(100vh - 160px);}
.notif-row{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;}
.notif-row:hover{background:var(--bg);}
.notif-row.unread{background:#FFF8E7;}
.notif-row .nt-title{font-size:14px;font-weight:700;color:var(--text);}
.notif-row .nt-body{font-size:13px;color:var(--text-2);margin-top:3px;line-height:1.4;}
.notif-row .nt-time{font-size:11px;color:var(--text-3);margin-top:4px;}
.notif-empty{padding:30px 14px;text-align:center;color:var(--text-2);font-size:14px;}

/* ── HAMBURGER + DRAWER ── */
.hdr-menu-btn{background:none;border:none;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;width:44px;height:44px;}
.hdr-menu-btn span{display:block;width:22px;height:2.5px;background:var(--text);border-radius:2px;}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s;}
.drawer-overlay.open{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;height:100vh;width:280px;max-width:85vw;background:var(--surface);z-index:201;transform:translateX(100%);transition:transform .25s var(--ease);display:flex;flex-direction:column;box-shadow:-4px 0 16px rgba(0,0,0,.12);}
.drawer.open{transform:translateX(0);}
.drawer-hdr{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:17px;color:var(--text);}
.drawer-close{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;padding:4px 10px;line-height:1;}
.drawer-nav{flex:1;padding:8px 0;overflow-y:auto;}
.drawer-item{display:flex;align-items:center;gap:14px;padding:14px 20px;color:var(--text);text-decoration:none;font-weight:700;font-size:16px;border-left:3px solid transparent;transition:background .12s;}
.drawer-item:hover{background:var(--bg);}
.drawer-item.active{color:var(--primary-dark);border-left-color:var(--primary);background:var(--primary-light);}
.drawer-item svg{width:22px;height:22px;flex-shrink:0;}

/* ── MOBILE HEADER (prevents lang-toggle from overlapping the brand) ── */
@media (max-width: 640px) {
  .header { padding: 10px 14px; gap: 6px; }
  .header-right { gap: 4px; }
  .header-brand, .header-left { min-width: 0; flex: 1 1 auto; }
  .header-title { font-size:16px; overflow: hidden; text-overflow: ellipsis; }
  .lang-btn { padding: 7px 9px; }
}
@media (max-width: 420px) {
  .header-sub { display: none; }
  .lang-btn { padding: 7px 8px; font-size:13px; }
}

@media(max-width:480px){#app-screen{padding:14px;}}