/* =========================================================================
   Congif design system
   Pink & white, premium, international. Mobile-first, dark-mode aware, RTL safe.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  --brand:#E6197F;
  --brand-dark:#FF4DA0;
  --accent:#7A1E4F;

  --brand-50:#FFF1F7;
  --brand-100:#FFE0EE;
  --brand-200:#FFC2DD;
  --brand-300:#FF94C3;
  --brand-500:var(--brand);
  --brand-600:#C4126A;
  --brand-700:#9C0E54;

  --bg:#FFFFFF;
  --bg-soft:#FDF7FA;
  --bg-tint:#FFF1F7;
  --surface:#FFFFFF;
  --surface-2:#FBF6F9;
  --surface-3:#F5EDF2;
  --text:#160910;
  --text-2:#4A3B43;
  --muted:#7A6A73;
  --border:#EFE1E9;
  --border-strong:#E2CFDA;

  --success:#0E8F58;
  --success-bg:#E7F7F0;
  --warning:#B77400;
  --warning-bg:#FFF6E5;
  --danger:#D2213B;
  --danger-bg:#FDECEF;
  --info:#1E63C8;
  --info-bg:#EAF1FD;

  --gradient:linear-gradient(135deg,var(--brand) 0%,#FF6FB0 45%,var(--accent) 100%);
  --gradient-soft:linear-gradient(135deg,#FFF1F7 0%,#FFE7F2 100%);

  --radius-xs:8px;
  --radius-sm:12px;
  --radius:16px;
  --radius-lg:22px;
  --radius-xl:30px;
  --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(22,9,16,.06);
  --shadow-sm:0 2px 10px rgba(22,9,16,.06);
  --shadow:0 8px 28px rgba(22,9,16,.09);
  --shadow-lg:0 20px 60px rgba(22,9,16,.14);
  --shadow-brand:0 10px 30px rgba(230,25,127,.28);

  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  --header-h:64px;
  --bottomnav-h:64px;
  --wrap:1220px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html[data-theme="dark"]{
  --bg:#0C070A;
  --bg-soft:#120B10;
  --bg-tint:#1A0F16;
  --surface:#150D12;
  --surface-2:#1D1219;
  --surface-3:#261720;
  --text:#F9F1F5;
  --text-2:#D6C4CE;
  --muted:#A38F9B;
  --border:#2C1B24;
  --border-strong:#3C2531;

  --brand-50:#2A101C;
  --brand-100:#3A1526;
  --brand-200:#4C1B31;
  --brand-500:var(--brand-dark);
  --brand-600:#FF6FB2;

  --success:#3FD494;--success-bg:#0F2B20;
  --warning:#F0B44A;--warning-bg:#2E2110;
  --danger:#FF7189;--danger-bg:#2E1219;
  --info:#79ADFF;--info-bg:#111F35;

  --gradient:linear-gradient(135deg,#FF2E90 0%,#C4126A 50%,#5B1339 100%);
  --gradient-soft:linear-gradient(135deg,#1E1018 0%,#2A1420 100%);

  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 2px 10px rgba(0,0,0,.45);
  --shadow:0 10px 32px rgba(0,0,0,.55);
  --shadow-lg:0 24px 70px rgba(0,0,0,.65);
  --shadow-brand:0 10px 30px rgba(255,77,160,.22);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600)}
h1,h2,h3,h4,h5{margin:0 0 .5em;line-height:1.2;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(1.75rem,5vw,3rem)}
h2{font-size:clamp(1.35rem,3.4vw,2.1rem)}
h3{font-size:clamp(1.1rem,2.4vw,1.4rem)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-inline-start:1.25em}
hr{border:0;border-top:1px solid var(--border);margin:24px 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--surface-3);padding:2px 6px;border-radius:6px}
::selection{background:var(--brand-200);color:var(--text)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;z-index:999}
.skip-link:focus{left:8px;top:8px}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 16px}
.wrap-narrow{max-width:760px}
.wrap-mid{max-width:960px}
.section{padding:36px 0}
.section-sm{padding:22px 0}
.section-lg{padding:56px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px}
.section-head h2{margin:0}
.section-head .eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:6px}
.section-head p{margin:4px 0 0;color:var(--muted);font-size:.92rem}
/* On a narrow screen the heading text and the 'view all' link fight over
   the same row and both end up ragged; stack them instead. */
@media (max-width:600px){
  .section-head{flex-direction:column;align-items:flex-start;gap:8px}
  .section-head .section-link{align-self:flex-start}
}
.section-link{flex-shrink:0;font-weight:700;font-size:.86rem;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row-tight{gap:6px}
.row-between{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.spacer{flex:1}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.text-small{font-size:.85rem}
.text-xs{font-size:.76rem}
.text-brand{color:var(--brand)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.text-warning{color:var(--warning)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.w-full{width:100%}

/* ---------- Icons ---------- */
/* The reset blockifies every svg; icons must flow with the text they sit in.
   Inside a flex or grid parent the used display is blockified again, so the
   hundreds of icons that live in .btn / .badge / .icon-btn are unaffected. */
.icon{flex-shrink:0;vertical-align:middle;display:inline-block}
.icon-inline{display:inline-block;vertical-align:-.15em}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--radius-pill);font-weight:700;font-size:.9rem;
  border:1px solid transparent;transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s,color .16s,border-color .16s;
  line-height:1.2;text-align:center;position:relative;max-width:100%;
  white-space:normal;overflow-wrap:anywhere;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
.btn-primary{background:var(--gradient);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{color:#fff;filter:brightness(1.06)}
.btn-solid{background:var(--brand);color:#fff}
.btn-solid:hover{background:var(--brand-600);color:#fff}
.btn-dark{background:var(--text);color:var(--bg)}
.btn-dark:hover{color:var(--bg);opacity:.9}
.btn-outline{border-color:var(--border-strong);color:var(--text);background:var(--surface)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
/* Outline button sitting on a coloured panel: the default white fill would
   swallow white label text. */
.btn-on-dark,.btn-on-dark:hover{background:transparent;color:#fff}
.btn-on-dark{border-color:rgba(255,255,255,.55)}
.btn-on-dark:hover{background:rgba(255,255,255,.16);border-color:#fff}
.btn-ghost{color:var(--text-2);background:transparent}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-soft{background:var(--brand-50);color:var(--brand-600);border-color:transparent}
.btn-soft:hover{background:var(--brand-100);color:var(--brand-700)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{color:#fff;filter:brightness(1.05)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{color:#fff;filter:brightness(1.05)}
.btn-sm{padding:7px 14px;font-size:.8rem}
.btn-xs{padding:5px 10px;font-size:.74rem;gap:4px}
.btn-lg{padding:15px 30px;font-size:1rem}
.btn-block{display:flex;width:100%}
.btn-icon{padding:9px;border-radius:50%;aspect-ratio:1}

/* Reusable compact action buttons.
   Use these for the small icon+label controls that sit on a profile, a card or
   a table row — "Message", "Share", "Edit", "Follow" — where a full-size .btn
   is too heavy. Combine with any colour variant:

       <a class="btn btn-outline btn-action">{% icon "message" 15 %} Message</a>
       <button class="btn btn-soft btn-action-sm">{% icon "share" 14 %} Share</button>

   .btn-action    ~34px tall, the default size for a row of profile actions.
   .btn-action-sm ~28px tall, for dense rows and card footers.
   Both keep the label on one line, shrink to fit a narrow phone and are
   declared after the .btn size classes so they win when they are combined. */
.btn-action{
  padding:6px 14px;font-size:.82rem;gap:6px;min-height:34px;
  white-space:nowrap;overflow:hidden;flex:0 1 auto;min-width:0;
}
.btn-action-sm{
  padding:4px 11px;font-size:.76rem;gap:5px;min-height:28px;
  white-space:nowrap;overflow:hidden;flex:0 1 auto;min-width:0;
}
.btn-action .icon,.btn-action-sm .icon{margin-inline-start:-2px}
.btn-action.btn-icon,.btn-action-sm.btn-icon{padding:0;width:34px;min-width:34px}
.btn-action-sm.btn-icon{width:28px;min-width:28px}
.btn-loading{color:transparent !important;pointer-events:none}
.btn-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
.btn-outline.btn-loading::after,.btn-ghost.btn-loading::after,.btn-soft.btn-loading::after{
  border-color:rgba(230,25,127,.3);border-top-color:var(--brand);
}
@keyframes spin{to{transform:rotate(360deg)}}

.btn-group{display:inline-flex;background:var(--surface-2);padding:4px;border-radius:var(--radius-pill);gap:2px}
.btn-group .btn{border-radius:var(--radius-pill);padding:8px 16px;font-size:.82rem}
.btn-group .btn.active{background:var(--surface);box-shadow:var(--shadow-xs);color:var(--brand)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-xs);overflow:hidden}
.card-pad{padding:18px}
.card-hover{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
.card-head h3{margin:0;font-size:1rem}
.card-body{padding:18px}
.card-foot{padding:14px 18px;border-top:1px solid var(--border);background:var(--surface-2)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px}

/* ---------- Badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--radius-pill);font-size:.72rem;font-weight:700;letter-spacing:.02em}
.badge-brand{background:var(--brand-50);color:var(--brand-600)}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-muted{background:var(--surface-3);color:var(--muted)}
.badge-dark{background:var(--text);color:var(--bg)}
.badge-gold{background:linear-gradient(135deg,#F6C445,#D99C10);color:#3B2800}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--border);font-size:.8rem;font-weight:600;color:var(--text-2);transition:.16s}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-ms-overflow-style:none;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}

.verified-tick{display:inline-flex;color:#1D9BF0;vertical-align:-.15em;margin-inline-start:3px}
html[data-theme="dark"] .verified-tick{color:#4EB8FF}
.trust-score{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:.8rem;color:var(--success)}

/* ---------- Avatars ---------- */
.avatar{width:var(--sz,40px);height:var(--sz,40px);border-radius:50%;object-fit:cover;background:var(--surface-3);flex-shrink:0;display:inline-block}
.avatar-fallback{
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;
  font-size:calc(var(--sz,40px)*.38);letter-spacing:.02em;
  background:linear-gradient(135deg,hsl(var(--hue,330) 72% 58%),hsl(calc(var(--hue,330) + 40) 68% 44%));
}
.avatar-ring{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand)}
.avatar-stack{display:flex}
.avatar-stack .avatar{margin-inline-start:-10px;box-shadow:0 0 0 2px var(--surface)}
.avatar-stack .avatar:first-child{margin-inline-start:0}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.label{display:block;font-size:.82rem;font-weight:700;margin-bottom:6px;color:var(--text-2)}
.label .req{color:var(--danger)}
.input,.select,.textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);font-size:.92rem;transition:border-color .16s,box-shadow .16s,background .16s;
  appearance:none;
}
.input::placeholder,.textarea::placeholder{color:var(--muted);opacity:.75}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-50)}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--surface-3);cursor:not-allowed;opacity:.75}
.textarea{min-height:120px;resize:vertical;line-height:1.6}
.select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A6A73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-inline-end:38px;
}
html[dir="rtl"] .select{background-position:left 12px center}
html[data-theme="dark"] .select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A38F9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
.input.is-valid{border-color:var(--success)}
.input.is-invalid{border-color:var(--danger)}
.help{display:block;font-size:.76rem;color:var(--muted);margin-top:5px}
.help .icon{margin-inline-end:4px}
.field-error{display:block;font-size:.78rem;color:var(--danger);margin-top:5px;font-weight:600;min-height:0}
.field-ok{display:block;font-size:.78rem;color:var(--success);margin-top:5px;font-weight:600}
.input-group{position:relative;display:flex;align-items:stretch}
.input-group .input{padding-inline-end:44px}
.input-affix{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;color:var(--muted);padding:6px;border-radius:8px}
.input-affix:hover{color:var(--brand);background:var(--surface-2)}
.input-prefix{display:flex;align-items:center;padding:0 12px;background:var(--surface-2);border:1.5px solid var(--border);border-inline-end:0;border-start-start-radius:var(--radius-sm);border-end-start-radius:var(--radius-sm);font-weight:700;font-size:.88rem;color:var(--text-2);white-space:nowrap}
.input-prefix + .input{border-start-start-radius:0;border-end-start-radius:0}
.form-grid{display:grid;gap:0 16px;grid-template-columns:1fr}
.checkbox,.radio{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.88rem;margin-bottom:10px;line-height:1.5}
.checkbox input,.radio input{width:18px;height:18px;accent-color:var(--brand);margin-top:2px;flex-shrink:0}
.switch{position:relative;display:inline-flex;align-items:center;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch-track{position:absolute;inset:0;background:var(--border-strong);border-radius:var(--radius-pill);transition:.2s}
.switch-track::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s var(--ease);box-shadow:var(--shadow-xs)}
.switch input:checked + .switch-track{background:var(--brand)}
.switch input:checked + .switch-track::before{transform:translateX(20px)}
html[dir="rtl"] .switch input:checked + .switch-track::before{transform:translateX(-20px)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
.switch-row:last-child{border-bottom:0}
.switch-row .switch-label{font-weight:600;font-size:.9rem}
.switch-row .switch-desc{font-size:.78rem;color:var(--muted);margin-top:2px}

.password-rules{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rule{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;padding:4px 9px;border-radius:var(--radius-pill);background:var(--surface-3);color:var(--muted);font-weight:600;transition:.2s}
.rule.ok{background:var(--success-bg);color:var(--success)}
.strength-bar{height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;margin-top:8px}
.strength-bar span{display:block;height:100%;width:0;border-radius:3px;transition:width .3s var(--ease),background .3s}

.file-drop{border:2px dashed var(--border-strong);border-radius:var(--radius);padding:24px;text-align:center;cursor:pointer;transition:.2s;background:var(--surface-2)}
.file-drop:hover,.file-drop.dragover{border-color:var(--brand);background:var(--brand-50)}
.file-drop input{display:none}
.file-preview{margin-top:12px;display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border)}
.file-preview img{width:52px;height:52px;object-fit:cover;border-radius:8px}

/* ---------- Messages / toasts ---------- */
.messages{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.alert{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:500;border:1px solid transparent}
.alert-success{background:var(--success-bg);color:var(--success);border-color:color-mix(in srgb,var(--success) 22%,transparent)}
.alert-error{background:var(--danger-bg);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 22%,transparent)}
.alert-warning{background:var(--warning-bg);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 25%,transparent)}
.alert-info,.alert-debug{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 22%,transparent)}
.alert .icon{margin-top:2px}
.alert-close{margin-inline-start:auto;opacity:.6}
.alert-close:hover{opacity:1}

.toast-stack{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bottomnav-h) + 16px);z-index:1200;display:flex;flex-direction:column;gap:8px;width:min(94vw,420px);pointer-events:none}
.toast{
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius);
  background:var(--text);color:var(--bg);box-shadow:var(--shadow-lg);font-size:.88rem;font-weight:600;
  animation:toastIn .28s var(--ease);pointer-events:auto;
}
.toast-success{background:var(--success);color:#fff}
.toast-error{background:var(--danger);color:#fff}
.toast-warning{background:var(--warning);color:#241800}
.toast.leaving{animation:toastOut .22s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.97)}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:800;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;gap:12px;height:var(--header-h);max-width:var(--wrap);margin:0 auto;padding:0 16px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.12rem;letter-spacing:-.03em;color:var(--text);flex-shrink:0}
.brand:hover{color:var(--text)}
.brand-mark{width:32px;height:32px;border-radius:10px;background:var(--gradient);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.95rem;box-shadow:var(--shadow-brand)}
.brand img{height:30px;width:auto;max-width:150px;object-fit:contain}
.logo-light{display:block}.logo-dark{display:none}
html[data-theme="dark"] .logo-light{display:none}
html[data-theme="dark"] .logo-dark{display:block}
.header-nav{display:none;align-items:center;gap:2px;margin-inline-start:8px}
.header-nav a{padding:8px 13px;border-radius:var(--radius-pill);font-size:.88rem;font-weight:600;color:var(--text-2)}
.header-nav a:hover{background:var(--surface-2);color:var(--text)}
.header-nav a.active{color:var(--brand);background:var(--brand-50)}
.header-actions{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.icon-btn{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--text-2);
  position:relative;transition:.16s;flex-shrink:0;
}
.icon-btn:hover{background:var(--surface-2);color:var(--brand)}
.icon-btn .dot{position:absolute;top:7px;inset-inline-end:7px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--brand);color:#fff;font-size:.62rem;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
.header-search{flex:1;max-width:440px;display:none;position:relative}

/* ---------- Back control ----------
   Rendered once by base.html on every inner page. It walks the visitor back
   through their own history when they arrived from inside the site, and falls
   back to the parent URL in its href otherwise — so it still works with
   JavaScript switched off. Pages that ship their own back link hide it. */
.back-bar{padding:10px 0 0}
.back-bar .wrap{display:flex}
.btn-back{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px 8px 10px;
  border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);font-weight:700;font-size:.84rem;line-height:1;
  transition:border-color .16s,color .16s,background .16s;-webkit-tap-highlight-color:transparent;
}
.btn-back:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.btn-back .icon{flex-shrink:0}
html[dir="rtl"] .btn-back{padding:8px 10px 8px 14px}
html[dir="rtl"] .btn-back .icon{transform:scaleX(-1)}
/* A page that already has its own back control never shows a second one.
   app.js removes the duplicate as soon as it runs; this mirrors the same test
   in CSS so a visitor without JavaScript never sees two either. */
body:has(.chat-shell) .back-bar,
body:has([data-page-back]) .back-bar,
body:has(#main a .icon-arrow-left) .back-bar,
body:has(#main button .icon-arrow-left) .back-bar{display:none}

/* ---------- Search ---------- */
.search-box{position:relative;width:100%}
.search-box .input{padding-inline-start:42px;border-radius:var(--radius-pill);background:var(--surface-2)}
.search-box .search-icon{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search-box .search-clear{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);padding:6px;border-radius:50%;color:var(--muted);display:none}
.search-box.has-value .search-clear{display:grid;place-items:center}
.search-suggestions{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:900;max-height:min(60vh,420px);overflow-y:auto;display:none;
}
.search-suggestions.open{display:block;animation:fadeUp .18s var(--ease)}
.suggestion{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text)}
.suggestion:last-child{border-bottom:0}
.suggestion:hover,.suggestion.active{background:var(--brand-50);color:var(--text)}
.suggestion-icon{width:34px;height:34px;border-radius:10px;background:var(--surface-3);display:grid;place-items:center;color:var(--muted);flex-shrink:0}
.suggestion-label{font-weight:600;font-size:.88rem}
.suggestion-sub{font-size:.74rem;color:var(--muted)}
@keyframes fadeUp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:44px 0 34px;background:var(--gradient-soft)}
.hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(230,25,127,.20),transparent 68%);top:-230px;inset-inline-end:-140px;pointer-events:none}
.hero::after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(122,30,79,.14),transparent 70%);bottom:-220px;inset-inline-start:-120px;pointer-events:none}
.hero-inner{position:relative;z-index:1;text-align:center;max-width:820px;margin:0 auto}
.hero h1{font-size:clamp(2rem,7vw,3.6rem);margin-bottom:12px;letter-spacing:-.035em}
.hero h1 .accent{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:clamp(.95rem,2.4vw,1.14rem);color:var(--text-2);max-width:600px;margin:0 auto 22px}
.hero-search{max-width:640px;margin:0 auto}
.hero-search .input{padding:15px 18px;padding-inline-start:46px;font-size:.98rem;box-shadow:var(--shadow);border-color:transparent;background:var(--surface)}
.hero-examples{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.hero-example{font-size:.76rem;padding:6px 12px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--border);color:var(--text-2);font-weight:600;max-width:100%;overflow-wrap:anywhere;line-height:1.35}
.hero-example:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- Trust strip ---------- */
.trust-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr));gap:10px;margin-top:26px}
.trust-item{display:flex;align-items:center;gap:9px;padding:12px;min-width:0;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--border);border-radius:var(--radius-sm)}
.trust-item > div{min-width:0}
.trust-item .icon{color:var(--brand)}
.trust-item strong{display:block;font-size:.8rem;font-weight:700;line-height:1.25}
.trust-item span{font-size:.7rem;color:var(--muted)}

/* ---------- Rails (horizontal scrollers) ---------- */
.rail{position:relative}
.rail-track{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 16px 12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  margin:0 -16px;
}
.rail-track::-webkit-scrollbar{display:none}
.rail-track > *{scroll-snap-align:start;flex:0 0 auto}
.rail-nav{display:none;position:absolute;top:38%;width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);place-items:center;color:var(--text);z-index:5}
.rail-nav:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.rail-prev{inset-inline-start:-8px}
.rail-next{inset-inline-end:-8px}
.rail:hover .rail-nav{display:grid}

/* ---------- Provider cards ---------- */
/* The card is a column: portrait image, then the name block. It must be
   position:relative so the favourite button anchors to the card, and the media
   must be display:block — it is an <a>, and an inline box ignores aspect-ratio,
   which used to make the card collapse and clip the name away entirely. */
.provider-card{position:relative;display:flex;flex-direction:column;width:168px;
  border-radius:var(--radius);overflow:hidden;background:var(--surface);
  border:1px solid var(--border);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.provider-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.provider-card .pc-media{display:block;position:relative;width:100%;flex:0 0 auto;
  aspect-ratio:3/4;background:var(--surface-3);overflow:hidden}
.provider-card .pc-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--ease)}
.provider-card:hover .pc-media img{transform:scale(1.05)}
.pc-media-fallback{width:100%;height:100%;display:grid;place-items:center;background:var(--gradient);color:#fff;font-size:2rem;font-weight:800}

/* Badges sit over the photo, so they need their own contrast rather than the
   pale .badge-* fills used on light surfaces. Kept narrow so a long label can
   never crowd the favourite button. */
.pc-badges{position:absolute;top:8px;inset-inline-start:8px;z-index:2;display:flex;
  flex-direction:column;gap:5px;align-items:flex-start;max-width:calc(100% - 54px)}
.pc-badge{display:inline-flex;align-items:center;gap:4px;max-width:100%;
  padding:3px 9px;border-radius:var(--radius-pill);font-size:.66rem;font-weight:800;
  line-height:1.4;letter-spacing:.01em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;box-shadow:0 2px 8px rgba(10,4,8,.30)}
.pc-badge .icon{width:11px;height:11px;flex-shrink:0}
.pc-badge-popular{background:var(--brand);color:#fff}
.pc-badge-featured{background:linear-gradient(135deg,#F7C948,#D99C10);color:#3B2800}

.pc-fav{position:absolute;top:8px;inset-inline-end:8px;z-index:2;width:32px;height:32px;
  border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
  color:var(--text-2);backdrop-filter:blur(6px);box-shadow:0 2px 8px rgba(10,4,8,.22)}
.pc-fav:hover,.pc-fav.active{background:var(--brand);color:#fff}
.pc-fav.active .icon{fill:currentColor}

/* The name block. flex:1 so every card in a row ends level even when one has a
   longer category line. */
.pc-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;padding:10px 12px 11px}
.pc-name{font-weight:700;font-size:.86rem;line-height:1.25;color:var(--text);
  display:flex;align-items:center;gap:3px;min-width:0}
.pc-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pc-name .verified-tick{flex-shrink:0}
.pc-meta{display:block;font-size:.71rem;color:var(--muted);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pc-foot{margin-top:auto;padding-top:7px;display:flex;align-items:center;
  justify-content:space-between;gap:6px;min-width:0}
.pc-price{font-weight:800;font-size:.82rem;color:var(--brand)}
.pc-rating{display:inline-flex;align-items:center;gap:3px;font-size:.74rem;font-weight:700;color:var(--text-2)}
.pc-rating .icon{color:#F5B301}

/* ---------- Category cards ---------- */
.category-card{position:relative;width:170px;height:110px;border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;padding:12px;color:#fff;background:var(--gradient)}
.category-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;transition:transform .4s var(--ease),opacity .3s}
.category-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,4,8,.05) 0%,rgba(10,4,8,.72) 100%)}
.category-card:hover img{transform:scale(1.08);opacity:.5}
.category-card .cc-body{position:relative;z-index:2}
.category-card .cc-name{font-weight:800;font-size:.92rem;text-shadow:0 1px 12px rgba(0,0,0,.6);line-height:1.2}
.category-card .cc-count{font-size:.7rem;opacity:.88}
.category-card:hover{color:#fff}

/* ---------- Video showcase (meet the stars) ---------- */
.video-showcase{border-radius:var(--radius-lg);overflow:hidden;position:relative;background:var(--gradient);color:#fff;padding:20px;min-height:20vh}
.video-showcase h2{color:#fff;font-size:clamp(1.2rem,4vw,1.9rem);margin-bottom:6px}
.video-showcase p{color:rgba(255,255,255,.88);font-size:.85rem;margin-bottom:14px;max-width:440px}
.vs-faces{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.vs-faces::-webkit-scrollbar{display:none}
.vs-face{position:relative;flex:0 0 auto;width:74px;height:96px;border-radius:14px;overflow:hidden;border:2px solid rgba(255,255,255,.5)}
.vs-face img{width:100%;height:100%;object-fit:cover}
.vs-face-fallback{width:100%;height:100%;display:grid;place-items:center;background:rgba(255,255,255,.18);font-weight:800;color:#fff}
.vs-face .live{position:absolute;bottom:4px;inset-inline-start:4px;font-size:.58rem;background:#fff;color:var(--brand);padding:1px 5px;border-radius:4px;font-weight:800}

/* ---------- Promo cards (admin managed) ---------- */
.promo-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:26px 22px;color:#fff;min-height:170px;display:flex;flex-direction:column;justify-content:center;background:var(--gradient)}
.promo-card.style-dark{background:linear-gradient(135deg,#1A0C14,#3B1226)}
.promo-card.style-light{background:var(--gradient-soft);color:var(--text)}
.promo-card.style-light .promo-body{color:var(--text-2)}
.promo-card img.promo-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.promo-card.style-image::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(12,5,9,.78),rgba(12,5,9,.35))}
.promo-inner{position:relative;z-index:2;max-width:560px}
.promo-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.9;margin-bottom:8px;display:block}
.promo-card h3{font-size:clamp(1.15rem,3.4vw,1.7rem);margin-bottom:8px;color:inherit}
.promo-body{font-size:.88rem;opacity:.92;margin-bottom:16px}

/* ---------- Experience cards ---------- */
.exp-card{width:250px;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s}
.exp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.exp-card.wide{width:100%}
.exp-media{position:relative;aspect-ratio:16/10;background:var(--surface-3);overflow:hidden}
.exp-media img{width:100%;height:100%;object-fit:cover}
.exp-media-fallback{width:100%;height:100%;background:var(--gradient);display:grid;place-items:center;color:#fff}
.exp-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.exp-title{font-weight:700;font-size:.92rem;line-height:1.3}
.exp-meta{font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:5px}
.exp-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.exp-price{font-weight:800;color:var(--brand);font-size:.92rem}
.countdown{display:inline-flex;gap:4px;font-variant-numeric:tabular-nums;font-weight:800;font-size:.74rem;color:var(--danger)}
.countdown span{background:var(--danger-bg);padding:2px 5px;border-radius:5px}

/* ---------- Empty & skeleton ---------- */
.empty-state{text-align:center;padding:44px 20px;color:var(--muted)}
.empty-icon{width:64px;height:64px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;margin:0 auto 14px;color:var(--brand)}
.empty-state h3{font-size:1.05rem;color:var(--text);margin-bottom:6px}
.empty-state p{font-size:.88rem;max-width:380px;margin:0 auto 16px}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:var(--radius-sm)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skeleton-text{height:12px;margin-bottom:8px}
.skeleton-card{height:210px;width:168px;border-radius:var(--radius)}

/* ---------- Loader ---------- */
.page-loader{position:fixed;top:0;left:0;right:0;height:3px;z-index:1500;opacity:0;transition:opacity .2s}
.page-loader.active{opacity:1}
.page-loader-bar{display:block;height:100%;width:40%;background:var(--gradient);animation:loaderSlide 1s var(--ease) infinite}
@keyframes loaderSlide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.spinner{width:22px;height:22px;border:2.5px solid var(--surface-3);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
.loading-block{padding:30px;display:grid;place-items:center}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;margin-bottom:18px}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:11px 15px;font-size:.87rem;font-weight:700;color:var(--muted);border-bottom:2.5px solid transparent;white-space:nowrap;transition:.16s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
table.table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:560px}
table.table th{text-align:start;padding:12px 14px;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}
table.table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.table tbody tr:last-child td{border-bottom:0}
table.table tbody tr:hover{background:var(--surface-2)}

/* ---------- Stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.stat-value{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.stat-delta{font-size:.74rem;font-weight:700;margin-top:4px}
.stat-delta.up{color:var(--success)}.stat-delta.down{color:var(--danger)}

/* ---------- Pagination ---------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin:26px 0;flex-wrap:wrap}
.pagination a,.pagination span{min-width:38px;height:38px;padding:0 10px;display:grid;place-items:center;border-radius:var(--radius-sm);border:1px solid var(--border);font-size:.85rem;font-weight:600;color:var(--text-2);background:var(--surface)}
.pagination a:hover{border-color:var(--brand);color:var(--brand)}
.pagination .current{background:var(--brand);border-color:var(--brand);color:#fff}
.pagination .disabled{opacity:.4;pointer-events:none}

/* ---------- Modal / sheet ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,4,8,.55);backdrop-filter:blur(3px);z-index:1000;display:grid;place-items:center;padding:16px;animation:fadeIn .18s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:var(--radius-lg);width:min(96vw,520px);max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalIn .24s var(--ease)}
.modal-lg{width:min(96vw,760px)}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2}
.modal-head h3{margin:0;font-size:1.05rem}
.modal-body{padding:20px}
.modal-foot{padding:16px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:600px){
  .modal-backdrop{align-items:flex-end;padding:0}
  .modal{width:100%;max-width:none;border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-height:92vh;animation:sheetIn .28s var(--ease)}
  .modal-foot .btn{flex:1}
}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}

/* ---------- Drawer menu ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(10,4,8,.5);z-index:1000;animation:fadeIn .18s}
.drawer[hidden],[hidden]{display:none !important}
.drawer{
  position:fixed;top:0;inset-inline-start:0;height:100%;width:min(84vw,320px);background:var(--surface);
  z-index:1001;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:drawerIn .26s var(--ease);
  overflow-y:auto;
}
@keyframes drawerIn{from{transform:translateX(-100%)}to{transform:none}}
html[dir="rtl"] .drawer{animation:drawerInRtl .26s var(--ease)}
@keyframes drawerInRtl{from{transform:translateX(100%)}to{transform:none}}
.drawer-head{padding:18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.drawer-nav{padding:10px 0;flex:1}
.drawer-nav a{display:flex;align-items:center;gap:12px;padding:12px 18px;color:var(--text-2);font-weight:600;font-size:.9rem}
.drawer-nav a:hover{background:var(--brand-50);color:var(--brand)}
.drawer-nav .drawer-group{padding:14px 18px 6px;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}
.drawer-foot{padding:16px 18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}

/* ---------- Bottom nav (mobile app feel) ---------- */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:700;background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border);
  display:flex;padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 2px 8px;color:var(--muted);font-size:.63rem;font-weight:700;position:relative;min-height:var(--bottomnav-h)}
.bottom-nav a.active{color:var(--brand)}
.bottom-nav a .badge-dot{position:absolute;top:6px;inset-inline-end:calc(50% - 18px);min-width:15px;height:15px;padding:0 4px;background:var(--brand);color:#fff;border-radius:8px;font-size:.58rem;display:grid;place-items:center;border:2px solid var(--surface)}
body.has-bottom-nav main{padding-bottom:calc(var(--bottomnav-h) + 12px)}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface-2);border-top:1px solid var(--border);padding:40px 0 20px;margin-top:40px}
/* Phones get the link groups two-up so the footer is not one endless column.
   The brand block always spans the full width; see the 380px rule below for
   the narrowest screens, where a two-up group would squash. */
.footer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px;margin-bottom:28px}
.footer-brand{grid-column:1 / -1}
.footer-brand p{font-size:.85rem;color:var(--muted);max-width:320px;margin-top:10px}
.footer-col h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:12px;font-weight:800}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.footer-col a{font-size:.85rem;color:var(--text-2)}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{border-top:1px solid var(--border);padding-top:18px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.footer-legal{font-size:.78rem;color:var(--muted)}
.footer-socials{display:flex;gap:8px;flex-wrap:wrap}
.footer-socials a{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:var(--text-2)}
.footer-socials a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.footer-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tool-select{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);font-size:.8rem;font-weight:600;color:var(--text-2)}
.tool-select:hover{border-color:var(--brand);color:var(--brand)}
.payment-note{font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:6px;justify-content:center;text-align:center;margin-top:8px}

/* ---------- Install prompt ---------- */
.install-prompt{
  position:fixed;bottom:calc(var(--bottomnav-h) + 12px);inset-inline:12px;z-index:900;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px;
  display:none;align-items:center;gap:12px;animation:toastIn .3s var(--ease);max-width:520px;margin:0 auto;
}
.install-prompt.show{display:flex}
.install-prompt .ip-icon{width:44px;height:44px;border-radius:12px;background:var(--gradient);display:grid;place-items:center;color:#fff;flex-shrink:0}
.install-prompt strong{display:block;font-size:.88rem}
.install-prompt span{font-size:.75rem;color:var(--muted)}

/* ---------- Announcement / impersonation ---------- */
.announcement{background:var(--gradient);color:#fff;font-size:.82rem;font-weight:600}
.announcement .wrap{display:flex;align-items:center;gap:10px;justify-content:center;padding:9px 16px;flex-wrap:wrap}
.announcement a{color:#fff;text-decoration:underline}
.announcement-close{color:#fff;opacity:.8;display:grid;place-items:center}
.impersonation-bar{background:#1D1015;color:#FFD9E9;font-size:.8rem;padding:8px 16px;text-align:center;font-weight:600}
.impersonation-bar a{color:#FF8CC0;text-decoration:underline;margin-inline-start:8px}

/* ---------- Dashboard shell ---------- */
.dash{display:grid;grid-template-columns:1fr;gap:20px;padding:20px 0}
.dash-side{display:none}
.dash-nav{position:sticky;top:calc(var(--header-h) + 16px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px;display:flex;flex-direction:column;gap:2px}
.dash-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);font-size:.86rem;font-weight:600;color:var(--text-2)}
.dash-nav a:hover{background:var(--surface-2);color:var(--text)}
.dash-nav a.active{background:var(--brand-50);color:var(--brand)}
.dash-nav .nav-group{padding:12px 12px 6px;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.dash-head h1{font-size:clamp(1.3rem,4vw,1.9rem);margin:0}
.dash-head p{margin:4px 0 0;color:var(--muted);font-size:.86rem}
.mobile-subnav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:8px;margin-bottom:12px}
.mobile-subnav::-webkit-scrollbar{display:none}

/* ---------- Chat ---------- */
.chat-shell{display:grid;grid-template-columns:1fr;height:calc(100vh - var(--header-h) - var(--bottomnav-h));min-height:520px}
.chat-list{border-inline-end:1px solid var(--border);overflow-y:auto;min-height:0;background:var(--surface)}
.chat-item{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text);position:relative}
.chat-item:hover{background:var(--surface-2);color:var(--text)}
.chat-item.active{background:var(--brand-50)}
.chat-item-body{flex:1;min-width:0}
.chat-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chat-item-name{font-weight:700;font-size:.88rem;display:flex;align-items:center;gap:3px;min-width:0}
.chat-item-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item-time{font-size:.7rem;color:var(--muted);flex-shrink:0}
.chat-item-preview{font-size:.79rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.chat-unread{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--brand);color:#fff;font-size:.66rem;font-weight:800;display:grid;place-items:center;flex-shrink:0}
.chat-thread{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;background:var(--bg-soft)}
.chat-header{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:5}
.chat-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:3px}
.chat-day{align-self:center;font-size:.7rem;font-weight:700;color:var(--muted);background:var(--surface-3);padding:4px 12px;border-radius:var(--radius-pill);margin:12px 0 8px}
.bubble{max-width:min(78%,460px);padding:9px 13px;border-radius:16px;font-size:.88rem;line-height:1.45;position:relative;word-break:break-word;align-self:flex-start;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-xs)}
.bubble.mine{align-self:flex-end;background:var(--gradient);color:#fff;border-color:transparent}
.bubble.mine a{color:#fff;text-decoration:underline}
.bubble + .bubble{margin-top:3px}
.bubble-meta{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:.64rem;margin-top:3px;opacity:.75}
.bubble.mine .bubble-meta{color:rgba(255,255,255,.9)}
.bubble-img{border-radius:10px;overflow:hidden;margin:-3px -5px 5px;cursor:zoom-in}
.bubble-img img{width:100%;max-width:280px;display:block}
.bubble-file{display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;background:var(--surface-2);margin-bottom:4px}
.bubble.mine .bubble-file{background:rgba(255,255,255,.18)}
.chat-composer{padding:10px 12px;border-top:1px solid var(--border);background:var(--surface);display:flex;gap:8px;align-items:flex-end}
.chat-composer .textarea{min-height:44px;max-height:130px;border-radius:22px;padding:11px 16px;resize:none}
.chat-warning{background:var(--warning-bg);color:var(--warning);font-size:.74rem;padding:8px 14px;text-align:center;font-weight:600;display:flex;align-items:center;gap:6px;justify-content:center}
.load-older{align-self:center;margin-bottom:10px}
.typing-dots{display:inline-flex;gap:3px}
.typing-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:blink 1.2s infinite}
.typing-dots i:nth-child(2){animation-delay:.2s}
.typing-dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---------- Feed ---------- */
.feed-wrap{max-width:620px;margin:0 auto}
.post{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;overflow:hidden}
.post-head{display:flex;align-items:center;gap:10px;padding:13px 14px 10px}
.post-author{font-weight:700;font-size:.88rem;display:flex;align-items:center;gap:3px}
.post-sub{font-size:.72rem;color:var(--muted)}
.post-body{padding:0 14px 12px;font-size:.9rem;white-space:pre-wrap;word-break:break-word}
.post-media{background:var(--surface-3);position:relative}
.post-media img{width:100%;display:block;max-height:640px;object-fit:cover}
.post-media-grid{display:grid;gap:2px}
.post-media-grid.count-2{grid-template-columns:1fr 1fr}
.post-media-grid.count-3{grid-template-columns:1fr 1fr}
.post-media-grid.count-3 img:first-child{grid-row:span 2}
.post-media-grid.count-4{grid-template-columns:1fr 1fr}
.post-media-grid img{height:100%;object-fit:cover;aspect-ratio:1}
.post-actions{display:flex;align-items:center;gap:2px;padding:8px 8px 6px;border-top:1px solid var(--border)}
.post-action{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:var(--radius-pill);font-size:.8rem;font-weight:700;color:var(--muted);transition:.16s}
.post-action:hover{background:var(--surface-2);color:var(--text)}
.post-action.active{color:var(--brand)}
.post-action.active .icon{fill:currentColor}
.post-action.dislike.active{color:var(--info)}
.post-stats{padding:0 14px 10px;font-size:.74rem;color:var(--muted);display:flex;gap:12px}
.comment-list{border-top:1px solid var(--border);padding:12px 14px;background:var(--surface-2)}
.comment{display:flex;gap:9px;margin-bottom:12px}
.comment-bubble{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px 12px;font-size:.83rem;flex:1;min-width:0}
.comment-author{font-weight:700;font-size:.79rem;display:flex;align-items:center;gap:3px}
.comment-form{display:flex;gap:8px;align-items:center;margin-top:8px}

/* ---------- Fan card ---------- */
.fan-card{
  position:relative;aspect-ratio:1.586/1;border-radius:18px;overflow:hidden;color:#fff;
  padding:20px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:var(--shadow-lg);background:linear-gradient(135deg,var(--fc-start,#E6197F),var(--fc-end,#7A1E4F));
}
.fan-card .fc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.fan-card .fc-sheen{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,transparent 42%,transparent 60%,rgba(255,255,255,.14) 100%);pointer-events:none}
.fan-card .fc-inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.fan-card .fc-tier{font-size:.66rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;opacity:.92}
/* The card has a fixed credit-card aspect, so a long name cannot be allowed to
   push the footer out of the bottom. Two lines, then ellipsis. */
.fan-card .fc-name{font-size:clamp(.95rem,3.4vw,1.35rem);font-weight:800;line-height:1.18;
  margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere}
.fan-card .fc-holder-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fan-card .fc-inner > .row-between{min-width:0}
.fan-card .fc-holder{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.fan-card .fc-holder-name{font-size:.95rem;font-weight:700}
.fan-card .fc-serial{font-size:.68rem;font-family:ui-monospace,monospace;letter-spacing:.1em;opacity:.85}
.fan-card.glass{backdrop-filter:blur(8px);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3)}

/* ---------- Crypto payment ---------- */
.coin-option{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:.16s;background:var(--surface)}
.coin-option:hover{border-color:var(--brand);background:var(--brand-50)}
.coin-option.selected{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 3px var(--brand-50)}
.coin-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;font-size:.78rem;flex-shrink:0}
.address-box{display:flex;align-items:center;gap:10px;padding:13px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px dashed var(--border-strong);word-break:break-all;font-family:ui-monospace,monospace;font-size:.8rem}
.copy-btn{flex-shrink:0}
.copy-btn.copied{background:var(--success);color:#fff;border-color:var(--success)}

/* ---------- Steps ---------- */
.steps{display:flex;gap:8px;margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.step{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--radius-pill);background:var(--surface-2);font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap}
.step.active{background:var(--brand);color:#fff}
.step.done{background:var(--success-bg);color:var(--success)}
.step-num{width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.08);display:grid;place-items:center;font-size:.7rem}
.step.active .step-num{background:rgba(255,255,255,.25)}

/* ---------- Human check ---------- */
.challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.challenge-option{aspect-ratio:1;border:2px solid var(--border);border-radius:var(--radius-sm);padding:12px;background:var(--surface);display:grid;place-items:center;transition:.16s}
.challenge-option:hover{border-color:var(--brand);transform:scale(1.03)}
.challenge-option.selected{border-color:var(--brand);background:var(--brand-50)}
.challenge-target{width:88px;height:88px;margin:0 auto 12px;padding:12px;border:2px solid var(--brand);border-radius:var(--radius-sm);background:var(--brand-50)}

/* ---------- Misc ---------- */
.divider-text{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.78rem;margin:18px 0}
.divider-text::before,.divider-text::after{content:"";flex:1;height:1px;background:var(--border)}
.ratio-16-9{aspect-ratio:16/9}
.sticky-cta{position:sticky;bottom:calc(var(--bottomnav-h) + 10px);z-index:600;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;box-shadow:var(--shadow-lg);display:flex;gap:10px;align-items:center}
.lightbox{position:fixed;inset:0;background:rgba(6,2,4,.94);z-index:1300;display:grid;place-items:center;padding:20px}
.lightbox img{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:8px}
.lightbox-close{position:absolute;top:16px;inset-inline-end:16px;color:#fff;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
.progress{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.progress span{display:block;height:100%;background:var(--gradient);border-radius:4px;transition:width .4s var(--ease)}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:210px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:6px;z-index:900;display:none}
.dropdown-menu.open{display:block;animation:fadeUp .16s var(--ease)}
.dropdown-menu a,.dropdown-menu button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;color:var(--text-2);width:100%;text-align:start}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--surface-2);color:var(--brand)}
.dropdown-divider{height:1px;background:var(--border);margin:5px 0}

/* ---------- Responsive ---------- */
@media (min-width:480px){
  .challenge-grid{gap:12px}
  .form-grid.cols-2{grid-template-columns:1fr 1fr}
}
@media (min-width:768px){
  body{font-size:15.5px}
  .wrap{padding:0 24px}
  .header-search{display:block}
  .section{padding:52px 0}
  .rail-track{margin:0;padding:4px 0 14px}
  .provider-card{width:190px}
  .category-card{width:210px;height:130px}
  .exp-card{width:300px}
  .video-showcase{padding:34px;min-height:auto}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
  .footer-brand{grid-column:auto}
  .footer-bottom{flex-direction:row;justify-content:space-between;text-align:start}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .bottom-nav{display:none}
  body.has-bottom-nav main{padding-bottom:0}
  .toast-stack{bottom:20px}
  .install-prompt{bottom:20px}
  .chat-shell{grid-template-columns:340px 1fr;height:calc(100vh - var(--header-h))}
}
@media (min-width:1024px){
  .header-nav{display:flex}
  .dash{grid-template-columns:236px 1fr;gap:26px;padding:26px 0}
  .dash-side{display:block}
  .mobile-subnav{display:none}
  .promo-card{padding:34px 32px;min-height:200px}
}
@media (min-width:1280px){
  .chat-shell{grid-template-columns:380px 1fr}
}

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

/* Print */
@media print{
  .site-header,.site-footer,.bottom-nav,.install-prompt,.toast-stack,.announcement{display:none !important}
  body{background:#fff;color:#000}
}


/* ---------- Overflow containment ----------
   Grid and flex children default to min-width:auto, so one wide child (a
   horizontal rail, a long word, a table) can stretch its whole track and push
   the page sideways. Reset it everywhere a shell lays out columns. */
.dash > *,
.chat-shell > *,
.admin-shell > *,
.grid > *,
.form-grid > *,
.admin-split > *,
.row > *,
.row-between > *,
.section-head > *,
.footer-grid > *,
.stat-grid > *{min-width:0}
.dash,.chat-shell,.admin-shell,.grid,.stat-grid,.admin-split{min-width:0}
.rail,.rail-track{max-width:100%;min-width:0}
main{overflow-x:clip}
.card,.panel,.stat,.post,.record-card{max-width:100%}
.bubble,.comment-bubble,.address-box{overflow-wrap:anywhere}

/* ---------- Small-phone header ----------
   Below 480px the header has to fit a menu button, the wordmark, two icon
   buttons and a primary action. Tighten everything rather than let it clip. */
@media (max-width:479px){
  .header-inner{gap:4px;padding:0 12px}
  .brand img{max-width:92px;height:26px}
  .brand-mark{width:28px;height:28px}
  .header-actions{gap:0}
  .header-actions .btn-sm{padding:8px 12px;font-size:.78rem;min-height:40px}
  .wrap{padding:0 14px}
  .rail-track{margin:0 -14px;padding-inline:14px}
  .back-bar{padding-top:8px}
}
@media (max-width:359px){
  /* Under ~360px a second footer column would squash the longest link labels,
     so the groups stack. Every wider phone keeps them two-up. */
  .footer-grid{grid-template-columns:1fr;gap:20px}
  .brand img{max-width:76px}
  .header-actions .btn-sm{padding:8px 10px;font-size:.76rem}
  /* Six 40px controls plus the wordmark do not fit; the theme switch stays
     available in the menu drawer and in the footer tools. */
  .header-actions [data-theme-toggle]{display:none}
}

/* ---------- Phone comfort ----------
   Everything below 768px is read on a device held in one hand: nothing smaller
   than 12px, and nothing tappable smaller than 40px. Compact action buttons
   (.btn-action / .btn-action-sm) opt out deliberately — they are always paired
   with a larger primary control. */
@media (max-width:767px){
  .icon-btn{width:40px;height:40px}
  .text-xs,.help,.field-error,.field-ok,.badge,.stat-label,
  .pc-meta,.pc-rating,.exp-meta,.trust-item span,.category-card .cc-count,
  .chat-item-time,.chat-item-preview,.post-sub,.suggestion-sub,
  .footer-legal,.payment-note,.hero-example,.bottom-nav a,
  .step,.chip,.rule,.section-head .eyebrow,.promo-eyebrow,.footer-col h4,
  .countdown span,.vs-face .live,.drawer-nav .drawer-group{font-size:.75rem}
  .footer-tools .btn-group .btn{min-height:40px}
  .bottom-nav a{white-space:nowrap;letter-spacing:-.01em;padding-inline:1px}
  .chip,.hero-example{min-height:40px;padding-block:8px}
  .pagination a,.pagination span{min-width:40px;height:40px}
  .footer-col ul{gap:2px}
  .footer-col a{display:inline-flex;align-items:center;min-height:38px}
  .brand{min-height:40px}
  .section-link{min-height:40px}
  .pc-fav{width:40px;height:40px}
  .exp-foot .btn-xs{min-height:40px;min-width:40px}
  .rail-nav{width:40px;height:40px}
  .alert{font-size:.86rem}
  .trust-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}
  .trust-item{padding:10px;gap:8px}
  .trust-item:last-child:nth-child(odd){grid-column:1 / -1}
  .switch-row{padding:12px 0}
  .modal-foot,.card-foot{gap:8px}
}
@media (max-width:359px){
  .trust-strip{grid-template-columns:1fr}
  .trust-item:last-child:nth-child(odd){grid-column:auto}
}

/* ---------- Visibility utilities ----------
   Declared last and scoped to a breakpoint so they never fight a component's
   own display value (a hidden .btn must not become a block). */
@media (max-width:767px){
  .hide-mobile{display:none !important}
}
@media (min-width:768px){
  .hide-desktop{display:none !important}
}

/* The drawer trigger is the ONLY navigation between 768px and 1023px: the
   bottom bar stops at 767px and the inline header nav does not start until
   1024px. Hiding it with .hide-desktop left that band with no menu at all. */
.menu-toggle{display:inline-flex}
@media (min-width:1024px){
  .menu-toggle{display:none !important}
  /* Set by initHeaderFit when the translated nav no longer fits the row. */
  .site-header.header-tight .header-nav{display:none}
  .site-header.header-tight .menu-toggle{display:inline-flex !important}
}

/* The chat screen manages its own scrolling; the page must not add extra space. */
body.chat-page main{padding-bottom:0}
body.chat-page{overflow:hidden}

/* Buttons wrap by default so long labels never clip; these stay on one line. */
.btn-group .btn,.chip,.header-nav a,.tab,.filter-tab,.step,.pagination a,.pagination span,
.admin-table .actions .btn,.section-link,.header-actions .btn{white-space:nowrap}

/* Translated labels are routinely 40% longer than the English ones. The header
   gives that room up in this order: the search field shrinks, then the inline
   nav steps aside for the drawer — the buttons themselves never wrap. */
.header-search{min-width:0}
@media (min-width:1024px) and (max-width:1179px){
  .header-nav a{padding:8px 9px;font-size:.84rem}
  .header-search{max-width:280px}
}

/* ---------- Congif general agent call-out ----------
   Two shapes of the same idea: the full card when a search found nothing, and
   a slim strip underneath results so there is always a way through to a human. */
.agent-card{margin-top:10px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:12px;padding:26px 18px}
.agent-card .avatar{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--brand-100)}
.agent-card-name{font-size:1.1rem;margin:0}
.agent-card-line{font-size:.9rem;color:var(--text-2);margin:0;max-width:340px}

.agent-strip{margin-top:18px;display:flex;align-items:center;gap:13px;padding:14px 16px;
  border:1px solid var(--brand-100);background:var(--brand-50)}
.agent-strip .avatar{flex:0 0 auto;box-shadow:0 0 0 2px var(--surface)}
.agent-strip-text{flex:1 1 auto;min-width:0}
.agent-strip-title{margin:0;font-weight:700;font-size:.92rem;color:var(--text)}
.agent-strip-line{margin:2px 0 0;font-size:.82rem;color:var(--text-2)}
.agent-strip-cta{flex:0 0 auto;white-space:nowrap}
@media (max-width:600px){
  .agent-strip{flex-wrap:wrap;gap:10px}
  .agent-strip-text{flex:1 1 160px}
  .agent-strip-cta{width:100%;justify-content:center;min-height:44px}
  .agent-card .btn{min-height:44px}
}

/* ---------- Translating overlay ----------
   Shown while the language switcher waits for the server-side translation
   queue to drain, so the visitor never watches a half-translated page. */
.translate-loader{position:fixed;inset:0;z-index:1200;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(14,6,11,.55);backdrop-filter:blur(3px)}
.translate-loader.is-on{display:flex}
.translate-panel{width:100%;max-width:320px;padding:26px 24px;text-align:center;
  border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);
  box-shadow:0 22px 60px rgba(10,4,8,.34)}
.translate-spinner{width:34px;height:34px;margin:0 auto 14px;border-radius:50%;
  border:3px solid var(--brand-100);border-top-color:var(--brand);
  animation:spin .75s linear infinite}
.translate-title{margin:0;font-size:1.02rem;font-weight:800;color:var(--text)}
.translate-sub{margin:5px 0 0;font-size:.8rem;color:var(--muted);min-height:2.2em}
.translate-bar{margin-top:14px;height:6px;border-radius:var(--radius-pill);
  background:var(--surface-3);overflow:hidden}
.translate-bar span{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--brand),var(--brand-600,var(--brand)));
  transition:width .45s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .translate-spinner{animation-duration:2s}
  .translate-bar span{transition:none}
}

/* ---------- Connection banner ----------
   Sits above everything and pushes nothing: the site keeps working offline for
   whatever is already loaded, so the banner warns without rearranging the page.
   It stays in the DOM (aria-live needs that) and hides by sliding out of view —
   never with [hidden], which the global reset would fight. */
.net-banner{position:fixed;top:0;left:0;right:0;z-index:1300;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:9px 16px;font-size:.83rem;font-weight:700;line-height:1.3;text-align:center;
  color:#fff;background:#8A1220;box-shadow:0 2px 14px rgba(10,4,8,.28);
  transform:translateY(-101%);transition:transform .28s var(--ease),background .28s var(--ease);
  pointer-events:none}
.net-banner.is-on{transform:translateY(0);pointer-events:auto}
.net-banner-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex-shrink:0;
  animation:net-pulse 1.4s ease-in-out infinite}
.net-banner.is-back{background:var(--success)}
.net-banner.is-back .net-banner-dot{animation:none}
@keyframes net-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* While the banner is up the page moves down by exactly its height rather than
   being covered by it — otherwise the warning hides the logo and the menu
   button, which is the part someone needs to get out of a broken page.
   --net-banner-h is measured and set by app.js, so a two-line banner on a
   narrow phone still lines up. */
body.is-offline{padding-top:var(--net-banner-h,38px)}
body.is-offline .site-header{top:var(--net-banner-h,38px)}
@media (prefers-reduced-motion:reduce){
  .net-banner{transition:none}
  .net-banner-dot{animation:none}
}

/* ---------- Large figures ----------
   A stat tile is sized for "$1,240" but must survive "COL$306,928,081.97" — a
   Colombian peso balance is 18 characters. These rules stop the figure spilling
   or wrapping; initFitText() in app.js then steps the size down until it fits,
   which is what actually keeps the tile looking designed. */
.stat-value,.admin-stat .sv,.wallet-total,.calc-out,.pv-money,.fit-figure,[data-fit-text]{
  display:block;min-width:0;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums}
.stat,.admin-stat{min-width:0}

/* Money inside a table: right aligned, never wrapped mid-number, and the column
   is allowed to be the one that gives way when the table is squeezed. */
.admin-table td.money,.admin-table th.money,.table td.money,.table th.money,
.money-cell{white-space:nowrap;text-align:end;font-variant-numeric:tabular-nums}
@media (max-width:479px){
  .stat-value,.admin-stat .sv{letter-spacing:-.03em}
}

/* A stat tile that is actually waiting on the member should look like it. */
.stat-alert.is-live{border-color:var(--brand-200);background:var(--brand-50)}
.stat-alert.is-live .stat-value{color:var(--brand-600)}
.stat-alert.is-live .stat-delta{color:var(--brand-600);font-weight:700}

/* Admin detail rows: let the value keep its line and the label give way, rather
   than a currency amount breaking mid-number onto a second row. */
.detail-row{min-width:0}
.detail-row .dl{min-width:0}
.detail-row .dv{min-width:0;word-break:normal;overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums}

/* Stand-in for an image that failed to load. Fills the space the photo had, so
   a lost upload does not punch a hole through a card or a rail. */
.img-fallback{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:inherit;
  background:linear-gradient(135deg,var(--surface-3),var(--surface-2));
  color:var(--muted);font-weight:800;letter-spacing:.02em;font-size:1.1rem;
  border-radius:inherit}

/* ---------- Push notification setup panel ---------- */
.push-help{margin-top:14px;padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--brand-50);border:1px solid var(--brand-100)}
.push-help h4{margin:0 0 8px;font-size:.92rem;color:var(--text)}
.push-help ol{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px}
.push-help li{font-size:.85rem;color:var(--text-2);line-height:1.45}
.push-help p{margin:10px 0 0}
.switch-desc.is-on{color:var(--success);font-weight:600}
.switch-desc.is-blocked{color:var(--danger)}

/* ---------- Homepage fan card rail ----------
   The card art is the product, so it leads at a readable size and the person
   who made it sits underneath. Card aspect is fixed by .fan-card itself. */
.fan-rail-item{width:250px;flex:0 0 auto;display:flex;flex-direction:column;gap:9px;min-width:0}
.fan-rail-art{display:block;border-radius:18px;transition:transform .2s var(--ease)}
.fan-rail-art:hover{transform:translateY(-3px)}
.fan-rail-item .fan-card{width:100%}
.fan-rail-foot{display:flex;align-items:center;justify-content:space-between;gap:9px;min-width:0}
.fan-rail-who{display:flex;align-items:center;gap:7px;min-width:0;color:var(--text);
  font-weight:700;font-size:.83rem}
.fan-rail-who:hover{color:var(--brand)}
.fan-rail-price{font-weight:800;color:var(--brand);font-size:.86rem;flex-shrink:0;
  font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .fan-rail-item{width:212px}
}