/* =====================================================================================================================================
   Capzul on a laptop: the premium social look.
   Loaded only at 721px wide and up (see index.html), so the phone can never change. Everything here sits on top of styles.css.
   Ideas: a soft aurora backdrop; glassy white surfaces with hairline borders and layered shadows instead of 2px black outlines;
   one brand gradient for the main action and the selected state; segmented tabs; a floating top bar; bigger, calmer type; smooth hover motion.
   The artwork keeps its black outlines (the mood faces, the people), so the brand still has its drawn character.
   ===================================================================================================================================== */
@media (min-width:721px){
  :root{
    --canvas:#F3F4FB; --glass:rgba(255,255,255,.80); --glass2:rgba(255,255,255,.94);
    --ui:rgba(24,30,84,.09); --ui2:rgba(24,30,84,.16); --hair:rgba(24,30,84,.10);
    --soft:#ECEFFF; --muted:#5C6385; --line:rgba(24,30,84,.16); --shadow:rgba(24,30,84,.12); --art-line:#0B0B14;
    --grad:linear-gradient(135deg,#3A5FE6 0%,#6A4DF2 58%,#A24BEF 100%);
    --glow:0 10px 26px rgba(98,84,240,.34); --glow2:0 16px 38px rgba(98,84,240,.44);
    --sh-s:0 1px 2px rgba(24,30,84,.05),0 6px 18px rgba(24,30,84,.07);
    --sh-m:0 2px 4px rgba(24,30,84,.04),0 22px 56px rgba(58,78,190,.13);
    --aur1:rgba(74,104,255,.20); --aur2:rgba(176,92,246,.15); --aur3:rgba(255,128,176,.12);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --canvas:#0A0C1B; --glass:rgba(24,28,56,.72); --glass2:rgba(30,35,68,.92);
      --ui:rgba(255,255,255,.08); --ui2:rgba(255,255,255,.16); --hair:rgba(255,255,255,.10);
      --soft:#222859; --muted:#A9AFD0; --line:rgba(255,255,255,.16); --shadow:rgba(0,0,0,.5); --art-line:#F4F5FB;
      --grad:linear-gradient(135deg,#5B7BFF 0%,#8467FF 58%,#BF68FF 100%);
      --glow:0 10px 28px rgba(120,100,255,.38); --glow2:0 16px 40px rgba(120,100,255,.5);
      --sh-s:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35); --sh-m:0 2px 6px rgba(0,0,0,.4),0 26px 64px rgba(0,0,0,.5);
      --aur1:rgba(74,104,255,.26); --aur2:rgba(176,92,246,.20); --aur3:rgba(255,128,176,.10);
    }
  }
  :root[data-theme="dark"]{
    --canvas:#0A0C1B; --glass:rgba(24,28,56,.72); --glass2:rgba(30,35,68,.92);
    --ui:rgba(255,255,255,.08); --ui2:rgba(255,255,255,.16); --hair:rgba(255,255,255,.10);
    --soft:#222859; --muted:#A9AFD0; --line:rgba(255,255,255,.16); --shadow:rgba(0,0,0,.5); --art-line:#F4F5FB;
    --grad:linear-gradient(135deg,#5B7BFF 0%,#8467FF 58%,#BF68FF 100%);
    --glow:0 10px 28px rgba(120,100,255,.38); --glow2:0 16px 40px rgba(120,100,255,.5);
    --sh-s:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35); --sh-m:0 2px 6px rgba(0,0,0,.4),0 26px 64px rgba(0,0,0,.5);
    --aur1:rgba(74,104,255,.26); --aur2:rgba(176,92,246,.20); --aur3:rgba(255,128,176,.10);
  }

  /* ---- the backdrop: an aurora with the doodles faint on top ---- */
  html{background:var(--canvas)}
  body{background:radial-gradient(1000px 560px at 6% -10%,var(--aur1),transparent 62%),radial-gradient(900px 560px at 104% 0%,var(--aur2),transparent 62%),radial-gradient(1000px 640px at 50% 112%,var(--aur3),transparent 62%),var(--canvas);background-attachment:fixed}
  body::before{opacity:.28}

  /* ---- type ---- */
  .h-bold{font-size:clamp(1.9rem,3.1vw,2.9rem);letter-spacing:-.025em;line-height:1.1}
  .h-light{font-size:clamp(1.25rem,2.1vw,1.85rem);letter-spacing:-.01em}

  /* ---- surfaces ---- */
  body .card,body .home-main{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);border:1px solid var(--ui);border-radius:32px;box-shadow:var(--sh-m)}
  body .card{padding:28px 30px}

  /* ---- buttons ---- */
  body .btn{border:1px solid var(--ui2);background:var(--glass2);color:var(--ink);min-height:50px;padding:12px 26px;font-weight:600;letter-spacing:-.005em;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,filter .16s ease}
  body .btn:hover{transform:translateY(-1px);box-shadow:var(--sh-s)}
  body .btn:active{transform:translateY(0)}
  body .btn.primary{background:var(--grad);color:#fff;border:0;box-shadow:var(--glow)}
  body .btn.primary:hover{filter:brightness(1.07);box-shadow:var(--glow2)}
  body .btn.big{min-height:56px;font-size:1.05rem;padding:14px 34px}
  body .btn.mini{min-height:38px;padding:7px 16px;font-size:.88rem}
  body .btn:focus-visible{outline:3px solid rgba(58,95,230,.45);outline-offset:2px}

  /* ---- chips and tabs ---- */
  body .chip{border:1px solid var(--ui2);background:var(--glass2);padding:9px 18px;font-weight:500;transition:transform .15s,box-shadow .15s,background .15s}
  body .chip:hover{transform:translateY(-1px);box-shadow:var(--sh-s)}
  body .chip[aria-pressed="true"]{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(98,84,240,.30)}
  body .tabs{border:0;background:rgba(24,30,84,.06);padding:5px;gap:4px}
  body .tab{padding:10px;color:var(--muted);transition:background .15s,color .15s,box-shadow .15s}
  body .tab:hover{color:var(--ink)}
  body .tab[aria-selected="true"]{background:var(--glass2);color:var(--ink);box-shadow:0 2px 10px rgba(24,30,84,.14)}

  /* ---- the top bar: a floating glass bar ---- */
  body .appbar{background:transparent;border:0;top:8px;padding:8px 18px 0}
  body .appbar-in{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);border:1px solid var(--ui);border-radius:26px;box-shadow:var(--sh-s);padding:0 14px 0 22px;height:66px}
  body .navbtn{padding:9px 18px;color:var(--muted)}
  body .navbtn:hover{background:var(--soft);color:var(--ink)}
  body .navbtn[aria-current="page"]{background:var(--soft);color:var(--brand);box-shadow:inset 0 0 0 1px rgba(58,95,230,.14)}
  body .iconbtn,body .me-btn{border:1px solid var(--ui2);background:var(--glass2);transition:transform .15s,box-shadow .15s}
  body .iconbtn:hover,body .me-btn:hover{transform:translateY(-1px);box-shadow:var(--sh-s)}
  body .me-av.lg{border:1px solid var(--ui2)}
  body.has-appbar .app{padding-top:24px;padding-bottom:20px;min-height:calc(100vh - 74px)}      /* the floating bar is 66px tall plus 8px of air above it; then 24px of air before the page */
  body.has-pubbar .app{padding-top:20px;padding-bottom:20px;min-height:calc(100vh - 74px)}

  /* ---- the back arrow ---- */
  body .back{border:1px solid var(--ui2);background:var(--glass2);box-shadow:var(--sh-s);transition:transform .15s}
  body .back:hover{transform:translateX(-2px)}

  /* ---- choice cards: moods, people, match style ---- */
  body .mood-tile,body .gcard,body .opt{border:1px solid var(--ui);background:var(--glass2);box-shadow:var(--sh-s);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  body .mood-tile{border-radius:24px}
  body .gcard,body .opt{border-radius:26px}
  body .mood-tile:hover,body .gcard:hover,body .opt:hover{transform:translateY(-4px);border-color:rgba(98,84,240,.45);box-shadow:0 14px 34px rgba(98,84,240,.20)}
  body .gcard[aria-pressed="true"]{background:var(--soft);transform:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(58,95,230,.22)}
  body .mood-tile[aria-pressed="true"]{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(58,95,230,.28)}

  /* ---- dialogs and popovers ---- */
  body .overlay{background:rgba(10,12,34,.46);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  body .modal{background:var(--glass2);border:1px solid var(--ui);border-radius:32px;box-shadow:0 34px 90px rgba(18,22,70,.38);padding:30px 28px}
  body .pop{background:var(--glass2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--ui);border-radius:24px;box-shadow:var(--sh-m)}

  /* ---- forms: soft filled fields ---- */
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),body select,body textarea{border:1px solid transparent;background:rgba(24,30,84,.055);border-radius:15px;min-height:50px;transition:background .15s,border-color .15s,box-shadow .15s}
  body textarea{min-height:90px}
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,body select:focus,body textarea:focus{outline:0;background:var(--glass2);border-color:var(--brand);box-shadow:0 0 0 4px rgba(58,95,230,.16)}

  /* ---- one soft line for every container; the artwork (faces, people, avatars) keeps its drawn black outline ---- */
  body :is(.card,.btn,.chip,.tabs,.gcard,.mood-tile,.opt,.modal,.pop,.iconbtn,.back,.me-btn,.home-main,.panel,.rail-in,.rail-req,.pill,.plan,.stat,.item,.timechip,.rcpt,.msgs-list,.msgs-search,.field input,.field textarea,.sp-box,.lang-sel,.radio,.pay-row,.support,.upnudge,.banner,.games,.cell,.composer input,.chat,.badge-pill,.weekday,.fewevent,.meter,.partner,.voice,.prompt button,.round,.vibe,.plus-tag,.tag-ok,.tag-bad,.steps li,.up-perks li,.progress,.ftile,.dock-ico,.dock-collapse,.lp-art){border-width:1px !important}
  body :is(.face,.g-art,.opt-icon,.avatar-bubble,.avat,.me-av.lg,.me-av.xl,.rings .core,.up-icon){border-color:var(--art-line) !important}

  /* ---- panels, rows and the Friends panel ---- */
  body :is(.panel,.stat,.plan,.item){background:var(--glass2);border-radius:22px;box-shadow:var(--sh-s)}
  body .plan{border-radius:26px;transition:transform .18s,box-shadow .18s,border-color .18s}
  body .plan:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(98,84,240,.18)}
  body .plan[aria-pressed="true"]{outline:0;background:var(--soft);border-color:var(--brand);box-shadow:0 0 0 3px rgba(58,95,230,.25)}
  body .ftile{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);border-radius:32px;box-shadow:var(--sh-m)}
  body .dock-ico{background:var(--glass2)}
  body .rail-in{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);border-radius:32px;box-shadow:var(--sh-m)}
  body .rail-req{background:var(--soft);border-color:transparent !important;border-radius:14px}
  body .timechip,body .pill{background:var(--glass2);border-color:var(--ui2) !important}

  /* ---- the public header (sign up, log in): the same floating glass bar ---- */
  body .pubbar{background:transparent;border:0;top:8px;padding:8px 18px 0}
  body .pubbar-in{max-width:1180px;background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);border:1px solid var(--ui);border-radius:26px;box-shadow:var(--sh-s);padding:0 14px 0 22px;height:66px}

  /* ---- sign up: a gradient panel for the character ---- */
  body .auth-art{background:linear-gradient(158deg,#3C68EA 0%,#5848F0 56%,#8B4CEF 100%);border-radius:26px}
  body .card.auth{padding:20px}

  /* ---- landing: a confident headline with a touch of colour ---- */
  body .card.landing h1{letter-spacing:-.035em;background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 40%,#4A5BEF 72%,#9A4DF0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* ---- mood tiles: a little more air and a clearer label ---- */
  body .mood-tile{padding:9px 9px 8px;gap:6px}
  body .mood-tile .mood-n,body .mood-tile span{font-weight:600}

  /* ---- Home: the page people see most gets the most personality ---- */
  body .screen[data-screen="mood"]{max-width:1260px}
  body .home{grid-template-columns:minmax(0,1fr) 360px;gap:24px}
  body .home-main{padding:22px 30px 18px}
  body .home-head{padding:0 0 14px}
  body .home-head h1{font-size:clamp(1.9rem,2.9vw,2.7rem);letter-spacing:-.03em}
  body .home-hi{font-weight:600;font-size:clamp(1.05rem,1.5vw,1.35rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 4px}
  body .presence{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:var(--soft);padding:7px 16px;border-radius:999px;font-size:.88rem;font-weight:500;color:var(--ink)}
  body .mood-grid{gap:14px;max-width:880px}

  /* ---- a few finishing touches ---- */
  body .me-btn[aria-current="page"]{background:var(--soft);color:var(--brand);border-color:rgba(58,95,230,.32)}
  body :is(.opt,.gcard){border-color:var(--ui2)}
  @media (prefers-reduced-motion:no-preference){
    body .screen:not([hidden]){animation:webIn .3s ease both}
    @keyframes webIn{from{opacity:0}to{opacity:1}}
  }

  /* ---- the call: a gradient banner, soft tiles, gradient message bubbles ---- */
  body .call-top{background:var(--grad);border-radius:26px 26px 0 0;padding:16px 24px}
  body :is(.partner,.voice,.games,.cell,.prompt){background:var(--glass2)}
  body .partner{background:var(--soft)}
  body .prompt{border-style:dashed;border-color:var(--ui2) !important}
  body .msg.me{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(98,84,240,.25)}
  body .msg.them{background:var(--glass2);border-color:var(--ui) !important}
  body .rings i{border-color:rgba(106,77,242,.8)}

  /* ---- selected choices use the brand gradient, not black ---- */
  body :is(.round,.vibe)[aria-pressed="true"]{background:var(--grad);color:#fff;border-color:transparent}
  body .vibe.rep[aria-pressed="true"]{background:var(--danger);border-color:var(--danger)}
  body .me-btn.active{background:var(--soft);color:var(--brand);border-color:rgba(58,95,230,.32)}
  body .vibe,body .round{background:var(--glass2);transition:transform .15s,box-shadow .15s}
  body .vibe:hover,body .round:hover{transform:translateY(-1px);box-shadow:var(--sh-s)}

  /* ---- breathing room: nothing touches ---- */
  body .sp-box{padding-right:10px}
  body #findInput{margin-bottom:12px}
  body .weekday{padding:9px 3px 11px}      /* the mood face inside keeps 11px of air below it */

  /* ---- sign up and log in: everything on one screen, no scrolling ---- */
  body .screen[data-screen="auth"]{max-width:1140px}
  body .card.auth{grid-template-columns:minmax(0,4fr) minmax(0,7fr);padding:12px;gap:0}
  body .card.auth .auth-art-in{position:absolute;top:0;right:0;bottom:0;left:0;height:auto;min-height:0;max-height:none}      /* the panel is as tall as the card, so it no longer sets the card's height */
  body .card.auth .auth-form{padding:16px 34px 12px;gap:9px}
  body .card.auth .tab{padding:8px}
  body .card.auth{min-height:min(584px,calc(100vh - 150px))}      /* Sign up and Log in are the same size, so the page does not jump and the character never crowds the tagline */
  body .card.auth .tabs{margin:0}
  body .card.auth #authTitle{font-size:1.3rem !important;margin:2px 0 0;letter-spacing:-.02em}
  body .card.auth .quickstart{margin:0;gap:6px}
  body .card.auth .quickstart .btn{min-height:48px}
  body .card.auth .hint-line{margin:0;font-size:.74rem;line-height:1.35}
  body .card.auth .divider{margin:0;font-size:.78rem}
  body .card.auth .two{gap:10px 14px}
  body .card.auth .field{gap:4px}
  body .card.auth .field input{min-height:42px}
  body .card.auth .chips{gap:7px}
  body .card.auth .chip{padding:7px 15px;font-size:.88rem}
  body .card.auth .err{min-height:0}
  body .card.auth form .btn.primary{min-height:48px}

  /* a short window (up to 740px tall): the same form, a little tighter, still on one screen */
  @media (max-height:740px){
    body .card.auth .auth-form{padding:12px 30px 10px;gap:7px}
    body .card.auth .field input{min-height:40px}
    body .card.auth .two{gap:8px 12px}
    body .card.auth .quickstart .btn,body .card.auth form .btn.primary{min-height:44px}
    body .card.auth #authTitle{font-size:1.2rem !important}
  }

  /* ---- Messages: a card with no padding (my general card padding must not reach it) ---- */
  body .card.msgs-card{padding:0}
  body.has-appbar .app{padding-bottom:16px}

  /* ---- Settings: a side menu, one group at a time, so each group fits one screen ---- */
  body .screen[data-screen="settings"] .set-nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;margin-bottom:18px}
  body .screen[data-screen="settings"] .set-nav button{border:0;background:transparent;border-radius:14px;padding:10px 16px;font-weight:600;font-size:.92rem;color:var(--muted);text-align:left;transition:background .15s,color .15s}
  body .screen[data-screen="settings"] .set-nav button:hover{background:var(--soft);color:var(--ink)}
  body .screen[data-screen="settings"] .set-nav button[aria-selected="true"]{background:var(--soft);color:var(--brand);box-shadow:inset 0 0 0 1px rgba(58,95,230,.16)}
  body .screen[data-screen="settings"] .set > [data-sec]{display:none}
  body .screen[data-screen="settings"] .set[data-cur="look"] > [data-sec="look"],
  body .screen[data-screen="settings"] .set[data-cur="match"] > [data-sec="match"],
  body .screen[data-screen="settings"] .set[data-cur="calls"] > [data-sec="calls"],
  body .screen[data-screen="settings"] .set[data-cur="privacy"] > [data-sec="privacy"],
  body .screen[data-screen="settings"] .set[data-cur="app"] > [data-sec="app"]{display:block}
  body .screen[data-screen="settings"] .setgrp > summary{display:none}
  @media (min-width:1000px){
    body .screen[data-screen="settings"]{max-width:1080px}
    body .screen[data-screen="settings"] .set{max-width:none;grid-template-columns:250px minmax(0,1fr);gap:0 40px;align-items:start}
    body .screen[data-screen="settings"] .set-nav{flex-direction:column;flex-wrap:nowrap;margin:0;gap:4px;grid-column:1;grid-row:1;position:sticky;top:100px}
    body .screen[data-screen="settings"] .set > [data-sec]{grid-column:2;grid-row:1}
    body .screen[data-screen="settings"] .sg-body{display:grid;grid-template-columns:1fr 1fr;gap:20px 36px;align-items:start}
  }

  /* ---- Plus: two columns, the plans and the main button on the left, the extras (grouped in .plus-side) on the right ---- */
  @media (min-width:1000px){
    body .screen[data-screen="recharge"]{max-width:1120px}
    body .screen[data-screen="recharge"] > .card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto 1fr;column-gap:44px;align-content:start;align-items:start}
    body .screen[data-screen="recharge"] > .card > .head{grid-column:1;grid-row:1;text-align:left;padding:0 0 6px}
    body .screen[data-screen="recharge"] > .card > #plusStatus{grid-column:1;grid-row:2;max-width:none;margin:0 0 14px}
    body .screen[data-screen="recharge"] > .card > #plans{grid-column:1;grid-row:3}
    body .screen[data-screen="recharge"] > .card > .cta-bar{grid-column:1;grid-row:4;max-width:none !important;margin:16px 0 0 !important}
    body .screen[data-screen="recharge"] > .card > div[style*="max-width:560px"]{grid-column:1;grid-row:5;max-width:none !important;margin:16px 0 0 !important;gap:10px !important}
    body .screen[data-screen="recharge"] > .card > .plus-side{grid-column:2;grid-row:1 / span 6;display:grid;gap:12px;align-content:start}
    body .screen[data-screen="recharge"] .plus-side > .set{margin:0 !important;max-width:none}
    body .screen[data-screen="recharge"] .plus-side > p.note{margin:0 !important;text-align:left}
  }

  /* ---- Profile: the columns are balanced and the panels compact, so it fits one screen ---- */
  @media (min-width:1000px){
    body .profile{grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto auto auto;gap:16px 20px}
    body .pcol{display:contents}
    body .pcol > .pcard{grid-column:1;grid-row:1}
    body .pcol > .panel:not(.pcard):not(.links):not(.upnudge){grid-column:1;grid-row:2}
    body .pcol > .upnudge{grid-column:2;grid-row:3}
    body .pcol > .links{grid-column:2;grid-row:4}
    body .acol{grid-column:2;grid-row:1 / span 2}
    body .pcard{padding:16px 18px}
    body .pcard .me-av.xl{width:60px;height:60px;font-size:1.9rem}
    body .pname{margin:8px 0 4px;font-size:1.35rem}
    body .avatars{gap:6px}
    body .avatars .chip{font-size:1.2rem;padding:4px 9px}
  }

  /* ---- Settings: the languages get their own item (Matching was too tall for one screen) ---- */
  body .screen[data-screen="settings"] .set[data-cur="lang"] > [data-sec="match"]{display:block}
  body .screen[data-screen="settings"] .set[data-cur="lang"] [data-sec="match"] .sg-body > :not([data-part="lang"]){display:none}
  body .screen[data-screen="settings"] .set[data-cur="match"] [data-part="lang"]{display:none}
  body .screen[data-screen="settings"] .set[data-cur="lang"] .sg-body{grid-template-columns:1fr}

  /* ---- Profile on a laptop: the three links are in the account menu already ---- */
  body .pcol > .links{display:none}

  /* ---- Plus: denser, so both columns fit one screen ---- */
  @media (min-width:1000px){
    body .screen[data-screen="recharge"] > .card{padding:24px 30px}
    body .screen[data-screen="recharge"] .h-light{font-size:1.1rem}
    body .screen[data-screen="recharge"] .h-bold{font-size:2.2rem}
    body .screen[data-screen="recharge"] > .card > #plusStatus{padding:10px 16px;margin-bottom:12px}
    body .screen[data-screen="recharge"] .plan{padding:14px 14px 10px}
    body .screen[data-screen="recharge"] div[style*="flex-wrap:wrap"]{flex-wrap:nowrap !important}
    body .screen[data-screen="recharge"] .set{gap:12px}
    body .screen[data-screen="recharge"] .set h2,body .screen[data-screen="recharge"] .sect{margin-bottom:6px}
  }

  /* ---- Profile: a little more compact still ---- */
  @media (min-width:1000px){
    body .pcard{padding:12px 16px}
    body .pcard .pbadges{margin:0}
    body .pcol > .panel:not(.pcard){padding:12px 14px}
    body .pcol .sub-h{margin:0 0 6px}
  }

  /* ---- a short laptop window (up to 780px tall): a slightly tighter rhythm on the longest pages ---- */
  @media (min-width:1000px) and (max-height:780px){
    body .screen[data-screen="settings"] .sg-body{gap:12px 28px}
    body .screen[data-screen="settings"] .check .hint{font-size:.74rem;line-height:1.35}
    body .screen[data-screen="settings"] .card{padding:22px 28px}
    body .screen[data-screen="recharge"] > .card{padding:20px 28px}
    body .screen[data-screen="recharge"] .plus-side{gap:8px}
    body .screen[data-screen="recharge"] .set{gap:8px}
    body .screen[data-screen="recharge"] .perks li{padding:2px 0}
    body .screen[data-screen="recharge"] .freebox{padding:10px 14px;font-size:.84rem}
    body .pcard .pmeta{margin:2px 0}
    body .pcard .me-av.xl{width:52px;height:52px;font-size:1.6rem}
  }

  /* ---- Profile on a 720px-tall laptop ---- */
  @media (min-width:1000px) and (max-height:740px){
    body .pcard{padding:10px 14px}
    body .pcard .pname{margin:4px 0 2px;font-size:1.2rem}
    body .pcard .pmeta,body .pcard .hint{font-size:.74rem;margin:2px 0}
    body .pcol > .panel:not(.pcard){padding:10px 14px}
    body .pcol .ptitle{margin-bottom:6px}
    body .pcol .field input{min-height:38px}
    body .avatars{gap:5px}
    body .avatars .chip{font-size:1.05rem;padding:3px 7px}
    body .pcol .hint{font-size:.72rem;margin-top:6px !important}
  }

  /* =====================================================================================================================================
     ONE STAGE for every page. The top bar and every window share the same width, the same top, the same bottom and the same height, so
     moving between pages never changes the frame; only what is inside changes. A page with the Friends panel splits the same stage
     (window + gap + panel). Content is centred inside the window.
     ===================================================================================================================================== */
  @media (min-width:1000px){
    :root{--z:1;--stage-w:1180px;--stage-h:clamp(560px,calc(100vh / var(--z) - 122px),1100px);--dock-w:300px;--stage-gap:20px}
    body .appbar-in,body .pubbar-in{max-width:var(--stage-w)}
    body.has-appbar .app,body.has-pubbar .app{place-items:start center;align-content:start;padding-top:28px;padding-bottom:20px}      /* 20px of clear air under the bar */
    body.has-appbar .screen,body.has-pubbar .screen{width:100%;max-width:var(--stage-w)}

    /* the Friends panel pages: window + gap + panel = the stage */
    body.has-appbar .home,body.has-appbar .bento{grid-template-columns:minmax(0,1fr) auto;gap:var(--stage-gap);align-items:stretch;min-height:var(--stage-h);max-width:var(--stage-w)}
    body.has-appbar .home-main,body.has-appbar .bento > .card{min-height:var(--stage-h);height:100%;display:flex;flex-direction:column;justify-content:center}
    body.has-appbar .bento > #dock,body.has-appbar .home > #dock{height:100%;min-height:var(--stage-h)}
    body.has-appbar .screen[data-screen="mood"] .home.bento{height:var(--stage-h);min-height:var(--stage-h)}      /* Home used to size itself to the window: now it is the stage like every other page */
    body.has-appbar .screen[data-screen="mood"] .home-main{height:100%;padding:20px 28px 16px}

    /* single-window pages */
    body.has-appbar .screen > .card{min-height:var(--stage-h)}
    body.has-appbar .screen:not([data-screen="recharge"]) > .card:not(.found):not(.msgs-card){display:flex;flex-direction:column;justify-content:center}
    body.has-appbar .screen:not([data-screen="recharge"]) > .card:not(.msgs-card):not(.found) > :not(.back){max-width:820px;margin-left:auto;margin-right:auto;width:100%}
    body.has-appbar .screen > .card.found{align-content:center}
    body .screen[data-screen="recharge"] > .card{align-content:center}
    body.has-appbar .screen[data-screen="settings"] > .card > :not(.back){max-width:980px !important}      /* Settings is wider than the other single-column pages: a menu and its group side by side */
    body .screen[data-screen="settings"] > .card > .head{text-align:left;padding-left:2px}
    body.has-appbar .msgs-layout{height:calc(var(--stage-h) - 2px);max-height:none}
    body.has-appbar .profile{min-height:var(--stage-h);align-content:start}

    /* sign up and log in share the stage too */
    body .card.auth{min-height:var(--stage-h)}
    body .card.auth .auth-form{justify-content:center}
  }

  /* ---- Settings: a compact heading so every group fits the stage ---- */
  @media (min-width:1000px){
    body .screen[data-screen="settings"] .h-bold{font-size:1.9rem}
    body .screen[data-screen="settings"] > .card > .head{padding-bottom:0;margin-bottom:14px}
    body .screen[data-screen="settings"] > .card{padding-top:22px;padding-bottom:22px}
  }
  @media (min-width:1000px) and (max-height:780px){
    body .screen[data-screen="settings"] .h-bold{font-size:1.6rem}
    body .screen[data-screen="settings"] > .card > .head{margin-bottom:8px}
    body .screen[data-screen="settings"] .set .sg-body{gap:10px 26px}
    body .screen[data-screen="settings"] .set .check{gap:8px}
    body .screen[data-screen="settings"] .set h2{margin-bottom:6px}
  }
  @media (min-width:1000px) and (max-height:720px){
    body .screen[data-screen="settings"] .set .check .hint{font-size:.7rem;line-height:1.28}
    body .screen[data-screen="settings"] > .card{padding-top:16px;padding-bottom:16px}
    body .screen[data-screen="settings"] .set .sg-body{gap:8px 24px}
    body .screen[data-screen="settings"] .set-nav button{padding:8px 14px}
  }

  /* =====================================================================================================================================
     BIG SCREENS: the whole app scales up together (top bar, window and everything in it), so the proportions on a 1080p or 1440p screen are
     the same as on a laptop instead of a small page floating in a huge window. The stage height is worked out in the scaled space, so the
     window still fills the screen exactly. (The landing page and the call screens size themselves and are not scaled.)
     ===================================================================================================================================== */
  @media (min-width:1700px) and (min-height:960px){ :root{--z:1.15} }
  @media (min-width:2200px) and (min-height:1250px){ :root{--z:1.35} }
  @media (min-width:1700px) and (min-height:960px){
    body.has-appbar .appbar,body.has-appbar .app,body.has-pubbar .pubbar,body.has-pubbar .app{zoom:var(--z)}
    body.has-appbar .app,body.has-pubbar .app{min-height:calc(100vh / var(--z) - 74px)}
  }

  /* =====================================================================================================================================
     THE CALL: the same stage as every other page. The top bar stays, and the call is two windows side by side, exactly like Home and its
     Friends panel: the call window, and the text chat as its own vertical window on the right, the same width and height as the Friends panel.
     ===================================================================================================================================== */
  @media (min-width:1000px){
    body.has-appbar .screen[data-screen="call"] > .card.call{display:grid !important;grid-template-columns:minmax(0,1fr) var(--dock-w);gap:var(--stage-gap);align-items:stretch;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 !important;min-height:var(--stage-h);overflow:visible}
    body.has-appbar .screen[data-screen="call"] > .card.call > .call-main{display:flex;flex-direction:column;justify-content:flex-start;width:auto !important;max-width:none !important;margin:0 !important;min-height:var(--stage-h);background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);border:1px solid var(--ui);border-radius:32px;box-shadow:var(--sh-m);overflow:hidden}
    body.has-appbar .screen[data-screen="call"] .call-main > .call-top{border-radius:0}
    body.has-appbar .screen[data-screen="call"] .call-main > .voices{margin-top:auto}      /* the banner stays flush at the top; everything below it is centred in the rest of the window */
    body.has-appbar .screen[data-screen="call"] .call-main > #callFoot{margin-bottom:auto}
    body.has-appbar .screen[data-screen="call"] > .card.call > #callChat{display:flex !important;flex-direction:column;gap:10px;width:auto !important;max-width:none !important;margin:0 !important;height:100%;min-height:var(--stage-h);padding:18px 16px 14px;background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.35);backdrop-filter:blur(20px) saturate(1.35);border:1px solid var(--ui);border-radius:32px;box-shadow:var(--sh-m)}
    body .screen[data-screen="call"] #callChat .call-chat-title{display:block;margin:0 0 2px 4px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
    body .screen[data-screen="call"] #callChat .msgs{flex:1;min-height:0;max-height:none;overflow:auto}
    body .screen[data-screen="call"] #callChat .composer{margin-top:auto}
    body .screen[data-screen="call"] #chatBtn{display:none}      /* the chat is always open here, so its button is not needed */
    /* a game open: the people tiles shrink and the prompt hides, so the call still fits the stage */
    body .screen[data-screen="call"] .card.call.games-open .prompt{display:none}
    body .screen[data-screen="call"] .card.call.games-open .voices{padding:12px 20px;gap:10px}
    body .screen[data-screen="call"] .card.call.games-open .voice{padding:8px 12px}
    body .screen[data-screen="call"] .card.call.games-open .voice .face{width:52px}
    body .screen[data-screen="call"] .card.call.games-open .voice .wave{display:none}
  }

  /* =====================================================================================================================================
     FEEDBACK after a call: two columns on a laptop (it was one long column that scrolled by almost 400px).
     ===================================================================================================================================== */
  @media (min-width:1000px){
    body.has-appbar .screen[data-screen="feedback"] > .card > :not(.back){max-width:1000px !important}
    body .screen[data-screen="feedback"] #fbForm{display:block;column-count:2;column-gap:40px}      /* balanced columns: no row is stretched by the other column */
    body .screen[data-screen="feedback"] #fbForm > *{break-inside:avoid;margin:0 0 14px}
    body .screen[data-screen="feedback"] .head{padding-top:0 !important}
    body .screen[data-screen="feedback"] .h-bold{font-size:2.1rem}
    body .screen[data-screen="feedback"] .head{margin:0 0 10px}
    body .screen[data-screen="feedback"] #fbForm > *{margin-bottom:10px}
    body .screen[data-screen="feedback"] #fbForm textarea{min-height:64px;height:64px}
    body .screen[data-screen="feedback"] .banner{padding:8px 14px;margin-bottom:10px}
    body .screen[data-screen="feedback"] > .card{padding-top:18px;padding-bottom:12px}
  }
  @media (min-width:1000px) and (max-height:780px){
    body .screen[data-screen="feedback"] .h-bold{font-size:1.7rem}
    body .screen[data-screen="feedback"] #fbForm > *{margin-bottom:6px}
    body .screen[data-screen="feedback"] #fbForm textarea{min-height:48px;height:48px}
    body .screen[data-screen="feedback"] .vibe{padding:8px 10px;min-height:44px}
    body .screen[data-screen="feedback"] .stars{gap:4px}
  }

  /* ---- a short laptop window (up to 740px tall): the call, match-found and feedback screens a little tighter ---- */
  @media (min-width:1000px) and (max-height:740px){
    body .screen .card.found{gap:8px !important;padding-top:14px;padding-bottom:14px}
    body .screen .card.found .h-bold{font-size:2rem}
    body .screen[data-screen="call"] .call-main .controls{padding:12px 20px}
    body .screen[data-screen="call"] .call-main .call-foot{padding-bottom:10px}
    body .screen[data-screen="feedback"] > .card{padding-top:10px;padding-bottom:8px}
    body .screen[data-screen="feedback"] .h-bold{font-size:1.5rem}
  }

  /* =====================================================================================================================================
     NOTHING JUMPS. Content that changes height when you click (tabs, a side menu, search results, a form that grows, an error message) is
     anchored to the top of its window, so a title, a tab bar or a menu you just clicked never moves under your cursor. (The windows used to
     centre everything, so a taller or shorter page pushed the title up or down: Friends' tabs moved by up to 69px, Settings' menu by 120px.)
     Pages whose content never changes (Who to connect with, Match style, Week, Invite) stay centred.
     ===================================================================================================================================== */
  @media (min-width:1000px){
    body.has-appbar .screen:is([data-screen="friends"],[data-screen="settings"]) > .card{justify-content:flex-start !important;padding-top:44px !important}
    body.has-appbar .screen[data-screen="feedback"] > .card{justify-content:flex-start !important}
    body .card.auth .auth-form,body .card.auth form.auth-form{justify-content:flex-start}
  }

  /* =====================================================================================================================================
     THE FRIENDS PANEL: one inset for everything (--rp), rows whose content lines up with it exactly, and a list that fades out at the
     bottom instead of showing a half row against a hard edge. (Before: the content block was a fixed 296px inside a 298px panel, and
     the heading, the request pill, the section labels, the avatars and the buttons each used their own inset: 18, 16 and 22px on the
     left, 18, 16 and 20px on the right.)
     ===================================================================================================================================== */
  body .ftile{--rp:18px}
  body .ft-full{left:0;right:0;width:auto;padding:18px var(--rp) 0;box-sizing:border-box}
  body .ft-full .rail-head{padding:0 0 12px}
  body .ft-full .rail-req{margin:0 0 4px;padding:9px 14px;border-radius:14px}
  body .ft-full .rail-list{padding:0 0 20px;margin:0 -8px;overflow-x:hidden;scrollbar-width:none;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent)}
  body .ft-full .rail-list::-webkit-scrollbar{display:none}
  body .ft-full .rail-label{margin:14px 0 4px;padding:0 8px}
  body .ft-full .rrow{margin:0;padding:0 8px;gap:8px;border-radius:16px}
  body .ft-full .rmain{padding:6px 0;min-height:52px}
  body .ft-full .rail-foot{margin:0 calc(var(--rp) * -1);padding:11px var(--rp) 13px}
  body .ft-bubbles{left:0;width:100%}

  /* =====================================================================================================================================
     THE FRIENDS PAGE (Friends, Requests, Find): one layout instead of three differently-sized centred columns. Before, the stage capped
     every part at 820px and centred it, the lists capped themselves at 680px and centred again, and each friend's buttons wrapped onto a
     second line, so the heading, the tab bar and the list never shared an edge, only three friends fit, and the page scrolled.
     Now: a header row (title and online count on the left, the tab switcher on the right), and below it one full-width pane that
     scrolls inside the window, with one-line rows (who on the left, actions on the right) for friends, requests and search results.
     ===================================================================================================================================== */
  @media (min-width:1000px){
    body.has-appbar .screen[data-screen="friends"] > .card{display:grid !important;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head tabs" "pane pane" "note note";column-gap:24px;row-gap:16px;align-items:center;height:var(--stage-h);min-height:0 !important;overflow:hidden;justify-content:normal !important;padding:32px 36px 20px !important}
    body.has-appbar .screen[data-screen="friends"] > .card > .head{grid-area:head;text-align:left;margin:0 !important;padding:0 !important;max-width:none !important;width:auto !important}
    body.has-appbar .screen[data-screen="friends"] > .card > #friendTabs{grid-area:tabs;margin:0 !important;max-width:none !important;width:auto !important}
    body.has-appbar .screen[data-screen="friends"] > .card > :is(#friendsPane,#reqPane,#findPane){grid-area:pane;align-self:stretch;min-height:0;max-width:none !important;width:auto !important;margin:0 !important;overflow-y:auto;overflow-x:hidden;padding:2px 2px 26px;scrollbar-width:thin;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}
    body.has-appbar .screen[data-screen="friends"] > .card > p.note{grid-area:note;text-align:left;margin:0 !important;max-width:none !important;width:auto !important}
    body .screen[data-screen="friends"] .list{max-width:none;margin:0;gap:10px;grid-template-columns:minmax(0,1fr)}      /* the column may shrink below its widest row, so long text truncates instead of pushing the row past the pane */
    body .screen[data-screen="friends"] .sect{max-width:none;margin:14px 0 8px}
    body .screen[data-screen="friends"] #reqPane .sect:first-child{margin-top:2px}
    body .screen[data-screen="friends"] .item{flex-wrap:nowrap;min-height:72px;padding:10px 16px}
    body .screen[data-screen="friends"] .item .grow{min-width:0}
    body .screen[data-screen="friends"] .item .grow b,body .screen[data-screen="friends"] .item .grow small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    body .screen[data-screen="friends"] .item .btns{flex-wrap:nowrap;margin-left:auto;flex:none}
    /* the tab bar: the count sits beside the label, never under it */
    body .screen[data-screen="friends"] #friendTabs .tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
    /* friends: every button has its own column, counted from the right, so Message, Remove, Block, Star and Plan a call line up on every row
       (an offline friend has no Call button, so its row is padded to keep Message where it is on the online rows) */
    body .screen[data-screen="friends"] #friendList .btns .btn{justify-content:center;white-space:nowrap}
    body .screen[data-screen="friends"] #friendList .btns > :first-child{width:118px}
    body .screen[data-screen="friends"] #friendList .btns > :nth-last-child(4){width:92px}
    body .screen[data-screen="friends"] #friendList .btns > :nth-last-child(3){width:78px}
    body .screen[data-screen="friends"] #friendList .btns > :nth-last-child(2){width:108px}
    body .screen[data-screen="friends"] #friendList .btns > :nth-last-child(1){width:122px}
    body .screen[data-screen="friends"] #friendList .btns:has(> :nth-child(6)) > :nth-child(2){width:72px}
    body .screen[data-screen="friends"] #friendList .btns:not(:has(> :nth-child(6))) > :first-child{margin-right:78px}      /* the slot where Call would be */
    body .screen[data-screen="friends"] #findPane .search{margin:0 0 8px;max-width:none;width:100%}
    body .screen[data-screen="friends"] #findPane .hint{margin:0 0 12px}
  }
  @media (min-width:1000px) and (max-height:780px){
    body.has-appbar .screen[data-screen="friends"] > .card{padding:22px 32px 14px !important;row-gap:10px}
    body .screen[data-screen="friends"] .h-bold{font-size:1.9rem}
    body .screen[data-screen="friends"] .item{min-height:64px;padding:8px 14px}
  }

  /* =====================================================================================================================================
     HISTORY (Recent voices): the same page layout as Friends. With real calls it was an 820px centred column that scrolled the whole page
     by more than 500px. Now: a header at the top left, one full-width pane that scrolls inside the window, one-line rows, and the
     buttons in fixed columns counted from the right (Report, Block, Add friend), so they line up on every row.
     ===================================================================================================================================== */
  @media (min-width:1000px){
    body.has-appbar .screen[data-screen="history"] > .card{display:grid !important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head" "pane" "note";row-gap:16px;align-items:start;height:var(--stage-h);min-height:0 !important;overflow:hidden;justify-content:normal !important;padding:32px 36px 20px !important}
    body.has-appbar .screen[data-screen="history"] > .card > .head{grid-area:head;text-align:left;margin:0 !important;padding:0 !important;max-width:none !important;width:auto !important}
    body.has-appbar .screen[data-screen="history"] > .card > #historyList{grid-area:pane;align-self:stretch;min-height:0;max-width:none !important;width:auto !important;margin:0 !important;overflow-y:auto;overflow-x:hidden;padding:2px 2px 26px;gap:10px;grid-template-columns:minmax(0,1fr);align-content:start;scrollbar-width:thin;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}
    body.has-appbar .screen[data-screen="history"] > .card > p.note{grid-area:note;text-align:left;margin:0 !important;max-width:none !important;width:auto !important}
    body .screen[data-screen="history"] .item{flex-wrap:nowrap;min-height:72px;padding:10px 16px}
    body .screen[data-screen="history"] .item .grow{min-width:0}
    body .screen[data-screen="history"] .item .grow b,body .screen[data-screen="history"] .item .grow small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    body .screen[data-screen="history"] .item .btns{flex-wrap:nowrap;margin-left:auto;flex:none}
    body .screen[data-screen="history"] #historyList .btns .btn{justify-content:center;white-space:nowrap}
    body .screen[data-screen="history"] #historyList .btns > :nth-last-child(1){width:104px}
    body .screen[data-screen="history"] #historyList .btns > :nth-last-child(2){width:92px}
    body .screen[data-screen="history"] #historyList .btns > :nth-last-child(3){width:130px}
  }
  @media (min-width:1000px) and (max-height:780px){
    body.has-appbar .screen[data-screen="history"] > .card{padding:22px 32px 14px !important;row-gap:10px}
    body .screen[data-screen="history"] .h-bold{font-size:1.9rem}
    body .screen[data-screen="history"] .item{min-height:64px;padding:8px 14px}
  }

  /* ---- Sign in with Google, Apple or Facebook (the buttons keep each company's own colours) ---- */
  body .social-row .btn.social{min-height:48px;border-radius:999px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
  body .social-row .btn.social:hover{transform:translateY(-1px);box-shadow:var(--sh-s);filter:brightness(1.04)}
  body .social-cap{display:none}
  body .up-social .social-cap{display:block}

  /* ---- Sign up and Log in WITH the provider buttons: still one screen, no scrolling ---- */
  @media (min-width:1000px){
    body .card.auth:has(#socialRow:not([hidden])) #acctDivider{display:none}      /* the brand buttons say what they are; the "or" divider below separates them from the email form */
    body .card.auth:has(#socialRow:not([hidden])) .auth-form{gap:8px}
    body .card.auth:has(#socialRow:not([hidden])) .quickstart{gap:5px}
    body .card.auth:has(#socialRow:not([hidden])) .social-row .btn.social{min-height:44px}
    body .card.auth:has(#socialRow:not([hidden])) .card.auth .field input,body .card.auth:has(#socialRow:not([hidden])) .field input{min-height:40px}
  }

  /* a short laptop window with the provider buttons: the heading steps aside (the tabs already say Sign up / Log in) and the rhythm tightens */
  @media (min-width:1000px) and (max-height:760px){
    body .card.auth:has(#socialRow:not([hidden])) #authTitle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0 !important}      /* still there for screen readers */
    body .card.auth:has(#socialRow:not([hidden])) .auth-form{padding-top:10px;padding-bottom:8px;gap:6px}
    body .card.auth:has(#socialRow:not([hidden])) .field input{min-height:38px}
    body .card.auth:has(#socialRow:not([hidden])) .social-row .btn.social{min-height:42px}
  }

  /* ---- RECENT VOICES: the panel's section lines up with everything else in it (the same inset), and the Friends page gets a fourth tab ---- */
  body .ft-full .rail-recent{margin:0 0 6px}
  body .ft-full .rail-recent-head{padding:9px 14px}
  body .ft-full .rail-recent-list{margin:0 -8px;padding:4px 0 0}
  body .ft-full .rail-recent-list .rrow{margin:0}
  @media (min-width:1000px){
    body.has-appbar .screen[data-screen="friends"] > .card{grid-template-columns:minmax(0,1fr) 470px}
    body.has-appbar .screen[data-screen="friends"] > .card > #recentPane{grid-area:pane;align-self:stretch;min-height:0;max-width:none !important;width:auto !important;margin:0 !important;overflow-y:auto;overflow-x:hidden;padding:2px 2px 26px;scrollbar-width:thin;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}
    body .screen[data-screen="friends"] #recentFullList .btns .btn{justify-content:center;white-space:nowrap}
    body .screen[data-screen="friends"] #recentFullList .btns > :nth-last-child(1){width:104px}
    body .screen[data-screen="friends"] #recentFullList .btns > :nth-last-child(2){width:92px}
    body .screen[data-screen="friends"] #recentFullList .btns > :nth-last-child(3){width:130px}
  }
}