/* =====================================================================
   G2L DESIGN SYSTEM — tokens approved 2026-08-08
   Charcoal + neon lime accent, navy/slate app surfaces, 8px grid.
   ===================================================================== */
:root{
  /* accent (unchanged from the approved brand layer) */
  --acc-500:#C6F432; --acc-400:#D9FF5C; --acc-700:#8FE000; --acc-on:#0A0A0B;
  --acc-soft:rgba(198,244,50,.13); --acc-line:rgba(198,244,50,.42);
  /* navy / slate brand */
  --navy-900:#0B1A24; --navy-800:#0F2634; --navy-700:#14344A; --navy-600:#1B4460;
  /* marketing surfaces */
  --bg:#0E0E10; --bg-2:#141417; --surface:#17171B; --deep:#0A0A0B;
  /* app surfaces */
  --app-bg:#0D1218; --app-surface:#121A22; --app-raised:#17222C;
  /* lines + text */
  --line:#26262B; --line-2:#22303C;
  --fg:#F2F4EE; --fg-2:#A3A8A0; --fg-3:#7E857C;
  /* status */
  --ok:#4ADE80; --warn:#F5B948; --err:#F2555A; --info:#5AB8FF;
  /* metrics */
  --maxw:1240px; --gut:clamp(16px,3vw,28px);
  --side:264px; --side-min:72px; --head:64px;
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;
  --e1:0 1px 2px rgba(0,0,0,.35);
  --e2:0 6px 18px rgba(0,0,0,.28);
  --focus:0 0 0 3px rgba(198,244,50,.22);
  --dur-fast:160ms; --dur:260ms; --dur-slow:720ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  --fa:"Vazirmatn","Inter",system-ui,sans-serif;
  --disp:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
html[dir="rtl"]{--sans:var(--fa)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.in-app{background:var(--app-bg)}
h1,h2,h3,h4,h5{line-height:1.12;letter-spacing:-.02em;font-weight:700}
.disp{font-family:var(--disp);letter-spacing:-.03em;line-height:1.06}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
small{font-size:12.5px}
.mono,.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:400;background:var(--acc-500);
  color:var(--acc-on);padding:12px 18px;border-radius:0 0 var(--r) 0;font-weight:600}
.skip:focus{inset-inline-start:0}
:focus-visible{outline:2px solid var(--acc-500);outline-offset:2px}
.muted{color:var(--fg-2)}
.dim{color:var(--fg-3)}
.tag{display:inline-flex;align-items:center;gap:10px;color:var(--acc-500);margin-block-end:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.tag s{inline-size:28px;block-size:1px;background:currentColor;opacity:.75;text-decoration:none}
.row{display:flex;align-items:center;gap:8px}
.row-b{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.stack{display:grid;gap:8px}
.stack-16{display:grid;gap:16px}
.stack-24{display:grid;gap:24px}
.mt8{margin-block-start:8px}.mt16{margin-block-start:16px}.mt24{margin-block-start:24px}
.mt32{margin-block-start:32px}.mt40{margin-block-start:40px}
.grow{flex:1;min-inline-size:0}
.nowrap{white-space:nowrap}
hr.sep{border:0;border-block-start:1px solid var(--line-2);margin-block:24px}

/* ---------------- BUTTON ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;
  min-block-size:44px;padding:11px 18px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--app-raised);color:var(--fg);cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),transform var(--dur-fast)}
.btn:hover{border-color:var(--acc-line);color:var(--acc-500);transform:translateY(-1px)}
.btn:active{transform:none}
.btn--acc{background:var(--acc-500);border-color:var(--acc-500);color:var(--acc-on)}
.btn--acc:hover{background:var(--acc-400);border-color:var(--acc-400);color:var(--acc-on)}
.btn--ghost{background:transparent}
.btn--quiet{background:transparent;border-color:transparent;color:var(--fg-2)}
.btn--quiet:hover{color:var(--fg);border-color:var(--line-2);transform:none}
.btn--danger{background:transparent;border-color:rgba(242,85,90,.5);color:#FF8B8F}
.btn--danger:hover{background:rgba(242,85,90,.12);border-color:var(--err);color:#FF8B8F}
.btn--sm{min-block-size:36px;padding:8px 13px;font-size:13px}
.btn--lg{min-block-size:52px;padding:15px 26px;font-size:15px}
.btn--block{inline-size:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn .ic{inline-size:16px;block-size:16px;flex:none}
.lnk{display:inline-flex;align-items:center;gap:6px;color:var(--acc-500);font-weight:600;font-size:14px;
  border-block-end:1px solid transparent;transition:border-color var(--dur-fast)}
.lnk:hover{border-block-end-color:var(--acc-500)}

/* ---------------- FORM ---------------- */
.field{display:grid;gap:6px;min-inline-size:0}
.field > label,.lab{font-size:12.5px;font-weight:600;color:var(--fg-2);letter-spacing:.01em}
.hint{font-size:12px;color:var(--fg-3)}
.inp{inline-size:100%;min-block-size:44px;padding:11px 13px;background:#0B1117;color:var(--fg);
  border:1px solid var(--line-2);border-radius:var(--r);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.inp::placeholder{color:var(--fg-3)}
.inp:focus{outline:none;border-color:var(--acc-500);box-shadow:var(--focus)}
.inp[aria-invalid="true"]{border-color:var(--err)}
textarea.inp{min-block-size:112px;resize:vertical;line-height:1.55}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-2) 50%),linear-gradient(135deg,var(--fg-2) 50%,transparent 50%);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;background-position:right 18px center,right 12px center;padding-inline-end:36px}
html[dir="rtl"] select.inp{background-position:left 12px center,left 18px center}
select.inp option{background:var(--app-raised);color:var(--fg)}
.err-msg{display:none;font-size:12px;color:#FF8B8F}
.err-msg.is-on{display:block}
.phone{display:grid;grid-template-columns:104px 1fr;gap:8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--fg-2)}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch i{inline-size:38px;block-size:22px;border-radius:var(--r-full);background:#20303C;border:1px solid var(--line-2);
  position:relative;transition:background var(--dur-fast)}
.switch i::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:14px;block-size:14px;
  border-radius:50%;background:var(--fg-2);transition:transform var(--dur-fast),background var(--dur-fast)}
.switch input:checked + i{background:var(--acc-soft);border-color:var(--acc-line)}
.switch input:checked + i::after{transform:translateX(16px);background:var(--acc-500)}
html[dir="rtl"] .switch input:checked + i::after{transform:translateX(-16px)}
.switch input:focus-visible + i{box-shadow:var(--focus)}
.seg{display:inline-flex;padding:3px;background:var(--app-surface);border:1px solid var(--line-2);border-radius:var(--r)}
.seg button{min-block-size:34px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--fg-2);background:none;
  border:0;border-radius:var(--r-sm);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.seg button[aria-pressed="true"]{background:var(--acc-soft);color:var(--acc-500)}

/* ---------------- SURFACES ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
body.in-app .card,.appcard{background:var(--app-surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px}
.card--pad0{padding:0;overflow:hidden}
.card--hover{transition:border-color var(--dur-fast),transform var(--dur-fast),background var(--dur-fast)}
.card--hover:hover{border-color:var(--acc-line);transform:translateY(-2px)}
.panel{background:var(--app-surface);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.panel__hd{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 20px;border-block-end:1px solid var(--line-2)}
.panel__hd h3{font-size:16px}
.panel__bd{padding:20px}
.panel__ft{padding:14px 20px;border-block-start:1px solid var(--line-2);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1080px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------------- BADGE / CHIP / TRUST ---------------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:600;border:1px solid var(--line-2);color:var(--fg-2);background:rgba(255,255,255,.02)}
.badge .ic{inline-size:13px;block-size:13px}
.badge--verified{color:var(--acc-500);border-color:var(--acc-line);background:var(--acc-soft)}
.badge--ok{color:var(--ok);border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.1)}
.badge--warn{color:var(--warn);border-color:rgba(245,185,72,.4);background:rgba(245,185,72,.1)}
.badge--err{color:#FF8B8F;border-color:rgba(242,85,90,.4);background:rgba(242,85,90,.1)}
.badge--info{color:var(--info);border-color:rgba(90,184,255,.4);background:rgba(90,184,255,.1)}
.badge--spon{color:var(--warn);border-color:rgba(245,185,72,.45);background:rgba(245,185,72,.08)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;font-size:12.5px;color:var(--fg-2);
  background:#15151A;border:1px solid var(--line-2);border-radius:var(--r-full);white-space:nowrap}
body.in-app .chip{background:var(--app-raised)}
.chip--btn{cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast)}
.chip--btn:hover{border-color:var(--acc-line);color:var(--acc-500)}
.chip--btn[aria-pressed="true"]{border-color:var(--acc-line);color:var(--acc-500);background:var(--acc-soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.flag{font-size:14px;line-height:1}
.meter{block-size:6px;background:#22222A;border-radius:var(--r-full);overflow:hidden}
body.in-app .meter{background:#1D2A35}
.meter i{display:block;block-size:100%;inline-size:0;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--acc-500),var(--acc-700));transition:inline-size 1.2s var(--ease)}
.meter--warn i{background:linear-gradient(90deg,var(--warn),#E08C1A)}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.avatar{inline-size:44px;block-size:44px;border-radius:var(--r);background:var(--acc-soft);color:var(--acc-500);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:600;flex:none;
  border:1px solid var(--acc-line)}
.avatar--lg{inline-size:72px;block-size:72px;font-size:18px;border-radius:var(--r-lg)}
.avatar--sm{inline-size:32px;block-size:32px;font-size:11px}

/* ---------------- TABS ---------------- */
.tabs{display:flex;gap:2px;overflow-x:auto;border-block-end:1px solid var(--line-2);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;min-block-size:44px;padding:11px 14px;font-size:13.5px;font-weight:600;
  color:var(--fg-2);background:none;border:0;cursor:pointer;white-space:nowrap;transition:color var(--dur-fast)}
.tabs button::after{content:"";position:absolute;inset-inline:10px;inset-block-end:-1px;block-size:2px;
  background:var(--acc-500);transform:scaleX(0);transition:transform var(--dur-fast) var(--ease)}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-selected="true"]{color:var(--fg)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.tabpanel[hidden]{display:none}

/* ---------------- TABLE ---------------- */
.tablewrap{overflow-x:auto}
table.tbl{inline-size:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{text-align:start;padding:12px 14px;border-block-end:1px solid var(--line-2);vertical-align:middle}
.tbl thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);font-weight:500;white-space:nowrap;background:rgba(255,255,255,.015)}
.tbl tbody tr{transition:background var(--dur-fast)}
.tbl tbody tr:hover{background:rgba(198,244,50,.04)}
.tbl td .row{gap:10px}
.tbl--compact th,.tbl--compact td{padding:8px 12px}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--fg-2)}
.tbl th.sortable[aria-sort]:not([aria-sort="none"]){color:var(--acc-500)}
.tnum{font-family:var(--mono);font-size:12.5px}
.pager{display:flex;align-items:center;gap:6px}
.pager button{min-inline-size:36px;min-block-size:36px;border:1px solid var(--line-2);background:transparent;
  color:var(--fg-2);border-radius:var(--r-sm);cursor:pointer;font-size:13px}
.pager button[aria-current="page"]{border-color:var(--acc-line);color:var(--acc-500);background:var(--acc-soft)}
.pager button[disabled]{opacity:.4;pointer-events:none}

/* ---------------- STATES ---------------- */
.empty{border:1px dashed var(--line-2);border-radius:var(--r-lg);background:#101720;padding:clamp(24px,4vw,44px);
  text-align:center;display:grid;gap:10px;justify-items:center}
.empty .ic{inline-size:30px;block-size:30px;color:var(--fg-3)}
.empty h4{font-size:16px}
.empty p{color:var(--fg-2);font-size:14px;max-width:56ch}
.skel{background:linear-gradient(90deg,#141C24,#1B2732,#141C24);background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;border-radius:var(--r-sm);block-size:12px}
.skel--row{block-size:44px;border-radius:var(--r)}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.state-note{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--app-raised);font-size:13.5px;color:var(--fg-2)}
.state-note--warn{border-color:rgba(245,185,72,.35);background:rgba(245,185,72,.07)}
.state-note--err{border-color:rgba(242,85,90,.35);background:rgba(242,85,90,.07)}
.state-note b{color:var(--fg)}
.lock{position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px;
  background:linear-gradient(180deg,rgba(198,244,50,.05),transparent);display:grid;gap:10px}
.lock .lbl{color:var(--warn)}
.timeline{display:grid;gap:0;position:relative}
.tl{display:grid;grid-template-columns:24px 1fr;gap:14px;padding-block-end:20px;position:relative}
.tl::before{content:"";position:absolute;inset-block:22px 0;inset-inline-start:11px;inline-size:1px;background:var(--line-2)}
.tl:last-child{padding-block-end:0}
.tl:last-child::before{display:none}
.tl__d{inline-size:22px;block-size:22px;border-radius:50%;border:1px solid var(--line-2);background:var(--app-bg);
  display:grid;place-items:center;font-size:10px;color:var(--fg-3);z-index:1}
.tl.is-done .tl__d{border-color:var(--acc-line);background:var(--acc-soft);color:var(--acc-500)}
.tl.is-now .tl__d{border-color:var(--acc-500);background:var(--acc-500);color:var(--acc-on)}
.tl h5{font-size:14px}
.tl p{font-size:13px;color:var(--fg-2)}
.tl time{font-family:var(--mono);font-size:11px;color:var(--fg-3)}

/* ---------------- UPLOADER ---------------- */
.drop{border:1px dashed var(--line-2);border-radius:var(--r-lg);background:#101720;padding:24px;text-align:center;
  display:grid;gap:8px;justify-items:center;transition:border-color var(--dur-fast),background var(--dur-fast)}
.drop.is-over{border-color:var(--acc-500);background:var(--acc-soft)}
.filelist{display:grid;gap:10px}
.file{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--app-raised)}
.file__i{inline-size:34px;block-size:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:rgba(255,255,255,.04);font-family:var(--mono);font-size:9.5px;color:var(--fg-2)}
.file__n{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file__m{font-size:11.5px;color:var(--fg-3);font-family:var(--mono)}
.file .meter{margin-block-start:6px}
.file__a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* ---------------- MODAL / DRAWER ---------------- */
.scrim{position:fixed;inset:0;background:rgba(5,8,11,.72);backdrop-filter:blur(3px);z-index:290;opacity:0;
  pointer-events:none;transition:opacity var(--dur)}
.scrim.is-on{opacity:1;pointer-events:auto}
.modal{position:fixed;z-index:300;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-46%);
  inline-size:min(620px,calc(100vw - 32px));max-block-size:86vh;overflow:auto;background:var(--app-surface);
  border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--e2);opacity:0;pointer-events:none;
  transition:opacity var(--dur),transform var(--dur) var(--ease)}
.modal.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.modal__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;
  border-block-end:1px solid var(--line-2)}
.modal__bd{padding:20px;display:grid;gap:16px}
.modal__ft{padding:16px 20px;border-block-start:1px solid var(--line-2);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.x{inline-size:36px;block-size:36px;display:grid;place-items:center;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:transparent;cursor:pointer;color:var(--fg-2);flex:none}
.x:hover{color:var(--fg);border-color:var(--fg-3)}
.drawer{position:fixed;z-index:300;inset-block:0;inset-inline-end:0;inline-size:min(460px,100vw);
  background:var(--app-surface);border-inline-start:1px solid var(--line-2);box-shadow:var(--e2);
  transform:translateX(100%);transition:transform .34s var(--ease);display:flex;flex-direction:column}
html[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.is-on{transform:none}
.drawer__bd{padding:20px;overflow:auto;display:grid;gap:16px;align-content:start}
.toast{position:fixed;z-index:320;inset-block-end:20px;inset-inline-end:20px;display:grid;gap:8px;max-inline-size:min(380px,calc(100vw - 32px))}
.toast__i{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--app-raised);
  border:1px solid var(--acc-line);border-radius:var(--r);box-shadow:var(--e2);font-size:13.5px;
  animation:tin .3s var(--ease)}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}


/* Integration states inherit the supplied charcoal / lime design. */
[hidden]{display:none!important}.live-error{color:#ffb2a6;white-space:pre-wrap;overflow-wrap:anywhere}
.live-actions,.live-messages{display:flex;gap:8px;flex-wrap:wrap}.live-messages{flex-direction:column;max-height:35vh;overflow:auto;margin-bottom:24px}
.live-product{display:flex;flex-direction:column;gap:16px;min-width:0}.live-product h3{font-size:19px}.live-product p{font-size:14px}
#modalbd form{min-width:0}#modalbd .panel{min-width:0}#modalbd .form-grid{gap:16px}#modalbd{overflow:auto;max-height:68vh}
.spec dd,td{overflow-wrap:anywhere}.live-actions .btn{white-space:normal}.form-grid select[multiple]{min-height:120px}
input[type=checkbox]{accent-color:var(--acc-500)}.btn:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible{outline:2px solid var(--acc-500);outline-offset:4px}
#results>.state-note{grid-column:1/-1}.panel+.panel{margin-top:24px}.panel .live-actions{margin-top:8px}
@media(max-width:600px){.form-grid{grid-template-columns:1fr!important}.pagehd{flex-wrap:wrap}.modal{max-width:calc(100vw - 24px)}.row-b{flex-wrap:wrap;gap:12px}.spec{grid-template-columns:1fr!important}.g3{grid-template-columns:1fr!important}}
/* Grid items must be allowed to shrink so wide tables scroll inside their panels. */
.main,.main>* , .panel,.panel__bd{min-inline-size:0}.tablewrap{max-inline-size:100%;min-inline-size:0;overflow:auto}.tablewrap .tbl{min-inline-size:640px}.tbl td{overflow-wrap:normal}.tbl .badge{white-space:nowrap}.live-actions .btn{white-space:nowrap}
.toast{display:none}.toast.is-on{display:block}.toast__i{align-items:center}.toast__i svg{flex:none}
@media(max-width:960px){#sideopen{display:grid!important}.apphead{gap:8px}.apphead .crumb{font-size:9px}.apphead .cmd{display:none}}

/* SEO shell: breadcrumbs, real images, custom 404. */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block-end:14px;color:var(--fg-3);font-size:12.5px}
.crumbs a{color:var(--fg-2)}
.crumbs [aria-current="page"]{color:var(--fg)}
.logo__img{inline-size:34px;block-size:34px;border-radius:8px;display:block;background:#0A0A0B}
.photo{inline-size:100%;block-size:auto;max-block-size:420px;object-fit:cover;border-radius:12px;background:#101720}
.gal .photo{block-size:100%}
.notfound h1{font-size:clamp(32px,5vw,52px);max-width:16ch}
.view[data-seo-active="1"]{display:block}
.apphead .crumb a{color:var(--fg-2)}

/* Supplied result-card design, backed by live DTOs. */
.rcard__t>span{display:grid;gap:8px;justify-items:center}.rcard__t .photo{inline-size:100%;block-size:100%;object-fit:cover}.live-product .rcard__t{aspect-ratio:16/9}.live-product .meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;margin-block-start:12px;color:var(--fg-2)}

/* Prevent long company names from pushing account controls outside their sidebar. */
.side__co{grid-template-columns:36px minmax(0,1fr) auto!important}.side__co>span:nth-child(2){min-inline-size:0}.side__co .avatar{display:grid;place-items:center;font-family:var(--sans);font-size:11px;color:var(--acc-500)}.form-grid{align-items:start}

/* Keep the mobile menu button inside the viewport instead of clipping it. */
@media(max-width:560px){.tbar__in{gap:8px}.tbar .logo>span>span{display:none}.tbar .logo{gap:8px}.tbar .tacts{gap:4px}.tbar .tacts .btn--sm{font-size:12px;padding-inline:10px}}

/* Images must not set the min-content width of marketplace grid tracks. */
.mk,.mk>*,.results,.results>*,.rcard,.rcard>*{min-inline-size:0;max-inline-size:100%}
.rcard__t{min-inline-size:0;overflow:hidden}.rcard__t .photo{max-inline-size:100%;min-inline-size:0}
@media(max-width:1080px){.mk{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.rcard{grid-template-columns:minmax(0,1fr)}}

/* Supplier directory: share catalogue layout without inheriting panel stack margins. */
.results>.supplier-card{margin-block-start:0}.supplier-card h2 .lnk{font-size:inherit;line-height:1.3}.supplier-card .meta{display:flex;flex-wrap:wrap;gap:8px}.supplier-card .row-b{gap:16px}