/* Khrija.ma, global design system.
   Charcoal base, warm white type, the logo's violet-to-pink gradient for actions and accents,
   green kept only for live/verified signals so it still reads as a distinct trust color.
   Archivo's width axis is the brand's typographic voice: condensed for the everyday, extended for Khrija. */

@font-face{
  font-family:"Archivo";src:url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight:300 800;font-stretch:62% 125%;font-display:swap;
}
@font-face{
  font-family:"Noto Kufi Arabic";src:url("/assets/fonts/kufi-arabic.woff2") format("woff2");
  font-weight:300 500;font-display:swap;unicode-range:U+0600-06FF,U+FE70-FEFF;
}

:root{
  /* Slightly lifted blacks and a softer white: full-contrast white on pure
     black is what makes long reading uncomfortable on a screen. */
  --ink:#101015;
  --surface:#17171D;
  --surface-2:#1E1E26;
  --line:rgba(236,234,244,.09);
  --line-strong:rgba(236,234,244,.18);
  --paper:#E8E6F0;
  --muted:#9A97A8;

  /* Type scale, 1.2 ratio. Every size in the app comes from here. */
  --t-xs:12.5px;
  --t-sm:13.5px;
  --t-base:15px;
  --t-md:16.5px;
  --t-lg:19px;
  --t-xl:23px;
  --t-2xl:28px;
  --lh-tight:1.25;
  --lh-body:1.65;
  /* brand: pulled from the Khrija logo (violet core, indigo left, pink right) */
  --brand-1:#5B4FCF;
  --brand-2:#8B7CF0;
  --brand-3:#D98BC9;
  --red:#6C56E0;
  --red-hover:#7E6BE8;
  --brand-grad:linear-gradient(135deg,var(--brand-1),var(--brand-2) 55%,var(--brand-3));
  --green:#006233;
  --green-soft:#2E9E6B;
  --sea:#0B1216;
  --radius:18px;
  --wide:"wdth" 116;
  --head-h:72px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variation-settings:"wdth" 100;
  font-size:var(--t-base);line-height:var(--lh-body);letter-spacing:.005em;
  overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
main{flex:1}
::selection{background:var(--red);color:var(--paper)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--green-soft);outline-offset:3px;border-radius:6px}
[lang="ar"]{font-family:"Noto Kufi Arabic","Archivo",sans-serif}
.ico{width:18px;height:18px;flex:none}

.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}

h1,h2,h3,h4{font-variation-settings:var(--wide);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.015em}
h1{font-size:clamp(32px,5vw,54px);letter-spacing:-.025em}
h2{font-size:clamp(26px,3.8vw,42px);letter-spacing:-.02em}
h3{font-size:var(--t-lg);line-height:1.3}
h4{font-size:var(--t-md)}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.kicker{color:var(--muted);font-size:var(--t-base);margin-bottom:14px}
.section + .section{border-top:1px solid var(--line)}
p.big{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:56ch}
.muted{color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:var(--t-base);line-height:1.2;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-hover)}
.btn-green{background:transparent;border:1px solid var(--green-soft);color:var(--green-soft)}
.btn-green:hover{background:rgba(46,158,107,.12)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--paper)}
.btn-ghost:hover{border-color:rgba(242,239,233,.45)}
.btn-sm{padding:9px 18px;font-size:var(--t-base)}
.btn-lg{padding:17px 34px;font-size:var(--t-md)}
.btn[disabled]{opacity:.55;cursor:default}

/* ---------- logo (wordmark) ---------- */
.logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:22px;font-variation-settings:var(--wide);letter-spacing:-.01em;line-height:1}
.logo-mark{flex:none;object-fit:contain}
.logo .ma{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.logo .dot{width:7px;height:7px;border-radius:50%;background:var(--red);align-self:center;margin:0 1px;transform:translateY(3px)}

/* ---------- header (shared) ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  background:rgba(12,12,14,.8);border-bottom:1px solid var(--line);
}
.menu-btn{display:none;flex-direction:column;gap:5px;padding:10px 8px;margin-right:-8px}
.menu-btn span{width:22px;height:2px;background:var(--paper);border-radius:2px;transition:transform .2s,opacity .2s}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* logged-in app header */
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px}
.nav-links{display:flex;gap:26px;font-size:var(--t-base);color:var(--muted)}
.nav-links a:hover,.nav-links a.active{color:var(--paper)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav .btn{padding:9px 18px;font-size:var(--t-base)}

/* the bottom bar has its own create button on phones */



/* public header: logo | centered sections | language + account */
.pnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--head-h);gap:24px}
.pnav-links{display:flex;gap:4px;justify-content:center}
.pnav-links > a{padding:8px 13px;border-radius:999px;font-size:var(--t-base);color:var(--muted);transition:color .15s,background-color .15s}
.pnav-links > a:hover{color:var(--paper)}
.pnav-links > a[aria-current="page"]{color:var(--paper);background:rgba(242,239,233,.07)}
.pnav-drawer-extra{display:none}
.pnav-end{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.pnav-login{padding:8px 12px;font-size:var(--t-base);font-weight:600;color:var(--paper);border-radius:999px}
.pnav-login:hover{background:rgba(242,239,233,.07)}

.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;font-size:var(--t-sm);font-weight:600;color:var(--muted);transition:color .15s,background-color .15s}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{color:var(--paper);background:rgba(242,239,233,.07)}
.lang-btn .chev{width:14px;height:14px;transition:transform .2s}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);min-width:208px;padding:6px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:0 24px 50px -12px rgba(0,0,0,.7);
}
.lang-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:9px;font-size:var(--t-base)}
.lang-opt.is-current{background:rgba(46,158,107,.12);color:var(--paper)}
.lang-opt.is-current .ico{color:var(--green-soft);width:16px;height:16px}
.lang-opt.is-soon{color:var(--muted)}
.lang-opt small{font-size:var(--t-xs);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px}



/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:88px 0 36px;color:var(--muted);font-size:var(--t-base);background:linear-gradient(180deg,var(--ink),#09090B)}
.foot-top{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.foot-tagline{font-size:clamp(30px,4vw,46px);font-weight:750;line-height:1.02;color:var(--paper);letter-spacing:-.015em;margin-bottom:28px}
.foot-tagline span{display:block}
.foot-tagline span:nth-child(1){font-variation-settings:"wdth" 62}
.foot-tagline span:nth-child(2){font-variation-settings:"wdth" 92}
.foot-tagline span:nth-child(3){font-variation-settings:"wdth" 125;font-weight:800}
.foot-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:32px}
.foot-col h2{font-size:var(--t-sm);font-weight:600;color:var(--paper);font-variation-settings:"wdth" 100;letter-spacing:0;margin-bottom:14px}
.foot-col li + li{margin-top:9px}
.foot-col a{transition:color .15s}
.foot-col a:hover{color:var(--paper)}
.foot-base{margin-top:72px;padding-top:26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:var(--t-sm)}
.foot-base .logo{font-size:var(--t-lg);color:var(--paper)}

body.is-app .site-foot{padding-bottom:110px}


/* ---------- shared decorative pieces ---------- */
.zellige{
  position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23F2EFE9' stroke-width='1'%3E%3Cpath d='M48 12 62 34 84 48 62 62 48 84 34 62 12 48 34 34Z'/%3E%3Crect x='34' y='34' width='28' height='28' transform='rotate(45 48 48)'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg,transparent,black 30%,black 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,black 30%,black 70%,transparent);
}

.arabic-ghost{
  position:absolute;top:-64px;right:-30px;z-index:0;
  font-family:"Noto Kufi Arabic";font-weight:300;font-size:clamp(150px,24vw,320px);
  color:transparent;-webkit-text-stroke:1px rgba(242,239,233,.09);
  line-height:1;user-select:none;pointer-events:none;
}

/* ---------- inner-page blocks (cities, chips, trust, lists, cta) ---------- */
.bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-bottom:8px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green-soft));border-radius:99px}
.count{font-size:var(--t-sm);color:var(--muted);margin-bottom:20px}

.cities{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}


.city-card{
  position:relative;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(165deg,var(--surface),#101013);
  padding:24px 22px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;transition:border-color .2s;
}
.city-card:hover{border-color:rgba(46,158,107,.45)}
.city-card .arabic{position:absolute;top:6px;right:12px;font-family:"Noto Kufi Arabic";font-weight:300;font-size:34px;color:rgba(242,239,233,.07);line-height:1}
.city-card b{font-size:var(--t-lg);font-variation-settings:var(--wide)}
.city-card span{font-size:var(--t-sm);color:var(--muted)}
.city-card .live{display:flex;align-items:center;gap:7px;font-size:var(--t-xs);color:var(--green-soft)}
.city-card .live i{width:6px;height:6px;border-radius:50%;background:var(--green-soft)}

.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;max-width:900px}
.chip{padding:11px 19px;border-radius:999px;border:1px solid var(--line);font-size:var(--t-base);background:var(--surface);display:inline-flex;gap:9px;align-items:center}
.chip small{color:var(--muted);font-size:var(--t-xs)}
.chip.hot{border-color:rgba(193,39,45,.5)}
.chip.hot small{color:var(--red)}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}

.trust-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.trust-card .mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;background:rgba(0,98,51,.18);color:var(--green-soft);font-size:var(--t-lg);font-weight:800}
.trust-card:nth-child(2) .mark{background:rgba(193,39,45,.15);color:#E0565C}
.trust-card h3{margin-bottom:9px}
.trust-card p{color:var(--muted);font-size:var(--t-base)}
.never{margin-top:26px;padding:20px 24px;border:1px dashed rgba(193,39,45,.45);border-radius:var(--radius);color:var(--muted);font-size:var(--t-base);max-width:760px}
.never b{color:var(--paper)}


.asks{margin:44px auto 0;max-width:620px;text-align:left}
.ask{display:flex;justify-content:space-between;gap:20px;padding:17px 4px;border-bottom:1px solid var(--line);color:var(--muted);font-size:var(--t-md)}
.ask b{color:var(--muted);font-weight:600}
.ask.us{color:var(--paper);font-size:clamp(19px,2.6vw,24px);padding:26px 4px;border-bottom:none}
.ask.us b{color:var(--paper);font-weight:800;font-variation-settings:var(--wide)}
.ask.us span{color:var(--green-soft);font-weight:700}

.cta-sec{position:relative;overflow:hidden;text-align:center;padding:120px 0}
.cta-sec .arabic-ghost{top:auto;bottom:-70px;left:50%;right:auto;transform:translateX(-50%);font-size:clamp(160px,30vw,360px)}
.cta-sec h2{font-size:clamp(36px,6vw,68px)}
.cta-sec p{margin:20px auto 36px;color:var(--muted);font-size:var(--t-lg);max-width:44ch}
.cta-sec .tag{color:var(--paper);font-weight:700}


/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:72px 0 56px;position:relative;overflow:hidden}
.page-hero p.big{margin-top:18px}

/* ---------- forms ---------- */
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:36px 32px}
.auth-card h1{font-size:30px;margin-bottom:8px}
.auth-card .sub{color:var(--muted);font-size:var(--t-base);margin-bottom:26px}
.field{margin-bottom:18px}
.field label{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--paper);font:inherit;font-size:var(--t-base);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-soft)}
.field .hint{font-size:var(--t-xs);color:var(--muted);margin-top:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.form-note{font-size:var(--t-sm);color:var(--muted);text-align:center;margin-top:20px}
.form-note a{color:var(--green-soft);font-weight:600}

/* signup: username/password affixes, strength meter, status pill, checkboxes */
.field-affix{position:relative;display:flex;align-items:center}
.field-affix input{flex:1;padding-right:40px}
.field-affix .field-prefix{position:absolute;left:15px;color:var(--muted);font-weight:600;pointer-events:none}
.field-affix:has(.field-prefix) input{padding-left:28px}
.field-status{position:absolute;right:14px;font-size:var(--t-xs);font-weight:700}
.field-status.is-checking{color:var(--muted)}
.field-status.is-ok{color:var(--green-soft)}
.field-status.is-bad{color:#E0565C}
.eye-toggle{position:absolute;right:12px;color:var(--muted);padding:6px;border-radius:8px;display:grid;place-items:center}
.eye-toggle:hover{color:var(--paper)}
.eye-toggle .ico{width:18px;height:18px}

.strength-bar{display:flex;gap:6px;margin-top:9px}
.strength-bar span{flex:1;height:4px;border-radius:99px;background:var(--line-strong);transition:background-color .2s}
.strength-bar span.on{background:var(--line-strong)}
.strength-bar.s1 span.on{background:#E0565C}
.strength-bar.s2 span.on{background:var(--brand-2)}
.strength-bar.s3 span.on{background:var(--green-soft)}

#password2-hint.is-ok{color:var(--green-soft)}
#password2-hint.is-err{color:#E0565C}

.agree-field{display:grid;gap:10px}
.check-row{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-sm);color:var(--muted);cursor:pointer}
.check-row input{margin-top:3px;width:16px;height:16px;accent-color:var(--brand-2);flex:none}
.check-row a{color:var(--paper);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-strong)}
.check-row a:hover{text-decoration-color:var(--paper)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.alert{border-radius:12px;padding:13px 16px;font-size:var(--t-base);margin-bottom:20px}
.alert-err{background:rgba(193,39,45,.14);border:1px solid rgba(193,39,45,.45)}
.alert-ok{background:rgba(0,98,51,.16);border:1px solid rgba(46,158,107,.45)}

/* interest picker */
.pick{display:flex;flex-wrap:wrap;gap:9px}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label{
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:var(--t-sm);cursor:pointer;
  transition:border-color .15s,background .15s;user-select:none;
}
.pick input:checked + label{border-color:var(--green-soft);background:rgba(46,158,107,.14);color:var(--paper)}
.pick input:focus-visible + label{outline:2px solid var(--green-soft);outline-offset:2px}

/* ---------- app ---------- */
.avatar{display:inline-grid;place-items:center;border-radius:50%;color:var(--paper);font-weight:700;flex:none;letter-spacing:.02em}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:700;color:var(--green-soft);border:1px solid rgba(46,158,107,.4);border-radius:999px;padding:2px 9px;vertical-align:middle}

.app-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.app-head h1{font-size:clamp(28px,4vw,40px)}
.app-head .where{color:var(--muted);font-size:var(--t-base);margin-top:6px}

.feed-grid{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}


.kcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin-bottom:16px;display:block;transition:border-color .18s;
}
a.kcard:hover{border-color:rgba(46,158,107,.4)}
.kcard .krow{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.kcard h3{font-size:var(--t-lg)}
.kcard .when{color:var(--muted);font-size:var(--t-sm);white-space:nowrap}
.kcard .kmeta{color:var(--muted);font-size:var(--t-base);margin-top:6px}
.kcard .kfoot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:12px;flex-wrap:wrap}
.kcard .creator-line{display:flex;align-items:center;gap:9px;font-size:var(--t-sm)}
.kcard .fill{display:flex;align-items:center;gap:10px;min-width:150px;flex:1;max-width:220px}
.kcard .fill .bar{flex:1;margin:0}
.kcard .fill small{color:var(--muted);white-space:nowrap}

.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:16px}
.side-card h3{font-size:var(--t-md);margin-bottom:14px}
.side-card .row{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:var(--t-base)}
.side-card .row small{display:block;color:var(--muted);font-size:var(--t-xs)}
.side-card .row .grow{flex:1;min-width:0}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.tabs a{padding:9px 18px;border-radius:999px;border:1px solid var(--line);font-size:var(--t-base);color:var(--muted)}
.tabs a.active{border-color:var(--paper);color:var(--paper);font-weight:600}
.tabs a:hover{color:var(--paper)}

/* khrija detail */
.kdetail{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px}
.panel + .panel{margin-top:16px}
.people{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.person{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;font-size:var(--t-sm)}

/* chat */
.msg{display:flex;gap:10px;align-items:flex-start}
.msg .bubble{background:var(--surface-2);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:9px 13px;font-size:var(--t-base);max-width:78%}
.msg .bubble b{display:block;font-size:var(--t-xs);color:var(--green-soft);margin-bottom:2px}
.msg.mine{flex-direction:row-reverse}
.msg.mine .bubble{background:rgba(193,39,45,.16);border-color:rgba(193,39,45,.4);border-radius:14px 4px 14px 14px}
.msg.mine .bubble b{color:#E0565C}
.chat-form{display:flex;gap:10px}
.chat-form input{flex:1;padding:12px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--paper);font:inherit;font-size:var(--t-base)}
.chat-form input:focus{outline:none;border-color:var(--green-soft)}

/* profile */
.profile-head{display:flex;gap:var(--space-5);align-items:flex-start;flex-wrap:wrap;margin-bottom:var(--space-3)}
.profile-id{flex:1;min-width:180px;padding-top:var(--space-1)}
.profile-name-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);row-gap:var(--space-2)}
.profile-name-row h1{margin:0}
.profile-head h1{font-size:clamp(26px,4vw,38px)}
.profile-stats{display:flex;gap:28px;margin:18px 0 6px;font-size:var(--t-base);color:var(--muted)}
.profile-stats b{color:var(--paper);font-size:var(--t-lg);display:block}

/* mobile bottom nav */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:rgba(12,12,14,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav .inner{display:flex;justify-content:space-around;align-items:center;max-width:520px;margin:0 auto}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--muted);padding:4px 10px}
.bottom-nav a.active{color:var(--paper)}
.bottom-nav a .ico{font-size:20px;line-height:1}
.bottom-nav a.create .ico{
  width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;
  font-size:24px;margin-top:-22px;box-shadow:0 10px 26px rgba(193,39,45,.45);
}


.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:36px 28px;text-align:center;color:var(--muted)}
.empty b{color:var(--paper);display:block;font-size:var(--t-md);margin-bottom:6px}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.seen{opacity:1;transform:none}


/* ---------- nav icons + badges ---------- */
.nav-ico{position:relative;font-size:var(--t-lg);padding:6px 8px;color:var(--muted);border-radius:10px;line-height:1}
.nav-ico:hover,.nav-ico.active{color:var(--paper)}
.nav-ico i{
  position:absolute;top:-2px;right:-4px;font-style:normal;font-size:10.5px;font-weight:700;
  background:var(--red);color:#fff;border-radius:99px;padding:1px 5px;min-width:16px;text-align:center;
}

/* ---------- OAuth buttons ---------- */
.oauth-row{display:grid;gap:10px;margin-bottom:22px}
.btn-oauth{width:100%;padding:12px 18px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:11px;font-weight:600;font-size:var(--t-base);background:var(--surface-2)}
.btn-oauth:hover{border-color:rgba(242,239,233,.3)}
.btn-oauth svg{width:18px;height:18px;flex:none}
.or-line{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:var(--t-xs);margin-bottom:20px}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- profile picture presets ---------- */
.preset-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:480px}

.preset{padding:0;border-radius:14px;overflow:hidden;border:2px solid transparent;transition:border-color .15s;line-height:0}
.preset img{width:100%;height:auto}
.preset:hover{border-color:rgba(242,239,233,.3)}
.preset.on{border-color:var(--green-soft)}

/* ---------- messages layout ---------- */
.dm-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}

.dm-row{border-radius:12px;padding:8px 10px !important}
.dm-row:hover,.dm-row.on{background:var(--surface-2)}

/* ---------- requests panel ---------- */
.req-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.req-row:last-child{border-bottom:none}
.req-row form{display:flex;gap:8px;margin-left:auto}

/* ---------- placeholder pages ---------- */
.soon{padding:clamp(80px,14vh,160px) 0 clamp(96px,16vh,180px)}
.soon h1{font-size:clamp(38px,6vw,72px);font-variation-settings:"wdth" 118;letter-spacing:-.02em;max-width:14ch}
.soon p.big{margin-top:22px}
.soon-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* ============================================================
   Auth, profile setup, verification and error pages
   ============================================================ */

.btn-block{width:100%;padding:15px;margin-top:4px}
.btn-lg{padding:16px 34px;font-size:var(--t-md)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-ghost{border:1px solid var(--line-strong);color:var(--paper)}
.btn-ghost:hover{background:rgba(242,239,233,.06);border-color:var(--paper)}

.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.link-quiet{font-size:var(--t-xs);color:var(--muted);font-weight:600;transition:color .15s}
.link-quiet:hover{color:var(--brand-2)}
.form-foot-note{margin-top:14px;text-align:center}
.hint.is-ok{color:var(--green-soft)}
.hint.is-err{color:#E0565C}
.agree-field{margin-top:22px;display:grid;gap:10px}
.turnstile-field{margin:18px 0 6px;display:flex;justify-content:center}

/* progress steps shared by recovery and profile setup */
.steps{display:flex;gap:8px;margin-bottom:24px;counter-reset:step}
.steps li{
  flex:1;display:flex;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--muted);
  padding-bottom:9px;border-bottom:2px solid var(--line);transition:color .2s,border-color .2s;
}
.steps li span{
  width:21px;height:21px;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;font-size:var(--t-xs);font-weight:700;flex:none;transition:all .2s;
}
.steps li.is-now{color:var(--paper);border-bottom-color:var(--brand-2)}
.steps li.is-now span{background:var(--brand-grad);border-color:transparent;color:#fff}
.steps li.is-done{color:var(--paper)}
.steps li.is-done span{border-color:var(--green-soft);color:var(--green-soft)}


.code-input{
  font-size:28px;letter-spacing:.42em;text-align:center;text-transform:uppercase;
  font-weight:700;padding:16px 12px 16px 22px;
}
.resend-form{margin-top:14px}
.resend-hint{text-align:center;margin-top:8px;min-height:18px}

/* ---------- profile setup ---------- */
.setup-wrap{max-width:560px}
.setup-card h1{font-size:27px}
.setup-kicker{font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-2);margin-bottom:14px}
.setup-actions{display:flex;gap:12px;margin-top:26px}
.setup-actions .btn{flex:1;justify-content:center;padding:15px}

.city-search{position:relative;display:flex;align-items:center}
.city-search .city-ico{position:absolute;left:15px;color:var(--muted);pointer-events:none}
.city-search input{padding-left:44px}
.city-field.is-chosen .city-ico{color:var(--brand-2)}
.city-results{
  position:absolute;z-index:20;left:0;right:0;margin-top:6px;padding:6px;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:310px;overflow:auto;
}
.city-field{position:relative}
.city-result{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;
  transition:background-color .12s;
}
.city-result:hover,.city-result.is-active{background:rgba(242,239,233,.07)}
.city-result .ico{color:var(--muted);width:16px;height:16px}
.city-result .cr-main{display:flex;flex-direction:column;line-height:1.3;flex:1;font-size:var(--t-base)}
.city-result .cr-main b{color:var(--brand-2);font-weight:700}
.city-result .cr-main small{color:var(--muted);font-size:var(--t-xs)}
.city-result .cr-ar{color:var(--muted);font-size:var(--t-sm)}
.city-missing-field{margin-top:-4px}
.city-custom{margin-top:12px}
.city-custom input{width:100%}

.pick-lg label{padding:11px 18px;font-size:var(--t-base)}
.pick-count{margin-top:10px}
.tilepick{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.tilepick input{position:absolute;opacity:0;pointer-events:none}
.tilepick label{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:14px 8px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);
  font-size:var(--t-sm);font-weight:600;cursor:pointer;color:var(--muted);
  transition:transform .15s,border-color .15s,background-color .15s,color .15s;
}
.tilepick label:hover{transform:translateY(-2px);border-color:var(--line-strong);color:var(--paper)}
.tilepick .tile-emoji{font-size:22px;line-height:1}
.tilepick input:checked + label{
  border-color:var(--brand-2);background:rgba(139,124,240,.16);color:var(--paper);
}
.tilepick input:focus-visible + label{outline:2px solid var(--green-soft);outline-offset:2px}

/* ---------- verification ---------- */
.vbadge{
  display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:700;
  color:var(--green-soft);border:1px solid rgba(46,158,107,.4);background:rgba(46,158,107,.1);
  border-radius:999px;padding:3px 11px;vertical-align:middle;
}
.vbadge .seal{width:14px;height:14px;color:var(--green-soft)}
.app-narrow{max-width:720px}
.vsteps{display:grid;gap:2px}
.vsteps li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.vsteps li:last-child{border-bottom:none}
.vsteps .vdot{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-strong);margin-top:5px;flex:none}
.vsteps li.is-done .vdot{background:var(--green-soft);border-color:var(--green-soft)}
.vsteps li.is-now .vdot{background:var(--brand-2);border-color:var(--brand-2);box-shadow:0 0 0 5px rgba(139,124,240,.18)}
.vsteps b{display:block;font-size:var(--t-base)}
.vsteps small{color:var(--muted);font-size:var(--t-sm)}
.vstatus{margin-top:22px;padding:20px;border-radius:16px;border:1px solid var(--line);background:var(--surface-2)}
.vstatus-verified{border-color:rgba(46,158,107,.4)}
.vstatus-pending{border-color:rgba(139,124,240,.4)}
.vprivacy{margin-top:26px}
.vprivacy h2{font-size:var(--t-md);margin-bottom:12px}
.vprivacy ul{display:grid;gap:10px}
.vprivacy li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:var(--t-base)}
.vprivacy .ico{color:var(--brand-2);margin-top:3px}

/* ---------- profile ---------- */
.profile-sub{margin-top:6px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:var(--t-base)}
.profile-city{display:inline-flex;align-items:center;gap:6px;color:var(--paper)}
.profile-city .ico{width:15px;height:15px;color:var(--brand-2)}
.profile-city small{color:var(--muted);font-size:var(--t-xs)}
.profile-verify-note{margin-top:8px;font-size:var(--t-sm);color:var(--muted)}
.profile-verify-note a{color:var(--brand-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.profile-block{margin-top:20px}
.profile-block h2{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.profile-block .chips{margin-top:0}
.chip-soft{padding:7px 15px;font-size:var(--t-sm);background:var(--surface-2);transition:border-color .15s,transform .15s}
.chip-soft:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.profile-fact{margin-top:16px;display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--t-base)}
.profile-fact .ico{color:var(--brand-2)}

/* ---------- 404 / 500 ---------- */
.errpage{position:relative;overflow:hidden;padding:90px 0 120px;text-align:center}
.errpage-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.err-mark{width:88px;height:88px;margin-bottom:10px;filter:drop-shadow(0 12px 30px rgba(139,124,240,.35))}
.err-code{
  font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(46px,9vw,86px);line-height:1;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.errpage h1{font-size:clamp(26px,4.4vw,40px);margin-top:6px}
.err-lead{color:var(--muted);max-width:44ch;margin-top:10px;font-size:var(--t-md)}
.err-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.app-head .where{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.app-head .where .ico{width:15px;height:15px;color:var(--brand-2)}

/* Logo: the mark alone, no wordmark */
.foot-base .logo .logo-mark{width:34px;height:34px}


/* Verified / unverified badge icons */
.vbadge{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:700;color:var(--paper);
  border:1px solid rgba(139,124,240,.42);background:rgba(139,124,240,.14);
  border-radius:999px;padding:3px 11px 3px 6px;vertical-align:middle;
}
.vbadge img{width:18px;height:18px}
.vbadge-sm{font-size:0;gap:0;padding:2px;border:none;background:none}
.vbadge-sm img{width:17px;height:17px}
.vbadge-unv{border-color:var(--line-strong);background:rgba(242,239,233,.05);color:var(--muted)}

/* Default profile picture */
.avatar-default{background:none;object-fit:contain;padding:0}

/* Cookie notice */
.cookie-bar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:640px;margin:0 auto;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:rgba(20,20,24,.97);border:1px solid var(--line-strong);border-radius:18px;
  padding:16px 20px;box-shadow:0 24px 60px -20px rgba(0,0,0,.9);backdrop-filter:blur(12px);
  animation:cookieIn .3s ease-out;
}
@keyframes cookieIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cookie-bar p{font-size:var(--t-sm);color:var(--muted);flex:1;min-width:240px;line-height:1.5}
.cookie-bar p a{color:var(--paper);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cookie-bar .cookie-actions{display:flex;gap:9px;margin-left:auto}
.cookie-bar .btn{padding:10px 18px;font-size:var(--t-sm)}

body.has-cookie-bar .bottom-nav{bottom:96px}

/* ============================================================
   Header: breathing room between the three groups
   ============================================================ */
.wrap.nav,.wrap.pnav{display:flex;align-items:center;gap:clamp(24px,5vw,64px)}
.nav-links,.pnav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);margin:0 auto}
.nav-cta,.pnav-end{display:flex;align-items:center;gap:14px;margin-left:auto}



/* ============================================================
   React feed
   ============================================================ */
.feed-tabs{display:flex;align-items:center;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.feed-tabs button{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);font-size:var(--t-base);font-weight:600;
  transition:color .16s,border-color .16s,background-color .16s,transform .16s;
}
.feed-tabs button:hover{color:var(--paper);border-color:var(--line-strong);transform:translateY(-1px)}
.feed-tabs button.is-on{color:var(--paper);border-color:transparent;background:var(--brand-grad)}
.feed-tabs .ico{width:16px;height:16px}
.feed-tabs-end{display:flex;gap:6px;margin-left:auto}
.feed-tabs-end button{font-size:var(--t-sm);padding:7px 13px}
.feed-sub{font-size:var(--t-sm);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:30px 0 14px}

.kcard-r{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:14px;transition:border-color .18s,transform .18s,box-shadow .18s;
}
.kcard-r:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 20px 40px -28px rgba(0,0,0,.9)}
.kcard-r.is-in{border-color:rgba(46,158,107,.45)}
.kcard-r.is-event{background:linear-gradient(150deg,rgba(139,124,240,.10),transparent 60%),var(--surface)}
.kcard-r-head{display:flex;gap:14px;align-items:flex-start}
.kcard-r-emoji{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:21px;
  background:rgba(139,124,240,.15);flex:none;
}
.kcard-r-title h3{font-size:var(--t-lg);line-height:1.25}
.kcard-r-title h3 a{transition:color .15s}
.kcard-r-title h3 a:hover{color:var(--brand-2)}
.kcard-r-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:var(--t-sm);margin-top:4px}
.kpill{font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 9px;border-radius:999px;background:var(--brand-grad);color:#fff}
.kcard-r-desc{margin-top:12px;font-size:var(--t-base);color:var(--muted);max-width:62ch}
.kcard-r-city,.kcard-r-exact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:var(--t-sm)}
.kcard-r-city{color:var(--muted)}
.kcard-r-city small{width:100%;font-size:var(--t-xs);opacity:.8;padding-left:26px}
.kcard-r-exact{color:var(--green-soft)}
.kcard-r-city .ico,.kcard-r-exact .ico{width:16px;height:16px}
.kcard-r-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.kcard-r-host{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-sm);font-weight:600;transition:opacity .15s}
.kcard-r-host:hover{opacity:.78}
.kcard-r-host img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:rgba(139,124,240,.14)}
.kcard-r-spots{color:var(--muted);font-size:var(--t-sm);margin-left:auto}
.btn-sm{padding:9px 17px;font-size:var(--t-sm)}
.vmark{width:17px;height:17px}
.vmark.is-unv{opacity:.55}

.gate-note{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(139,124,240,.1);border:1px solid rgba(139,124,240,.32);
  border-radius:16px;padding:16px 18px;margin-bottom:20px;
}
.gate-note b{display:block;font-size:var(--t-base)}
.gate-note span{color:var(--muted);font-size:var(--t-sm);max-width:56ch}
.gate-note .btn{margin-left:auto}

.feed-skeleton .sk-card{height:150px;border-radius:var(--radius);background:var(--surface);margin-bottom:14px;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:.85}}

.side-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.side-head h2{font-size:var(--t-base)}
.side-empty,.side-note{color:var(--muted);font-size:var(--t-sm);line-height:1.55}
.notif-list li{border-bottom:1px solid var(--line)}
.notif-list li:last-child{border-bottom:none}
.notif-list a{display:flex;flex-direction:column;gap:3px;padding:11px 0;font-size:var(--t-sm);transition:opacity .15s}
.notif-list a:hover{opacity:.75}
.notif-list li.is-unread a{padding-left:12px;position:relative}
.notif-list li.is-unread a::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--brand-2)}
.notif-list time{color:var(--muted);font-size:var(--t-xs)}
.side-all{display:inline-block;margin-top:12px;font-size:var(--t-sm);color:var(--brand-2);font-weight:600}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:120;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;
  padding:12px 22px;font-size:var(--t-base);box-shadow:0 20px 44px -18px rgba(0,0,0,.9);
  animation:toastIn .22s ease-out;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* Role badges */
.vbadge-ceo{border-color:rgba(217,139,201,.5);background:rgba(217,139,201,.16);color:#F0C4E6}
.vbadge-staff{border-color:rgba(91,79,207,.55);background:rgba(91,79,207,.2);color:#C6BEFF}
.vbadge-ceo .ico,.vbadge-staff .ico{width:15px;height:15px;--seal-ink:#14141A}
.field-tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(139,124,240,.18);color:var(--brand-2);margin-left:6px;vertical-align:1px}
.field .hint .ico{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:4px;color:var(--brand-2)}
.k-when,.k-city,.k-exact{display:flex;gap:9px;align-items:flex-start;margin:10px 0 0;font-size:var(--t-md)}
.k-when{color:var(--muted);align-items:center}
.k-city{color:var(--muted)}
.k-exact{color:var(--green-soft)}
.k-city small,.k-exact small{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:3px;max-width:52ch}
.k-when .ico,.k-city .ico,.k-exact .ico{width:17px;height:17px;margin-top:3px;flex:none}

/* Profile: badges, facts and photos */
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fact-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fact{
  display:inline-flex;align-items:center;gap:7px;font-size:var(--t-sm);color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--surface-2);
}
.fact .ico{width:14px;height:14px;color:var(--brand-2)}
.photo-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.photo-shot{display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.photo-shot img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.photo-shot:hover img{transform:scale(1.05)}

/* Settings: photo manager */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:18px}
.photo-item{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.photo-item img{width:100%;height:100%;object-fit:cover}
.photo-remove{
  position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;font-size:var(--t-lg);line-height:1;
  background:rgba(12,12,14,.82);color:var(--paper);border:1px solid var(--line-strong);transition:background-color .15s;
}
.photo-remove:hover{background:#B23A3F;border-color:#B23A3F}
.photo-add{position:relative;aspect-ratio:3/4}
.photo-add label{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;
  border:1.5px dashed var(--line-strong);border-radius:16px;cursor:pointer;color:var(--muted);
  font-size:var(--t-sm);font-weight:600;transition:border-color .18s,color .18s,background-color .18s;
}
.photo-add label:hover{border-color:var(--brand-2);color:var(--paper);background:rgba(139,124,240,.08)}
.photo-add label small{font-size:var(--t-xs);font-weight:500;opacity:.8}
.photo-add .ico{width:22px;height:22px}
.photo-add input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.panel-title{font-size:var(--t-lg)}
.panel-lead{margin-top:6px;font-size:var(--t-base);max-width:62ch}
.field-suffix{position:absolute;right:16px;color:var(--muted);font-size:var(--t-sm);pointer-events:none}

/* ============================================================
   Header dropdowns
   ============================================================ */
.drop{position:relative}
.drop-btn{display:grid;place-items:center}
.drop-btn .ico{width:19px;height:19px}
.drop-panel{
  position:absolute;right:0;top:calc(100% + 12px);width:340px;z-index:60;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:16px;
  box-shadow:0 24px 56px -22px rgba(0,0,0,.85);overflow:hidden;
  animation:dropIn .16s ease-out;
}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.drop-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line);
}
.drop-head b{font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.drop-head a{font-size:var(--t-sm);color:var(--brand-2);font-weight:600}
.drop-head a:hover{color:var(--paper)}
.drop-item{
  display:flex;align-items:center;gap:11px;padding:12px 16px;
  border-bottom:1px solid var(--line);transition:background-color .14s;
}
.drop-item:last-child{border-bottom:none}
.drop-item:hover{background:rgba(236,234,244,.05)}
.drop-item.is-unread{background:rgba(139,124,240,.08)}
.drop-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.drop-body b{font-size:var(--t-sm);font-weight:600}
.drop-body small,.drop-text{
  font-size:var(--t-sm);color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.drop-item time{font-size:var(--t-xs);color:var(--muted);flex:none;align-self:flex-start;padding-top:2px}
.drop-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(139,124,240,.16);flex:none}
.drop-dot .ico{width:16px;height:16px;color:var(--brand-2)}
.drop-empty{padding:22px 16px;font-size:var(--t-sm);color:var(--muted);text-align:center;line-height:1.5}


/* ============================================================
   Switches
   ============================================================ */
.switch-form{display:flex;flex-direction:column;gap:2px}
.switch-row{
  display:flex;align-items:flex-start;gap:18px;padding:18px 0;
  border-bottom:1px solid var(--line);cursor:pointer;
}
.switch-row:last-of-type{border-bottom:none;margin-bottom:8px}
.switch-row input{position:absolute;opacity:0;width:0;height:0}
.switch-text{flex:1;display:flex;flex-direction:column;gap:4px}
.switch-text b{font-size:var(--t-md);font-weight:600}
.switch-text small{font-size:var(--t-sm);color:var(--muted);line-height:1.5;max-width:58ch}
.switch{
  position:relative;flex:none;width:46px;height:27px;border-radius:999px;margin-top:3px;
  background:rgba(236,234,244,.12);border:1px solid var(--line-strong);
  transition:background-color .2s ease,border-color .2s ease;
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:var(--muted);transition:transform .2s cubic-bezier(.3,1.4,.5,1),background-color .2s;
}
.switch-row input:checked ~ .switch,.switch.is-on{background:var(--brand-grad);border-color:transparent}
.switch-row input:checked ~ .switch::after,.switch.is-on::after{transform:translateX(19px);background:#fff}
.switch-row input:focus-visible ~ .switch{outline:2px solid var(--brand-2);outline-offset:3px}
.switch-row:hover .switch{border-color:var(--paper)}
.switch-row.is-locked{cursor:default;opacity:.85}
.switch.is-locked{opacity:.6}
.switch-row.is-locked:hover .switch{border-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   Message menus
   ============================================================ */
.msg{position:relative}
.msg-menu{position:relative;align-self:center;opacity:0;transition:opacity .15s}
.msg:hover .msg-menu,.msg-menu-list:not([hidden]){opacity:1}
.msg-menu-btn{
  width:26px;height:26px;border-radius:50%;color:var(--muted);font-size:var(--t-base);line-height:1;
  display:grid;place-items:center;transition:background-color .15s,color .15s;
}
.msg-menu-btn:hover{background:rgba(236,234,244,.09);color:var(--paper)}
.msg-menu-list{
  position:absolute;top:calc(100% + 4px);right:0;z-index:30;min-width:180px;padding:6px;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:0 16px 36px -16px rgba(0,0,0,.85);
}
.msg.mine .msg-menu-list{right:auto;left:0}
.msg-menu-list button{
  display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;
  font-size:var(--t-sm);color:var(--paper);transition:background-color .14s;
}
.msg-menu-list button:hover{background:rgba(236,234,244,.07)}
.msg-menu-list button.is-danger{color:#E58A8E}
.msg-menu-list button.is-danger:hover{background:rgba(178,58,63,.18)}
.bubble.is-gone{display:flex;align-items:center;gap:7px;font-style:italic;color:var(--muted);background:transparent;border:1px dashed var(--line-strong)}
.bubble.is-gone .ico{width:14px;height:14px}

/* ============================================================
   Type normalisation: everything reads from the scale
   ============================================================ */
.sub,.hint,.muted,.form-note{line-height:1.55}
.sub{font-size:var(--t-md);color:var(--muted);margin-bottom:26px}
.hint{font-size:var(--t-sm);color:var(--muted);margin-top:8px}
label{font-size:var(--t-sm);font-weight:600;letter-spacing:.01em}
input,select,textarea{font-size:var(--t-base) !important;line-height:1.5}
.btn{font-size:var(--t-base);font-weight:600;letter-spacing:.005em}
.panel h2,.panel h3{font-size:var(--t-lg)}
.app-head h1{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.02em}
.app-head .where{font-size:var(--t-base)}
.empty{font-size:var(--t-base);line-height:1.6;padding:44px 28px}
.empty b{display:block;font-size:var(--t-md);color:var(--paper);margin-bottom:6px}
.tabs a{font-size:var(--t-sm)}
.alert{font-size:var(--t-sm);line-height:1.55}

/* The feed, tightened up */
.feed-grid{gap:32px}
.kcard-r{padding:22px 24px;margin-bottom:16px;border-radius:20px}
.kcard-r-title h3{font-size:var(--t-lg);letter-spacing:-.015em}
.kcard-r-meta{font-size:var(--t-sm)}
.kcard-r-desc{font-size:var(--t-base);line-height:1.6;color:var(--muted)}
.kcard-r-city,.kcard-r-exact{font-size:var(--t-sm)}
.kcard-r-city small{font-size:var(--t-xs)}
.kcard-r-spots{font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.kcard-r-host{font-size:var(--t-sm)}
.feed-tabs button{font-size:var(--t-sm)}
.feed-sub{font-size:var(--t-xs);letter-spacing:.09em}
.side-card{padding:20px;border-radius:20px}
.side-card h2{font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.gate-note b{font-size:var(--t-base)}
.gate-note span{font-size:var(--t-sm);line-height:1.5}
.toast{font-size:var(--t-sm)}

/* Softer shadows and transitions everywhere: nothing should snap */
.btn,.kcard-r,.side-card,.panel,.chip,.drop-item{transition-timing-function:cubic-bezier(.32,.72,.32,1)}
.panel,.side-card,.kcard-r{box-shadow:0 1px 0 rgba(236,234,244,.03) inset}


/* ============================================================
   Header menus: friends, account, badge tooltips
   ============================================================ */
.logo,.logo-mark{border:none !important;outline:none;background:none;box-shadow:none}
.logo img{border-radius:0}

.avatar-btn{display:grid;place-items:center;padding:0;border-radius:50%;transition:box-shadow .16s,transform .16s}
.avatar-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 2px var(--brand-2)}
.avatar-btn[aria-expanded="true"]{box-shadow:0 0 0 2px var(--brand-2)}
.avatar-btn .avatar{margin:0}
.drop-panel-sm{width:250px}
.drop-me-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}
.drop-me-head span{display:flex;flex-direction:column;min-width:0}
.drop-me-head b{font-size:var(--t-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drop-me-head small{font-size:var(--t-xs);color:var(--muted)}
.drop-links{padding:6px}
.drop-links a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;
  font-size:var(--t-sm);font-weight:500;color:var(--paper);transition:background-color .14s,color .14s;
}
.drop-links a:hover{background:rgba(236,234,244,.07)}
.drop-links a .ico{width:16px;height:16px;color:var(--muted)}
.drop-links a:hover .ico{color:var(--brand-2)}
.drop-links a span{margin-left:auto;font-size:var(--t-xs);color:var(--muted)}
.drop-links a span.is-count{
  background:var(--brand-grad);color:#fff;font-weight:700;min-width:20px;height:20px;
  border-radius:999px;display:grid;place-items:center;padding:0 6px;
}
.drop-foot{padding:6px;border-top:1px solid var(--line)}
.drop-foot a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;font-size:var(--t-sm);font-weight:500;transition:background-color .14s}
.drop-foot a.is-danger{color:#E58A8E}
.drop-foot a.is-danger:hover{background:rgba(178,58,63,.16)}
.drop-foot .ico{width:16px;height:16px}
.drop-head-sub{border-top:1px solid var(--line)}

.person-row:last-child{border-bottom:none}
.person-main{display:flex;align-items:center;gap:13px;flex:1;min-width:200px;transition:opacity .15s}
.person-main:hover{opacity:.8}
.person-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.person-id b{display:flex;align-items:center;gap:7px;font-size:var(--t-md);font-weight:600}
.person-id small{font-size:var(--t-sm);color:var(--muted)}
.person-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.person-note{font-size:var(--t-sm);color:var(--muted)}
.btn.is-danger{color:#E58A8E;border-color:rgba(178,58,63,.4)}
.btn.is-danger:hover{background:rgba(178,58,63,.16);border-color:#B23A3F;color:#F3C3C5}
.search-row{display:flex;gap:10px;margin:16px 0 8px}
.search-row input{flex:1}

/* ============================================================
   Header geometry: three fixed zones.
   Left column and right column are the same width, so the middle
   nav sits on the true centre of the page instead of drifting.
   ============================================================ */
/* Full width: the logo sits on the left edge of the window, the icons on the
   right edge, and the nav is centred on the window rather than on a
   1320px box that was leaving big gaps on a wide screen. */
.wrap.nav,.wrap.pnav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  width:100%;
  max-width:none;
  padding:0 24px;
}
.wrap.nav > .logo,.wrap.pnav > .logo{justify-self:start;margin:0}
.nav-links,.pnav-links{
  justify-self:center;display:flex;align-items:center;
  gap:clamp(14px,1.8vw,30px);margin:0;white-space:nowrap;
}
.nav-cta,.pnav-end{justify-self:end;display:flex;align-items:center;gap:10px;margin:0}
.nav-links a,.pnav-links a{font-size:var(--t-sm);font-weight:500;color:var(--muted);transition:color .16s}
.nav-links a:hover,.pnav-links a:hover,
.nav-links a.active,.pnav-links a[aria-current="page"]{color:var(--paper)}

/* Logo: the mark only, no ring, no plate, no border */
.logo{border:0;background:none;box-shadow:none;padding:0}
.logo .logo-mark{
  width:44px;height:44px;border:0;border-radius:0;background:none;
  box-shadow:none;transition:transform .18s cubic-bezier(.32,.72,.32,1);
}
.logo:hover .logo-mark{transform:scale(1.05)}
.logo:active .logo-mark{transform:scale(.98)}
.foot-base .logo .logo-mark{width:36px;height:36px}


/* More menu inside the centre nav */
.drop-more{position:relative}
.nav-more{
  display:inline-flex;align-items:center;gap:5px;font-size:var(--t-sm);font-weight:500;
  color:var(--muted);transition:color .16s;
}
.nav-more:hover,.nav-more[aria-expanded="true"]{color:var(--paper)}
.nav-more .chev{width:13px;height:13px;transition:transform .18s}
.nav-more[aria-expanded="true"] .chev{transform:rotate(180deg)}
.drop-more .drop-panel{left:50%;right:auto;transform:translateX(-50%)}
.drop-more .drop-links a span{
  font-size:var(--t-xs);color:var(--brand-2);border:1px solid rgba(139,124,240,.34);
  border-radius:999px;padding:1px 7px;
}

/* Below the desktop breakpoint the centre nav becomes the drawer again */


/* ============================================================
   Admin panel
   ============================================================ */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.stat b{display:block;font-size:26px;font-variation-settings:var(--wide);font-weight:700;line-height:1.1}
.stat small{display:block;font-size:var(--t-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.admin-list{display:flex;flex-direction:column}
.admin-row{
  display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.admin-row:last-child{border-bottom:none}
.admin-who{display:flex;gap:13px;align-items:flex-start;min-width:260px;flex:1}
.admin-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.admin-id b{display:flex;align-items:center;gap:7px;font-size:var(--t-md);font-weight:600}
.admin-id small{font-size:var(--t-xs);color:var(--muted);word-break:break-word}
.admin-flag{color:#E58A8E;font-weight:600}
.admin-acts{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.admin-form{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.admin-form select,.admin-form input{
  padding:8px 11px !important;font-size:var(--t-sm) !important;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--paper);
}
.admin-ban input{min-width:190px}
.log-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.log-list li{
  display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:var(--t-sm);color:var(--muted);
  padding:9px 0;border-bottom:1px solid var(--line);
}
.log-list li:last-child{border-bottom:none}
.log-list b{color:var(--paper);font-weight:600}
.log-list time{margin-left:auto;font-size:var(--t-xs)}


/* ============================================================
   Share profile
   ============================================================ */
.share-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:16px}
.share-btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line-strong);font-size:var(--t-sm);font-weight:600;color:var(--paper);
  transition:border-color .16s,background-color .16s,transform .16s;
}
.share-btn:hover{border-color:var(--brand-2);background:rgba(139,124,240,.1);transform:translateY(-1px)}
.share-btn .ico{width:15px;height:15px;color:var(--brand-2)}
.share-btn.is-done{border-color:var(--green-soft);color:var(--green-soft)}
.share-btn.is-done .ico{color:var(--green-soft)}
.share-url{
  font-size:var(--t-sm);color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;font-family:ui-monospace,"SF Mono",Menlo,monospace;
}


/* Notifications page */
.notif-full{display:flex;flex-direction:column;margin-top:8px}
.notif-full li{border-bottom:1px solid var(--line)}
.notif-full li:last-child{border-bottom:none}
.notif-full a{display:flex;align-items:center;gap:13px;padding:14px 0;transition:opacity .15s}
.notif-full a:hover{opacity:.82}
.notif-full li.is-unread a{padding-left:14px;position:relative}
.notif-full li.is-unread a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--brand-2)}
.notif-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(139,124,240,.14);flex:none}
.notif-icon .ico{width:18px;height:18px;color:var(--brand-2)}
.notif-text{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.notif-text span{font-size:var(--t-base);line-height:1.45}
.notif-text time{font-size:var(--t-xs);color:var(--muted)}
.notif-go{width:15px;height:15px;color:var(--muted);transform:rotate(-90deg);flex:none}

/* ============================================================
   Header, final geometry. Left edge, true centre, right edge.
   ============================================================ */
.site .wrap.nav,.site .wrap.pnav{max-width:none;width:100%;padding:0 24px}
.wrap.nav > .logo,.wrap.pnav > .logo{justify-self:start;margin:0 auto 0 0}
.wrap.nav > .nav-links,.wrap.pnav > .pnav-links{justify-self:center}
.wrap.nav > .nav-cta,.wrap.pnav > .pnav-end{justify-self:end;margin:0 0 0 auto}

/* The mark only. No plate, no ring, no radius, at any size. */
.logo{display:inline-flex;align-items:center;padding:0;border:0;background:none;box-shadow:none}
.logo .logo-mark{
  width:46px;height:46px;border:0;border-radius:0;background:none;box-shadow:none;
  transition:transform .18s cubic-bezier(.32,.72,.32,1);
}
.logo:hover .logo-mark{transform:scale(1.05)}
.logo:active .logo-mark{transform:scale(.97)}
.foot-base .logo .logo-mark{width:38px;height:38px}


/* No plate, ring or tint behind any badge or icon image. */
.vbadge img,.vmark,.avatar-default,.err-mark,.logo-mark,.drop-dot img{
  background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
}
.vbadge-sm{background:none;border:0;padding:0}
.avatar.avatar-default{background:none;border-radius:0}
.kcard-r-host img.avatar-default,.person-main img.avatar-default{border-radius:0}

/* Admin first-run setup */
.totp-box{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:24px}
.totp-box h2,.totp-step{font-size:var(--t-md);margin-bottom:8px}
.totp-step{margin:26px 0 12px;padding-top:20px;border-top:1px solid var(--line)}
.totp-key{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0}
.totp-key code{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:var(--t-md);letter-spacing:.12em;
  background:var(--ink);border:1px solid var(--line-strong);border-radius:10px;padding:11px 15px;color:var(--paper);
  word-break:break-all;
}

/* ============================================================
   Light theme. Same layout, same spacing, only the surfaces change.
   ============================================================ */
[data-theme="light"]{
  --ink:#F7F6FB;
  --surface:#FFFFFF;
  --surface-2:#F1EFF8;
  --line:rgba(24,22,38,.10);
  --line-strong:rgba(24,22,38,.20);
  --paper:#1A1826;
  --muted:#6B6880;
  --seal-ink:#FFFFFF;
}
[data-theme="light"] body{background:var(--ink);color:var(--paper)}
[data-theme="light"] .site{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
[data-theme="light"] .panel,[data-theme="light"] .side-card,[data-theme="light"] .kcard-r,
[data-theme="light"] .auth-card,[data-theme="light"] .stat{background:var(--surface);box-shadow:0 1px 3px rgba(24,22,38,.06)}
[data-theme="light"] .drop-panel,[data-theme="light"] .lang-menu,[data-theme="light"] .msg-menu-list,
[data-theme="light"] .cookie-bar,[data-theme="light"] .toast{
  background:#FFFFFF;box-shadow:0 18px 44px -20px rgba(24,22,38,.35);
}
[data-theme="light"] [data-theme="light"] .drop-item:hover,[data-theme="light"] .drop-links a:hover{background:rgba(24,22,38,.05)}
[data-theme="light"] .btn-ghost{color:var(--paper)}
[data-theme="light"] .btn-ghost:hover{background:rgba(24,22,38,.05)}
[data-theme="light"] .switch{background:rgba(24,22,38,.14)}
[data-theme="light"] .code-input,[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea{
  background:var(--surface-2);color:var(--paper);
}
[data-theme="light"] .foot{background:var(--surface-2)}
[data-theme="light"] .err-code,[data-theme="light"] .logo .ma{filter:saturate(1.1)}
[data-theme="light"] .arabic-ghost{opacity:.05}
[data-theme="light"] .bubble{background:var(--surface-2)}
[data-theme="light"] .msg.mine .bubble{background:var(--brand-grad);color:#fff}

/* Right-to-left, for Arabic */
[dir="rtl"] .nav-links,[dir="rtl"] .pnav-links{flex-direction:row-reverse}
[dir="rtl"] .drop-panel{left:0;right:auto}
[dir="rtl"] .drop-more .drop-panel{left:50%;right:auto}
[dir="rtl"] .drop-item time,[dir="rtl"] .kcard-r-spots,[dir="rtl"] .log-list time{margin-left:0;margin-right:auto}
[dir="rtl"] .notif-go{transform:rotate(90deg)}
[dir="rtl"] .msg.mine{flex-direction:row}
[dir="rtl"] .steps li{flex-direction:row-reverse}
[dir="rtl"] .city-search input{padding-left:16px;padding-right:44px}
[dir="rtl"] .city-search .city-ico{left:auto;right:15px}
[dir="rtl"] .cityx-row::after{content:"←";margin-left:0;margin-right:10px}

/* Language menu headings */
.lang-head{
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:10px 14px 6px;
}
.lang-head-sub{border-top:1px solid var(--line);margin-top:6px}
.lang-opt span{display:inline-flex;align-items:center;gap:8px}
.lang-opt .ico{width:15px;height:15px}

/* ============================================================
   Icons never sit on a plate. Anywhere.
   ============================================================ */
.kcard-r-emoji,.notif-icon,.drop-dot,.vbadge,.vbadge-sm,.vbadge-unv,
.vbadge-ceo,.vbadge-staff,.avatar-default,.gate-note img,.tile-emoji,
.fact .ico,.share-btn .ico,.drop-links a .ico{
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
}
.vbadge{border:0;padding:2px 0 2px 0;gap:6px}
.vbadge-ceo,.vbadge-staff{border:0;padding:2px 0}
.vbadge-ceo .ico{color:#E4A8DA}
.vbadge-staff .ico{color:#A99CFF}
.vbadge-unv{opacity:.85}
.kcard-r-emoji{width:38px;height:38px;font-size:26px}
.notif-icon{width:36px;height:36px}
.notif-icon .ico{width:22px;height:22px;color:var(--brand-2)}
.drop-dot{width:34px;height:34px}
.drop-dot .ico{width:20px;height:20px}
.gate-note{background:none;border:1px solid rgba(139,124,240,.3)}
.avatar-default{background:none !important;padding:0;object-fit:contain}

/* Locked profile notice */
.locked-note{
  display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;
  border:1px solid var(--line-strong);border-radius:14px;background:none;
}
.locked-note .ico{width:18px;height:18px;color:var(--brand-2);margin-top:2px;flex:none}
.locked-note b{display:block;font-size:var(--t-base)}
.locked-note span{display:block;font-size:var(--t-sm);color:var(--muted);line-height:1.5;max-width:56ch}
.plan-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#F0C4E6;
}

/* ============================================================
   Avatar cropper
   ============================================================ */
.file-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:28px 20px;border:1.5px dashed var(--line-strong);border-radius:18px;cursor:pointer;
  text-align:center;transition:border-color .18s,background-color .18s,color .18s;
}
.file-drop:hover{border-color:var(--brand-2);background:rgba(139,124,240,.06)}
.file-drop .ico{width:26px;height:26px;color:var(--brand-2)}
.file-drop b{font-size:var(--t-base)}
.file-drop small{font-size:var(--t-sm);color:var(--muted)}

.crop-editor{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.crop-main{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.crop-stage{position:relative;width:320px;height:320px;max-width:100%;border-radius:18px;overflow:hidden;background:var(--surface-2)}
.crop-stage.is-over{outline:2px dashed var(--brand-2);outline-offset:-4px}
#crop-canvas{display:block;width:320px;height:320px;cursor:grab;touch-action:none}
#crop-canvas.is-dragging{cursor:grabbing}
.crop-ring{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(16,16,21,.62);border-radius:50%;
}
[data-theme="light"] .crop-ring{box-shadow:0 0 0 9999px rgba(247,246,251,.72)}
.crop-side{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.crop-label{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.crop-preview{
  display:block;border-radius:50%;background-size:cover;background-position:center;
  border:1px solid var(--line-strong);
}
.crop-lg{width:104px;height:104px}
.crop-hint{font-size:var(--t-sm);color:var(--muted);max-width:26ch;line-height:1.5}
.crop-zoom{display:flex;align-items:center;gap:12px;margin-top:18px;max-width:380px}
.crop-zoom .ico{width:17px;height:17px;color:var(--muted)}
.crop-zoom input[type=range]{flex:1;accent-color:var(--brand-2)}
.crop-actions{display:flex;gap:10px;margin-top:18px}


/* ============================================================
   Messages
   ============================================================ */
.dm-grid{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
.dm-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;position:sticky;top:88px}
.dm-start{display:flex;align-items:center;gap:8px;position:relative;margin-bottom:14px}
.dm-start-at{position:absolute;left:13px;color:var(--muted);font-size:var(--t-base);pointer-events:none}
.dm-start input{flex:1;padding-left:28px !important}
.dm-empty{font-size:var(--t-sm);color:var(--muted);padding:16px 8px;line-height:1.55}
.dm-list{display:flex;flex-direction:column;gap:2px;max-height:min(62vh,560px);overflow:auto}
.dm-row{
  display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;
  transition:background-color .14s;
}
.dm-row:hover{background:rgba(236,234,244,.06)}
[data-theme="light"] .dm-row:hover{background:rgba(24,22,38,.05)}
.dm-row.is-on{background:rgba(139,124,240,.14)}
.dm-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dm-row-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.dm-row-top b{font-size:var(--t-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-row-top time{font-size:var(--t-xs);color:var(--muted);flex:none}
.dm-row-body small{font-size:var(--t-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-row.is-unread .dm-row-body small{color:var(--paper)}
.dm-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-2);flex:none}
.dm-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.dm-head-who{display:flex;align-items:center;gap:12px;flex:1;min-width:180px;transition:opacity .15s}
.dm-head-who:hover{opacity:.8}
.dm-head-who span{display:flex;flex-direction:column;gap:2px;min-width:0}
.dm-head-who b{display:flex;align-items:center;gap:7px;font-size:var(--t-md)}
.dm-head-who small{font-size:var(--t-sm);color:var(--muted)}
.dm-head-acts{display:flex;gap:8px;align-items:center}
.chat{
  max-height:min(50vh,480px);min-height:180px;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:10px;padding:4px 4px 4px 0;
  overscroll-behavior:contain;
}


/* Prompt shown to visitors who are not signed in */
.guest-cta{
  margin-top:20px;padding:18px 20px;border:1px solid rgba(139,124,240,.3);border-radius:16px;
  display:flex;flex-direction:column;gap:4px;
}
.guest-cta b{font-size:var(--t-md)}
.guest-cta span{font-size:var(--t-sm);color:var(--muted)}
.guest-cta-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}

/* ============================================================
   Chat, messaging-app behaviour
   ============================================================ */
.chat-board{display:flex;flex-direction:column;min-height:0}
.chat-hint{font-size:var(--t-sm);color:var(--muted);padding:10px 2px 14px}
.msg{display:flex;gap:9px;align-items:flex-end;max-width:82%}
.msg.mine{margin-left:auto;flex-direction:row-reverse}
.msg .avatar{flex:none}
.bubble{
  padding:10px 14px;border-radius:18px;font-size:var(--t-base);line-height:1.45;
  background:var(--surface-2);border-bottom-left-radius:6px;word-break:break-word;white-space:pre-wrap;
}
.msg.mine .bubble{background:var(--brand-grad);color:#fff;border-bottom-left-radius:18px;border-bottom-right-radius:6px}
.bubble b{display:block;font-size:var(--t-xs);opacity:.75;margin-bottom:2px;font-weight:700}
.msg.is-pending{opacity:.55}
.msg.is-failed .bubble{background:rgba(178,58,63,.2);color:#F3C3C5}
.msg-retry{display:block;margin-top:6px;font-size:var(--t-xs);color:#F3C3C5;text-decoration:underline}
.chat-form{display:flex;gap:9px;align-items:flex-end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.chat-form textarea{
  flex:1;resize:none;max-height:140px;min-height:44px;padding:11px 15px !important;
  border-radius:20px;line-height:1.45;
}
.chat-form .btn{height:44px;width:44px;padding:0;display:grid;place-items:center;border-radius:50%;flex:none}
.chat-form .btn .ico{width:18px;height:18px}

/* Popup notifications */
.pop-stack{position:fixed;right:18px;bottom:18px;z-index:130;display:flex;flex-direction:column;gap:10px;max-width:340px}
.pop{
  display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:16px;
  background:var(--surface-2);border:1px solid var(--line-strong);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.85);animation:popUp .22s ease-out;cursor:pointer;
}
@keyframes popUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pop.is-leaving{opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s}
.pop-body{flex:1;min-width:0}
.pop-body b{display:block;font-size:var(--t-sm);margin-bottom:2px}
.pop-body span{display:block;font-size:var(--t-sm);color:var(--muted);line-height:1.45}
.pop-close{color:var(--muted);font-size:17px;line-height:1;padding:2px 4px;border-radius:6px}
.pop-close:hover{color:var(--paper);background:rgba(236,234,244,.08)}
.pop .ico{width:20px;height:20px;color:var(--brand-2);flex:none;margin-top:2px}

.head-actions{display:flex;gap:8px;flex-wrap:wrap}
.notif-full li{position:relative}
.notif-del{
  position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0;
  width:28px;height:28px;border-radius:50%;color:var(--muted);font-size:var(--t-lg);line-height:1;
  transition:opacity .15s,background-color .15s,color .15s;
}
.notif-full li:hover .notif-del,.notif-del:focus-visible{opacity:1}
.notif-del:hover{background:rgba(178,58,63,.18);color:#E58A8E}
.notif-full li:hover .notif-go{opacity:0}
.default-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line);
}
.default-row b{display:block;font-size:var(--t-base)}
.default-row span{display:block;font-size:var(--t-sm);color:var(--muted);max-width:46ch}
.default-row form{margin-left:auto}

/* Role badges: the icons carry the meaning, so no plate behind them */
.vbadge img{width:18px;height:18px;display:block}
.vbadge-founder,.vbadge-staff,.vbadge-ceo{border:0;background:none;padding:2px 0;color:var(--paper)}
.vbadge-sm img{width:17px;height:17px}
.role-picks{display:flex;gap:6px;flex-wrap:wrap}
.role-picks input{position:absolute;opacity:0;width:0;height:0}
.role-picks label{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);font-size:var(--t-xs);color:var(--muted);cursor:pointer;
  transition:border-color .15s,color .15s,background-color .15s;
}
.role-picks label:hover{border-color:var(--line-strong);color:var(--paper)}
.role-picks input:checked + label{border-color:var(--brand-2);background:rgba(139,124,240,.14);color:var(--paper)}
.role-picks img{opacity:.7}
.role-picks input:checked + label img{opacity:1}

/* Two-factor settings */
.twofa-state{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:18px 0 8px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-strong);
}
.twofa-state b{font-size:var(--t-base)}
.twofa-app,.twofa-email{border-color:rgba(46,158,107,.4)}
.twofa-option{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.twofa-option h3{display:flex;align-items:center;gap:9px;font-size:var(--t-md);margin-bottom:6px}
.twofa-confirm{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.twofa-confirm .code-input{max-width:220px;font-size:22px;letter-spacing:.3em;padding:12px}

/* Reports and tickets */
.share-btn.is-quiet{border-color:var(--line);color:var(--muted)}
.share-btn.is-quiet:hover{border-color:#B23A3F;color:#E58A8E;background:rgba(178,58,63,.1)}
.share-btn.is-quiet .ico{color:inherit}
.k-actions{margin-top:10px}
.report-link{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-sm);color:var(--muted);transition:color .15s}
.report-link:hover{color:#E58A8E}
.report-link .ico{width:15px;height:15px}
.reason-pick label{text-align:left}

.ticket-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.ticket-id{font-size:var(--t-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ticket-status{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);flex:none;
}
.ticket-status.is-open{border-color:rgba(139,124,240,.45);color:var(--brand-2)}
.ticket-status.is-answered{border-color:rgba(46,158,107,.45);color:var(--green-soft)}
.ticket-thread{display:flex;flex-direction:column;gap:12px;margin:22px 0}
.ticket-thread li{display:flex}
.ticket-thread li.is-staff{justify-content:flex-end}
.ticket-msg{max-width:78%;padding:13px 16px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
.ticket-thread li.is-staff .ticket-msg{background:rgba(139,124,240,.13);border-color:rgba(139,124,240,.3)}
.ticket-msg b{font-size:var(--t-sm)}
.ticket-msg time{font-size:var(--t-xs);color:var(--muted);margin-left:8px}
.ticket-msg p{margin-top:6px;font-size:var(--t-base);line-height:1.55}
.ticket-reply textarea{width:100%;resize:vertical}
.ticket-reply-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.ticket-list{display:flex;flex-direction:column}
.ticket-list li{border-bottom:1px solid var(--line)}
.ticket-list li:last-child{border-bottom:none}
.ticket-list a{display:flex;align-items:center;gap:14px;padding:14px 0;transition:opacity .15s}
.ticket-list a:hover{opacity:.8}
.ticket-list-main{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.ticket-list-main b{font-size:var(--t-base)}
.ticket-list-main small{font-size:var(--t-sm);color:var(--muted)}
.vbadge-plus{border:0;background:none;padding:2px 0;color:#F0C4E6}

/* ============================================================
   Picture preview
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;gap:14px;
  background:rgba(8,8,11,.92);backdrop-filter:blur(6px);padding:32px 18px;
}
.lightbox.is-open{display:flex;animation:lbIn .18s ease-out}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
body.has-lightbox{overflow:hidden}
.lightbox-figure{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(880px,92vw)}
.lightbox-figure img{
  max-width:100%;max-height:78vh;border-radius:18px;object-fit:contain;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9);
}
.lightbox-figure figcaption{font-size:var(--t-sm);color:var(--muted)}
.lightbox-close{
  position:absolute;top:18px;right:20px;width:42px;height:42px;border-radius:50%;
  font-size:26px;line-height:1;color:#E8E6F0;background:rgba(236,234,244,.1);transition:background-color .15s;
}
.lightbox-close:hover{background:rgba(236,234,244,.2)}
.lightbox-nav{
  width:46px;height:46px;border-radius:50%;font-size:26px;line-height:1;flex:none;
  color:#E8E6F0;background:rgba(236,234,244,.1);transition:background-color .15s;
}
.lightbox-nav:hover{background:rgba(236,234,244,.2)}
[data-preview]{cursor:zoom-in}

.avatar-preview{display:inline-block;cursor:zoom-in;transition:transform .18s cubic-bezier(.32,.72,.32,1)}
.avatar-preview:hover{transform:scale(1.04)}
.drop-head-acts{display:flex;align-items:center;gap:12px}
.drop-head-acts button{font-size:var(--t-sm);font-weight:600;color:var(--muted);transition:color .15s}
.drop-head-acts button:hover{color:var(--brand-2)}
.stat.is-on{border-color:var(--brand-2);background:rgba(139,124,240,.12)}
a.stat{transition:border-color .16s,background-color .16s,transform .16s}
a.stat:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.ticket-status.is-pending{border-color:rgba(217,139,201,.45);color:#E4A8DA}
.ticket-status.is-closed{opacity:.7}
.ticket-status-form{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);
}
.ticket-status-form label{font-size:var(--t-sm);color:var(--muted)}
.ticket-status-form select{padding:8px 12px !important;font-size:var(--t-sm) !important;border-radius:9px}
.ticket-status-form .hint{margin:0;flex:1;min-width:200px}
.locked-field{
  display:flex;align-items:flex-start;gap:11px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface-2);
}
.locked-field .ico{width:17px;height:17px;color:var(--brand-2);margin-top:2px;flex:none}
.locked-field b{display:block;font-size:var(--t-base)}
.locked-field span{display:block;font-size:var(--t-sm);color:var(--muted);line-height:1.5;margin-top:3px}

/* Khrija Plus */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-bottom:22px}
.plan-card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  transition:border-color .18s,transform .18s;
}
.plan-card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.plan-card.is-featured{border-color:rgba(139,124,240,.45)}
.plan-flag{
  position:absolute;top:16px;right:16px;font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;background:var(--brand-grad);padding:4px 11px;border-radius:999px;
}
.plan-icon{width:52px;height:52px;background:none}
.plan-card h2{font-size:var(--t-lg)}
.plan-price{display:flex;align-items:baseline;gap:7px}
.plan-price b{font-size:38px;font-variation-settings:var(--wide);line-height:1}
.plan-price span{font-size:var(--t-sm);color:var(--muted)}
.plan-note{font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.plan-check{color:var(--brand-2)}
.plan-card .btn{margin-top:auto}
.plan-list{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.plan-list li{display:flex;gap:12px;align-items:flex-start}
.plan-list .ico{width:18px;height:18px;color:var(--brand-2);margin-top:3px;flex:none}
.plan-list b{display:block;font-size:var(--t-base)}
.plan-list span{display:block;font-size:var(--t-sm);color:var(--muted);line-height:1.55;max-width:62ch}

/* Ticket thread: a fixed box that scrolls, so the page never keeps growing */
.ticket-board{max-height:min(52vh,460px);overflow-y:auto;margin:22px 0;padding-right:4px}
.ticket-thread{margin:0}
.ticket-reply textarea{max-height:200px}
.ticket-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px}
.ticket-foot a{font-size:var(--t-sm);color:var(--brand-2)}
.ticket-head{align-items:center}

/* Events */
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.event-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .18s,transform .18s;
}
.event-card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.event-shot{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.event-shot img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.event-card:hover .event-shot img{transform:scale(1.04)}
.event-body{padding:20px 22px;display:flex;flex-direction:column;gap:7px;flex:1}
.event-body h2{font-size:var(--t-lg)}
.event-when,.event-where{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--muted)}
.event-when .ico,.event-where .ico{width:15px;height:15px;color:var(--brand-2)}
.event-address{font-size:var(--t-sm);color:var(--muted);padding-left:23px}
.event-summary{font-size:var(--t-base);margin-top:4px}
.event-desc{font-size:var(--t-sm);color:var(--muted);line-height:1.55}
.event-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.event-price{font-size:var(--t-sm);font-weight:700;color:var(--brand-2)}
.feed-tabs a{
  display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);font-size:var(--t-sm);font-weight:600;transition:all .16s;
}
.feed-tabs a:hover{color:var(--paper);border-color:var(--line-strong)}
.feed-tabs a.is-on{color:var(--paper);border-color:transparent;background:var(--brand-grad)}

/* ============================================================
   Legal pages
   ============================================================ */
.legal-kicker{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2);font-weight:700}
.legal h1{font-size:clamp(30px,5vw,46px);margin:10px 0 16px}
.legal-lead{font-size:var(--t-md);color:var(--muted);line-height:1.7;max-width:70ch}
.legal-date{font-size:var(--t-sm);color:var(--muted);margin-top:12px}
.legal-toc{
  display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 40px;padding:18px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
}
.legal-toc a{font-size:var(--t-sm);color:var(--muted);padding:6px 12px;border-radius:999px;border:1px solid transparent;transition:all .15s}
.legal-toc a:hover{color:var(--paper);border-color:var(--line-strong)}
.legal section{margin-bottom:40px;scroll-margin-top:96px}
.legal h2{font-size:var(--t-xl);margin-bottom:14px}
.legal h3{font-size:var(--t-md);margin:20px 0 8px;color:var(--brand-2)}
.legal p{font-size:var(--t-base);line-height:1.75;margin-bottom:14px;max-width:72ch}
.legal ul{display:flex;flex-direction:column;gap:9px;margin:0 0 16px;padding-left:20px;list-style:disc}
.legal li{font-size:var(--t-base);line-height:1.7;max-width:70ch}
.legal a{color:var(--brand-2);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--paper)}
.legal-table{width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:var(--t-sm)}
.legal-table th,.legal-table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.legal-table th{color:var(--muted);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;font-weight:700}


/* ============================================================
   Phones. Touch targets, safe areas, and nothing wider than the screen.
   ============================================================ */






/* Landscape phones: the header must not eat the screen */

.event-flag{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#F0C4E6;margin-bottom:4px;
}
.event-flag img{background:none}
.vbadge-plus .vbadge-plus img{filter:drop-shadow(0 2px 6px rgba(217,139,201,.4))}

/* ============================================================
   One alignment system for the whole site.

   Everything sits on a 4px rhythm and one of three container widths.
   Before this, each page invented its own padding and max-width, which is
   why sections never lined up with each other.
   ============================================================ */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --w-narrow:560px;    /* forms and single-column reading */
  --w-mid:860px;       /* lists, tickets, settings */
  --w-wide:1180px;     /* feeds and grids */
  --radius-sm:12px; --radius:18px; --radius-lg:22px;
}

/* Containers: three widths, one padding rule, always centred. */
.app-mid{max-width:var(--w-mid)}
.app-narrow{max-width:var(--w-narrow)}
.setup-wrap{max-width:600px}

/* Cards: one padding, one radius, one border. */
.panel,.auth-card,.side-card,.kcard-r,.event-card,.plan-card,.stat,.totp-box,.dm-side{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
}
.panel,.auth-card{padding:clamp(20px,3vw,28px)}
.panel + .panel{margin-top:var(--space-5)}

/* Page headers all sit the same distance from the content below them. */
.app-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  margin-bottom:var(--space-6);
}
.app-head h1{margin:0}
.app-head .where{margin-top:var(--space-2)}

/* Section headings inside a card share one scale and one gap. */
.panel-title{margin:0 0 var(--space-2)}
.panel-lead{margin:0 0 var(--space-4)}
.panel-lead:last-child{margin-bottom:0}

/* Form rhythm: every field the same distance apart, every label the same. */
.field{margin-bottom:var(--space-5)}
.field:last-of-type{margin-bottom:var(--space-4)}
.field label{display:block;margin-bottom:var(--space-2)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}

input,select,textarea{
  width:100%;padding:13px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface-2);color:var(--paper);
  transition:border-color .16s,background-color .16s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-2);background:var(--surface)}
.field-affix{position:relative;display:flex;align-items:center}
.field-affix input{padding-right:48px}

/* Buttons: one height, one radius, aligned on their text baseline. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:13px 24px;border-radius:999px;line-height:1.2;white-space:nowrap;
}
.btn-sm{padding:9px 17px}
.btn-block{width:100%}

/* Lists of people, tickets and notifications share one row rhythm. */
.person-row,.ticket-list a,.notif-full a,.admin-row,.dm-row{gap:var(--space-3)}

/* Grids: one gap everywhere. */
.feed-grid,.event-grid,.plan-grid,.stat-row,.photo-grid,.photo-strip{gap:var(--space-4)}
.feed-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px}


/* ============================================================
   Khrija Plus, presented properly
   ============================================================ */
.plan-grid{margin-bottom:var(--space-5)}
.plan-card{
  padding:var(--space-6) var(--space-5);gap:var(--space-3);
  background:linear-gradient(170deg,rgba(139,124,240,.07),transparent 55%),var(--surface);
}
.plan-card.is-featured{
  border-color:rgba(139,124,240,.5);
  box-shadow:0 24px 50px -30px rgba(139,124,240,.7);
}
.plan-price{margin:var(--space-1) 0 var(--space-2)}
.plan-price b{
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variation-settings:"wdth" 125;
}
.plan-card .btn{margin-top:var(--space-4);width:100%}
.plan-list li{padding-bottom:var(--space-4);border-bottom:1px solid var(--line)}
.plan-list li:last-child{padding-bottom:0;border-bottom:none}

/* The allowance strip on the feed */
.pace-note{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);
  margin-bottom:var(--space-4);font-size:var(--t-sm);color:var(--muted);
}
.pace-note b{color:var(--paper)}
.pace-note a{margin-left:auto;color:var(--brand-2);font-weight:600}
.pace-note img{width:18px;height:18px;background:none}

/* ============================================================
   Khrija Plus page
   ============================================================ */
.plus-hero{text-align:center;padding:var(--space-6) 0 var(--space-7);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.plus-hero-icon{width:68px;height:68px;background:none;filter:drop-shadow(0 14px 30px rgba(217,139,201,.35))}
.plus-hero h1{margin:0;font-size:clamp(30px,5vw,46px)}
.plus-hero-lead{color:var(--muted);font-size:var(--t-md);line-height:1.65;max-width:56ch;margin:0}
.plus-active{
  display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2);
  padding:var(--space-3) var(--space-5);border-radius:999px;
  border:1px solid rgba(217,139,201,.4);background:rgba(217,139,201,.1);
}
.plus-active img{background:none}
.plus-active b{display:block;font-size:var(--t-base)}
.plus-active small{display:block;font-size:var(--t-sm);color:var(--muted)}

.plan-flag.is-quiet{background:none;border:1px solid rgba(217,139,201,.45);color:#E4A8DA}
.plan-check{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--t-sm);color:var(--brand-2);line-height:1.5}
.plan-check .ico{width:15px;height:15px;margin-top:2px;flex:none}

/* The comparison table: three columns that stay aligned at any width */
.compare{display:flex;flex-direction:column;margin-top:var(--space-4)}
.compare-head,.compare-row{
  display:grid;grid-template-columns:minmax(0,1fr) 92px 92px;
  align-items:center;gap:var(--space-3);
}
.compare-head{
  padding-bottom:var(--space-3);border-bottom:1px solid var(--line-strong);
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;
}
.compare-head span:not(:first-child){text-align:center}
.compare-head .is-plus{display:flex;align-items:center;justify-content:center;gap:6px;color:#E4A8DA}
.compare-head .is-plus img{background:none}
.compare-row{padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.compare-row:last-child{border-bottom:none}
.compare-label{font-size:var(--t-base);line-height:1.45}
.compare-cell{display:flex;align-items:center;justify-content:center;font-size:var(--t-sm)}
.compare-cell b{font-weight:700}
.compare-cell.is-plus{background:rgba(139,124,240,.07);border-radius:var(--radius-sm);padding:var(--space-2) 0;color:var(--paper)}
.compare-cell .ico{width:18px;height:18px}
.compare-cell .is-yes{color:var(--green-soft)}
.compare-cell .is-no{color:var(--muted);opacity:.45}


/* Paying */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-4)}

.pay-card{padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.pay-card h3{font-size:var(--t-md);margin-bottom:var(--space-3)}
.pay-list{display:flex;flex-direction:column;gap:var(--space-2)}
.pay-list li{position:relative;padding-left:20px;font-size:var(--t-sm);color:var(--muted);line-height:1.55}
.pay-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--brand-2)}
.pay-card .btn{margin-top:var(--space-4)}

/* Questions */
.faq{display:flex;flex-direction:column;margin-top:var(--space-3)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--space-4) 28px var(--space-4) 0;position:relative;
  font-size:var(--t-base);font-weight:600;transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand-2)}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:20px;color:var(--muted);transition:transform .2s,color .15s;
}
.faq details[open] summary::after{content:"−";color:var(--brand-2)}
.faq details p{padding:0 0 var(--space-4);font-size:var(--t-sm);color:var(--muted);line-height:1.65;max-width:68ch}

/* Replacements for the inline spacing that was removed, so every page uses
   the same rhythm instead of its own hard-coded pixels. */
.alert{margin-bottom:var(--space-4)}
.alert + .alert{margin-top:calc(var(--space-4) * -1 + var(--space-2))}
.tabs{margin-bottom:var(--space-5);gap:var(--space-2);flex-wrap:wrap}
.tabs a{padding:9px 16px;border-radius:999px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.profile-head{gap:var(--space-5);margin-bottom:var(--space-5)}
.profile-block + .profile-block{margin-top:var(--space-5)}
.form-note{margin-top:var(--space-4);text-align:center;font-size:var(--t-sm);color:var(--muted)}
.form-note a{color:var(--brand-2);font-weight:600}
.empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center;
  border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--muted);
}
.muted{color:var(--muted)}
.side-card + .side-card{margin-top:var(--space-4)}
.setup-actions{gap:var(--space-3);margin-top:var(--space-5)}

/* ============================================================
   Small alignment utilities.
   These exist so a page never needs its own inline style="margin-top:Npx"
   again — that is precisely what let every page drift to a different rhythm.
   ============================================================ */
.mt-0{margin-top:0 !important}
.mt-1{margin-top:var(--space-1) !important}
.mt-2{margin-top:var(--space-2) !important}
.mt-3{margin-top:var(--space-3) !important}
.mt-4{margin-top:var(--space-4) !important}
.mt-5{margin-top:var(--space-5) !important}
.mt-6{margin-top:var(--space-6) !important}
.mb-0{margin-bottom:0 !important}
.mb-1{margin-bottom:var(--space-1) !important}
.mb-2{margin-bottom:var(--space-2) !important}
.mb-3{margin-bottom:var(--space-3) !important}
.mb-4{margin-bottom:var(--space-4) !important}
.mb-5{margin-bottom:var(--space-5) !important}
.mb-6{margin-bottom:var(--space-6) !important}
.row{display:flex;align-items:center}
.row-wrap{display:flex;align-items:center;flex-wrap:wrap}
.gap-1{gap:var(--space-1)}
.gap-2{gap:var(--space-2)}
.gap-3{gap:var(--space-3)}
.gap-4{gap:var(--space-4)}
.push-end{margin-left:auto}
.text-quiet{color:var(--muted);font-size:var(--t-sm)}
.no-border{border:none !important}


/* ============================================================
   CONTAINERS: the single source of truth for page width.

   Before this, the site had six different max-widths (1200, 1180, 820, 760,
   560, 460) and three padding values spread across marketing pages, app pages
   and legal pages. Nothing could line up between them. Every container below
   now resolves to one of four widths and one padding rule, so a heading on
   the home page sits on exactly the same left edge as a heading in Settings.
   ============================================================ */
:root{
  --w-wide:1180px;   /* feeds, grids, marketing sections */
  --w-mid:860px;     /* lists, tickets, settings panels */
  --w-read:780px;    /* prose: legal pages, long copy */
  --w-narrow:560px;  /* forms and single-column flows */
  --pad-x:clamp(16px,4vw,32px);
  --section-y:clamp(56px,8vw,96px);
}

.wrap,.wrap-narrow,.app-shell,.auth-wrap,.legal-wrap{
  width:100%;
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.wrap{max-width:var(--w-wide)}
.app-shell{max-width:var(--w-wide);padding-block:var(--space-6) var(--space-8)}
.app-mid{max-width:var(--w-mid)}
.app-narrow{max-width:var(--w-narrow)}
.wrap-narrow{max-width:var(--w-read)}
.legal-wrap{max-width:var(--w-read)}
.auth-wrap{max-width:var(--w-narrow);padding-block:var(--space-7) var(--space-8)}
.setup-wrap{max-width:600px}

/* Vertical rhythm for full-width bands on the public pages. */
.section{padding-block:var(--section-y);position:relative}
.legal{padding-block:var(--space-7) var(--space-8)}

/* A nested .wrap inside a .section must not double the side padding. */
.section > .wrap,.section > .wrap-narrow,.legal > .wrap{padding-inline:0}
.section,.legal{padding-inline:var(--pad-x)}


/* ============================================================
   Khrija Support Agent.

   Two independently fixed elements at the same corner, exactly like the
   reference widget this is modelled on: the launcher and the panel are never
   nested inside a shared wrapper, and visibility is a plain CSS class
   (.is-open), never the HTML `hidden` attribute. That distinction matters: a
   later same-specificity class rule in this file can silently beat the
   browser's own `[hidden]{display:none}` rule, which is exactly what made the
   panel appear open on every page load before this rewrite. display:none as
   the resting state of .agent-panel, toggled only by .is-open, cannot have
   that failure mode.
   ============================================================ */
.agent-launch{
  position:fixed;right:20px;bottom:20px;z-index:140;
  display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:999px;
  background:var(--brand-grad);color:#fff;font-size:var(--t-sm);font-weight:600;border:0;
  box-shadow:0 16px 38px -12px rgba(91,79,207,.75);
  transition:transform .18s cubic-bezier(.32,.72,.32,1),box-shadow .18s;
}
.agent-launch:hover{transform:translateY(-2px);box-shadow:0 22px 46px -12px rgba(91,79,207,.9)}
.agent-launch .ico{width:18px;height:18px}
body.has-cookie-bar .agent-launch{bottom:104px}

.agent-panel{
  position:fixed;right:20px;bottom:20px;z-index:141;
  width:min(380px,calc(100vw - 32px));max-height:min(74vh,620px);
  display:none;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85);
}
.agent-panel.is-open{display:flex;animation:agentIn .2s ease-out}
@keyframes agentIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
body.has-cookie-bar .agent-panel{bottom:104px}

.agent-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}
.agent-head img{background:none;flex:none}
.agent-who{flex:1;min-width:0;display:flex;flex-direction:column}
.agent-who b{font-size:var(--t-sm)}
.agent-who small{font-size:var(--t-xs);color:var(--muted)}
.agent-x{width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;color:var(--muted);flex:none}
.agent-x:hover{background:rgba(236,234,244,.08);color:var(--paper)}

.agent-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.agent-msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:var(--t-sm);line-height:1.55}
.agent-msg p + p{margin-top:8px}
.agent-msg.is-bot{background:var(--surface-2);border-bottom-left-radius:6px;align-self:flex-start}
.agent-msg.is-me{background:var(--brand-grad);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.agent-msg.is-thinking p{display:flex;gap:5px}
.agent-msg.is-thinking span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:agentDot 1s infinite}
.agent-msg.is-thinking span:nth-child(2){animation-delay:.15s}
.agent-msg.is-thinking span:nth-child(3){animation-delay:.3s}
@keyframes agentDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.agent-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.agent-chips button{
  padding:8px 13px;border-radius:999px;border:1px solid var(--line-strong);
  font-size:var(--t-xs);color:var(--muted);transition:all .15s;text-align:left;background:none;
}
.agent-chips button:hover{color:var(--paper);border-color:var(--brand-2);background:rgba(139,124,240,.1)}
.agent-handover{display:flex;justify-content:center;padding:4px 0}

.agent-form{display:flex;gap:9px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--line)}
.agent-form textarea{
  flex:1;resize:none;min-height:42px;max-height:110px;padding:11px 14px !important;
  border-radius:18px;font-size:var(--t-sm) !important;line-height:1.45;
}
.agent-form textarea:disabled{opacity:.5}
.agent-form .btn{width:42px;height:42px;padding:0;border-radius:50%;flex:none;display:grid;place-items:center}
.agent-form .btn .ico{width:17px;height:17px}
.agent-foot{padding:0 16px 12px;font-size:var(--t-xs);color:var(--muted);text-align:center}
.agent-foot a{color:var(--brand-2);font-weight:600}

/* ============================================================
   Badges: the icon is the badge. The name appears on hover only.
   ============================================================ */
.vbadge{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:0;background:none;vertical-align:middle;cursor:default;line-height:0;
}
.vbadge img{width:20px;height:20px;display:block;background:none;transition:transform .16s cubic-bezier(.32,.72,.32,1)}
.vbadge:hover img,.vbadge:focus-visible img{transform:scale(1.12)}
.vbadge:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:50%}
.vbadge-unv img{opacity:.6}
.vbadge-unv:hover img{opacity:.85}

/*
 * The badge's name, shown on hover or focus. This class is used nowhere
 * else and shares no selector with any other component on the site, on
 * purpose: an earlier version of this tooltip reused an older class name
 * that also carried a completely different, wider hover-card layout with
 * its own top/bottom offsets, and the two conflicting position rules on the
 * same element are exactly what made the tooltip render broken and
 * overlapping. A badge is small and sits close to other text, so the
 * tooltip needs to be positioned defensively: capped width so it can never
 * stretch, a floor gap so it clears the badge cleanly, and it flips to
 * open below the badge automatically near the top of the viewport.
 */
.badge-tip{
  position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%);
  max-width:200px;width:max-content;
  padding:6px 11px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line-strong);
  color:var(--paper);font-size:var(--t-xs);font-weight:600;line-height:1.3;
  text-align:center;white-space:normal;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;pointer-events:none;z-index:95;
  transition:opacity .14s ease,visibility .14s ease;
}
.vbadge:hover .badge-tip,.vbadge:focus-visible .badge-tip{opacity:1;visibility:visible}


/* Badges sit in a neat row next to a name, with no text between them. */
.badge-row,.person-id b,.admin-id b,.dm-head-who b,.kcard-r-host{gap:6px}
.badge-row{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}


/* ============================================================
   Page action rows: the button group beside a page's h1.
   Every page that puts buttons next to its heading (Edit profile / Log out
   on a profile, Save on settings, actions on an admin row) uses this one
   class now, instead of each page inventing its own inline flex row.
   ============================================================ */
.page-actions{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  margin-left:auto;
}


.profile-name-row .vbadge:first-of-type{margin-left:2px}
.panel-danger{border-color:rgba(178,58,63,.4)}
.pay-grid-single{grid-template-columns:1fr}
.join-note{width:100%;margin-bottom:var(--space-3)}
.join-note label{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:var(--space-2)}
.join-note textarea{width:100%;resize:vertical;min-height:64px}
.requests-block .req-row{
  display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-items:center;
  padding:var(--space-4) 0;border-bottom:1px solid var(--line);
}
.requests-block .req-row:last-child{border-bottom:none}
.req-who{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.req-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.req-id b{display:flex;align-items:center;gap:6px;font-size:var(--t-base)}
.req-id small{font-size:var(--t-sm);color:var(--muted)}
.req-note{
  grid-column:1 / -1;margin:0;padding:var(--space-3) var(--space-4);
  background:var(--surface-2);border-radius:var(--radius-sm);
  font-size:var(--t-sm);color:var(--muted);line-height:1.55;
}
.req-acts{display:flex;gap:var(--space-2);flex-wrap:wrap}
.kcard-r-ask{
  margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line);
}
.kcard-r-ask label{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:var(--space-2)}
.kcard-r-ask textarea{width:100%;resize:vertical;min-height:62px}
.kcard-r-ask-acts{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-3)}


@media (max-width:760px){
  /* No hover on touch: the tooltip opens on tap via :focus-visible already,
     but give it room to sit under the badge rather than crowding upward. */
  .badge-tip{max-width:170px;font-size:11px}
}

/* Media queries are collected at the end of this file on purpose.
   A media query carries no extra specificity, so a base rule written later in
   the file overrides it. Keeping them last is what makes the responsive rules
   actually apply. When adding new CSS: base/default rules go above this
   comment, and any @media block goes below it, regardless of where in the
   file you are editing. */



@media (max-width:520px){
  .nav{gap:8px}
  .nav .logo{font-size:var(--t-lg)}
  .nav-cta{gap:2px}
  .nav .btn{padding:8px 13px;font-size:var(--t-sm);white-space:nowrap;margin-right:4px}
  .nav-ico{padding:6px 6px}
}



@media (max-width:400px){.nav-cta > .btn-red{display:none}}





@media (max-width:900px){
  .nav-links{display:none}
  .nav .menu-btn{display:flex}
  body.menu-open .nav-links{
    display:flex;flex-direction:column;position:fixed;inset:66px 0 auto 0;z-index:49;
    background:rgba(12,12,14,.97);padding:26px 24px;gap:20px;font-size:var(--t-lg);
    border-bottom:1px solid var(--line);
  }
}





@media (max-width:1040px){
  .pnav{grid-template-columns:auto 1fr}
  .pnav-links{display:none}
  .pnav .menu-btn{display:flex}
  .pnav-end .lang,.pnav-end .pnav-login{display:none}
  body.menu-open .pnav-links{
    display:flex;flex-direction:column;gap:2px;position:fixed;inset:var(--head-h) 0 auto 0;z-index:49;
    background:rgba(12,12,14,.98);padding:14px 20px 26px;border-bottom:1px solid var(--line);
    max-height:calc(100vh - var(--head-h));overflow-y:auto;
  }
  body.menu-open .pnav-links > a{font-size:20px;padding:13px 8px;border-radius:12px;color:var(--paper);font-variation-settings:"wdth" 110}
  body.menu-open .pnav-drawer-extra{display:block;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
  .pnav-drawer-extra a{display:block;font-size:var(--t-md);font-weight:600;padding:10px 8px}
  .pnav-lang-note{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:var(--t-sm);padding:10px 8px}
}





@media (max-width:820px){
  .site-foot{padding-top:64px}
  .foot-top{grid-template-columns:1fr;gap:48px}
  .foot-nav{grid-template-columns:repeat(2,1fr)}
}





@media (min-width:761px){body.is-app .site-foot{padding-bottom:36px}}





@media (max-width:900px){.cities{grid-template-columns:repeat(2,1fr)}}





@media (max-width:480px){.cities{grid-template-columns:1fr}}





@media (max-width:840px){.trust{grid-template-columns:1fr}}





@media (max-width:520px){.field-row{grid-template-columns:1fr}}





@media (max-width:960px){.feed-grid{grid-template-columns:1fr}}





@media (max-width:960px){.kdetail{grid-template-columns:1fr}}





@media (max-width:760px){.bottom-nav{display:block}}





@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1 !important;transform:none !important}
  html{scroll-behavior:auto}
}





@media (max-width:560px){.preset-grid{grid-template-columns:repeat(4,1fr)}}





@media (max-width:860px){.dm-grid{grid-template-columns:1fr}}





@media (max-width:520px){.steps li{font-size:0;gap:0;justify-content:center}.steps li span{font-size:var(--t-xs)}}





@media (max-width:600px){.logo .logo-mark{width:36px;height:36px}}





@media (max-width:560px){
  .cookie-bar{flex-direction:column;align-items:stretch}
  .cookie-bar .cookie-actions{margin-left:0}
  .cookie-bar .cookie-actions .btn{flex:1}
}





@media (min-width:1041px){
  .wrap.nav,.wrap.pnav{padding-left:34px;padding-right:34px}
  .nav-links a,.pnav-links a{padding:8px 4px;position:relative}
  .nav-links a::after,.pnav-links a::after{
    content:"";position:absolute;left:4px;right:4px;bottom:0;height:2px;border-radius:2px;
    background:var(--brand-grad);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
  }
  .nav-links a:hover::after,.pnav-links a:hover::after,
  .nav-links a.active::after,.pnav-links a[aria-current="page"]::after{transform:scaleX(1)}
}





@media (max-width:520px){.drop-panel{width:min(320px,calc(100vw - 32px));right:-8px}}





@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}





@media (max-width:640px){.logo .logo-mark{width:38px;height:38px}}





@media (max-width:1040px){
  .wrap.nav,.wrap.pnav{grid-template-columns:auto 1fr auto}
  .nav-links,.pnav-links{justify-self:end}
  .drop-more{display:none}
}





@media (max-width:760px){.admin-acts{align-items:stretch;width:100%}.admin-form{width:100%}}





@media (max-width:560px){.share-url{display:none}}





@media (max-width:640px){
  .site .wrap.nav,.site .wrap.pnav{padding:0 16px}
  .logo .logo-mark{width:38px;height:38px}
}





@media (max-width:620px){.crop-stage,#crop-canvas{width:260px;height:260px}}





@media (max-width:900px){
  .dm-grid{grid-template-columns:1fr}
  .dm-side{position:static}
  .dm-list{max-height:300px}
}





@media (max-width:560px){.pop-stack{left:12px;right:12px;bottom:12px;max-width:none}}





@media (max-width:620px){.lightbox-nav{width:38px;height:38px;font-size:21px}}





@media (max-width:620px){
  .legal{padding:32px 0 60px}
  .legal-table,.legal-table tbody,.legal-table tr,.legal-table td{display:block;width:100%}
  .legal-table thead{display:none}
  .legal-table tr{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:6px}
  .legal-table td{border:none;padding:7px 10px}
  .legal-table td::before{content:attr(data-label);display:block;font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
}





@media (max-width:760px){
  html{-webkit-text-size-adjust:100%}
  body{padding-bottom:env(safe-area-inset-bottom)}

  .app-shell{padding-block:var(--space-5) 90px}
  .app-head{flex-direction:column;align-items:flex-start;gap:14px}
  .app-head .btn{width:100%;justify-content:center}
  h1{font-size:clamp(26px,7vw,34px)}
  h2{font-size:clamp(22px,6vw,28px)}

  /* Anything tappable is at least 44px, the size of a fingertip. */
  .btn,.nav-ico,.drop-btn,.avatar-btn,.msg-menu-btn,.notif-del,.pop-close{min-height:44px}
  .btn-sm{min-height:40px;padding:10px 16px}
  .chat-form .btn{width:48px;height:48px}
  .feed-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .feed-tabs::-webkit-scrollbar{display:none}
  .feed-tabs button,.feed-tabs a{flex:none}
  .feed-tabs-end{margin-left:0}

  /* Panels breathe less on a narrow screen */
  .panel,.side-card,.kcard-r,.auth-card,.event-body{padding:18px 16px}
  .feed-grid{grid-template-columns:1fr;gap:20px}
  .dm-grid{grid-template-columns:1fr}
  .plan-grid,.event-grid,.stat-row{grid-template-columns:1fr}
  .profile-head{flex-direction:column;align-items:flex-start}
  .admin-row{flex-direction:column}
  .admin-acts{width:100%}
  .admin-form,.admin-form select,.admin-form input,.admin-form button{width:100%}
  .person-row{gap:10px}
  .person-actions{width:100%}
  .person-actions .btn,.person-actions form{flex:1}
  .person-actions .btn{width:100%;justify-content:center}

  /* Inputs at 16px or iOS zooms the page when they get focus */
  input,select,textarea{font-size:var(--t-md) !important}
  .code-input{font-size:24px !important;letter-spacing:.3em}

  /* Dropdowns become sheets anchored to the bottom */
  .drop-panel{
    position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));
    width:auto;max-height:70vh;overflow-y:auto;transform:none;
  }
  .drop-more .drop-panel{left:12px;right:12px;transform:none}
  .lang-menu{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));top:auto;width:auto}

  /* Tooltips do not hover on a touch screen, so they sit under the badge */
}




@media (max-width:420px){
  .setup-actions{flex-direction:column}
  .setup-actions .btn{width:100%}
  .btn-lg{width:100%;justify-content:center}
  .plan-price b{font-size:32px}
}





@media (max-width:760px){
  .agent-launch{right:12px;bottom:76px}
  .agent-panel{right:12px;left:12px;bottom:76px;width:auto;max-height:70vh}
  body.has-cookie-bar .agent-launch,body.has-cookie-bar .agent-panel{bottom:150px}

  /* Ticket and Khrija chat threads: a shorter cap on a phone, since the
     keyboard eats the bottom half of the screen once the input is focused. */
  .ticket-board{max-height:44vh}
  .chat-board .chat,.chat{max-height:40vh}
  .locked-field{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .compare-head,.compare-row{grid-template-columns:minmax(0,1fr) 54px 54px;font-size:var(--t-xs)}
  .pay-grid{grid-template-columns:1fr}
  .plus-hero{padding:var(--space-5) 0 var(--space-6)}
  .plan-flag{position:static;display:inline-flex;margin-bottom:var(--space-2)}
}





@media (max-height:520px) and (orientation:landscape){
  .drop-panel,.lang-menu{max-height:60vh}
  .chat{max-height:42vh}
}





@media (max-width:620px){.field-row{grid-template-columns:1fr;gap:0}}





@media (max-width:980px){.feed-grid{grid-template-columns:1fr}}





@media (max-width:620px){
  .compare-head,.compare-row{grid-template-columns:minmax(0,1fr) 62px 62px;gap:var(--space-2)}
  .compare-label{font-size:var(--t-sm)}
}





@media (max-width:720px){.pay-grid{grid-template-columns:1fr}}




@media (max-width:600px){
  .requests-block .req-row{grid-template-columns:1fr}
  .req-acts .btn{flex:1}
}





@media (max-width:600px){
  .page-actions{margin-left:0;width:100%}
  .page-actions .btn{flex:1;justify-content:center}
}