/* =====================================================================
   Certificate Portal — design system
   Brand colours come from <style>:root{--brand;--accent;--on-brand}</style> (Settings → Identity)
   ===================================================================== */
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400;font-style:normal;font-display:swap;src:url("fonts-ui/IBMPlexSansArabic-Regular.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600;font-style:normal;font-display:swap;src:url("fonts-ui/IBMPlexSansArabic-SemiBold.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:700;font-style:normal;font-display:swap;src:url("fonts-ui/IBMPlexSansArabic-Bold.ttf") format("truetype")}

:root{
  --font:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --bg:#f3f6fb; --surface:#fff; --surface-2:#f1f5f9; --ink:#0f172a; --ink-2:#334155; --muted:#64748b;
  --line:#e2e8f0; --line-2:#cbd5e1;
  --brand:#2563eb; --accent:#f97316; --on-brand:#fff; --on-accent:#fff;
  --brand-d:color-mix(in srgb,var(--brand) 80%,#000);
  --brand-l:color-mix(in srgb,var(--brand) 11%,var(--surface));
  --brand-ll:color-mix(in srgb,var(--brand) 5%,var(--surface));
  --brand-t:color-mix(in srgb,var(--brand) 78%,#000);
  --ok:#047857; --okbg:#ecfdf5; --bad:#b91c1c; --badbg:#fef2f2; --warn:#a16207; --warnbg:#fffbeb;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 1px 2px rgba(15,23,42,.05),0 12px 32px rgba(15,23,42,.07);
  --shadow-lg:0 24px 70px rgba(15,23,42,.16);
  --ring:0 0 0 4px color-mix(in srgb,var(--brand) 24%,transparent);
  --r:18px; --r-sm:12px;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0a1120; --surface:#111a2e; --surface-2:#18233b; --ink:#e8eef8; --ink-2:#b6c2d6; --muted:#8a98ae;
  --line:#243049; --line-2:#33425e;
  --brand-l:color-mix(in srgb,var(--brand) 20%,var(--surface));
  --brand-ll:color-mix(in srgb,var(--brand) 10%,var(--surface));
  --brand-t:color-mix(in srgb,var(--brand) 55%,#fff);
  --ok:#34d399; --okbg:#0d2b22; --bad:#f87171; --badbg:#321316; --warn:#fbbf24; --warnbg:#33260b;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px rgba(0,0,0,.35);
  --shadow-lg:0 28px 80px rgba(0,0,0,.55);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0a1120; --surface:#111a2e; --surface-2:#18233b; --ink:#e8eef8; --ink-2:#b6c2d6; --muted:#8a98ae;
    --line:#243049; --line-2:#33425e;
    --brand-l:color-mix(in srgb,var(--brand) 20%,var(--surface));
    --brand-ll:color-mix(in srgb,var(--brand) 10%,var(--surface));
    --brand-t:color-mix(in srgb,var(--brand) 55%,#fff);
    --ok:#34d399; --okbg:#0d2b22; --bad:#f87171; --badbg:#321316; --warn:#fbbf24; --warnbg:#33260b;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px rgba(0,0,0,.35);
    --shadow-lg:0 28px 80px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.7 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--brand-t)}
code{background:var(--surface-2);padding:1px 7px;border-radius:6px;font-size:.88em;border:1px solid var(--line)}
h1,h2,h3{margin:0;line-height:1.3;letter-spacing:-.005em}
h1{font-size:1.65rem;font-weight:700} h2{font-size:1.12rem;font-weight:700} h3{font-size:1rem;font-weight:600}
p{margin:.4em 0}
img{max-width:100%}
.muted{color:var(--muted)} .tiny{font-size:.82rem} .grow{flex:1;min-width:220px}
[hidden]{display:none!important}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:2px;border-radius:8px}

/* icons */
.ic{width:1.2em;height:1.2em;flex:none;vertical-align:-.2em}
.ic.lg{width:1.6em;height:1.6em} .ic.xl{width:2.2em;height:2.2em}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 22px;border-radius:13px;border:1.5px solid transparent;background:var(--brand);color:var(--on-brand);
  font:600 .96rem/1.2 var(--font);cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.14),0 8px 20px color-mix(in srgb,var(--brand) 26%,transparent);
  transition:transform .15s,box-shadow .2s,background .2s,filter .2s,border-color .2s}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn:active{transform:translateY(0);filter:brightness(.97)}
.btn.small{min-height:38px;padding:0 15px;font-size:.86rem;border-radius:11px;box-shadow:none;gap:7px}
.btn.ghost{background:transparent;color:var(--brand-t);border-color:color-mix(in srgb,var(--brand) 38%,var(--line));box-shadow:none}
.btn.ghost:hover{background:var(--brand-l);filter:none}
.btn.soft{background:var(--brand-l);color:var(--brand-t);box-shadow:none}
.btn.accent{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 2px rgba(15,23,42,.14),0 8px 20px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn.danger{background:var(--bad);color:#fff;box-shadow:none}
.btn.block{width:100%}
.btn.lg{min-height:54px;font-size:1.05rem;border-radius:15px;padding:0 28px}
.btn[disabled],.btn.is-loading{opacity:.6;cursor:not-allowed;pointer-events:none;transform:none}
.link{background:none;border:0;color:var(--brand-t);cursor:pointer;font:inherit;padding:0;display:inline-flex;gap:6px;align-items:center}
.iconbtn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:background .15s,border-color .15s}
.iconbtn:hover{background:var(--surface-2);border-color:var(--line-2)}

/* -------------------------------------------------------------- forms */
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;min-height:46px;max-width:100%;transition:border-color .15s,box-shadow .15s,background .15s}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
textarea{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:.88rem;line-height:1.6}
input[type=color]{padding:3px;height:46px;width:76px;cursor:pointer}
input[type=range]{padding:0;width:100%;min-height:30px;accent-color:var(--brand)}
input[type=checkbox],input[type=radio]{min-height:0;accent-color:var(--brand)}
input[type=file]{padding:9px 12px;background:var(--surface-2)}
.form{display:flex;flex-direction:column;gap:16px}
.form>label,.stack label,.lbl{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.92rem;color:var(--ink-2)}
.form input,.form select,.stack input{font-weight:400}
.hintline{font-weight:400;font-size:.8rem;color:var(--muted)}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:10px;margin-top:12px}
label.chk{flex-direction:row!important;align-items:center;gap:10px;font-weight:500!important;color:var(--ink)!important;cursor:pointer}
label.chk input{width:19px;height:19px}
.field{position:relative}
.field>.ic{position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.field input{width:100%;padding-inline-start:46px}
.addgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end;margin:12px 0}
.addgrid label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.88rem;color:var(--ink-2)}

/* ------------------------------------------------- cards / badges / alerts */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:0 0 18px;box-shadow:var(--shadow-sm)}
.card.pad0{padding:0;overflow:hidden}
.card>h2:first-child{margin-bottom:6px}
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rowhead h2{display:flex;align-items:center;gap:10px}
.sec-ic{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--brand-l);color:var(--brand-t)}
.badge{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--ink-2);padding:2px 11px;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid var(--line)}
.badge.ok{background:var(--okbg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.badge.bad{background:var(--badbg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.badge.warn{background:var(--warnbg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 15px;border-radius:13px;margin:12px 0;font-size:.94rem;border:1px solid transparent}
.note>.ic{margin-top:.25em}
.note.ok{background:var(--okbg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 22%,transparent)}
.note.bad{background:var(--badbg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 22%,transparent)}
.note.warn{background:var(--warnbg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.note a{color:inherit;font-weight:600}
.scroll{overflow-x:auto}
.danger-zone{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.danger-zone h2{color:var(--bad)}
details.more{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px}
details.more summary{cursor:pointer;color:var(--brand-t);font-weight:600;list-style:none;display:flex;gap:8px;align-items:center}
details.more summary::-webkit-details-marker{display:none}

/* toasts */
.toasts{position:fixed;inset-block-start:16px;inset-inline:0;display:grid;justify-items:center;gap:10px;z-index:200;pointer-events:none;padding:0 14px}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:520px;padding:12px 18px;border-radius:14px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow-lg);font-weight:600;font-size:.93rem;animation:toastin .35s cubic-bezier(.2,.9,.3,1.2)}
.toast.out{opacity:0;transform:translateY(-12px);transition:.3s}
@keyframes toastin{from{opacity:0;transform:translateY(-16px) scale(.96)}}

/* ------------------------------------------------------------ tables */
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.tbl th{font-size:.78rem;color:var(--muted);font-weight:600;white-space:nowrap;background:var(--surface-2)}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--brand-ll)}
.tbl td.cell-bad{background:var(--badbg);color:var(--bad);font-weight:700}

/* =============================================================== ADMIN SHELL */
.shell{display:grid;grid-template-columns:276px minmax(0,1fr);min-height:100vh}
.side-nav{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:22px 16px;background:var(--surface);border-inline-end:1px solid var(--line);z-index:60}
.brandrow{display:flex;align-items:center;gap:12px;padding:4px 8px 18px;text-decoration:none;color:var(--ink);min-width:0}
.brand-logo{display:block;max-height:84px;max-width:300px;width:auto;object-fit:contain}
@media(max-width:600px){.brand-logo{max-height:64px;max-width:220px}}
.brand-badge{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,var(--accent)));color:var(--on-brand);box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 35%,transparent)}
.brand-badge .ic{width:24px;height:24px}
.brandtxt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.brandtxt b{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brandtxt small{color:var(--muted);font-size:.74rem}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a,.nav button{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;color:var(--ink-2);text-decoration:none;font:500 .95rem/1.2 var(--font);background:none;border:0;cursor:pointer;width:100%;text-align:start;transition:background .15s,color .15s}
.nav a:hover,.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav a.on{background:var(--brand-l);color:var(--brand-t);font-weight:600}
.nav .sep{height:1px;background:var(--line);margin:10px 6px}
.nav small.lbl2{padding:8px 14px 2px;color:var(--muted);font-size:.72rem;font-weight:600;letter-spacing:.04em}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.content{min-width:0}
.page{max-width:1240px;margin:0 auto;padding:30px 28px 60px}
.mobbar{display:none}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.page-head .sub{color:var(--muted);margin-top:4px}
.scrim{display:none}
@media(max-width:960px){
  .shell{grid-template-columns:1fr}
  .side-nav{position:fixed;inset-block:0;inset-inline-start:0;width:288px;height:100dvh;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow-lg)}
  [dir=ltr] .side-nav{transform:translateX(-100%)}
  .side-nav.open{transform:none!important}
  .scrim{position:fixed;inset:0;background:rgba(2,6,23,.5);z-index:55;backdrop-filter:blur(2px)}
  .scrim.show{display:block}
  .mobbar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:50;padding:10px 14px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .mobbar .brandrow{padding:0}
  .page{padding:20px 14px 60px}
}

/* dashboard */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.stat{display:flex;gap:14px;align-items:center;padding:18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.stat .ico{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:var(--brand-l);color:var(--brand-t);flex:none}
.stat .ico .ic{width:24px;height:24px}
.stat .ico.acc{background:color-mix(in srgb,var(--accent) 16%,var(--surface));color:color-mix(in srgb,var(--accent) 80%,var(--ink))}
.stat .ico.ok{background:var(--okbg);color:var(--ok)} .stat .ico.bad{background:var(--badbg);color:var(--bad)}
.stat b{display:block;font-size:1.75rem;line-height:1.1;font-weight:700}
.stat span{color:var(--muted);font-size:.85rem}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.pcard{display:flex;flex-direction:column;border-radius:20px;background:var(--surface);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .25s,border-color .2s;text-decoration:none;color:inherit}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.pthumb{position:relative;aspect-ratio:1.55;background:var(--surface-2) center/cover no-repeat;display:grid;place-items:center;color:var(--muted);border-bottom:1px solid var(--line)}
.pthumb.noimg{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 12px,var(--brand-ll) 12px,var(--brand-ll) 24px)}
.pthumb .st{position:absolute;inset-block-start:10px;inset-inline-start:10px}
.pbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.pbody h3{font-size:1.05rem}
.pmeta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:.84rem}
.pmeta span{display:inline-flex;gap:6px;align-items:center}
.pmeta .bad{color:var(--bad);font-weight:600}
.pnew{border:2px dashed var(--line-2);background:transparent;box-shadow:none;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.pnew:hover{transform:none;box-shadow:none;border-color:var(--brand)}
.empty{text-align:center;padding:36px 16px}
.empty .art{max-width:340px;margin:0 auto 6px;display:block}
.empty h2{font-size:1.3rem;margin-bottom:6px}

/* project */
.phead{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.phead .thumb{width:132px;aspect-ratio:1.45;border-radius:14px;border:1px solid var(--line);background:var(--surface-2) center/cover;flex:none;box-shadow:var(--shadow-sm)}
.phead .info{flex:1;min-width:220px}
.phead .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tabs{display:flex;gap:4px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:16px;width:fit-content;max-width:100%;overflow-x:auto;margin:0 0 20px;box-shadow:var(--shadow-sm)}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;text-decoration:none;color:var(--ink-2);white-space:nowrap;font-weight:500;transition:background .15s,color .15s}
.tabs a:hover{background:var(--surface-2)}
.tabs a.on{background:var(--brand);color:var(--on-brand);font-weight:600;box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 30%,transparent)}
.tabs a.on .badge{background:rgba(255,255,255,.22);color:inherit;border-color:transparent}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters a{padding:7px 16px;border-radius:999px;text-decoration:none;border:1px solid var(--line);color:var(--ink-2);font-weight:500;font-size:.9rem;background:var(--surface)}
.filters a:hover{border-color:var(--line-2)}
.filters a.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.filters a.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.filters a.bad.on{background:var(--bad);color:#fff;border-color:var(--bad)}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.pager a{min-width:38px;text-align:center;padding:6px 11px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink-2);background:var(--surface)}
.pager a.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.addtools{display:flex;gap:8px;flex-wrap:wrap}
#addBox,#fileBox,#importBox,#mapBox,#importResult{margin-top:14px}

/* roster */
.roster td{padding:6px 8px}
.roster input.ed{width:100%;min-width:130px;min-height:38px;padding:6px 10px;border-radius:9px;background:transparent;border-color:transparent}
.roster input.ed:hover{border-color:var(--line)}
.roster input.ed:focus{background:var(--surface);border-color:var(--brand)}
.roster tr.bad{background:var(--badbg)}
.roster tr.bad td:first-child{box-shadow:inset -4px 0 0 var(--bad)}
.roster tr.bad input.name{border-color:var(--bad);border-width:2px;color:var(--bad);font-weight:700;background:var(--surface)}
.roster .why{font-size:.76rem;min-height:1.1em;padding-inline-start:10px}
.roster .why.bad{color:var(--bad);font-weight:700} .roster .why.warn{color:var(--warn)}
.roster td.act{white-space:nowrap} .roster td.act form{display:inline}
.roster input.saving{opacity:.55} .roster input.saved{border-color:var(--ok)!important}

/* designer */
.designer{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
@media(max-width:1020px){.designer{grid-template-columns:1fr}}
.stage{position:relative;width:100%;background:#cbd5e1;border:1px solid var(--line);border-radius:14px;overflow:hidden;direction:ltr;touch-action:none;user-select:none;box-shadow:var(--shadow)}
.stage img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
#boxes{position:absolute;inset:0}
.box{position:absolute;border:2px dashed color-mix(in srgb,var(--brand) 85%,transparent);background:color-mix(in srgb,var(--brand) 9%,transparent);display:flex;align-items:center;cursor:move;border-radius:4px}
.box.sel{border-color:#e11d48;background:rgba(225,29,72,.09)}
.box .t{white-space:nowrap;line-height:1;width:100%;pointer-events:none}
.box .h{position:absolute;width:15px;height:15px;background:#fff;border:2.5px solid #e11d48;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.box .h.se{right:-9px;bottom:-9px;cursor:nwse-resize} .box .h.e{right:-9px;top:calc(50% - 8px);cursor:ew-resize} .box .h.w{left:-9px;top:calc(50% - 8px);cursor:ew-resize}
.hint{font-size:.85rem;color:var(--muted);margin-top:10px}
.side.card{position:sticky;top:16px;margin:0}
.fieldlist{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{border:1.5px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:6px 14px;cursor:pointer;font:500 .86rem var(--font);transition:.15s}
.chip.on{color:var(--ink);border-color:color-mix(in srgb,var(--brand) 55%,var(--line));font-weight:600}
.chip.sel{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.addrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.editor{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.editor label{display:flex;flex-direction:column;gap:5px;font-size:.86rem;font-weight:600;color:var(--ink-2)}
.editor label.chk{font-weight:600!important}
.editor .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px;position:sticky;bottom:0;background:var(--surface);padding:10px 0}

/* brand page */
.brand-grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:20px;align-items:start}
@media(max-width:1060px){.brand-grid{grid-template-columns:1fr}}
.live{position:sticky;top:16px}
.livebox{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow)}
.livebox .lb-top{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.livebox .lb-top .brand-logo{max-height:30px}
.livebox .lb-top .brand-badge{width:34px;height:34px;border-radius:11px}
.livebox .lb-body{position:relative;padding:20px 16px 22px;overflow:hidden}
.livebox .lb-body>*{position:relative}
.lb-blob1,.lb-blob2{position:absolute!important;border-radius:50%;filter:blur(36px);opacity:.5}
.lb-blob1{width:200px;height:200px;background:var(--brand);inset-block-start:-70px;inset-inline-start:-50px}
.lb-blob2{width:180px;height:180px;background:var(--accent);inset-block-end:-70px;inset-inline-end:-40px;opacity:.38}
.lb-card{background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:12px}
.lb-title{font-weight:700;font-size:1.12rem;line-height:1.35}
.lb-line{height:9px;border-radius:5px;background:var(--line);margin:8px 0}
.palettes{display:flex;flex-wrap:wrap;gap:10px}
.pal{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font:500 .86rem var(--font);color:var(--ink);transition:.15s}
.pal:hover{border-color:var(--line-2);transform:translateY(-1px)}
.pal.on{border-color:var(--brand);box-shadow:var(--ring)}
.pal i{display:block;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--c1) 50%,var(--c2) 50%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.bgopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.bgopt{position:relative;cursor:pointer;display:block}
.bgopt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;z-index:2}
.bgopt .prev{height:76px;border-radius:14px;border:2px solid var(--line);position:relative;overflow:hidden;background:var(--bg);transition:.15s}
.bgopt span.nm{display:block;text-align:center;margin-top:7px;font-weight:600;font-size:.84rem}
.bgopt input:checked ~ .prev{border-color:var(--brand);box-shadow:var(--ring)}
.bgopt input:focus-visible ~ .prev{box-shadow:var(--ring)}
.prev.aurora{background:radial-gradient(circle at 20% 30%,color-mix(in srgb,var(--brand) 70%,transparent),transparent 55%),radial-gradient(circle at 85% 80%,color-mix(in srgb,var(--accent) 65%,transparent),transparent 55%),var(--bg)}
.prev.geo{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 18%,var(--bg)),var(--bg));}
.prev.geo::after{content:"";position:absolute;inset:0;background:var(--brand);opacity:.28;-webkit-mask:var(--hexmask);mask:var(--hexmask)}
.prev.waves{background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--brand) 12%,var(--bg)))}
.prev.waves::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:var(--brand);opacity:.35;-webkit-mask:var(--wavemask) bottom/cover no-repeat;mask:var(--wavemask) bottom/cover no-repeat}
.prev.plain{background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 8%,var(--bg)),var(--bg))}
.drop{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:16px;border:2px dashed var(--line-2);border-radius:16px;background:var(--brand-ll)}
.drop .pv{width:120px;height:72px;border-radius:12px;display:grid;place-items:center;background:
  conic-gradient(#e2e8f0 25%,#fff 0 50%,#e2e8f0 0 75%,#fff 0) 0 0/14px 14px;border:1px solid var(--line);overflow:hidden;flex:none}
.drop .pv img{max-width:100%;max-height:100%;object-fit:contain}
.drop .pv.bgpv{background-size:cover;background-position:center}
.drop .meta{flex:1;min-width:200px}

/* ================================================================ AUTH */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.auth-art{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:36px 44px;color:#fff;
  background:linear-gradient(150deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#000))}
.auth-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 45%),radial-gradient(circle at 10% 95%,rgba(255,255,255,.18),transparent 45%)}
.auth-art>*{position:relative}
.auth-art .brand-logo{max-height:52px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))}
.auth-art .brand-badge{background:rgba(255,255,255,.18);box-shadow:none}
.auth-art h2{font-size:1.9rem;line-height:1.3;margin:14px 0 8px}
.auth-art p{opacity:.88;max-width:420px}
.auth-art .art{max-width:420px;width:100%;margin:10px auto 0;display:block;filter:drop-shadow(0 20px 40px rgba(0,0,0,.25))}
.auth-form{display:flex;align-items:center;justify-content:center;padding:32px 22px;background:var(--bg)}
.auth-box{width:100%;max-width:410px}
.auth-box h1{font-size:1.6rem;margin-bottom:4px}
@media(max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-art{padding:22px 22px 8px;min-height:0}
  .auth-art .art,.auth-art p{display:none}
  .auth-art h2{font-size:1.25rem;margin:8px 0 0}
}
.checks{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px}
.checks li{display:flex;gap:8px;align-items:center;font-size:.92rem}
.checks li.ok{color:var(--ok)} .checks li.bad{color:var(--bad)}

/* =============================================================== PUBLIC */
body.public{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 7%,var(--bg)),var(--bg) 70%)}
.bgfx::before,.bgfx::after{content:"";position:absolute}
.bg-aurora .bgfx::before{width:62vmax;height:62vmax;border-radius:50%;inset-inline-start:-18vmax;top:-26vmax;background:radial-gradient(circle,var(--brand),transparent 65%);filter:blur(60px);opacity:.42;animation:drift 24s ease-in-out infinite alternate}
.bg-aurora .bgfx::after{width:56vmax;height:56vmax;border-radius:50%;inset-inline-end:-20vmax;bottom:-28vmax;background:radial-gradient(circle,var(--accent),transparent 65%);filter:blur(60px);opacity:.30;animation:drift 30s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}
.bg-geo .bgfx::before{inset:0;background:var(--brand);opacity:.09;-webkit-mask:var(--hexmask);mask:var(--hexmask)}
.bg-geo .bgfx::after{inset:0;background:radial-gradient(circle at 80% 8%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 40%),radial-gradient(circle at 5% 90%,color-mix(in srgb,var(--brand) 25%,transparent),transparent 45%)}
.bg-waves .bgfx::before{inset:auto 0 0 0;height:55vh;background:var(--brand);opacity:.10;-webkit-mask:var(--wavemask) bottom/cover no-repeat;mask:var(--wavemask) bottom/cover no-repeat}
.bg-waves .bgfx::after{inset:auto 0 0 0;height:38vh;background:var(--accent);opacity:.12;-webkit-mask:var(--wavemask) bottom/cover no-repeat;mask:var(--wavemask) bottom/cover no-repeat;transform:scaleX(-1)}
.bg-plain .bgfx::before{inset:0;background:radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 55%)}
.bgfx.img{background:var(--bg) center/cover no-repeat}
.bgfx.img::before{inset:0;width:auto;height:auto;border-radius:0;filter:none;opacity:1;-webkit-mask:none;mask:none;animation:none;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 62%,#020617 38%),color-mix(in srgb,var(--bg) 55%,transparent 45%))}
.bgfx.img::after{display:none}
:root{
  --hexmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E");
  --wavemask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 220C180 120 320 120 520 190S900 300 1100 220 1340 120 1440 170V400H0Z'/%3E%3C/svg%3E");
}
.wrap-pub{width:100%;max-width:1140px;margin:0 auto;padding:0 22px}
.pub-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 0}
.pub-top .brandrow{padding:0}
.pub-tools{display:flex;gap:8px;align-items:center}
.pub-main{flex:1;padding-bottom:30px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:36px;align-items:center;padding:20px 0 10px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--brand-l);color:var(--brand-t);font-weight:600;font-size:.85rem;border:1px solid color-mix(in srgb,var(--brand) 20%,transparent)}
.hero-title{font-size:clamp(1.9rem,4.4vw,3.15rem);line-height:1.22;font-weight:700;margin:16px 0 12px;letter-spacing:-.01em}
.hero-title em{font-style:normal;background:linear-gradient(90deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{font-size:1.1rem;color:var(--ink-2);max-width:520px}
.hero-art{display:flex;justify-content:center}
.hero-art .art{width:100%;max-width:520px;height:auto;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-10px)}}
.a-blob1{fill:var(--brand);opacity:.14} .a-blob2{fill:var(--accent);opacity:.2}
.a-paper{fill:var(--surface)} .a-paper2{fill:var(--brand-l);stroke:var(--line);stroke-width:1.5}
.a-frame{fill:none;stroke:var(--line-2);stroke-width:2;stroke-dasharray:5 6}
.a-line{fill:var(--line)} .a-line2{fill:var(--line-2)} .a-chip{fill:var(--surface)}
.a-sig{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.a-ring{fill:none;stroke:var(--brand);stroke-width:4;opacity:.7} .a-plus{stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.a-float1{animation:floaty 9s ease-in-out infinite reverse} .a-float2{animation:floaty 6s ease-in-out infinite}
.finder{position:relative;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:26px;padding:28px;box-shadow:var(--shadow-lg)}
.finder h2{font-size:1.25rem;display:flex;gap:10px;align-items:center}
.finder .sub{color:var(--muted);font-size:.92rem;margin:4px 0 18px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--surface-2);border-radius:15px;margin-bottom:6px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px;border-radius:12px;font-weight:600;font-size:.93rem;color:var(--muted);transition:.18s}
.seg input:checked + span{background:var(--surface);color:var(--brand-t);box-shadow:0 2px 8px rgba(15,23,42,.12)}
.seg input:focus-visible + span{box-shadow:var(--ring)}
.finder .form{gap:14px}
.finder .field input{min-height:52px;font-size:1.02rem}
.finder .go{margin-top:4px}
.secure{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:.8rem;margin-top:14px}
.results{margin-top:30px}
.results-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.results-head h2{font-size:1.35rem}
.hello{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--okbg);color:var(--ok);font-weight:600;font-size:.9rem}
.rlist{display:grid;gap:16px}
.rcard{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;padding:16px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.rcard:nth-child(2){animation-delay:.08s}.rcard:nth-child(3){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.rthumb{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1.414;background:var(--surface-2);box-shadow:var(--shadow-sm)}
.rthumb::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--brand) 12%,transparent) 50%,transparent 70%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.rthumb img{position:relative;width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.rthumb:hover img{transform:scale(1.03)}
.rthumb .zoom{position:absolute;inset-block-end:8px;inset-inline-end:8px;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(15,23,42,.65);color:#fff}
@keyframes shimmer{to{background-position:-200% 0}}
.rbody{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
.rtitle{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;font-size:.9rem}
.rname{font-size:1.45rem;font-weight:700;direction:ltr;unicode-bidi:plaintext;text-align:start;overflow-wrap:anywhere;line-height:1.3}
.rbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.rhelp{font-size:.82rem;color:var(--muted);display:flex;gap:6px;align-items:center}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px}
.step{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:18px;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);backdrop-filter:blur(6px)}
.step .n{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--brand-l);color:var(--brand-t);flex:none}
.step b{display:block;font-size:.98rem} .step span{color:var(--muted);font-size:.86rem}
.pub-foot{padding:22px 0 30px;text-align:center;color:var(--muted);font-size:.84rem}
.pub-foot .row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
body.public .bgfx.img ~ .wrap-pub .hero-title,body.has-bgimg .hero-title{color:#fff}
body.has-bgimg .hero-lead,body.has-bgimg .pub-foot{color:rgba(255,255,255,.88)}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:14px;padding-top:4px}
  .hero-art{order:-1;margin-bottom:-26px}
  .hero-art .art{max-width:300px}
  .steps{grid-template-columns:1fr}
  .rcard{grid-template-columns:1fr}
  .finder{padding:20px;border-radius:22px}
}
@media(max-width:560px){
  .wrap-pub{padding:0 14px}
  .btn:not(.small):not(.lg){width:auto}
  .rbtns .btn{flex:1}
}
@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{.side-nav,.mobbar,.toasts{display:none!important}}

/* theme toggle icons */
.th-sun{display:none} .th-moon{display:inline-block}
:root[data-theme=dark] .th-sun{display:inline-block} :root[data-theme=dark] .th-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .th-sun{display:inline-block}
  :root:not([data-theme=light]) .th-moon{display:none}
}

.visually{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* refinements */
.finder{max-width:700px;margin-inline:auto}
.results{max-width:960px;margin-inline:auto}
.steps{max-width:960px;margin-inline:auto}
[dir=rtl] .rname{text-align:right}
.bg-geo .bgfx::before{opacity:.065}

/* ltr fields: icon on the left like the text */
.field.ltr>.ic{inset-inline-start:auto;left:15px;right:auto}
.field.ltr input{padding-left:46px;padding-right:14px}
@media(max-width:560px){
  .hero{padding-top:0}
  .hero-art{margin-bottom:-40px}
  .hero-art .art{max-width:190px}
  .hero-title{font-size:1.7rem;margin:12px 0 8px}
  .hero-lead{font-size:.98rem}
  .eyebrow{font-size:.78rem}
  .pub-top{padding:14px 0}
}
.auth-art .brand-logo{background:rgba(255,255,255,.96);padding:9px 14px;border-radius:14px;max-height:64px}