/* Residino design system (see .claude/skills/residino-ui). RTL-first, logical properties, light only (white + indigo),
   Estedad self-hosted, transform/opacity-only motion, reduced-motion respected. */
@font-face{font-family:Estedad;font-weight:400;font-display:swap;src:url(fonts/Estedad-Regular.woff2) format("woff2")}
@font-face{font-family:Estedad;font-weight:500;font-display:swap;src:url(fonts/Estedad-Medium.woff2) format("woff2")}
@font-face{font-family:Estedad;font-weight:700;font-display:swap;src:url(fonts/Estedad-Bold.woff2) format("woff2")}
@font-face{font-family:Estedad;font-weight:800;font-display:swap;src:url(fonts/Estedad-ExtraBold.woff2) format("woff2")}
@font-face{font-family:Estedad;font-weight:900;font-display:swap;src:url(fonts/Estedad-Black.woff2) format("woff2")}

:root{
  --ink:#1E1B4B;--muted:#4F4E78;--bg:#F7F7FD;--surface:#FFFFFF;--surface-2:#F7F7FE;
  --line:#E4E5F3;--line-strong:#CFD0EA;
  --brand:#4338CA;--brand-2:#6366F1;--brand-ink:#FFFFFF;--brand-soft:#EEF2FF;--brand-deep:#312E81;
  --saffron:#F5A524;--saffron-soft:#FFF4DE;
  --ok:#15803D;--ok-bg:#ECFDF3;--warn:#B45309;--warn-bg:#FFF7E6;--bad:#DC2626;--bad-bg:#FEF2F2;--info:#4338CA;--info-bg:#EEF2FF;
  --focus:color-mix(in srgb,var(--brand-2) 45%,transparent);
  --radius:20px;--radius-sm:12px;
  --shadow-lift:0 1px 2px rgb(30 27 75/.06),0 12px 32px -12px rgb(67 56 202/.28);
  --ease:cubic-bezier(.2,.8,.2,1);--t1:160ms;--t2:320ms;--t3:640ms;
  --sidebar:252px;
  --grad:linear-gradient(135deg,var(--brand-2),var(--brand) 55%,var(--brand-deep));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.9 Estedad,Tahoma,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
h1,h2,h3{line-height:1.35;margin:0;color:var(--ink)}
h1{font-size:22px;font-weight:800}
h2{font-size:17px;font-weight:700}
h3{font-size:15px;font-weight:700}
p{margin:0}
.num,.tabular{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.muted{color:var(--muted)}
.small{font-size:13px}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
::selection{background:var(--brand-soft);color:var(--ink)}

/* ---- page transitions (cross-document, no JS) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out var(--t2) var(--ease) both}
::view-transition-new(root){animation:vt-in var(--t2) var(--ease) both}
.brand{view-transition-name:brand}
.sidebar{view-transition-name:sidebar}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---- shell ---- */
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--surface);border-inline-end:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:4px;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;padding:4px 8px 16px;color:var(--ink);text-decoration:none!important}
.brand img{width:34px;height:34px}
.nav a{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--ink);font-weight:500;transition:background var(--t1) var(--ease),color var(--t1) var(--ease)}
.nav a:hover{background:var(--surface-2);text-decoration:none}
.nav a.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
.nav a.active::before{content:"";position:absolute;inset-inline-start:-14px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--brand)}
.nav .badge{margin-inline-start:auto}
.nav svg{width:20px;height:20px;flex:none}
.sidebar .foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.main{min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 28px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);position:sticky;top:0;z-index:5}
.topbar .title{font-weight:800;font-size:18px;margin-inline-end:auto}
.content{padding:24px 28px 96px;max-width:1180px}
.mode-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.mode-switch button{border:0;background:transparent;padding:5px 14px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;transition:background var(--t1),color var(--t1)}
.mode-switch button.on{background:var(--brand);color:var(--brand-ink)}
.mode-switch button.on.test{background:var(--saffron);color:#3B2600}
.test-banner{background:var(--saffron-soft);color:var(--warn);text-align:center;padding:6px;font-size:13px;font-weight:700}
.tabbar{display:none}

@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .topbar{padding:12px 16px}
  .content{padding:16px 16px 104px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset-inline:0;bottom:0;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);z-index:10;padding-bottom:env(safe-area-inset-bottom);view-transition-name:tabbar}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;font-size:11px;color:var(--muted)}
  .tabbar a.active{color:var(--brand);font-weight:700}
  .tabbar svg{width:22px;height:22px;transition:transform var(--t1) var(--ease)}
  .tabbar a.active svg{transform:translateY(-2px)}
}

/* ---- building blocks ---- */
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:960px){.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}
@media (max-width:600px){.grid.cols-4{grid-template-columns:1fr}}
html,body{overflow-x:clip}
.btn{max-width:100%}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card.lift,.card.flat{box-shadow:none}
.card.lift{box-shadow:var(--shadow-lift);border-color:transparent}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.stat{position:relative;overflow:hidden}
.stat .label{color:var(--muted);font-size:13px}
.stat .value{font-size:28px;font-weight:900;line-height:1.5;color:var(--ink)}
.stat .hint{font-size:12px;color:var(--muted)}
.stat::after{content:"";position:absolute;inset-inline-end:-24px;top:-24px;width:72px;height:72px;border-radius:50%;background:var(--brand-soft);opacity:.7}
.pill{display:inline-flex;align-items:center;gap:4px;padding:1px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}.pill.info{background:var(--info-bg);color:var(--info)}
.pill.neutral{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.badge{min-width:20px;height:20px;border-radius:999px;background:var(--saffron);color:#3B2600;font-size:11px;display:inline-grid;place-items:center;padding:0 6px;font-weight:800}
.alert{border-radius:var(--radius-sm);padding:12px 14px;font-size:14px}
.alert.ok{background:var(--ok-bg);color:var(--ok)}.alert.warn{background:var(--warn-bg);color:var(--warn)}
.alert.bad{background:var(--bad-bg);color:var(--bad)}.alert.info{background:var(--info-bg);color:var(--info)}
.toast{animation:toast-in var(--t2) var(--ease) both}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.empty{text-align:center;padding:40px 16px;color:var(--muted)}
.empty h3{color:var(--ink);margin-bottom:4px}
.divider{height:1px;background:var(--line);margin:4px 0}

/* ---- buttons & forms ---- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid transparent;font:inherit;font-weight:700;cursor:pointer;background:var(--brand);color:var(--brand-ink);text-decoration:none!important;white-space:nowrap;transition:transform var(--t1) var(--ease),background var(--t1),box-shadow var(--t1)}
.btn:hover{box-shadow:0 8px 20px -8px color-mix(in srgb,var(--brand) 70%,transparent)}
.btn:active{transform:scale(.97)}
.btn::after{content:"";position:absolute;inset-block:0;width:40%;inset-inline-start:-60%;background:linear-gradient(90deg,transparent,rgb(255 255 255/.28),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:hover::after{animation:shine 700ms var(--ease)}
@keyframes shine{to{inset-inline-start:130%}}
.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn.secondary:hover{border-color:var(--brand);box-shadow:none}
.btn.secondary::after,.btn.ghost::after,.btn.danger::after{display:none}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--brand-soft);box-shadow:none}
.btn.danger{background:var(--bad);color:#fff}
.btn.small{min-height:34px;padding:0 12px;font-size:13px;border-radius:10px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
form.inline{display:inline}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:14px}
.field .help{font-size:12px;color:var(--muted)}
.field .error{font-size:12px;color:var(--bad)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=url],input[type=search],input[type=date],select,textarea{
  width:100%;min-height:46px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;transition:border-color var(--t1),box-shadow var(--t1)}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--focus)}
input.ltr,textarea.ltr{direction:ltr;text-align:left}
.check{display:flex;align-items:flex-start;gap:8px;font-size:14px}
.check input{width:18px;height:18px;margin-top:5px;accent-color:var(--brand)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}

/* ---- tables ---- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:start;font-weight:700;color:var(--muted);font-size:12px;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr{transition:background var(--t1)}
tbody tr:hover{background:var(--brand-soft)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filters .field{min-width:150px;flex:1}
.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:12px}

/* ---- special widgets ---- */
.bars{width:100%;height:160px;display:block}
.bars rect{fill:var(--brand);transform-box:fill-box;transform-origin:bottom;transition:fill var(--t1)}
.bars rect:hover{fill:var(--brand-2)}
.reveal-ready .bars rect{transform:scaleY(.02)}
.bars.in rect{transform:none;transition:transform var(--t3) var(--ease)}
.bar-labels{display:grid;grid-template-columns:repeat(14,1fr);font-size:10px;color:var(--muted);text-align:center;margin-top:4px}
@media (max-width:600px){.bar-labels span:nth-child(even){visibility:hidden}}
.bankcard{position:relative;overflow:hidden;border-radius:var(--radius);padding:16px;color:#fff;background:var(--accent,var(--brand));background:linear-gradient(135deg,var(--accent,var(--brand)),color-mix(in srgb,var(--accent,var(--brand)) 55%,#0E0D24));min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.bankcard::after{content:"";position:absolute;inset-inline-end:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgb(255 255 255/.10)}
.bankcard .pan{direction:ltr;text-align:center;font:600 19px ui-monospace,Consolas,monospace;letter-spacing:1px}
.meter{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.meter i{display:block;height:100%;width:0;background:var(--grad);transition:width var(--t3) var(--ease)}
.meter.warn i{background:var(--warn)}.meter.bad i{background:var(--bad)}
.secret{display:flex;gap:8px;align-items:center;background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:12px;padding:10px 12px}
.secret code{direction:ltr;flex:1;overflow-wrap:anywhere;font-size:13px}
.qr{display:grid;place-items:center;background:#fff;border-radius:var(--radius);padding:14px;width:max-content;margin-inline:auto;box-shadow:var(--shadow-lift)}
.qr img{image-rendering:pixelated;width:240px;height:240px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;position:relative}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
.dot.live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;color:var(--ok);animation:ping 1.8s var(--ease) infinite}
@keyframes ping{from{transform:scale(.6);opacity:.9}to{transform:scale(1.6);opacity:0}}
.timeline{display:flex;flex-direction:column}
.timeline .item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.timeline .item .dot{margin-top:9px}
.timeline .item:last-child{border-bottom:0}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(60% 50% at 80% 0%,var(--brand-soft),transparent 70%),var(--bg)}
.auth-grid{width:100%;max-width:440px}
.auth .box{width:100%}
.auth .brand{justify-content:center;padding-bottom:20px;color:var(--ink)}
.auth .brand:hover{text-decoration:none}
.auth .card{box-shadow:var(--shadow-lift);border-color:transparent}
.auth-side{display:none}
/* wide screens: the form sits beside a calm brand panel (one receipt, three facts) */
@media (min-width:900px){
  .auth-grid{max-width:980px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);border-radius:28px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lift)}
  .auth .box{padding:36px 44px 40px}
  .auth .brand{justify-content:flex-start}
  .auth .box .card{padding:0;border:0;box-shadow:none;background:none}
  .auth-side{position:relative;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:48px 44px;overflow:hidden;background:var(--grad);color:#fff}
  .auth-side::after{content:"";position:absolute;inset-inline-start:-90px;bottom:-90px;width:260px;height:260px;border-radius:50%;background:rgb(255 255 255/.08)}
  .auth-side h2{color:#fff;font-size:26px;font-weight:900;line-height:1.5}
  .auth-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .auth-side li{display:flex;align-items:center;gap:8px;color:#E0E7FF;font-weight:700}
  .auth-side li svg{width:18px;height:18px;color:#86EFAC}
  .as-receipt{position:relative;max-width:300px;margin-bottom:14px;padding:14px 18px 20px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 20px 40px -20px rgb(0 0 0/.45)}
  .as-line{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line-strong);font-size:13px}
  .as-line span{color:var(--muted)}
  .as-stamp{position:absolute;inset-inline-end:14px;bottom:-16px;padding:3px 12px;border:3px solid var(--saffron);border-radius:12px;background:#fff;color:#B7791F;font-size:14px;font-weight:900;transform:rotate(-8deg)}
}
.steps-list{counter-reset:s;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps-list li{display:flex;gap:10px;align-items:flex-start}
.steps-list li::before{counter-increment:s;content:counter(s,persian);flex:0 0 28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:13px}
details.more summary{cursor:pointer;color:var(--brand);font-weight:700}
dialog{border:0;border-radius:var(--radius);padding:0;max-width:min(520px,calc(100vw - 32px));background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgb(30 27 75/.45)}

/* ---- scroll reveal (enabled only when JS adds .reveal-ready to <html>) ---- */
.reveal-ready [data-reveal]{opacity:0;transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease);will-change:opacity,transform}
.reveal-ready [data-reveal=""],.reveal-ready [data-reveal=up]{transform:translateY(22px)}
.reveal-ready [data-reveal=scale]{transform:scale(.94)}
.reveal-ready [data-reveal=side]{transform:translateX(-24px)}
.reveal-ready [data-reveal].in{opacity:1;transform:none}
.reveal-ready [data-stagger]>*{opacity:0;transform:translateY(16px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.reveal-ready [data-stagger].in>*{opacity:1;transform:none}
.reveal-ready [data-stagger].in>*:nth-child(2){transition-delay:70ms}
.reveal-ready [data-stagger].in>*:nth-child(3){transition-delay:140ms}
.reveal-ready [data-stagger].in>*:nth-child(4){transition-delay:210ms}
.reveal-ready [data-stagger].in>*:nth-child(5){transition-delay:280ms}
.reveal-ready [data-stagger].in>*:nth-child(6){transition-delay:350ms}
.reveal-ready [data-stagger].in>*:nth-child(7){transition-delay:420ms}
.reveal-ready [data-stagger].in>*:nth-child(8){transition-delay:490ms}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .reveal-ready [data-reveal],.reveal-ready [data-stagger]>*{opacity:1!important;transform:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---- merchant texts editor + live phone preview ---- */
.texts-editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
@media (max-width:900px){.texts-editor{grid-template-columns:1fr}}
.char-count{display:block;font-size:12px;color:var(--muted);text-align:end;margin-top:4px;font-variant-numeric:tabular-nums}
.char-count.near{color:var(--warn)}
button.chip{display:inline-block;padding:2px 12px;border:1px solid transparent;border-radius:999px;background:var(--brand-soft);color:var(--brand);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform var(--t1) var(--ease),border-color var(--t1)}
button.chip:hover{border-color:var(--brand)}
button.chip:active{transform:scale(.94)}
[hidden]{display:none!important}
.color-field{display:flex;gap:8px}
.bank-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c,#64748b);vertical-align:middle}
.color-field input[type=color]{flex:none;width:52px;min-height:46px;padding:4px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);cursor:pointer}
.phone-preview{position:sticky;top:88px;border:8px solid var(--ink);border-radius:32px;background:#fff;padding:14px 12px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-lift);font-size:13px;line-height:1.8}
.pp-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pp-head b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-head span{font-size:11px;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:1px 8px;flex-shrink:0}
.pp-paper{text-align:center;background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:14px;padding:8px}
.pp-paper span{display:block;color:var(--muted);font-size:11px}
.pp-paper strong{font-size:22px;font-weight:900}
.pp-paper small{font-size:12px;color:var(--muted)}
.pp-note{background:var(--brand-soft);color:var(--brand-deep);border-radius:12px;padding:8px 10px;white-space:pre-line}
.pp-label{font-size:11px;color:var(--muted);margin-top:4px}
.pp-ok{display:flex;gap:8px;align-items:flex-start;background:var(--ok-bg);color:var(--ok);border-radius:12px;padding:8px 10px;white-space:pre-line}
.pp-ok i{font-style:normal;font-weight:900}
.pp-bad{background:var(--bad-bg);color:var(--bad);border-radius:12px;padding:8px 10px;white-space:pre-line}
.pp-btn{text-align:center;background:var(--brand);color:#fff;border-radius:12px;padding:8px;font-weight:700}
.phone-preview .is-default{opacity:.62}
.phone-preview .pop{animation:pp-pop var(--t2) var(--ease)}
@keyframes pp-pop{from{transform:scale(.98);opacity:.6}}
@media (max-width:900px){.phone-preview{position:static;max-width:320px;margin-inline:auto}}

.stat.featured{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--shadow-lift)}
.stat.featured .label,.stat.featured .hint{color:#E0E7FF}
.stat.featured .value{color:#fff}
.stat.featured::after{background:rgb(255 255 255/.12)}

/* ---- required fields: a red asterisk after the label of any required control ---- */
.req-star,
.field:has(> input:required) > label::after,
.field:has(> select:required) > label::after,
.field:has(> textarea:required) > label::after,
.field:has(> input:required) > .label-row > label::after,
.field:has(> .pass-wrap > input:required) > label::after,
.field:has(> .pass-wrap > input:required) > .label-row > label::after,
label.check:has(input:required)::after{content:" *";color:var(--bad);font-weight:900}
.req-star::after{content:none}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}

/* ---- show / hide password (button added by app.js) ---- */
.pass-wrap{position:relative}
/* Password text is LTR, so the button sits on the physical right, away from where typing starts. */
.pass-wrap input{padding-right:78px}
.pass-wrap button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:var(--brand-soft);color:var(--brand);border-radius:8px;padding:4px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}

/* ---- plan expiry banner ---- */
.plan-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---- phone tab bar: "more" sheet ---- */
.dot-badge{position:absolute;top:6px;inset-inline-end:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--bad)}
.tabbar a{position:relative}
.tabbar details.more summary{list-style:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;font-size:11px;color:var(--muted);cursor:pointer}
.tabbar details.more summary::-webkit-details-marker{display:none}
.tabbar details.more.active summary,.tabbar details.more[open] summary{color:var(--brand);font-weight:700}
.tabbar details.more summary svg{width:22px;height:22px}
.tabbar .sheet{position:fixed;inset-inline:12px;bottom:calc(70px + env(safe-area-inset-bottom));background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lift);padding:12px;display:flex;flex-direction:column;gap:4px;animation:sheet-in var(--t2) var(--ease)}
.tabbar .sheet-head{display:flex;flex-direction:column;padding:4px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.tabbar .sheet a{flex-direction:row;justify-content:flex-start;gap:12px;font-size:15px;padding:12px 10px;border-radius:12px;color:var(--ink)}
.tabbar .sheet a.active{background:var(--brand-soft);color:var(--brand)}
.tabbar .sheet form{margin-top:6px}
@keyframes sheet-in{from{opacity:0;transform:translateY(12px)}}

/* ---- subscription page ---- */
.plan-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.plan-head h2{font-size:22px;font-weight:900;display:flex;align-items:center;gap:8px}
.days{text-align:center;background:var(--brand-soft);color:var(--brand);border-radius:16px;padding:8px 16px;min-width:92px}
.days strong{display:block;font-size:30px;font-weight:900;line-height:1.2}
.days span{font-size:12px}
.days.low{background:var(--warn-bg);color:var(--warn)}
.usage{display:flex;flex-direction:column;gap:8px}
.usage-row{display:flex;justify-content:space-between;gap:12px}
.price-card{display:flex;flex-direction:column;gap:12px}
.price-card.featured{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box}
.price-line{color:var(--muted)}
.price-line strong{font-size:28px;font-weight:900;color:var(--ink)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.ticks li::before{content:"✓ ";color:var(--brand);font-weight:900}
.price-card form{margin-top:auto}

/* ---- sales links ---- */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg label{display:flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:12px;padding:8px 12px;font-weight:500;cursor:pointer}
.seg label:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:700}
.link-form:has(input[value=fixed]:checked) .open-only,.link-form:has(input[value=open]:checked) .fixed-only{display:none}
.link-body{display:flex;gap:14px;align-items:center}
.link-body .qr{border-radius:12px;border:1px solid var(--line);background:#fff;flex:none}
.link-body .stack{flex:1;min-width:0}
.link-card.off{opacity:.65}
.claim-card{border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
@media (max-width:600px){.link-body{flex-direction:column;align-items:stretch}.link-body .qr{align-self:center}}

/* ---- getting-started checklist ---- */
.setup-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.setup-list li{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:14px}
.setup-list li.next{background:var(--brand-soft)}
.setup-list li > div{flex:1}
.setup-list li a{font-weight:700}
.setup-list li.done a{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.setup-list .mark{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;font-weight:900;font-size:13px;color:#fff;margin-top:2px}
.setup-list li.done .mark{background:var(--ok);border-color:var(--ok)}
.setup-list li.next .mark{border-color:var(--brand)}
/* "get the app" links (templates/panel/_helpers.php ui_app_links) */
.get-app-card{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap}
.get-app-card>div:first-child{flex:1 1 320px;min-width:0}
.get-app-card p{margin-top:4px}
.get-app-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inline-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.inline-links .btn svg,.get-app-actions .btn svg{width:16px;height:16px}

/* ---- support box + admin announcement ---- */
.support-box{display:flex;flex-direction:column;gap:2px;background:var(--brand-soft);border-radius:12px;padding:10px 12px}
.support-box strong{color:var(--brand-deep)}
.panel-notice{white-space:normal}
.alert.info{background:var(--info-bg);color:var(--brand-deep)}

/* ---- admin: sub tabs, switches, CMS ---- */
.admin-tag{display:inline-block;margin-inline-start:6px;font-size:11px;font-weight:700;background:var(--brand-deep);color:#fff;border-radius:999px;padding:0 8px;vertical-align:middle}
.admin .sidebar .brand span{display:flex;align-items:center}
.subtabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}
.subtabs a{padding:8px 14px;border-radius:12px;color:var(--muted);font-weight:700}
.subtabs a:hover{text-decoration:none;background:var(--surface-2)}
.subtabs a.active{background:var(--brand-soft);color:var(--brand)}
.toggles{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line);cursor:pointer}
.toggle-row:last-child{border-bottom:0}
.toggle-row:hover{background:var(--surface-2)}
.toggle-row .txt{display:flex;flex-direction:column;gap:2px}
input.switch{appearance:none;-webkit-appearance:none;flex:none;width:48px;height:28px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;transition:background var(--t2) var(--ease);margin:0;border:0;min-height:0;padding:0}
input.switch::after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(30 27 75/.3);transition:transform var(--t2) var(--ease)}
input.switch:checked{background:var(--brand)}
input.switch:checked::after{transform:translateX(-20px)}
input.switch:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
input.switch:disabled{opacity:.5;cursor:not-allowed}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.checks li{display:flex;flex-direction:column;gap:2px;padding:12px 14px 12px 14px;border-radius:14px;border-inline-start:4px solid var(--ok);background:var(--surface-2)}
.checks li.warn{border-color:var(--warn)}
.checks li span{color:var(--muted);font-size:14px}
.cms{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start}
.cms-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:84px;padding:12px}
.cms-nav b{margin:8px 6px 4px}
.cms-nav a{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px;color:var(--ink)}
.cms-nav a:hover{text-decoration:none;background:var(--surface-2)}
.cms-nav a.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
.cms-nav .dot{width:8px;height:8px}
fieldset.rows{border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin:0;display:flex;flex-direction:column;gap:8px}
fieldset.rows legend{font-weight:800;padding:0 6px}
.row-line{display:flex;align-items:center;gap:8px}
.row-line .n,.record .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:12px;font-weight:800}
.record{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line)}
.record:last-child{border-bottom:0}
.record-fields{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
textarea.mono-fa{font-size:15px;line-height:2}
@media (max-width:900px){.cms{grid-template-columns:1fr}.cms-nav{position:static;flex-direction:row;flex-wrap:wrap}.cms-nav b{width:100%}}
.health-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-radius:16px;padding:12px 16px;background:var(--ok-bg);color:var(--ok)}
.health-strip.degraded{background:var(--warn-bg);color:var(--warn)}
.health-strip.down{background:var(--bad-bg);color:var(--bad)}
.health-strip .parts{display:flex;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
.section-h{font-size:15px;color:var(--muted);margin-top:6px}
.user-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.user-row:last-child{border-bottom:0}
details.inline-more summary{list-style:none;cursor:pointer}
details.inline-more summary::-webkit-details-marker{display:none}
details.inline-more[open]{flex-basis:100%}
.stat .value.small-v{font-size:20px}
.toggle-row.bare{grid-column:1/-1;padding:10px 0;border:0}
.toggle-row.bare:hover{background:none}
.plan-edit.off{opacity:.75}

/* ---- grouped forms ---- */
fieldset.group{border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:0}
fieldset.group legend{font-weight:800;padding:0 6px}
details.group{border:1px dashed var(--line-strong);border-radius:16px;padding:12px 16px}
details.group summary{cursor:pointer;font-weight:800;list-style:none}
details.group summary::-webkit-details-marker{display:none}
details.group summary::before{content:"+ ";color:var(--brand)}
details.group[open] summary::before{content:"− "}
details.group[open] summary{margin-bottom:12px}
[id]{scroll-margin-top:84px}
.confirm-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1 1 100%}
.confirm-form input{flex:1 1 220px;min-height:44px}
.greet h2{font-size:22px;font-weight:900}
.greet p{margin-top:2px}
.record-fields .field:has(textarea){grid-column:1/-1}
code.chip{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font:inherit;font-size:13px;font-weight:700;direction:ltr}

/* support tickets: conversation thread + admin detail (shared by /contact and /admin/tickets) */
.pill.soft{background:var(--brand-soft);color:var(--brand)}
tr.row-attn td{background:color-mix(in srgb,var(--warn) 8%,transparent)}
.ticket-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.msg{max-width:84%;border:1px solid var(--line);border-radius:16px;padding:12px 15px;background:var(--surface)}
.msg.from-user{align-self:flex-start;border-start-start-radius:5px}
.msg.from-admin{align-self:flex-end;background:var(--brand-soft);border-color:transparent;border-start-end-radius:5px}
.msg-who{display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.msg-who time{font-weight:600}
.msg-body{line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere}
.tkt-admin{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media (max-width:900px){.tkt-admin{grid-template-columns:1fr}}
.tkt-subject{font-size:19px;font-weight:900}