@font-face{font-family:'Yekan';src:url('/fonts/yekan.woff2') format('woff2');font-display:swap;font-weight:400 800}

/* ============================================================
   DESIGN TOKENS
   One light palette on :root, redefined for dark. Every colour a
   component uses is a token, so the two themes stay in step and no
   rule has its only definition inside a media query.
   ============================================================ */
:root{
  /* brand ramp */
  --brand-50:#f0fdfa;--brand-100:#ccfbf1;--brand-200:#99f6e4;--brand-300:#5eead4;
  --brand-400:#2dd4bf;--brand-500:#14b8a6;--brand-600:#0d9488;--brand-700:#0f766e;
  --brand-800:#115e59;--brand-900:#134e4a;

  /* semantic accents: surface + ink pairs */
  --ok:#15803d;--ok-bg:#f0fdf4;--ok-bd:#bbf7d0;
  --warn:#b45309;--warn-bg:#fffbeb;--warn-bd:#fde68a;
  --err:#b91c1c;--err-bg:#fef2f2;--err-bd:#fecaca;
  --info:#0e7490;--info-bg:#ecfeff;--info-bd:#a5f3fc;
  --accent:#6d28d9;--accent-bg:#f5f3ff;--accent-bd:#ddd6fe;

  /* neutrals */
  --bg:#f4f6f9;--bg-sunk:#eceff4;
  --sf:#ffffff;--sf-2:#f8fafc;--sf-3:#f1f5f9;
  --bd:#e4e9f0;--bd-2:#cdd5e0;
  --tx:#0f172a;--tx-2:#475569;--mt:#64748b;--lt:#94a3b8;

  /* highlight marks */
  --hl-imp:#fde68a;--hl-dec:#a7f3d0;--hl-fol:#bfdbfe;--hl-que:#f9a8d4;
  --hl-ink:#0f172a;
  --find:#fde047;--find-on:#fb923c;

  /* legacy aliases kept so older rules and markup keep resolving */
  --pri:var(--brand-700);--prd:var(--brand-800);--prl:var(--brand-500);--prb:var(--brand-50);
  --grn:var(--ok);--grnb:var(--ok-bg);--red:var(--err);--redb:var(--err-bg);
  --ora:var(--warn);--orab:var(--warn-bg);--pur:var(--accent);--purb:var(--accent-bg);
  --cyn:var(--info);--cynb:var(--info-bg);--sf2:var(--sf-2);--bd2:var(--bd-2);

  /* elevation */
  --s1:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
  --s2:0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);
  --s3:0 18px 48px rgba(15,23,42,.18),0 4px 12px rgba(15,23,42,.08);
  --ring:0 0 0 3px rgba(20,184,166,.28);

  /* geometry */
  --r:10px;--r2:14px;--r3:20px;--r-pill:999px;
  --sw:248px;--th:60px;
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;

  --ease:cubic-bezier(.4,0,.2,1);
  --fast:.14s var(--ease);--med:.24s var(--ease);
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ok:#4ade80;--ok-bg:#0d2818;--ok-bd:#166534;
    --warn:#fbbf24;--warn-bg:#2a1d05;--warn-bd:#78350f;
    --err:#f87171;--err-bg:#2c1111;--err-bd:#7f1d1d;
    --info:#38bdf8;--info-bg:#082430;--info-bd:#0e5e75;
    --accent:#a78bfa;--accent-bg:#1d1533;--accent-bd:#4c1d95;

    --bg:#0b1020;--bg-sunk:#070b16;
    --sf:#131a2c;--sf-2:#1a2338;--sf-3:#212b42;
    --bd:#26314a;--bd-2:#37445f;
    --tx:#e8edf6;--tx-2:#b9c4d6;--mt:#94a3b8;--lt:#6b7a90;

    --hl-imp:#7c5e07;--hl-dec:#0b5137;--hl-fol:#1e3a8a;--hl-que:#7c2d54;
    --hl-ink:#f8fafc;
    --find:#a16207;--find-on:#c2410c;

    --pri:var(--brand-400);--prd:var(--brand-300);--prl:var(--brand-400);--prb:#0d2b2a;

    --s1:0 1px 2px rgba(0,0,0,.5);
    --s2:0 4px 14px rgba(0,0,0,.55);
    --s3:0 20px 50px rgba(0,0,0,.7);
    --ring:0 0 0 3px rgba(45,212,191,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ok:#4ade80;--ok-bg:#0d2818;--ok-bd:#166534;
  --warn:#fbbf24;--warn-bg:#2a1d05;--warn-bd:#78350f;
  --err:#f87171;--err-bg:#2c1111;--err-bd:#7f1d1d;
  --info:#38bdf8;--info-bg:#082430;--info-bd:#0e5e75;
  --accent:#a78bfa;--accent-bg:#1d1533;--accent-bd:#4c1d95;

  --bg:#0b1020;--bg-sunk:#070b16;
  --sf:#131a2c;--sf-2:#1a2338;--sf-3:#212b42;
  --bd:#26314a;--bd-2:#37445f;
  --tx:#e8edf6;--tx-2:#b9c4d6;--mt:#94a3b8;--lt:#6b7a90;

  --hl-imp:#7c5e07;--hl-dec:#0b5137;--hl-fol:#1e3a8a;--hl-que:#7c2d54;
  --hl-ink:#f8fafc;
  --find:#a16207;--find-on:#c2410c;

  --pri:var(--brand-400);--prd:var(--brand-300);--prl:var(--brand-400);--prb:#0d2b2a;

  --s1:0 1px 2px rgba(0,0,0,.5);
  --s2:0 4px 14px rgba(0,0,0,.55);
  --s3:0 20px 50px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(45,212,191,.35);
  color-scheme:dark;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{
  font-family:'Yekan',Tahoma,system-ui,sans-serif;
  background:var(--bg);color:var(--tx);direction:rtl;
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg,audio,video{max-width:100%}
h1,h2,h3,h4{line-height:1.45}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd-2);border-radius:var(--r-pill);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--mt);background-clip:content-box}
::selection{background:var(--brand-200);color:var(--brand-900)}

.hidden{display:none!important}
.ltr{direction:ltr;text-align:left}
.muted{color:var(--mt)}
.nowrap{white-space:nowrap}
.ta-end{text-align:end}
.full{width:100%}
.grow{flex:1;min-width:0}
.dn-sm{display:none}
@media(min-width:760px){.dn-sm{display:block}}

:where(button,a,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--brand-500);outline-offset:2px;border-radius:6px;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:fixed;top:0;right:0;left:0;z-index:300;height:var(--th);
  background:color-mix(in srgb,var(--sf) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--sp4);gap:var(--sp3);
}
.topbar-r,.topbar-l{display:flex;align-items:center;gap:var(--sp2)}
.topbar-search{flex:1;max-width:460px}
.top-search-form{
  position:relative;display:flex;align-items:center;gap:var(--sp2);
  background:var(--sf-3);border:1.5px solid transparent;border-radius:var(--r-pill);
  padding:8px 16px;transition:border-color var(--fast),background var(--fast),box-shadow var(--fast);
}
.top-search-form:focus-within{border-color:var(--brand-400);background:var(--sf);box-shadow:var(--ring)}
.top-search-form>svg{flex-shrink:0;color:var(--mt)}
.top-search-input{border:none;outline:none;background:none;font-family:inherit;font-size:.88rem;color:var(--tx);width:100%}
.top-search-input::placeholder{color:var(--lt)}

.hamburger{
  width:40px;height:40px;border-radius:var(--r);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;color:var(--tx-2);transition:background var(--fast);
}
.hamburger:hover{background:var(--sf-3)}
.hamburger span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px}

.brand{display:flex;align-items:center;gap:10px;border-radius:var(--r);padding:2px 4px}
.brand-logo-wrap{
  width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,var(--brand-700),var(--brand-900));
  display:flex;align-items:center;justify-content:center;box-shadow:var(--s2);flex-shrink:0;
}
.brand-logo{width:30px;height:30px;object-fit:contain}
.brand-text{display:flex;flex-direction:column}
.brand-name{font-size:.98rem;font-weight:800;color:var(--pri);line-height:1.25}
.brand-sub{font-size:.66rem;color:var(--mt);line-height:1.3}

.user-btn{display:flex;align-items:center;gap:var(--sp2);padding:5px 8px;border-radius:var(--r-pill);cursor:pointer;transition:background var(--fast)}
.user-btn:hover{background:var(--sf-3)}
.uavatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,var(--brand-500),var(--brand-700));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;
}
.uinfo{display:flex;flex-direction:column;line-height:1.3}
.uname{font-size:.82rem;font-weight:700}
.urole{font-size:.66rem;color:var(--pri);font-weight:600}

.user-dropdown{
  position:fixed;top:calc(var(--th) - 2px);left:14px;min-width:230px;
  background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);
  box-shadow:var(--s3);z-index:500;overflow:hidden;
  display:none;
}
.user-dropdown.open{display:block;animation:pop .16s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}}
.ud-header{padding:14px 16px}
.ud-name{font-weight:700}
.ud-username{font-size:.75rem;color:var(--mt);direction:ltr;text-align:right}
.ud-divider{height:1px;background:var(--bd)}
.ud-item{display:block;width:100%;padding:11px 16px;font-size:.85rem;text-align:right;transition:background var(--fast)}
.ud-item:hover{background:var(--sf-3)}
.ud-logout{color:var(--err)}


/* Theme switch */
.theme-toggle{
  width:40px;height:40px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  color:var(--tx-2);transition:background var(--fast);
}
.theme-toggle:hover{background:var(--sf-3)}
.theme-toggle .icon-dark{display:none}
:root[data-theme="dark"] .theme-toggle .icon-dark{display:block}
:root[data-theme="dark"] .theme-toggle .icon-light{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-dark{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-light{display:none}
}

/* ============================================================
   SHELL
   ============================================================ */
.app-wrap{display:flex;padding-top:var(--th);min-height:100vh}
.sidebar{
  width:var(--sw);flex-shrink:0;background:var(--sf);border-left:1px solid var(--bd);
  height:calc(100vh - var(--th));position:sticky;top:var(--th);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
}
.snav{padding:var(--sp3) var(--sp2);flex:1}
.si{
  display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:var(--r);
  font-size:.87rem;color:var(--tx-2);margin-bottom:2px;position:relative;
  transition:background var(--fast),color var(--fast);
}
.si svg{flex-shrink:0;opacity:.8}
.si:hover{background:var(--sf-3);color:var(--tx)}
.si-active{background:var(--prb);color:var(--pri);font-weight:700}
.si-active svg{opacity:1}
.si-active::before{
  content:"";position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);
  width:3px;height:60%;border-radius:var(--r-pill);background:var(--pri);
}
.si-divider{height:1px;background:var(--bd);margin:var(--sp3) 10px}
.sidebar-overlay{display:none}
.main-wrap{flex:1;padding:var(--sp5);min-width:0}

/* ============================================================
   HEADINGS / SECTIONS
   ============================================================ */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--sp3);margin-bottom:var(--sp5)}
.sec-title{font-size:1.28rem;font-weight:800;letter-spacing:-.01em}
.sec-sub{font-size:.82rem;color:var(--mt);margin-top:3px}

/* ============================================================
   FILTER BAR + SEARCH FIELD
   ============================================================ */
.filter-bar{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:var(--sp2);margin-bottom:var(--sp5)}

.search-field{position:relative;display:flex;align-items:center;min-width:0}
.search-field .fi{padding-inline-end:38px}
.search-clear{
  position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;display:none;
  align-items:center;justify-content:center;font-size:.7rem;line-height:1;
  background:var(--bd);color:var(--tx-2);transition:background var(--fast),color var(--fast);
}
.search-clear.on{display:flex}
.search-clear:hover{background:var(--err-bg);color:var(--err)}
.top-search-form .search-clear{inset-inline-end:10px}

/* ============================================================
   SEGMENTED TABS
   ============================================================ */
.seg-tabs{
  display:inline-flex;gap:2px;padding:4px;background:var(--sf-3);
  border-radius:var(--r-pill);margin-bottom:var(--sp4);flex-wrap:wrap;
}
.seg{
  padding:7px 18px;border-radius:var(--r-pill);font-size:.82rem;font-weight:600;
  color:var(--mt);transition:background var(--fast),color var(--fast);
}
.seg:hover{color:var(--tx)}
.seg.on{background:var(--sf);color:var(--pri);box-shadow:var(--s1)}

/* ============================================================
   NOTE CARDS
   ============================================================ */
/* Bulk selection */
.bulk-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);flex-wrap:wrap;
  background:var(--prb);border:1px solid var(--brand-200);border-radius:var(--r2);
  padding:10px var(--sp4);margin-bottom:var(--sp3);
}
.bulk-all{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--pri)}
.bulk-all input{width:17px;height:17px;accent-color:var(--pri)}
.bulk-acts{display:flex;gap:var(--sp2)}
.note-select{
  position:absolute;top:10px;inset-inline-start:10px;z-index:2;
  width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--sf) 88%,transparent);backdrop-filter:blur(2px);
  box-shadow:var(--s1);cursor:pointer;
}
.note-select input{width:17px;height:17px;accent-color:var(--pri);cursor:pointer}

.note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--sp3)}
.note-card{
  position:relative;
  background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);
  box-shadow:var(--s1);display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow var(--med),border-color var(--med),transform var(--med);
}
.note-card:hover{box-shadow:var(--s2);border-color:var(--bd-2);transform:translateY(-2px)}
/* Extra top padding reserves room for the select checkbox floating over this corner, so it never
   sits on top of the pin/status badges that already occupy both top corners. */
.note-card-link{display:flex;flex-direction:column;gap:7px;padding:34px var(--sp4) var(--sp4);flex:1}
.note-card h3{font-size:.98rem;line-height:1.55}
.note-card-title{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.note-card-top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp2)}
.note-meta{font-size:.75rem;color:var(--mt)}
.note-stats{display:flex;gap:10px;flex-wrap:wrap;font-size:.75rem;color:var(--pri);margin-top:2px}
.note-acts{
  display:flex;gap:var(--sp2);padding:10px var(--sp4);
  border-top:1px solid var(--bd);background:var(--sf-2);
}
.note-acts form{display:contents}
.pin{font-size:.68rem;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bd);padding:2px 9px;border-radius:var(--r-pill);font-weight:600}
.tag-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.tag{font-size:.7rem;background:var(--prb);color:var(--pri);padding:3px 10px;border-radius:var(--r-pill);font-weight:600}

/* ============================================================
   BADGES / PILLS
   ============================================================ */
.badge{font-size:.7rem;padding:3px 10px;border-radius:var(--r-pill);display:inline-block;font-weight:600;white-space:nowrap}
.badge-admin{background:var(--prb);color:var(--pri)}
.badge-user{background:var(--ok-bg);color:var(--ok)}
.badge-ok,.st-Completed{background:var(--ok-bg);color:var(--ok)}
.badge-lock,.st-Failed{background:var(--err-bg);color:var(--err)}
.badge-off,.st-None,.st-Cancelled{background:var(--sf-3);color:var(--mt)}
.st-Uploaded,.st-Queued{background:var(--info-bg);color:var(--info)}
.st-Preparing,.st-Transcribing,.st-Merging{background:var(--warn-bg);color:var(--warn)}
.chip-mini{font-size:.7rem;background:var(--sf-3);color:var(--tx-2);padding:2px 8px;border-radius:var(--r-pill);margin-inline-end:3px;display:inline-block}
.pill{font-size:.72rem;padding:4px 12px;border-radius:var(--r-pill);white-space:nowrap;font-weight:600}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-err{background:var(--err-bg);color:var(--err)}
.log-pill{padding:8px 16px;border-radius:var(--r-pill);background:linear-gradient(135deg,var(--brand-600),var(--info));color:#fff;font-weight:800}

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty{
  text-align:center;padding:72px var(--sp5);background:var(--sf);
  border:2px dashed var(--bd);border-radius:var(--r3);color:var(--lt);
}
.empty svg{opacity:.3;margin-bottom:var(--sp3)}
.empty h3{color:var(--tx-2);margin-bottom:var(--sp2);font-size:1rem}
.empty p{font-size:.86rem;margin-bottom:var(--sp4);line-height:1.9;color:var(--mt)}
.empty-sm{padding:var(--sp4);color:var(--lt);font-size:.84rem;text-align:center}

/* ============================================================
   CARDS / TABLES
   ============================================================ */
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);overflow:hidden;box-shadow:var(--s1)}
.card.pad{padding:var(--sp5);margin-bottom:var(--sp4)}
.card-hd{padding:14px 18px;background:var(--sf-2);border-bottom:1px solid var(--bd);font-weight:700}
.card-body{padding:var(--sp5)}
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtable{width:100%;border-collapse:collapse;min-width:640px}
.dtable th{
  padding:12px 14px;text-align:right;font-size:.74rem;font-weight:700;color:var(--mt);
  background:var(--sf-2);border-bottom:1px solid var(--bd);white-space:nowrap;
  position:sticky;top:0;z-index:1;
}
.dtable td{padding:13px 14px;border-bottom:1px solid var(--bd);font-size:.84rem;vertical-align:middle}
.dtable tbody tr{transition:background var(--fast)}
.dtable tbody tr:hover{background:var(--sf-2)}
.dtable tbody tr:last-child td{border-bottom:none}
.row-deleted{opacity:.62}
.tlink{font-weight:700;color:var(--pri)}
.tlink:hover{text-decoration:underline}
.inline-form{display:inline-block}
.page-narrow{max-width:520px;margin:0 auto}
.pager{display:flex;gap:var(--sp3);align-items:center;justify-content:center;margin-top:var(--sp4);flex-wrap:wrap}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.83rem}
.kv dt{color:var(--mt);white-space:nowrap}
.kv dd{color:var(--tx);font-weight:600;word-break:break-word}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-pri,.btn-sec,.btn-danger,.btn-login{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:var(--r);padding:9px 18px;font-size:.87rem;font-weight:700;
  transition:background var(--fast),border-color var(--fast),box-shadow var(--fast),transform var(--fast),color var(--fast);
  white-space:nowrap;
}
.btn-pri:active,.btn-sec:active,.btn-danger:active{transform:translateY(1px)}
.btn-pri{background:var(--brand-700);color:#fff;box-shadow:0 2px 8px rgba(15,118,110,.28)}
.btn-pri:hover{background:var(--brand-800);box-shadow:0 4px 14px rgba(15,118,110,.34)}
.btn-sec{background:var(--sf);color:var(--tx-2);border:1.5px solid var(--bd-2)}
.btn-sec:hover{background:var(--sf-3);color:var(--tx);border-color:var(--mt)}
.btn-danger{background:var(--sf);color:var(--err);border:1.5px solid var(--err-bd)}
.btn-danger:hover{background:var(--err);color:#fff;border-color:var(--err)}
.btn-pri:disabled,.btn-sec:disabled,.btn-danger:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-sm{padding:6px 13px;font-size:.78rem}
.btn-login{
  width:100%;padding:13px;color:#fff;font-size:.95rem;
  background:linear-gradient(135deg,var(--brand-800),var(--brand-500));
  box-shadow:0 4px 16px rgba(15,118,110,.34);
}
.btn-login:disabled{opacity:.7}
.btn-icon-only{
  width:38px;height:38px;border:1.5px solid var(--bd);border-radius:var(--r);background:var(--sf);
  color:var(--tx-2);display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--fast),color var(--fast),border-color var(--fast);
}
.btn-icon-only:hover{background:var(--sf-3);color:var(--tx);border-color:var(--bd-2)}
.btn-icon-only.on{background:var(--prb);color:var(--pri);border-color:var(--brand-400)}
.file-btn{cursor:pointer}

/* Zoom cluster */
.zoom-group{display:inline-flex;align-items:center;gap:2px;background:var(--sf);border:1.5px solid var(--bd);border-radius:var(--r);padding:2px}
.zoom-group .btn-icon-only{width:30px;height:30px;border:none;background:none;font-size:1.1rem;font-weight:700}
.zoom-label{
  min-width:48px;padding:0 4px;font-size:.74rem;font-weight:700;color:var(--tx-2);
  text-align:center;border-radius:6px;transition:background var(--fast);
}
.zoom-label:hover{background:var(--sf-3);color:var(--tx)}

/* ============================================================
   FORMS
   ============================================================ */
.fg{margin-bottom:var(--sp4)}
.fl{display:block;font-size:.79rem;font-weight:700;color:var(--tx-2);margin-bottom:6px}
.fi{
  width:100%;padding:10px 13px;border:1.5px solid var(--bd);border-radius:var(--r);
  font-family:inherit;font-size:.88rem;background:var(--sf);color:var(--tx);outline:none;
  transition:border-color var(--fast),box-shadow var(--fast);
}
.fi::placeholder{color:var(--lt)}
.fi:hover{border-color:var(--bd-2)}
.fi:focus{border-color:var(--brand-400);box-shadow:var(--ring)}
select.fi{cursor:pointer}
.code-area{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;line-height:1.9;resize:vertical}
.fi-pass-box{position:relative}
.fi-pass-box .fi{padding-left:40px}
.fi-eye{position:absolute;top:50%;left:10px;transform:translateY(-50%);color:var(--lt)}
.fi-check{display:flex;align-items:center;gap:var(--sp2);margin-bottom:var(--sp4);font-size:.84rem;color:var(--tx-2)}
.err-bar{display:flex;gap:var(--sp2);background:var(--err-bg);color:var(--err);border:1px solid var(--err-bd);border-radius:var(--r);padding:11px 15px;margin-bottom:var(--sp4);font-size:.86rem}
.flash-ok{background:var(--ok-bg);color:var(--ok);padding:11px 15px;border-radius:var(--r);margin-bottom:var(--sp4);border:1px solid var(--ok-bd);font-size:.86rem}
.info-box{margin-top:var(--sp5);background:var(--sf-2);border:1px dashed var(--bd);border-radius:var(--r2);padding:var(--sp4);line-height:1.9;font-size:.84rem}

/* ============================================================
   MODALS
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:500;background:rgba(8,12,24,.55);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--sp4);
  animation:fade .16s var(--ease);
}
@keyframes fade{from{opacity:0}}
.mcard{
  background:var(--sf);border:1px solid var(--bd);border-radius:var(--r3);
  width:100%;max-width:480px;box-shadow:var(--s3);
  max-height:90vh;display:flex;flex-direction:column;
  animation:rise .2s var(--ease);
}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}}
.mwide{max-width:820px}
.mhead{display:flex;justify-content:space-between;align-items:center;gap:var(--sp3);padding:16px 20px;border-bottom:1px solid var(--bd)}
.mhead h3{font-size:1rem}
.mbody{padding:20px;overflow-y:auto}
.mfooter{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--sp4);flex-wrap:wrap}
.mx{
  width:30px;height:30px;border-radius:50%;background:var(--sf-3);color:var(--tx-2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background var(--fast),color var(--fast);
}
.mx:hover{background:var(--err-bg);color:var(--err)}

/* ============================================================
   LOGIN
   ============================================================ */
.login-bg{
  min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--sp5);
  background:
    radial-gradient(1100px 520px at 78% -10%,var(--brand-100),transparent 60%),
    radial-gradient(900px 480px at 12% 108%,var(--info-bg),transparent 62%),
    var(--bg);
}
.login-scene{width:100%;max-width:440px}
.login-card{background:var(--sf);border-radius:var(--r3);box-shadow:var(--s3);overflow:hidden;border:1px solid var(--bd)}
.login-top{background:linear-gradient(140deg,var(--brand-900),var(--brand-700) 55%,var(--brand-500));padding:34px 30px 28px;text-align:center}
.login-logo-ring{
  width:94px;height:94px;border-radius:28px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp3);
}
.login-logo{width:66px;height:66px;object-fit:contain}
.login-h1{color:#fff;font-size:1.25rem;font-weight:800}
.login-org{color:rgba(255,255,255,.86);font-size:.76rem;line-height:1.8;margin-top:6px}
.login-body{padding:28px 30px}
.login-form-h{font-size:.92rem;font-weight:700;margin-bottom:var(--sp5);padding-bottom:14px;border-bottom:1px solid var(--bd)}

/* ============================================================
   ADMIN KPI
   ============================================================ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--sp3)}
.kpi{
  background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);padding:var(--sp4);
  box-shadow:var(--s1);transition:box-shadow var(--med),transform var(--med);
}
.kpi:hover{box-shadow:var(--s2);transform:translateY(-2px)}
.kpi .n{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.kpi .l{font-size:.78rem;color:var(--mt);margin-top:4px}
.status-list{list-style:none;display:flex;flex-direction:column;margin-bottom:var(--sp3)}
.status-list li{display:flex;justify-content:space-between;align-items:center;gap:var(--sp3);padding:11px 0;border-bottom:1px solid var(--bd);font-size:.85rem}
.status-list li:last-child{border-bottom:none}
.admin-note-banner{
  display:flex;gap:10px;align-items:center;
  background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn);
  border-radius:var(--r2);padding:12px 16px;margin-bottom:var(--sp4);font-size:.84rem;line-height:1.8;
}
.danger-card{border-color:var(--err-bd)}
.danger-card .side-card-h{color:var(--err);border-bottom-color:var(--err-bd)}
.danger-card form{margin-top:var(--sp2)}

/* ============================================================
   EDITOR
   ============================================================ */
.editor-page{max-width:1320px;margin:0 auto}
.ed-head{display:flex;justify-content:space-between;gap:var(--sp3);flex-wrap:wrap;margin-bottom:var(--sp4)}
.ed-title-wrap{flex:1;min-width:240px}
.ed-title{
  width:100%;font-size:1.4rem;font-weight:800;border:none;background:transparent;
  font-family:inherit;color:var(--tx);outline:none;padding:2px 6px;margin-inline-start:-6px;
  border-radius:8px;transition:background var(--fast);letter-spacing:-.01em;
}
.ed-title:hover{background:var(--sf-3)}
.ed-title:focus{background:var(--sf);box-shadow:var(--ring)}
.ed-sub{display:flex;gap:var(--sp3);font-size:.75rem;color:var(--mt);margin-top:5px;flex-wrap:wrap;padding-inline-start:0}
.save-ok{color:var(--ok);font-weight:600}
.save-busy{color:var(--warn);font-weight:600}
.save-err{color:var(--err);font-weight:600}
.ed-head-acts{display:flex;gap:var(--sp2);align-items:flex-start;flex-wrap:wrap}

.ed-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp4);align-items:start}
/* Grid items default to min-width:auto, so a track can never shrink below its content's min-content
   width. The toolbar stops wrapping on small screens and scrolls instead, so its min-content width is
   the full row of buttons (~900px) — without this the editor column was pinned to that width and the
   whole page scrolled sideways on a phone. */
.ed-main,.ed-side{min-width:0}
/* `clip` rather than `hidden`: overflow:hidden would make this card the sticky scroll container for
   the toolbar below, and the toolbar's `top` offset was then applied inside the card — parking it
   60px down, on top of the find bar and the first lines of the note. `clip` still rounds the
   corners but creates no scroll container, so the toolbar sticks to the page as intended. */
.ed-main{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);overflow:clip;box-shadow:var(--s1)}
.ed-toolbar{
  display:flex;flex-wrap:wrap;gap:var(--sp1);padding:var(--sp2);
  border-bottom:1px solid var(--bd);background:var(--sf-2);
  position:sticky;top:var(--th);z-index:10;
}
.ed-toolbar button{
  padding:7px 10px;border-radius:8px;font-size:.78rem;border:1.5px solid transparent;
  color:var(--tx-2);transition:background var(--fast),border-color var(--fast),color var(--fast);
  min-height:34px;
}
.ed-toolbar button:hover{background:var(--sf);border-color:var(--bd);color:var(--tx)}
.ed-toolbar button:disabled{opacity:.4;cursor:not-allowed}
.ed-toolbar button:disabled:hover{background:none;border-color:transparent}
.tb-group{display:flex;gap:3px;padding-left:var(--sp2);margin-left:var(--sp1);border-left:1px solid var(--bd)}
.tb-group:last-child{border-left:none}

/* The four highlight marks: swatch on the button, same colour in the text. */
.hl-imp{background:var(--hl-imp)!important;color:var(--hl-ink)!important;font-weight:700}
.hl-dec{background:var(--hl-dec)!important;color:var(--hl-ink)!important;font-weight:700}
.hl-fol{background:var(--hl-fol)!important;color:var(--hl-ink)!important;font-weight:700}
.hl-que{background:var(--hl-que)!important;color:var(--hl-ink)!important;font-weight:700}

.ed-surface{
  min-height:56vh;padding:26px 28px 96px;line-height:2.05;font-size:1rem;outline:none;
  color:var(--tx);word-break:break-word;
}
.ed-surface:focus{box-shadow:inset 0 0 0 2px rgba(20,184,166,.14)}
.ed-surface.readonly{min-height:auto;padding:var(--sp4) 0 0;background:none}
.ed-surface p{margin-bottom:.85em}
.ed-surface h1,.ed-surface h2,.ed-surface h3,.ed-surface h4{margin:1.1em 0 .5em;font-weight:800}
.ed-surface ul,.ed-surface ol{margin:0 1.6em .9em 0;padding-inline-start:0}
.ed-surface li{margin-bottom:.35em}
.ed-surface blockquote{
  border-inline-start:3px solid var(--brand-400);background:var(--sf-2);
  padding:10px 16px;border-radius:8px;margin:0 0 .9em;color:var(--tx-2);
}
.ed-surface mark[data-hl]{padding:1px 3px;border-radius:4px;color:var(--hl-ink)}
.ed-surface mark[data-hl=important]{background:var(--hl-imp)}
.ed-surface mark[data-hl=decision]{background:var(--hl-dec)}
.ed-surface mark[data-hl=followup]{background:var(--hl-fol)}
.ed-surface mark[data-hl=question]{background:var(--hl-que)}

/* Find in note */
.find-bar{
  display:flex;gap:var(--sp2);padding:var(--sp2) var(--sp3);align-items:center;
  border-bottom:1px solid var(--bd);background:var(--sf-2);flex-wrap:wrap;
}
.find-count{font-size:.76rem;color:var(--mt);min-width:64px;text-align:center;font-weight:600}
.find-count.none{color:var(--err)}
[data-find-hit]{background:var(--find);color:var(--hl-ink);border-radius:3px}
[data-find-hit].on{background:var(--find-on);color:#fff;box-shadow:0 0 0 2px var(--find-on)}

/* Tag editor
   Font sizes here are set directly by editor.js (syncTagZoom), not via CSS custom properties: this
   used to be a var()/calc()/clamp() chain reading a --note-zoom set on an ancestor, but on this
   engine an existing element's calc()-derived font-size did not pick up a later change to the custom
   property it referenced, even though the property itself demonstrably updated (confirmed on the
   very same element) and a freshly-created sibling with the identical expression computed correctly.
   Whatever the exact cause, a plain JS-computed literal sidesteps it entirely. The values below are
   just the un-zoomed defaults, overwritten inline once editor.js runs.
   The tag row sits outside #editor (a sibling, not a descendant) so it never inherited the note's own
   zoom at all — it stayed fixed size while the note text above it grew, which is what read as "the
   tags are too big" at high zoom (really: everything else had grown past them). */
.tag-editor{
  display:flex;align-items:flex-start;gap:var(--sp3);flex-wrap:wrap;
  padding:var(--sp3) var(--sp4);border-top:1px solid var(--bd);background:var(--sf-2);
}
.tag-editor-label{font-size:.76rem;font-weight:700;color:var(--mt);padding-top:7px;flex-shrink:0}
.tag-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1;min-width:200px}
.tag-chip{
  display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.76rem;
  background:var(--prb);color:var(--pri);border:1px solid var(--brand-200);
  padding:4px 6px 4px 12px;border-radius:var(--r-pill);
}
.tag-x{
  width:17px;height:17px;border-radius:50%;font-size:.6rem;line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:color-mix(in srgb,var(--pri) 16%,transparent);color:var(--pri);
  transition:background var(--fast),color var(--fast);
}
.tag-x:hover{background:var(--err);color:#fff}
.tag-input-wrap{display:flex;flex:1;min-width:150px}
.tag-input{
  border:none;background:none;outline:none;font-family:inherit;font-size:.8rem;
  color:var(--tx);width:100%;padding:5px 4px;
}
.tag-input::placeholder{color:var(--lt)}

/* Drag & drop */
.drop-overlay{
  position:fixed;inset:0;z-index:650;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--brand-900) 55%,transparent);backdrop-filter:blur(4px);padding:var(--sp5);
}
.drop-overlay.on{display:flex;animation:fade .12s var(--ease)}
.drop-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:var(--sf);color:var(--tx);border:3px dashed var(--brand-400);
  border-radius:var(--r3);padding:44px 56px;box-shadow:var(--s3);max-width:min(460px,90vw);
}
.drop-card svg{color:var(--pri)}
.drop-card strong{font-size:1.05rem}
.drop-card .muted{font-size:.8rem;line-height:1.8}

/* Side panels */
.side-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);padding:var(--sp4);margin-bottom:var(--sp3);box-shadow:var(--s1)}
.side-card h3{font-size:.88rem}
.side-card-h{display:flex;align-items:center;gap:var(--sp2);font-size:.88rem;font-weight:700;margin-bottom:var(--sp3);padding-bottom:10px;border-bottom:1px solid var(--bd)}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-audio{background:var(--pri)}
.dot-image{background:var(--info)}
.dot-text{background:var(--accent)}
.dot-raw{background:var(--warn)}
.side-acts{display:flex;flex-direction:column;gap:var(--sp2)}
.hint-sm{font-size:.72rem;color:var(--mt);line-height:1.85;margin-top:var(--sp2)}
.media-list{margin-top:var(--sp3)}
.media-item{border-top:1px dashed var(--bd);padding:var(--sp3) 0}
.media-item:first-child{border-top:none}
.media-item audio{width:100%;margin-top:7px}
.media-item-head{display:flex;align-items:center;gap:var(--sp2)}
.media-name{font-weight:700;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}

.btn-att-del{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;font-size:.66rem;line-height:1;
  display:flex;align-items:center;justify-content:center;color:var(--mt);
  transition:background var(--fast),color var(--fast);
}
.btn-att-del:hover{background:var(--err-bg);color:var(--err)}
.img-fig-media{position:relative}
.btn-att-del.on-image{
  position:absolute;top:6px;inset-inline-end:6px;background:color-mix(in srgb,var(--sf) 82%,transparent);
  backdrop-filter:blur(2px);box-shadow:var(--s1);color:var(--tx-2);
}
.btn-att-del.on-image:hover{background:var(--err);color:#fff}
.speed-row{display:flex;gap:var(--sp1);margin:7px 0;flex-wrap:wrap}
.chip{padding:4px 10px;border:1.5px solid var(--bd);border-radius:var(--r-pill);font-size:.72rem;color:var(--tx-2);transition:background var(--fast),border-color var(--fast),color var(--fast)}
.chip:hover{border-color:var(--bd-2);color:var(--tx)}
.chip.speed.on{background:var(--prb);border-color:var(--brand-400);color:var(--pri);font-weight:700}

/* min-width:0 on both the grid item and the ellipsis target: a filename with no spaces or hyphens is
   one unbreakable token, and grid/flex items default to min-width:auto — the item (and the whole
   grid track) is then floored at that token's full width, pushing the sidebar and the page wider no
   matter what the ellipsis rule says. Without this, a single long filename with no break points blew
   the layout out to the right on desktop widths (52px of horizontal page overflow, reproduced with a
   real unbroken filename). */
.img-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp2);margin-top:var(--sp3)}
.img-fig{display:flex;flex-direction:column;gap:6px;min-width:0}
.img-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;border:1px solid var(--bd);transition:transform var(--fast)}
.img-fig a:hover img{transform:scale(1.02)}
.img-fig figcaption{font-size:.68rem;color:var(--mt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.img-fig .btn-ocr{font-size:.72rem;padding:6px 8px}

.rec-panel{display:flex;flex-wrap:wrap;gap:var(--sp2);align-items:center;margin-top:var(--sp3);padding:var(--sp3);background:var(--err-bg);border:1px solid var(--err-bd);border-radius:var(--r2)}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--err);animation:pulse 1.1s infinite}
@keyframes pulse{50%{opacity:.25}}
.rec-hint{width:100%;font-size:.72rem}

.prog-box{margin-top:var(--sp3);padding:12px 13px;background:var(--sf-2);border:1px solid var(--bd);border-radius:var(--r2)}
.job-box{background:var(--prb);border-color:var(--brand-200)}
.prog-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp2);font-size:.8rem;margin-bottom:7px}
.up-bar-bg{height:7px;background:var(--bd);border-radius:var(--r-pill);overflow:hidden;margin:6px 0}
.up-bar-fill{height:100%;background:linear-gradient(90deg,var(--brand-600),var(--info));width:0;transition:width .28s var(--ease);border-radius:var(--r-pill)}

.ai-ops{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ai-op{
  padding:9px 7px;font-size:.76rem;border:1.5px solid var(--bd);border-radius:9px;
  background:var(--sf);color:var(--tx-2);text-align:center;line-height:1.55;
  transition:border-color var(--fast),background var(--fast),color var(--fast);
}
.ai-op:hover{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.ai-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3)}
.ai-col-h{font-size:.82rem;margin-bottom:7px;padding:5px 11px;border-radius:var(--r-pill);display:inline-block}
.ai-col-raw{background:var(--warn-bg);color:var(--warn)}
.ai-col-new{background:var(--accent-bg);color:var(--accent)}
.ai-pre{
  background:var(--sf-2);border:1px solid var(--bd);border-radius:10px;padding:12px;
  max-height:320px;overflow:auto;font-size:.82rem;line-height:1.9;
  white-space:pre-wrap;word-break:break-word;
}

.ocr-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--sp4);align-items:start}
.ocr-preview{border:1px solid var(--bd);border-radius:var(--r2);overflow:hidden;background:var(--sf-3)}
.ocr-preview img{width:100%;display:block}
.ocr-textarea{
  width:100%;min-height:270px;background:var(--sf-2);border:1.5px solid var(--bd);
  border-radius:10px;padding:12px;font-size:.86rem;line-height:1.9;resize:vertical;
  color:var(--tx);font-family:inherit;outline:none;
}
.ocr-textarea:focus{border-color:var(--brand-400);box-shadow:var(--ring)}

.raw-box{padding:var(--sp3) 0 0;font-size:.82rem}
.raw-box summary{cursor:pointer;font-weight:600;color:var(--pri);padding:4px 0}
.raw-box pre{white-space:pre-wrap;background:var(--sf-2);border:1px solid var(--bd);padding:12px;border-radius:10px;margin-top:var(--sp2);line-height:1.9;font-family:inherit}
.side-acts-row{display:flex;gap:var(--sp2);flex-wrap:wrap;margin-top:var(--sp3)}

/* Speaker labels inserted by "شناسایی سخنگوها" — clickable in the note body so a guessed label like
   "سخنگو اول" can be renamed to the real person, propagating to every turn tagged with the same id. */
.speaker-tag{
  cursor:pointer;padding:1px 8px;border-radius:var(--r-pill);
  background:var(--accent-bg);color:var(--accent);border:1px dashed var(--accent-bd);
  transition:background var(--fast),border-style var(--fast);
}
.speaker-tag:hover{background:color-mix(in srgb,var(--accent) 18%,var(--accent-bg));border-style:solid}

.more-menu{position:relative;display:inline-block}
.more-menu summary{list-style:none;cursor:pointer}
.more-menu summary::-webkit-details-marker{display:none}
.more-list{
  position:absolute;top:calc(100% + 6px);right:0;background:var(--sf);
  border:1px solid var(--bd);border-radius:var(--r2);box-shadow:var(--s3);
  padding:6px;display:flex;flex-direction:column;min-width:190px;z-index:20;
}
.more-list button,.more-list a{padding:9px 12px;text-align:right;font-size:.82rem;border-radius:8px;transition:background var(--fast);width:100%}
.more-list button:hover,.more-list a:hover{background:var(--sf-3)}
.more-list form{display:contents}

/* Busy overlay */
.busy-overlay{position:fixed;inset:0;z-index:700;background:rgba(8,12,24,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center}
.busy-card{display:flex;align-items:center;gap:var(--sp3);background:var(--sf);border:1px solid var(--bd);border-radius:var(--r2);padding:20px 26px;box-shadow:var(--s3);font-size:.9rem;font-weight:700}
.spinner{width:20px;height:20px;border:2.5px solid var(--bd-2);border-top-color:var(--pri);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   TOASTS
   ============================================================ */
#toasts{position:fixed;bottom:22px;left:22px;z-index:800;display:flex;flex-direction:column;gap:var(--sp2)}
.toast{
  min-width:220px;max-width:min(430px,86vw);padding:12px 16px;border-radius:var(--r2);
  font-size:.86rem;line-height:1.75;box-shadow:var(--s3);
  background:var(--sf);border:1px solid var(--bd);color:var(--tx);
  animation:toastIn .22s var(--ease);
}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}}
.toast.ok{border-inline-start:3px solid var(--ok)}
.toast.err{border-inline-start:3px solid var(--err);background:var(--err-bg);color:var(--err)}
.pi{display:flex;align-items:center;gap:var(--sp2)}
.mobile-tab{display:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .ed-grid{grid-template-columns:minmax(0,1fr) 300px}
}

@media(max-width:900px){
  html{font-size:14.5px}
  .filter-bar{grid-template-columns:1fr 1fr}
  /* minmax(0,1fr), not 1fr: a plain 1fr track still floors at the item's min-content width. */
  .ed-grid,.ai-cols{grid-template-columns:minmax(0,1fr)}
  .topbar-search{display:none}
  .topbar{padding:0 var(--sp3)}
  .brand-sub{display:none}

  .sidebar{
    position:fixed;top:var(--th);right:0;transform:translateX(110%);
    transition:transform var(--med);z-index:250;box-shadow:var(--s3);
  }
  .sidebar.open{transform:none}
  .sidebar-overlay.open{display:block;position:fixed;inset:0;top:var(--th);background:rgba(8,12,24,.45);z-index:200}

  .mobile-tab{
    display:flex;position:fixed;bottom:0;right:0;left:0;z-index:200;
    background:color-mix(in srgb,var(--sf) 92%,transparent);backdrop-filter:blur(12px);
    border-top:1px solid var(--bd);padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-tab a{flex:1;text-align:center;padding:8px 4px;font-size:.74rem;color:var(--mt);border-radius:10px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .mobile-tab a.on{color:var(--pri);font-weight:700;background:var(--prb)}

  .main-wrap{padding:var(--sp3) var(--sp3) 84px}
  .ed-toolbar{overflow-x:auto;flex-wrap:nowrap;position:static;scrollbar-width:none}
  .ed-toolbar::-webkit-scrollbar{display:none}
  .tb-group{flex-shrink:0}
  .ed-surface{padding:20px var(--sp4) 70px}
  .ocr-layout{grid-template-columns:1fr}
  .ocr-preview{max-width:250px}
  #toasts{left:10px;right:10px;bottom:80px}

  /* Comfortable touch targets: everything tappable reaches ~44px on a phone. */
  .rec-btn,.file-btn,.btn-pri,.btn-sec,.btn-danger{min-height:44px}
  .ed-toolbar button{min-height:40px;min-width:40px}
  .si{padding:12px 14px}
  .dtable th,.dtable td{padding:11px 12px}
  .zoom-group .btn-icon-only{width:40px;height:40px}
  .zoom-label{min-height:40px;display:flex;align-items:center;justify-content:center}
  .btn-icon-only{width:44px;height:44px}
  .search-clear{width:30px;height:30px}
  .tag-x{width:22px;height:22px}
  .mx{width:38px;height:38px}
  /* Anchored to the button, so on a narrow screen it must not run off the edge. */
  .more-list{max-width:min(230px,calc(100vw - 28px))}
}

@media(max-width:620px){
  .section-head{align-items:stretch}
  .section-head .btn-pri{width:100%}
  .filter-bar{grid-template-columns:1fr}
  .note-grid{grid-template-columns:1fr}
  .ed-head-acts{width:100%;justify-content:space-between}
  .ed-title{font-size:1.2rem}
  .mcard{max-height:94vh}
  .mfooter{flex-direction:column-reverse}
  .mfooter .btn-pri,.mfooter .btn-sec,.mfooter .btn-danger{width:100%}
  .find-bar{gap:6px}
  .find-bar .search-field{flex-basis:100%}
  .drop-card{padding:32px 24px}
  .tag-editor{flex-direction:column;gap:var(--sp2)}
  .tag-editor-label{padding-top:0}
}

@media(max-width:420px){
  .ai-ops{grid-template-columns:1fr}
  .img-grid{grid-template-columns:1fr}
  .note-acts{flex-direction:column}
  .note-acts .btn-sec,.note-acts .btn-danger{width:100%}
}

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

@media print{
  .topbar,.sidebar,.mobile-tab,.ed-toolbar,.ed-side,.ed-head-acts,.find-bar,.tag-editor,#toasts,.note-acts{display:none!important}
  .app-wrap{padding-top:0}
  .main-wrap{padding:0}
  .ed-main,.card,.note-card{border:none;box-shadow:none}
  .ed-surface{min-height:auto;padding:0}
  body{background:#fff;color:#000}
}