/* ============================================================================
 * IRCFG — PWA stylesheet. Mobile-first, RTL, dark.
 * Self-contained on purpose: the app must not inherit user-style.css, whose
 * layout assumes a sidebar and a wide viewport.
 * ==========================================================================*/

@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn[wght].woff2') format('woff2');
}

:root{
  --bg:#05070C;
  --bg-2:#0A0F17;
  --card:#0E1421;
  --card-2:#131B2B;
  --border:#1D2739;
  --border-soft:#161E2C;
  --text:#E6EDF7;
  --text-dim:#7C8AA3;
  --blue:#00A3FF;
  --green:#39FF14;
  --amber:#FFB020;
  --red:#FF4D5E;
  --cyan:#22D3EE;
  --radius:16px;
  --tabh:64px;
  --toph:56px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* A `hidden` element must stay hidden even when a later rule gives it a
   display value. Without this, .sheet-wrap{display:flex} beats the browser
   default, so the sheet overlays the whole app: its backdrop blurs every
   screen and its invisible panel swallows taps meant for the tab bar. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:'Vazirmatn',system-ui,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.7;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}

/* ===================================================================== GATE */
.gate{
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 20px calc(32px + env(safe-area-inset-bottom));gap:26px;
  background:radial-gradient(120% 80% at 50% -10%,rgba(0,163,255,.12),transparent 60%),var(--bg);
}
.gate-brand{text-align:center}
.gate-mark{
  width:56px;height:56px;margin:0 auto 12px;border-radius:16px;
  background:linear-gradient(145deg,var(--blue),#0067A8);
  box-shadow:0 0 0 1px rgba(0,163,255,.35),0 10px 30px rgba(0,163,255,.25);
  position:relative;
}
.gate-mark::after{
  content:'';position:absolute;inset:16px;border-radius:6px;
  border:2px solid rgba(255,255,255,.85);border-bottom-color:transparent;
}
.gate-name{font-size:26px;font-weight:800;letter-spacing:.14em}
.gate-sub{color:var(--text-dim);font-size:12.5px;margin-top:2px}

.gate-card{
  width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 20px;display:flex;flex-direction:column;gap:14px;
}
.gate-card h1{margin:0;font-size:18px;font-weight:700}
.gate-hint{margin:0;color:var(--text-dim);font-size:13px}
.gate-card label{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--text-dim)}
.gate-card input{
  background:var(--bg-2);border:1px solid var(--border);border-radius:11px;
  padding:13px 14px;font-size:16px;outline:none;
}
.gate-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,163,255,.14)}
.otp-box{letter-spacing:.55em;text-align:center;font-size:22px !important;font-weight:700}
.btn-main{
  background:linear-gradient(145deg,var(--blue),#0079C4);border:0;border-radius:11px;
  padding:14px;font-weight:700;font-size:15px;color:#fff;cursor:pointer;
}
.btn-main:active{transform:translateY(1px)}
.btn-ghost{
  background:transparent;border:1px solid var(--border);border-radius:11px;
  padding:11px;color:var(--text-dim);font-size:13.5px;cursor:pointer;
}
.gate-msg{font-size:13px;color:var(--red);text-align:center}
.gate-msg.ok{color:var(--green)}
.gate-foot{color:var(--text-dim);font-size:11.5px;text-align:center;max-width:320px}

/* =================================================================== SHELL */
body.is-app{
  padding-top:calc(var(--toph) + env(safe-area-inset-top));
  padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom));
}
.topbar{
  position:fixed;inset-inline:0;top:0;z-index:40;height:calc(var(--toph) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  display:flex;align-items:center;gap:6px;padding-inline:8px;
  background:rgba(5,7,12,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.tb-title{flex:1;text-align:center;font-weight:700;font-size:16px}
.tb-back,.tb-act{
  width:40px;height:40px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--text-dim);cursor:pointer;border-radius:10px;
}
.tb-back:active,.tb-act:active{background:var(--card-2)}
.tb-back svg,.tb-act svg{width:21px;height:21px}
.tb-act.spin svg{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.screen{padding:14px 14px 22px;min-height:60vh}

.tabbar{
  position:fixed;inset-inline:0;bottom:0;z-index:40;
  height:calc(var(--tabh) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;align-items:stretch;
  background:rgba(5,7,12,.9);backdrop-filter:blur(14px);
  border-top:1px solid var(--border-soft);
}
.tabbar button{
  flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:var(--text-dim);font-size:10.5px;cursor:pointer;
  padding:0;position:relative;
}
.tabbar button svg{width:22px;height:22px;stroke-width:1.8}
.tabbar button.on{color:var(--blue)}
.tabbar button.on::before{
  content:'';position:absolute;top:0;inset-inline:22%;height:2px;border-radius:2px;background:var(--blue);
}

/* ================================================================== PIECES */
.sec-title{
  display:flex;align-items:center;gap:9px;margin:20px 2px 10px;
  font-size:12px;letter-spacing:.06em;color:var(--text-dim);
}
.sec-title::after{content:'';flex:1;height:1px;background:var(--border-soft)}
.sec-title:first-child{margin-top:4px}

.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{
  background:var(--card);border:1px solid var(--border-soft);border-radius:14px;
  padding:13px 14px;position:relative;overflow:hidden;
}
.stat b{display:block;font-size:24px;font-weight:800;line-height:1.25}
.stat span{font-size:11.5px;color:var(--text-dim)}
.stat::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--blue)}
.stat.amber::before{background:var(--amber)} .stat.amber b{color:var(--amber)}
.stat.green::before{background:var(--green)} .stat.green b{color:var(--green)}
.stat.red::before{background:var(--red)}     .stat.red b{color:var(--red)}
.stat.cyan::before{background:var(--cyan)}   .stat.cyan b{color:var(--cyan)}
.stat.blue b{color:var(--blue)}

.card{
  background:var(--card);border:1px solid var(--border-soft);border-radius:14px;
  padding:14px;margin-bottom:10px;display:block;width:100%;text-align:start;
  color:inherit;cursor:pointer;
}
.card:active{background:var(--card-2)}
.card-top{display:flex;align-items:flex-start;gap:9px;margin-bottom:6px}
.card-title{flex:1;font-weight:700;font-size:14.5px;line-height:1.55}
.card-meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--text-dim);font-size:11.5px}
.card-body{color:var(--text-dim);font-size:13px;margin-top:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* my_missions already sorts critical rows to the top; this is what makes that
   ordering legible rather than arbitrary. Matches .m-card.crit on the desktop. */
.card.crit{border-color:rgba(255,77,94,.35);box-shadow:inset 3px 0 0 var(--red)}

.pill{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:600;white-space:nowrap;
  background:rgba(124,138,163,.14);color:var(--text-dim);
}
.pill.blue {background:rgba(0,163,255,.14);color:var(--blue)}
.pill.green{background:rgba(57,255,20,.12);color:var(--green)}
.pill.amber{background:rgba(255,176,32,.14);color:var(--amber)}
.pill.red  {background:rgba(255,77,94,.14);color:var(--red)}
.pill.cyan {background:rgba(34,211,238,.14);color:var(--cyan)}
.dot-new{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;margin-top:6px}

.empty{text-align:center;color:var(--text-dim);font-size:13.5px;padding:44px 20px}
.empty svg{width:42px;height:42px;opacity:.35;margin-bottom:10px;stroke-width:1.4}

.skel{height:74px;border-radius:14px;margin-bottom:10px;
  background:linear-gradient(90deg,var(--card) 25%,var(--card-2) 50%,var(--card) 75%);
  background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}

.fab{
  position:fixed;inset-inline-end:16px;
  bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 16px);z-index:35;
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(145deg,var(--blue),#0079C4);color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,163,255,.35);
}
.fab svg{width:24px;height:24px;stroke-width:2.2}

/* --------------------------------------------------------------- detail */
.detail h2{font-size:17px;margin:0 0 8px;line-height:1.6}
.block{background:var(--card);border:1px solid var(--border-soft);border-radius:14px;padding:14px;margin-bottom:10px}
.block h3{margin:0 0 8px;font-size:12px;color:var(--text-dim);font-weight:600;letter-spacing:.04em}
.block p{margin:0;white-space:pre-wrap;font-size:14px;line-height:1.85}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--text-dim)}
.kv b{font-weight:600;text-align:end}

.msg{margin-bottom:10px;display:flex}
.msg .bub{max-width:86%;padding:11px 13px;border-radius:14px;font-size:14px;white-space:pre-wrap;line-height:1.8}
.msg.me{justify-content:flex-start}
.msg.me .bub{background:rgba(0,163,255,.12);border:1px solid rgba(0,163,255,.25);border-start-start-radius:5px}
.msg.them{justify-content:flex-end}
.msg.them .bub{background:var(--card);border:1px solid var(--border-soft);border-start-end-radius:5px}
.msg .who{font-size:10.5px;color:var(--text-dim);margin-bottom:4px}

.composer{
  position:sticky;bottom:0;display:flex;gap:8px;align-items:flex-end;
  padding:10px 0 4px;background:linear-gradient(transparent,var(--bg) 22%);
}
.composer textarea{
  flex:1;background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:11px 13px;resize:none;max-height:130px;font-size:15px;outline:none;
}
.composer textarea:focus{border-color:var(--blue)}
.composer button{
  width:44px;height:44px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:var(--blue);color:#fff;display:grid;place-items:center;
}
.composer button svg{width:20px;height:20px;stroke-width:2}
.composer button:disabled{opacity:.4}

/* ---------------------------------------------------------------- sheet */
.sheet-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.sheet{
  position:relative;width:100%;max-height:88dvh;overflow:auto;
  background:var(--bg-2);border-top:1px solid var(--border);
  border-radius:20px 20px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));
  animation:up .22s ease-out;
}
@keyframes up{from{transform:translateY(26px);opacity:.4}}
.sheet h2{margin:0 0 14px;font-size:16px}
.sheet label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-dim);margin-bottom:12px}
.sheet input,.sheet textarea,.sheet select{
  background:var(--card);border:1px solid var(--border);border-radius:11px;
  padding:12px 13px;font-size:15px;outline:none;
}
.sheet input:focus,.sheet textarea:focus,.sheet select:focus{border-color:var(--blue)}
.sheet textarea{resize:vertical;min-height:110px}
.sheet .row{display:flex;gap:9px;margin-top:4px}
.sheet .row .btn-main{flex:1}
.sheet .row .btn-ghost{flex:0 0 40%}
.grab{width:38px;height:4px;border-radius:2px;background:var(--border);margin:-6px auto 14px}

/* ---------------------------------------------------------------- toast */
.toast{
  position:fixed;inset-inline:0;bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 14px);
  z-index:80;margin-inline:auto;width:max-content;max-width:88%;
  background:var(--card-2);border:1px solid var(--border);border-radius:12px;
  padding:11px 16px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:up .2s ease-out;
}
.toast.bad{border-color:rgba(255,77,94,.4);color:var(--red)}
.toast.good{border-color:rgba(57,255,20,.3);color:var(--green)}

/* ------------------------------------------------------- install button */
.gate-install{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;max-width:400px;background:transparent;cursor:pointer;
  border:1px solid var(--border);border-radius:12px;padding:12px;
  color:var(--text-dim);font-size:13.5px}
.gate-install:active{background:var(--card)}
.gate-install svg{width:18px;height:18px;color:var(--blue)}

/* A message the install module can show on the gate, where the app's toast
   does not exist yet. */
.install-note{position:fixed;inset-inline:16px;bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:90;margin-inline:auto;max-width:400px;text-align:center;
  background:var(--card-2);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;font-size:13px;line-height:1.8;box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:up .2s ease-out}

/* iOS instructions overlay. Self-contained: the gate has no sheet markup. */
.ios-wrap{position:fixed;inset:0;z-index:95;display:flex;align-items:flex-end}
.ios-back{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}
.ios-card{position:relative;width:100%;max-height:88dvh;overflow:auto;
  background:var(--bg-2);border-top:1px solid var(--border);
  border-radius:20px 20px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));
  animation:up .22s ease-out}
.ios-card h2{margin:0 0 12px;font-size:16.5px}
.ios-note{margin:0 0 14px;font-size:13px;color:var(--text-dim);line-height:1.85}
.ios-steps{margin:0 0 16px;padding-inline-start:20px;font-size:14px;line-height:2.1}
.ios-steps li{margin-bottom:6px}
.ios-ico{display:inline-flex;vertical-align:middle;margin-inline-start:4px;
  width:26px;height:26px;border-radius:7px;background:rgba(0,163,255,.14);
  color:var(--blue);align-items:center;justify-content:center}
.ios-ico svg{width:15px;height:15px}
.ios-close{width:100%;background:linear-gradient(145deg,var(--blue),#0079C4);
  border:0;border-radius:11px;padding:13px;color:#fff;font-weight:700;
  font-size:14.5px;cursor:pointer}

/* ---------------------------------------------------------- install bar */
/* Sits above the tab bar rather than over it, so it never covers navigation. */
.install-bar{position:fixed;inset-inline:12px;z-index:50;
  bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 12px);
  display:flex;align-items:center;gap:10px;
  background:var(--card-2);border:1px solid var(--border);border-radius:14px;
  padding:11px 12px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:up .25s ease-out}
.ib-text{flex:1;display:flex;flex-direction:column;min-width:0}
.ib-text b{font-size:13.5px}
.ib-text span{font-size:11.5px;color:var(--text-dim);line-height:1.6}
.ib-go{flex:none;background:var(--blue);border:0;border-radius:10px;
  padding:9px 16px;color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.ib-x{flex:none;background:none;border:0;color:var(--text-dim);
  font-size:22px;line-height:1;padding:0 4px;cursor:pointer}

/* --------------------------------------------------------- registrations */
/* Status chips scroll sideways rather than wrapping onto a second row, so the
   first result stays above the fold on a small screen. */
.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;
  scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;display:flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--card);border:1px solid var(--border-soft);border-radius:999px;
  padding:8px 13px;font-size:12.5px;color:var(--text-dim);white-space:nowrap}
.chips button.on{border-color:var(--blue);color:var(--blue);background:rgba(0,163,255,.09)}
.chips button i{font-style:normal;font-size:11px;opacity:.75;
  background:var(--bg-2);border-radius:999px;padding:1px 7px}
.chips button.on i{background:rgba(0,163,255,.16)}
/* the mission sort row: a different axis from the status chips, so it carries
   its own label and slightly smaller pills rather than looking like more filters */
.chips.sortchips{align-items:center;margin-bottom:12px}
.chips.sortchips .sortlab{flex:none;font-size:11.5px;color:var(--text-dim);
  opacity:.8;padding-inline-end:2px;white-space:nowrap}
.chips.sortchips button{padding:6px 12px;font-size:12px}

.filt{background:var(--card);border:1px solid var(--border-soft);border-radius:12px;
  margin-bottom:12px;overflow:hidden}
.filt summary{padding:12px 14px;font-size:13px;color:var(--text-dim);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:8px}
.filt summary::-webkit-details-marker{display:none}
.filt summary::after{content:'';margin-inline-start:auto;width:7px;height:7px;
  border-inline-end:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);
  transform:rotate(45deg);transition:transform .2s}
.filt[open] summary::after{transform:rotate(-135deg)}
.filt-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:11px}
.filt-body label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-dim)}
.filt-body select{background:var(--bg-2);border:1px solid var(--border);border-radius:11px;
  padding:11px 12px;font-size:14.5px;color:var(--text);outline:none}
.filt-body select:focus{border-color:var(--blue)}

/* -------------------------------------------------------- deputy console */
/* Console links are amber, matching the desktop sidebar, so an admin action
   never looks like an ordinary member one. */
.linklist button.adm{color:var(--amber);border-color:rgba(255,176,32,.22)}
.linklist button.adm svg{color:var(--amber)}
.search{width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;font-size:15px;outline:none;
  color:var(--text);margin-bottom:12px}
.search:focus{border-color:var(--blue)}
.jobtext{background:var(--bg-2);border-radius:10px;padding:10px 12px;margin-top:9px;
  font-size:13px;line-height:1.8;white-space:pre-wrap;color:var(--text);
  max-height:150px;overflow:auto}
.card .row{display:flex;gap:8px}
.card .row button{flex:1;font-size:12px;padding:9px 6px}

/* ------------------------------------------------------------- referrals */
.reflink{font-size:12.5px;word-break:break-all;text-align:left;
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:10px;
  padding:10px 12px;margin:0;line-height:1.6}
.bar{height:6px;border-radius:3px;background:var(--bg-2);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));
  transition:width .4s ease}
.block .row{display:flex;gap:9px}
.block .row button{flex:1}
.block .row button:disabled{opacity:.45;cursor:not-allowed}

/* ---------------------------------------------------------- report form */
/* Subject-kind switcher on the filing sheet. Two kinds today (person / org),
   but it is built from the list the server sends, so a third would just fit. */
.kind-tabs{display:flex;gap:7px;margin-bottom:12px}
.kind-tabs button{flex:1;background:var(--card);border:1px solid var(--border-soft);
  border-radius:11px;padding:10px 8px;font-size:12.5px;color:var(--text-dim);cursor:pointer}
.kind-tabs button.on{border-color:var(--blue);color:var(--blue);
  background:rgba(0,163,255,.08);font-weight:600}
.ferr{font-size:11.5px;color:var(--red);min-height:0}
.ferr:empty{display:none}
/* Unread answers on my own report cards — the app's echo of «پیام نو» in the
   desktop table. Green because it is the same news the dot already carries. */
.qa-new{color:var(--green)}

/* ------------------------------------------------------------ attachments */
.frow{display:flex;align-items:center;gap:9px;padding:10px 11px;margin-bottom:7px;
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:11px;
  color:var(--text);font-size:13px}
.frow:last-child{margin-bottom:0}
.frow svg{width:17px;height:17px;flex:none;color:var(--blue);stroke-width:1.7}
.frow .fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .fmeta{color:var(--text-dim);font-size:11px;flex:none}
.bub-files{margin-top:6px;max-width:86%}

.form input[type=file],.sheet input[type=file]{padding:10px;font-size:13px}
.fqueue{display:flex;flex-direction:column;gap:5px;margin:-6px 0 12px}
.fq{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;
  color:var(--text-dim);background:var(--card-2);border-radius:8px;padding:6px 10px}
.fq span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Every picker owns its queue, so any single file can be dropped again before
   sending — a mis-tapped gallery pick is the common case on a phone, and
   clearing the whole queue to fix it is a punishment. */
.fq .fq-x{flex:none;background:none;border:0;padding:0 2px;cursor:pointer;
  color:var(--red);font-size:15px;line-height:1}

.composer .clip{width:42px;height:44px;flex:none;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:14px;color:var(--text-dim);cursor:pointer}
.composer .clip svg{width:19px;height:19px;stroke-width:1.8}
.composer .clip:active{background:var(--card-2)}

/* Q&A lives inside a sheet, so the thread scrolls on its own rather than
   pushing the composer below the fold. */
.qa-thread{max-height:46dvh;overflow-y:auto;padding-inline-end:2px}
/* The report conversation is the exception: it sits in a .block on the detail
   screen, not in a sheet, so it needs a little breathing room under it and a
   ceiling low enough to leave the composer visible on a small phone. */
.qa-block .qa-thread{max-height:52dvh;margin-bottom:12px}
.qa-block .msg:last-child{margin-bottom:0}
.qa-block .form{margin-top:2px}
.qa-block .form label:last-child{margin-bottom:8px}

/* ---------------------------------------------------------- profile form */
.form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;
  color:var(--text-dim);margin-bottom:13px}
.form input,.form select,.form textarea{
  background:var(--bg-2);border:1px solid var(--border);border-radius:11px;
  padding:12px 13px;font-size:15px;outline:none;color:var(--text);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--blue)}
.form input:disabled,.form select:disabled,.form textarea:disabled{
  opacity:.6;color:var(--text-dim)}
.form textarea{resize:vertical;min-height:84px;line-height:1.75}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .two label{margin-bottom:13px}
.fhint{font-size:11.5px;color:var(--text-dim);line-height:1.7}
.fhint code{background:var(--card-2);border-radius:6px;padding:2px 6px;
  display:inline-block;font-size:12px}
.mstate{display:flex;align-items:center;gap:8px;font-size:13.5px}

.linklist a,.linklist button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:var(--card);border:1px solid var(--border-soft);border-radius:13px;
  padding:14px;margin-bottom:9px;color:inherit;font-size:14.5px;cursor:pointer;text-align:start;
}
.linklist svg{width:18px;height:18px;color:var(--text-dim);stroke-width:1.8}
.linklist .danger{color:var(--red)}
/* ======================================================= panel parity, ۲ =====
 * The last gaps between this app and the desktop member panel. Everything here
 * exists to carry INFORMATION the panel already showed; where its layout does
 * not survive a narrow screen, the presentation changed and the fact stayed.
 * ==========================================================================*/

/* Mission card tints. The desktop paints .m-card done / overdue / locked; the
   phone gets the same three, kept to a wash plus an edge so a tinted card is
   still readable next to an untinted one. `locked` wins — it is the state that
   stops work, and it dims the card to say so. */
.card.done{background:linear-gradient(rgba(57,255,20,.05),rgba(57,255,20,.05)),var(--card);
  border-color:rgba(57,255,20,.24)}
.card.overdue{background:linear-gradient(rgba(255,77,94,.06),rgba(255,77,94,.06)),var(--card);
  border-color:rgba(255,77,94,.26)}
.card.locked{background:linear-gradient(rgba(255,77,94,.04),rgba(255,77,94,.04)),var(--card);
  border-color:rgba(255,77,94,.2);opacity:.9}
/* the tints above out-rank .card:active by source order, so the press feedback
   has to be restated or a tinted card stops answering the finger */
.card.done:active,.card.overdue:active,.card.locked:active{background:var(--card-2)}

/* The mission code, tappable to copy. It has to look like the value it is, not
   like a button competing with the ones below it. */
.copycode{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:600;
  color:var(--blue);cursor:pointer;direction:ltr;unicode-bidi:isolate}
.copycode:active{color:var(--green)}

/* An interval under its timestamp rather than beside it: at this width the two
   never fit on one line, and the date is the part that must not wrap. */
.kv .tdur{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--blue)}

/* Admin reference attachments. A screenshot is the briefing, so it is shown,
   not linked. Three fit across the narrowest phone and the strip wraps after
   that; tapping one opens the full image through the authenticated proxy. */
.att-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:7px}
.att-thumb{display:block;width:88px;height:68px;border-radius:10px;overflow:hidden;
  border:1px solid var(--border-soft);background:var(--bg-2)}
.att-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.att-thumb:active{border-color:var(--blue)}

/* Progress towards the messaging thresholds. Amber while short of the goal,
   green once both are open — the same signal .bar.short carries on the panel. */
.bar.short i{background:linear-gradient(90deg,var(--amber),#FFD37A)}
.bar-note{margin-top:8px;font-size:12px;color:var(--text-dim);line-height:1.75}

/* Broadcast history counters. Sent, blocked and failed are three different
   outcomes and a single "X از Y" hid all three behind one number. */
.card-meta .ok{color:var(--green)}
.card-meta .bad{color:var(--red)}

/* ===========================================================================
 *  TICKET STATUS CONTROL + SUBMISSION REVIEW
 *  Two capabilities the super admin may hand to a group: tickets.others.status
 *  and missions.others.review. Both controls appear only where the server has
 *  already agreed this session holds the key.
 * =========================================================================*/
.stctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 12px;
  border:1px solid var(--border-soft);border-radius:14px;padding:10px 12px;background:var(--card)}
.stbtn{background:none;border:1px solid var(--border-soft);color:var(--text-dim);border-radius:999px;
  padding:7px 14px;font-size:12.5px;font-family:inherit;cursor:pointer}
.stbtn.on{background:rgba(0,163,255,.14);border-color:rgba(0,163,255,.45);color:var(--blue)}
.stbtn.on.closed{background:rgba(255,77,94,.14);border-color:rgba(255,77,94,.45);color:var(--red)}
.stbtn:disabled{cursor:default}

/* one review row per member, inside the sheet */
.rvrow textarea{width:100%;margin-top:10px;min-height:60px}
.rvrow .row{margin-top:8px}
.rvrow .kv span{font-weight:600;color:var(--text)}