/* ===== IVO redesign - HYBRID logged-out shell. TikTok product-preview + FB/IG auth card. Same tokens. ===== */
:root{
  --bg:#f4f6f9; --bg2:#e9edf3; --card:#ffffff; --card2:#f7f9fc;
  --ink:#0f1729; --ink2:#475569; --ink3:#64748b;
  --bd:#e4e8ef; --bd2:#d3dae4;
  --blue:#2563eb; --blue-d:#1d4ed8; --blue-bg:rgba(37,99,235,.07);
  --coral:#e8502e; --coral-d:#c9401f; --coral-t:#b23c0f; --coral-bg:rgba(232,80,46,.08);
  --gold:#c9a227; --gold-t:#8a6a12; --green:#0a7d54; --green-t:#0a6e4a;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
  --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 16px -4px rgba(15,23,42,.10),0 2px 6px -2px rgba(15,23,42,.06);
  --shadow-lg:0 2px 4px rgba(15,23,42,.04),0 14px 30px -8px rgba(15,23,42,.13),0 36px 60px -22px rgba(15,23,42,.16);
  --r:16px; --r-sm:12px; --r-lg:22px; --maxw:1240px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
html.dark{
  --bg:#0a0c12; --bg2:#11141d; --card:#141824; --card2:#1a1f2c;
  --ink:#f0f3f9; --ink2:#aab4c5; --ink3:#7e8798;
  --bd:#242b39; --bd2:#343d4e;
  --blue:#3b82f6; --blue-d:#60a5fa; --blue-bg:rgba(59,130,246,.16);
  --coral:#ff6b4a; --coral-d:#ff856a; --coral-t:#ff8a66; --coral-bg:rgba(255,107,74,.15);
  --gold:#e3bc4e; --gold-t:#e3bc4e; --green:#3ecb93; --green-t:#4bd39c;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px -8px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 24px 50px -16px rgba(0,0,0,.72);
}
/* accent toggle: blue-as-primary swaps the coral/secondary token roles (mirrors internetivo data-accent) */
html[data-accent="blue"]{ --coral:#2563eb; --coral-d:#1d4ed8; --coral-t:#1d4ed8; --coral-bg:rgba(37,99,235,.08); --blue:#e8502e; --blue-d:#b23c0f; --blue-bg:rgba(232,80,46,.08); }
html.dark[data-accent="blue"]{ --coral:#3b82f6; --coral-d:#60a5fa; --coral-t:#60a5fa; --coral-bg:rgba(59,130,246,.16); --blue:#ff6b4a; --blue-d:#ff8a66; --blue-bg:rgba(255,107,74,.15); }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.08;font-weight:800}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.muted{color:var(--ink2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:600;font-size:15px;padding:12px 22px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 6px 18px -6px var(--coral)}
.btn-primary:hover{background:var(--coral-d);box-shadow:0 10px 24px -8px var(--coral)}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--bd2);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--ink3)}
.btn-wide{width:100%}
.btn-lg{font-size:16px;padding:14px 26px}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-color:var(--bd)}
.nav{display:flex;align-items:center;gap:14px;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.03em}
.logo .mark-img{width:34px;height:34px;display:block;flex-shrink:0}
.nav-headline{margin-left:10px;font-weight:800;font-size:19px;line-height:1.1;letter-spacing:-.02em;color:var(--ink);min-width:0}
.nav-headline .l2{color:var(--coral)}
.nav-menu{display:flex;align-items:center;gap:2px;margin-left:16px}
.nav-menu a{font-size:14px;font-weight:600;color:var(--ink2);padding:7px 12px;border-radius:9px;white-space:nowrap;transition:.15s}
.nav-menu a:hover{color:var(--ink);background:var(--card2)}
.nav-menu a.on{color:var(--coral-t)}
.nav-cta{font-family:inherit;font-weight:600;font-size:13.5px;line-height:1;padding:9px 15px;border-radius:10px;white-space:nowrap;transition:.15s;cursor:pointer;display:inline-flex;align-items:center}
.nav-cta.ghost{color:var(--ink);border:1px solid var(--bd2);background:var(--card)}
.nav-cta.ghost:hover{border-color:var(--ink3)}
.nav-cta.primary{background:var(--coral-d);color:#fff;border:1px solid var(--coral-d)}
.nav-cta.primary:hover{filter:brightness(.93)}
/* dark mode: accent -d is a LIGHT shade, so the filled CTA needs dark text to keep AA */
html.dark .nav-cta.primary{color:var(--bg)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.m-accent,.m-theme,.m-login{width:36px;height:36px;border-radius:10px;border:1px solid var(--bd2);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink2);padding:0;flex-shrink:0;transition:border-color .15s,color .15s}
.m-accent:hover,.m-theme:hover,.m-login:hover{border-color:var(--ink3);color:var(--ink)}
.m-accent-dot{width:16px;height:16px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 14%,transparent),inset 0 1px 1px rgba(255,255,255,.5);transition:background .2s,box-shadow .2s}
.m-theme svg,.m-login svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-login{display:none}
@media (max-width:980px){.m-login{display:grid}}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--bd2);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink2);transition:.15s}
.icon-btn:hover{color:var(--ink);border-color:var(--ink3)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- split hero ---- */
/* 1.85fr (was 1.6fr, owner 2026-09-26: "a bit bigger"): the Live Preview gains ~50px of width at
   1440 and the Login card keeps >=394px at 1280, where every button still fits on one line. */
/* login card width (2026-09-26): 1.85fr/.9fr shrank the card to 446px at 1440 (owner: "the login card became smaller"). The card now tracks the screen at 34vw between 420 and 490px and the Live Preview takes the rest, still wider than before the 1.85fr change. */
.split{display:grid;grid-template-columns:minmax(0,1fr) clamp(420px,34vw,490px);gap:28px;padding:5px 0;align-items:stretch}
.pane-product{min-width:0}

/* product preview frame */
.preview{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.preview-top{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--bd);background:var(--card2);flex-wrap:wrap}
.livechip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--coral-t);background:var(--coral-bg);padding:5px 11px;border-radius:999px}
.livechip i{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 60%,transparent);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.seg{margin-left:auto;display:inline-flex;background:var(--bg2);border:1px solid var(--bd);border-radius:999px;padding:3px}
.seg button{font-family:inherit;font-weight:600;font-size:12.5px;line-height:1.2;white-space:nowrap;padding:7px 12px;border-radius:999px;border:0;background:none;color:var(--ink2);cursor:pointer;transition:.15s}
.seg button.on{background:var(--card);color:var(--coral-t);box-shadow:var(--shadow-sm)}
.preview-body{padding:9px 14px;min-height:0;scrollbar-width:thin;scrollbar-color:var(--bd2) transparent}
.preview-body::-webkit-scrollbar{width:8px}
.preview-body::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.preview-body::-webkit-scrollbar-track{background:transparent}
.feed-lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin-bottom:7px;display:flex;align-items:center;gap:8px}
.feed-lbl .skills{margin-left:auto;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink2);font-size:12px}
.find-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fcard{min-width:0;border:1px solid var(--bd);border-radius:12px;padding:8px 11px;background:var(--card2);cursor:pointer;animation:rise .4s ease both;transition:.18s}
.fcard:hover{border-color:var(--coral);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.fc-top{display:flex;align-items:center;gap:8px;min-width:0}
.fc-ic{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:#fff;flex-shrink:0}
.fc-ic svg{width:56%;height:56%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc-t{flex:1;min-width:0;font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-match{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:var(--green-t);background:color-mix(in srgb,var(--green) 14%,transparent);padding:2px 8px;border-radius:999px;flex-shrink:0}
.fc-match i{width:5px;height:5px;border-radius:50%;background:var(--green)}
/* Card description, clamped to two lines so a long `desc` cannot change the card's
   height and push the grid into an internal scroll - the panel is the one thing on
   this page that must never scroll.
   THE CLAMP LIVES ON AN INNER SPAN, and that is not decoration. .fcard is a flex
   column, so .fc-desc is a flex item, and a flex item BLOCKIFIES -webkit-box into
   flow-root - which silently kills the clamp. Putting the standard `line-clamp`
   alongside it does the same thing. Measured before the fix: the clamp did not apply,
   the full paragraph rendered, and the find tab overflowed its panel by 70px at
   1280x625. This repo has hit it before; see the note at styles.css:404. So the <p>
   stays an ordinary block flex item and the span inside it does the clamping. */
/* OFF BY DEFAULT, and switched on only after the panel is MEASURED to have room.
   fitDescriptions() in login-hybrid.js adds .desc-fit to #pbody.

   WHY THIS IS NOT A MEDIA QUERY, which is what it was first and what broke.
   The quantity that decides whether the descriptions fit is the panel's own
   remaining height - and that depends on whether a gate message is showing,
   which is application state no media query can see. Gated in CSS on viewport
   height alone, the rule was right with no message and wrong with one: measured
   live at 1280x800, panel 560 and no overflow without the message, panel 511 and
   44px of overflow with it, and 0 again with the message but the descriptions
   suppressed. So the two changes were each fine alone and broke together, and
   the sixth card was clipped by 42px in the state the page is in after any gated
   click. It was the 560px magic number all over again: a hand-picked constant
   standing in for a quantity that should be measured.
   Width had the same problem from the other direction: at 981-1024px the grid is
   too tight for a two-line description even on a tall window, which the old
   `max-width:980px` cutoff missed by one pixel of breakpoint. */
.fc-desc{display:none;margin:0;font-size:11.5px;line-height:1.45;color:var(--ink2);min-width:0}
#pbody.desc-fit .fc-desc{display:block}
.fc-desc > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fc-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:5px}
.fc-rw{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.fc-d{font-size:11px;font-weight:500;color:var(--ink2)}
.ai-strip{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:-1px 0 9px}
.ai-lead{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);margin-right:1px}
.ai-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink);background:var(--card2);border:1px solid var(--bd);padding:3px 9px 3px 7px;border-radius:999px;white-space:nowrap}
.ai-chip i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ai-logo{display:inline-flex;align-items:center;justify-content:center;height:20px;color:var(--ink2);flex-shrink:0}
.ai-logo svg,.ai-logo .ail{height:20px;width:auto;display:block}
.fc-tag{font-size:10px;font-weight:700;color:var(--ink2);background:var(--bd);padding:2px 8px;border-radius:999px;flex-shrink:0;text-transform:uppercase;letter-spacing:.03em}
.fc-inc{font-size:12.5px;font-weight:800;color:var(--coral-t)}
.pd-assist{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 7px}
.pdetail2 .ai-chip{font-size:11px;padding:2px 8px 2px 6px}
.pdetail2 .ai-chip i{width:6px;height:6px}
.tcard{border:1px solid var(--bd);border-radius:14px;padding:11px 13px;background:var(--card2);transition:.18s;margin-bottom:8px;animation:rise .4s ease both;cursor:pointer}
.tscope{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.tscope li{position:relative;padding-left:26px;font-size:13.5px;color:var(--ink2);line-height:1.45}
.tscope li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:var(--coral-bg)}
.tscope li::after{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;background:var(--coral);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tcard:hover{border-color:var(--coral);transform:translateY(-2px);box-shadow:var(--shadow)}
.tcard .top{display:flex;align-items:center;gap:11px}
.tcard .cico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0}
.tcard .grow{flex:1;min-width:0}
.tcard .tt{font-weight:700;font-size:14.5px;line-height:1.3}
.tcard .tt .cl{font-weight:500;font-size:12.5px;color:var(--ink2);margin-left:5px}
.tcard .reward{margin-left:auto;text-align:right;flex-shrink:0;font-weight:800;font-size:14.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tcard .reward .d{font-weight:500;font-size:12px;color:var(--ink2);margin-left:4px}
.tcard .meta{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap}
.match{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green);display:inline-flex;align-items:center;gap:6px}
.match i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.pill{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--bd);color:var(--ink2)}
.tcard .act{margin-left:auto}
.mini-btn{font-family:inherit;font-weight:600;font-size:13px;padding:8px 15px;border-radius:999px;border:0;background:var(--coral);color:#fff;cursor:pointer;transition:.15s}
.mini-btn:hover{background:var(--coral-d)}

/* profile cards (example pros) */
.pcard{display:flex;gap:11px;border:1px solid var(--bd);border-radius:13px;padding:6px 11px;background:var(--card2);margin-bottom:4px;transition:.18s;animation:rise .4s ease both;align-items:center}
.pcard:hover{border-color:var(--coral);transform:translateY(-2px);box-shadow:var(--shadow)}
.pav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex-shrink:0}
.pgrow{flex:1;min-width:0}
.pname{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;flex-wrap:wrap}
.vbadge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#7a5b00;background:color-mix(in srgb,var(--gold) 24%,transparent);border:1px solid color-mix(in srgb,var(--gold) 42%,transparent);padding:2px 8px;border-radius:999px}
html.dark .vbadge{color:var(--gold)}
.vbadge svg{width:11px;height:11px;fill:currentColor}
.prole{font-size:12.5px;color:var(--ink2);margin-top:2px}
.pmeta{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.pjobs{font-size:11.5px;color:var(--ink2);font-weight:600}
.pcard .pgrow{flex:1;min-width:0}
.pcard .pname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .prole{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.pcard .vbadge{padding:2px 5px}
.pside{display:flex;align-items:center;gap:7px;flex-shrink:0}
@media(max-width:560px){.pside .pstar{display:none}}
.pstar{font-size:12.5px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.pstar svg{width:14px;height:14px;fill:var(--gold)}
.pacts{margin-left:auto;display:flex;gap:7px}
.follow-btn{font-family:inherit;font-weight:600;font-size:12.5px;padding:8px 15px;border-radius:999px;border:1px solid var(--bd2);background:var(--card);color:var(--ink);cursor:pointer;transition:.15s}
.follow-btn:hover{border-color:var(--ink3)}

/* profile detail view */
.pcard{cursor:pointer}
.pdetail{animation:rise .3s ease}
.pback{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink2);background:none;border:0;cursor:pointer;padding:4px 0;margin-bottom:12px}
.pback:hover{color:var(--ink)}
.pback svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.phead{display:flex;gap:14px;align-items:center}
.phead .pav{width:60px;height:60px;font-size:20px}
.phead .pname{font-size:17px}
.pheadinfo{flex:1;min-width:0}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.pstatbox{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:11px 8px;text-align:center}
.pstatbox .v{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.pstatbox .k{font-size:11px;color:var(--ink2);margin-top:2px}
.pbio{font-size:13.5px;color:var(--ink2);line-height:1.55;margin:0 0 16px}
.psec-t{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin:0 0 10px}
.pfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.pfitem{border-radius:12px;overflow:hidden;border:1px solid var(--bd);background:var(--card)}
.pfitem .thumb{height:62px;background:var(--bg2)}
.pfitem .cap{font-size:11.5px;padding:8px 10px;color:var(--ink2)}
.pd-acts{display:flex;gap:10px}
.pd-acts .btn{flex:1;justify-content:center}
/* compact two-column Discover detail (fits the fixed preview, no internal scroll) */
.ex-tag{display:inline-block;margin-left:9px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);background:var(--card2);border:1px dashed var(--bd2);padding:2px 7px;border-radius:6px;vertical-align:middle}
.pd-assure{display:none}
.pd-as{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink2)}
.pd-as svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--coral);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pdetail2 .pback{margin-bottom:5px}
.pd-head{display:flex;gap:12px;align-items:center}
.pd-head .pname{font-size:15px}
.pd-skills{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-content:center;max-width:48%;margin-left:auto}
.pd-cols{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-top:6px;align-items:start}
.pd-left{min-width:0}
.pdetail2 .pbio{font-size:13px;line-height:1.42;margin:0 0 4px}
.pdetail2 .psec-t{margin:0 0 5px}
.pdetail2 .tscope{margin:0;gap:5px}
.pdetail2 .tscope li{font-size:12.5px;line-height:1.4;padding-left:24px}
.pd-right{display:flex;flex-direction:column;gap:7px}
.pstats.vert{display:flex;flex-direction:column;gap:6px;margin:0}
.pstats.vert .pstatbox{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:7px 13px}
.pstats.vert .k{margin:0;font-size:11.5px;color:var(--ink2)}
.pstats.vert .v{font-size:15px}
.pdetail2 .pd-left .pmeta{margin:0 0 6px}
.pdetail2 .prole .pstar{margin-left:8px;color:var(--ink2);font-weight:600}
.pfolio-mini{display:flex;gap:8px}
.pfm{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px;border:1px solid var(--bd2);border-radius:10px;background:var(--card)}
.pfm-ic{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.pfm-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pfm-c{font-size:10.5px;font-weight:600;color:var(--ink2);text-align:center;line-height:1.1}
.pfollowers{display:flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid var(--bd);border-radius:12px;background:var(--card)}
.fav-pile{display:inline-flex;flex:0 0 auto}
.fav-pile>span{width:24px;height:24px;border-radius:50%;border:2px solid var(--card);margin-left:-9px}
.fav-pile>span:first-child{margin-left:0}
.fav-pile>span:nth-child(1){background:linear-gradient(135deg,#f97316,#e8502e)}
.fav-pile>span:nth-child(2){background:linear-gradient(135deg,#3b82f6,#2563eb)}
.fav-pile>span:nth-child(3){background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.fav-tx{font-size:12px;color:var(--ink2);line-height:1.2}
.fav-tx b{display:block;font-size:16px;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.pdetail2 .pd-right .btn{width:100%;justify-content:center;padding:9px 16px;font-size:14px}
.pd-headacts{display:flex;gap:8px;margin-left:auto;flex:0 0 auto}
.pd-headacts .btn{padding:7px 15px;font-size:13px}
@media (max-width:980px){
  .pd-assure{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;padding-top:10px;border-top:1px solid var(--bd)}
}
@media (max-width:560px){
  .pd-cols{grid-template-columns:1fr}
  .pd-skills{max-width:100%;justify-content:flex-start;margin-left:0}
  .pd-head{flex-wrap:wrap}
  .pd-headacts{flex:1 1 100%;margin-left:0;margin-top:2px}
  .pd-headacts .btn{flex:1}
}
/* tall desktop: fill the fixed box and pin an assurance strip to the bottom */
@media (min-width:981px) and (min-height:720px){
  .pdetail2{display:flex;flex-direction:column;height:100%}
  .pd-assure{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto;padding-top:10px;border-top:1px solid var(--bd)}
}
/* Platform surfaces figure: always shown on desktop. The bubble stage and the
   figure share the box via flex ratios, so both scale to the viewport and the
   figure never adds scroll (no-scroll is the priority). */
@media (min-width:981px){
  .plat-view{display:flex;flex-direction:column;height:100%;min-height:0}
  .plat-view .nm-wrap{flex:1.5 1 0;min-height:0;align-items:stretch}
  .plat-view .bub-stage{height:100%;min-height:0}
  .plat-view .plat-surfaces{display:block;flex:1 1 0;min-height:0;position:relative;overflow:hidden;margin-top:6px;padding-top:6px;border-top:1px solid var(--bd)}
  /* Invest: the chart is the flexible element, so the holdings always show and
     the whole panel scales to the viewport without adding scroll. */
  .analytics{display:flex;flex-direction:column;height:100%;min-height:0}
  .analytics .feed-lbl{flex:0 0 auto}
  .analytics .an-top,.analytics .an-metrics,.analytics .cb-cta{flex:0 0 auto}
  .analytics .an-chart{flex:1 1 0;min-height:20px}
  .analytics .an-more{display:flex;flex-direction:column;flex:0 1 auto;min-height:0;overflow:hidden}
  .analytics .an-more .an-hold-t{flex:0 0 auto}
  .analytics .an-holds{flex:0 1 auto;min-height:0;overflow:hidden}
}
/* skeleton loading (neutral, no colour) */
.sk{background:var(--bg2);border-radius:6px}
html.anim .sk{background:linear-gradient(90deg,var(--bg2) 25%,var(--bd) 37%,var(--bg2) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-card{display:flex;align-items:center;gap:12px;border:1px solid var(--bd);border-radius:14px;padding:13px;background:var(--card2);margin-bottom:10px}
.sk-av{width:44px;height:44px;border-radius:50%;flex-shrink:0}
.sk-ico{width:40px;height:40px;border-radius:11px;flex-shrink:0}
.sk-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.sk-l1{height:12px;width:62%}
.sk-l2{height:10px;width:40%}
.sk-amt{width:52px;height:16px;flex-shrink:0}
.sk-lbl{display:inline-block;height:10px;width:200px;vertical-align:middle}


/* ---- auth card ---- */
.pane-auth{position:sticky;top:88px}
.authcard{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:22px 22px;transition:box-shadow .3s,border-color .3s}
.authcard.pulse{border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-bg),var(--shadow-sm)}
/* Gate message. It now sits at the TOP OF THE LEFT COLUMN, above the Live Preview,
   because that is what it is a caption for. margin-bottom is 0 - the left column is a
   flex column with its own gap, and keeping the old 16px would have double-counted it
   and stolen height from the preview every time a message appeared. */
/* scroll-margin-top keeps the card (and, on mobile, the gate message that is its
   first child) clear of the sticky header when scrollIntoView lands on it. */
#authcard{scroll-margin-top:76px}
.gatemsg{display:none;font-size:13px;font-weight:600;color:var(--coral-t);background:var(--coral-bg);border-radius:12px;padding:10px 13px;margin-bottom:0;line-height:1.45;flex:0 0 auto}
.gatemsg.show{display:block;animation:rise .3s ease}
.authcard h2{font-size:21px;margin-bottom:4px}
.authhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.authhead h2{margin:0}
.authhead-right{display:flex;align-items:center;gap:14px}
.authreg{padding:8px 18px;font-size:14px}
.authreg:hover{border-color:var(--coral);color:var(--coral-t)}
.field{margin-bottom:10px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.field input{width:100%;font-family:inherit;font-size:15px;padding:12px 14px;border-radius:12px;border:1px solid var(--bd2);background:var(--card2);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--coral)}
/* iOS Safari auto-zooms any focused input under 16px; bump auth inputs to 16px on
   mobile so tapping a login/signup field does not jump the viewport. Base stays 15px
   elsewhere (design decision 2026-09-02). */
@media (max-width:768px){.field input,.field select,.field textarea{font-size:16px}}
.auth-form{display:block}
.authcard .btn-primary{margin-top:4px;padding:9px 22px;font-size:14px}
.forgot{font-size:12.5px;font-weight:600;color:var(--coral-t);text-decoration:none}
.forgot:hover{text-decoration:underline}
.hcap{display:flex;align-items:center;gap:11px;background:var(--card2);border:1px solid var(--bd2);border-radius:10px;padding:9px 12px;margin:2px 0 4px;cursor:pointer;user-select:none;-webkit-user-select:none}
.hcap-box{width:22px;height:22px;border-radius:5px;border:2px solid var(--ink3);background:var(--card);flex:0 0 auto;position:relative;transition:.15s}
.hcap.ok .hcap-box{background:var(--coral);border-color:var(--coral)}
.hcap.ok .hcap-box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hcap-lbl{flex:1 1 auto;font-size:13.5px;font-weight:600;color:var(--ink)}
.hcap-brand{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.hcap-logo{width:20px;height:20px;border-radius:5px;background:#0093d8;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.hcap-txt{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.hcap-txt b{font-size:10.5px;color:var(--ink2);font-weight:700}
.hcap-txt small{font-size:8px;color:var(--ink3)}
.btn-passkey{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:600;font-size:13px;padding:9px;border-radius:11px;border:1px solid var(--bd2);background:var(--card2);color:var(--ink);cursor:pointer;margin-top:6px;transition:.15s}
.btn-passkey:hover{border-color:var(--ink3)}
.btn-passkey svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oauth{display:flex;flex-direction:column;gap:7px;margin-top:7px}
.oauth button{display:flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:600;font-size:13px;padding:8px;border-radius:11px;border:1px solid var(--bd2);background:var(--card2);color:var(--ink);cursor:pointer;transition:.15s}
.oauth button:hover{border-color:var(--ink3)}
.oauth .g{width:17px;height:17px}

footer{border-top:1px solid var(--bd);padding:20px 0;margin-top:0}
.foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink2)}
.foot .logo{font-size:16px}
.foot-legal{color:var(--ink2)}
.foot-links{margin-left:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--ink2);font-weight:600;font-size:13px}
.foot-links a:hover{color:var(--coral-t)}
/* dark mode: brighten footer text so it clears AA on the dark footer surface */
html.dark .foot-legal,html.dark .foot-links a,html.dark #yr{color:var(--ink)}

@media(max-width:980px){
  .split{grid-template-columns:1fr;gap:24px;padding-top:30px}
  .pane-auth{position:static}            /* product-first stack: preview above the account card */
}
@media(max-width:640px){
  .nav{gap:8px;height:60px}
  .logo{font-size:18px}
  .nav-right{gap:6px}
  .icon-btn{width:36px;height:36px}
  .pane-auth{top:72px}
  .seg button{padding:7px 12px;font-size:12.5px}
  .preview-body{padding:13px;min-height:340px}
}
@media(max-width:560px){
  .authcard{padding:22px 18px}
  .seg{width:100%;overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:0 0 auto;padding:7px 12px;font-size:12px}
  .pstats{gap:8px}
  .pfolio{gap:8px}
  .pstatbox .v{font-size:16px}
}
@media(max-width:380px){
  .pfolio{grid-template-columns:1fr 1fr}
  .pd-acts{flex-wrap:wrap}
}
/* ============ premium polish ============ */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes shine{0%{transform:translateX(-130%) skewX(-18deg)}60%,100%{transform:translateX(340%) skewX(-18deg)}}

/* scroll progress */
.progressbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:var(--coral);transition:width .12s linear}

/* hero entrance (only when anim enabled) */
html.anim .pane-product>*{animation:riseIn .7s cubic-bezier(.2,.7,.2,1) both}
html.anim .pane-product>.preview{animation-delay:.3s}
html.anim .pane-auth{animation:riseIn .7s cubic-bezier(.2,.7,.2,1) .34s both}

/* seg sliding indicator */
.seg{position:relative}
.seg .seg-ind{position:absolute;top:3px;bottom:3px;border-radius:999px;background:var(--card);box-shadow:var(--shadow-sm);transition:left .3s cubic-bezier(.4,1.1,.4,1),width .3s cubic-bezier(.4,1.1,.4,1);z-index:0}
.seg button{position:relative;z-index:1}
.seg button.on{background:none;box-shadow:none}

/* primary CTA: glow + hover shine sweep */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:0;width:44%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
html.anim .btn-primary:hover::after{animation:shine .9s ease}
.btn-lg.btn-primary{box-shadow:0 12px 32px -8px var(--coral)}
.btn-lg.btn-primary:hover{box-shadow:0 16px 40px -10px var(--coral)}

/* refined depth on the two hero panels */
.preview{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;transform-origin:center;will-change:transform}
.preview:hover{box-shadow:var(--shadow-sm)}
html.dark .preview:hover{box-shadow:var(--shadow-sm)}
.authcard{transition:box-shadow .35s,border-color .35s,transform .35s}
/* One-screen hero on desktop: lock the split to the viewport, no page scroll.
   Guarded by min-height so short windows fall back to normal document scrolling. */
/* desktop: the Login card drives the row height; the preview box matches it EXACTLY
   (absolute, so it never drives) and scrolls internally. Applies at every desktop height. */
@media (min-width:981px){
  .split{align-items:flex-start}
  .pane-product{display:flex;flex-direction:column;gap:10px;min-height:0;justify-content:flex-start}
  /* Live Preview: FILLS the left column rather than being sized by a magic number.
     History, because the magic number is the thing that went wrong. It was
     height:min(560px, calc(100dvh - 262px)): a target plus a hand-computed reserve for the
     header, footer, gaps and the two sliders. That reserve was WRONG on short screens,
     because the ticker and brands strip shrink with the viewport while 262 does not. Measured
     at 1280x625 the rule resolved to 363px and the panel RENDERED at 275px - the pane capped
     it - so Discover overflowed by 70px and Trade by 41px and the body scrolled internally,
     which is exactly what the panel is not supposed to do.
     flex:1 1 auto asks the layout for "whatever is left after the siblings", which is the
     quantity 262 was trying to guess, so it cannot drift when a sibling resizes. max-height
     keeps the old 560px ceiling on tall screens, where 560 is a deliberate design size:
     the panel top then lands at 127px against the Login card's 131px.
     Raising the height ALONE would have been a regression in the other direction: the panel
     already carried ~87px of white below its content, and at 560 that measured 207px. So each
     tab is made to fill it below, rather than the panel just becoming emptier. */
  /* NO max-height. The 560px ceiling was a deliberate design size when the panel was
     shorter than its column; once the panel filled the column it became the thing
     holding it back. Measured at 1440x900: the left column is 760px tall and the panel
     stopped at 560, leaving ~200px of the column unused while the panel's own content
     was squeezed. flex:1 1 auto takes the column height that is actually there, so the
     panel tracks the Login card opposite it at every window size instead of a number. */
  .preview{flex:1 1 auto;height:auto;display:flex;flex-direction:column;min-height:0}
  .preview-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
  /* Fill the taller panel, per tab - the six panels have six different layouts.
     invest (.analytics) and platform (.plat-view) already filled the old height to within
     9px, so they only need flex to keep doing it. The other four left 87-178px.
     The cards are centred rather than stretched: stretching .fcard to a full 1fr row was
     tried first and made each card a hollow 136px box with its content pinned to the edges,
     which read worse than the white space it replaced. */
  .preview-body > .find-grid{flex:1 1 auto;grid-template-rows:repeat(3,minmax(0,1fr));gap:14px}
  /* The card is now title -> description -> price, so it has a reason to be tall:
     space-between distributes those three, where the old centred pair just floated
     in the middle of an empty box. */
  .preview-body > .find-grid > .fcard{display:flex;flex-direction:column;justify-content:space-between;gap:10px}
  .preview-body > .createbox{flex:1 1 auto;display:flex;flex-direction:column}
  .preview-body > .createbox .cb-tasks{flex:1 1 auto;justify-content:center;gap:12px}
  .preview-body > .createbox .cb-task{padding-top:10px;padding-bottom:10px}
  .preview-body > .pcard{flex:1 1 auto;align-items:center}
  /* trade is a 6-row list: centring it clumped the rows with margins top and bottom, so it
     spreads instead. */
  .preview-body > .trade-list{flex:1 1 auto;justify-content:space-between;gap:10px}
  .preview-body > .analytics,.preview-body > .plat-view{flex:1 1 auto}
  /* sliders sit under the preview as compact cards in the left column */
  .pane-product .trust-ticker,.pane-product .brands-strip{flex:0 0 auto;border:1px solid var(--bd);border-radius:14px;background:var(--card);overflow:hidden}
  .pane-product .trust-ticker .tt-track{padding:6px 0}
  .pane-product .brands-strip .bs-track{padding:7px 20px;gap:38px}
  .pane-product .brands-strip .bs-track img{height:22px}
}
/* Short desktop windows: give the Live Preview the sliders' room instead.
   Even filling the column, a ~625px-tall window leaves the panel about 48px short of what
   Discover needs, so it would still scroll internally - and the whole point of the panel is
   that it does not. The ticker and the brands strip are 81px of decoration together (32 + 29
   plus two 10px gaps); the preview is the thing a visitor came to look at, so on a window
   this short the preview wins.
   720px is measured, not guessed: at 1280x720 the panel gets 400px with both sliders present
   and every tab fits with zero overflow, so above this they stay. At 625 with them hidden the
   panel gets 368px and all six tabs fit. Below 981px width a different layout applies and
   this never runs. */
@media (min-width:981px) and (max-height:719px){
  .pane-product .trust-ticker,.pane-product .brands-strip{display:none}
}
/* tall desktop: also lock the whole page to one screen (no page scroll) */
@media (min-width:981px) and (min-height:560px){
  /* scroll-lock scoped to the fullbleed login ONLY (the .ivo-login-fullbleed rules at the
     bottom of this file fully implement it via 100dvh); unscoped html,body here used to leak
     the no-scroll onto every page that loads this stylesheet (legal, support, contact). */
  body.ivo-login-fullbleed{height:100%;overflow:hidden;display:flex;flex-direction:column}
  header{position:static}
  main.wrap{flex:1 1 auto;min-height:0;width:100%;max-width:none;margin:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:10px}
  .split{width:100%;max-width:1700px;padding:0;gap:28px;min-height:0}
  .pane-auth{position:static;top:auto}
  footer{padding:14px 0}
}
/* Create panel */
.createbox{border:1px solid var(--bd);border-radius:14px;background:var(--card2);padding:10px;margin-bottom:0}
.cb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cb-k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.cb-name{font-size:15px;font-weight:700;margin-top:2px}
.cb-badge{font-size:11px;font-weight:700;color:var(--ink2);background:var(--bg2);border:1px solid var(--bd);padding:4px 10px;border-radius:999px}
.cb-tasks{display:flex;flex-direction:column;gap:4px}
.cb-task{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:4px 11px;animation:rise .4s ease both}
.cb-ic{width:26px;height:26px;border-radius:50%;background:var(--bg2);color:var(--ink2);display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0}
.cb-tt{flex:1;font-size:13.5px;font-weight:600;min-width:0}
.cb-amt{font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums}
.cb-add{display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-weight:600;font-size:13px;color:var(--coral-t);background:none;border:1px dashed var(--bd2);border-radius:10px;padding:9px;cursor:pointer}
.cb-add:hover{border-color:var(--coral);background:var(--coral-bg)}
.cb-add svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.cb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;padding-top:7px;border-top:1px solid var(--bd);font-size:12.5px;color:var(--ink2)}
.cb-foot b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.cb-cta{width:100%;margin-top:2px}
.cb-go{font-family:inherit;font-weight:700;font-size:12.5px;color:#fff;background:var(--coral);border:0;border-radius:8px;padding:7px 13px;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums;transition:.15s}
.cb-go:hover{background:var(--coral-d)}
/* Invest panel */
.an-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:8px}
.an-k{font-size:11.5px;color:var(--ink2)}
.an-v{font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.an-chg{font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px}
.an-chg.up{color:var(--green-t);background:color-mix(in srgb,var(--green) 14%,transparent)}
.an-vrow{display:flex;align-items:baseline;gap:9px}
.an-chart{display:flex;align-items:flex-end;gap:6px;height:34px;padding-bottom:6px;border-bottom:1px solid var(--bd);margin-bottom:7px;overflow:visible}
.an-chart i{position:relative;flex:1;background:var(--coral-bg);border:1px solid color-mix(in srgb,var(--coral) 22%,transparent);border-bottom:0;border-radius:5px 5px 0 0;min-height:6px;cursor:pointer;transition:background .12s,border-color .12s,filter .12s}
.an-chart i:last-child{background:var(--coral);border-color:var(--coral)}
.an-chart i:hover,.an-chart i:focus-visible{background:var(--coral);border-color:var(--coral);filter:brightness(1.04);outline:none}
.an-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;font-weight:700;color:#fff;background:var(--ink);padding:3px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:4;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.an-chart i:hover .an-tip,.an-chart i:focus-visible .an-tip{opacity:1}
.an-chart i:first-child .an-tip{left:0;transform:none}
.an-chart i:last-child .an-tip{left:auto;right:0;transform:none}
.an-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:8px}
.an-top{margin-bottom:6px}
.an-m{background:var(--card2);border:1px solid var(--bd);border-radius:12px;padding:8px 9px}
.an-m .k{font-size:10.5px;color:var(--ink2)}
.an-m .v{font-size:14.5px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}
.an-m .v.up{color:var(--green-t)}
.an-more{display:none}
@media (max-width:980px){.analytics .an-more{display:block;margin-top:4px}}
.an-hold-t{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin:0 0 6px}
.an-holds{display:flex;flex-direction:column;gap:5px}
.an-hold{display:flex;align-items:center;gap:8px}
.ah-ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.ah-ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ah-n{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.ah-t{font-size:11px;color:var(--ink3);flex:0 0 auto;white-space:nowrap}
.ah-val{margin-left:auto;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto}
.ah-chg{font-size:11px;font-weight:700;min-width:40px;text-align:right;flex:0 0 auto}
.ah-chg.up{color:var(--green-t)}
.ah-chg.down{color:#dc2626}
/* Trade panel */
.trade-list{display:flex;flex-direction:column;gap:2px}
.trade-row{display:flex;align-items:center;gap:10px;border:1px solid var(--bd);border-radius:11px;background:var(--card2);padding:3px 11px;animation:rise .4s ease both}
.tr-ic{width:24px;height:24px;border-radius:50%;background:var(--bg2);color:var(--ink2);display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0}
.tr-name{flex:1 1 auto;min-width:0}
.tr-n{font-size:13px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-t{font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-price{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;padding-left:10px}
.tr-btn{font-family:inherit;font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:999px;border:1px solid var(--bd2);background:var(--card);color:var(--ink);cursor:pointer;white-space:nowrap;transition:.15s}
.tr-btn:hover{border-color:var(--coral);color:var(--coral-t)}
.tr-acts{display:flex;gap:5px;flex-shrink:0}
.tr-b{font-family:inherit;font-weight:600;font-size:11.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--bd2);background:var(--card);color:var(--ink2);cursor:pointer;white-space:nowrap;transition:.15s}
.tr-b:hover{border-color:var(--coral);color:var(--coral-t)}
.tr-b.buy{background:var(--coral);border-color:var(--coral);color:#fff}
.tr-b.buy:hover{background:var(--coral-d);color:#fff}
.tr-b.sell{background:transparent;border-color:var(--coral);color:var(--coral-t)}
.tr-b.sell:hover{background:var(--coral-bg);border-color:var(--coral);color:var(--coral-t)}
.tr-only-lg{display:none}
@media (min-width:981px){.tr-only-lg{display:flex}}
.cico svg,.cb-ic svg,.tr-ic svg{width:56%;height:56%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.pdetail .cico{display:grid;place-items:center;color:#fff;overflow:hidden}
.pdetail .cico svg{width:52%;height:52%}
.ai-inrow{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--bd2);border-radius:11px;padding:5px 5px 5px 10px;margin-bottom:6px}
.ai-inrow:focus-within{border-color:var(--coral)}
.ai-spark{display:grid;place-items:center;color:var(--coral-t);flex-shrink:0}
.ai-spark svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linejoin:round}
.ai-in{flex:1;min-width:0;border:0;background:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);outline:none}
.ai-gen{display:flex;align-items:center;gap:5px;font-family:inherit;font-weight:700;font-size:12.5px;color:#fff;background:var(--coral);border:0;border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap;transition:.15s}
.ai-gen:hover{filter:brightness(1.06)}
.ai-gen.done{background:var(--bg2);color:var(--ink2);border:1px solid var(--bd)}
.ai-empty{display:flex;align-items:center;gap:8px;justify-content:center;color:var(--ink3);font-size:12.5px;font-weight:600;padding:16px 0;border:1px dashed var(--bd2);border-radius:10px}
.ai-empty svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linejoin:round}
/* ===== trust ticker + brands marquees (blue/coral) ===== */
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* trust: verified-badge pills */
.trust-ticker{flex:0 0 auto;overflow:hidden;background:var(--bg);-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tt-track{display:flex;width:max-content;align-items:center;animation:marq 55s linear infinite;padding:8px 0}
.tt-track span{display:inline-flex;align-items:center;gap:7px;margin-right:11px;padding:5px 13px 5px 10px;border:1px solid var(--bd);border-radius:999px;background:var(--card);font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--ink2);white-space:nowrap;box-shadow:var(--shadow-sm)}
.tt-track span::before{content:"";width:13px;height:13px;flex-shrink:0;background:var(--coral);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.trust-ticker:hover .tt-track,.trust-ticker:focus-within .tt-track{animation-play-state:paused}
/* brands: edge-to-edge logo flow */
.brands-strip{flex:0 0 auto;overflow:hidden;border-top:1px solid var(--bd);-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.bs-track{display:flex;align-items:center;gap:46px;width:max-content;padding:11px 24px;animation:marq 44s linear infinite}
.bs-track img{height:27px;width:auto;border-radius:20px;filter:grayscale(1) contrast(.95);opacity:.55;transition:filter .3s,opacity .3s}
.bs-track img:hover{filter:none;opacity:1}
html.dark .bs-track img{filter:grayscale(1) brightness(1.7) contrast(.85);opacity:.6}
html.dark .bs-track img:hover{filter:brightness(1.5);opacity:1}
.brands-strip:hover .bs-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.tt-track,.bs-track{animation:none}}
.tcard,.pcard{will-change:transform}
/* reduced motion: no card entrance/stagger */
@media (prefers-reduced-motion:reduce){ .tcard,.pcard{animation:none} }
/* ---- MOBILE one-screen: lock the stacked layout to the viewport, preview scrolls internally.
   Guarded by min-height so very short screens fall back to normal scrolling. ---- */
@media (max-width:980px){
  /* natural-scroll mobile: preview + login card + footer stack; sticky CTA pinned */
  header{position:static}
  .nav{height:auto;flex-wrap:wrap;padding:10px 24px;gap:10px}
  .nav-headline{flex:1 1 0;min-width:0;order:0;margin-left:10px;font-size:17px;margin-top:0;line-height:1.2}
  .nav-headline .l2{display:block}
  .nav-menu,.nav-cta{display:none}
  main.wrap{padding-top:5px;padding-bottom:16px}
  .split{gap:14px;padding-top:14px}
  .preview-top{padding:9px 12px}
  .preview-body{padding:12px}
  .find-grid .fcard:nth-child(n+4){display:none}
  .pcard,.trade-row,.fcard{min-width:0}
  .authcard{height:auto;padding:16px}
  .authhead{margin-bottom:12px}
  .authcard h2{font-size:19px}
  .authreg{padding:7px 14px;font-size:13px}
  .field{margin-bottom:9px}
  .field input{padding:11px 13px}
  .authcard .btn-lg{font-size:15px;padding:12px 20px}
  .divider{margin:10px 0}
  .oauth{gap:8px}
  .oauth button{padding:10px}
  /* footer: legal beside the logo, links on their own row */
  .foot{align-items:flex-start;gap:8px 12px}
  .foot .logo{flex-shrink:0}
  .foot-legal{flex:1 1 0;min-width:0;font-size:11.5px;line-height:1.35}
  .foot-links{flex-basis:100%;margin-left:0;gap:16px}
  .trust-ticker,.brands-strip{display:none}
}

/* ===== platform: copy panel + bubble playground ===== */
.nm-wrap{display:flex;align-items:center;justify-content:flex-start;gap:22px;padding:2px 4px}
.nodemap{position:relative;flex:0 0 auto;width:190px;aspect-ratio:1/1}
.plat-copy{flex:0 0 210px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:9px}
.plat-title{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.16}
.plat-desc{font-size:12.5px;line-height:1.5;color:var(--ink2)}
.plat-hint{margin-top:1px;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink3);letter-spacing:.02em}
.plat-hint svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.plat-surfaces{display:none}
.plat-surfaces .nm-node{font-size:10px;min-width:auto;padding:4px 8px}
.plat-surfaces .nm-hub{width:39px;height:39px;padding:0;background:var(--card);border:1px solid var(--bd2);box-shadow:0 8px 22px -10px rgba(15,23,41,.4),var(--shadow-sm);overflow:hidden}
.plat-surfaces .nm-hub img{width:31px;height:31px;object-fit:contain;display:block}
.plat-title.swap,.plat-desc.swap{animation:platswap .28s ease}
@keyframes platswap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.bub-cluster{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:9px 8px;align-content:center;justify-content:center}
.bub{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.12;padding:6px 13px;border-radius:999px;background:var(--card);border:1px solid var(--bd2);color:var(--ink);font-size:11.5px;font-weight:600;box-shadow:var(--shadow-sm)}
.bub.on{background:linear-gradient(150deg,var(--coral),var(--coral-d));border-color:transparent;color:#fff;box-shadow:0 6px 16px -6px var(--coral)}
html.anim .bub-cluster .bub{animation:bubfloat 4.2s ease-in-out infinite}
@keyframes bubfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* draggable physics playground (desktop) */
.bub-stage{position:relative;flex:1 1 auto;min-width:0;height:224px;overflow:hidden;touch-action:none}
.bub.phys{position:absolute;top:0;left:0;padding:0;border-radius:50%;display:grid;place-items:center;text-align:center;line-height:1.1;font-size:11.5px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;will-change:transform;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.bub.phys:active{cursor:grabbing}
.bub.phys span{display:block;transition:transform .13s ease}
.bub.phys.pop span{transform:scale(1.14)}
.bub.core{padding:0;background:var(--card);border:1px solid var(--bd2);box-shadow:0 8px 22px -10px rgba(15,23,41,.4),var(--shadow-sm);cursor:default;overflow:hidden}
.bub.core img{width:31px;height:31px;object-fit:contain;pointer-events:none;display:block}
.bub-hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:10.5px;font-weight:600;color:var(--ink3);letter-spacing:.02em;pointer-events:none;transition:opacity .4s}
@media (max-width:980px){.nm-wrap{flex-direction:column;gap:12px}.nodemap{width:172px}.plat-copy{flex:0 0 auto;text-align:center;align-items:center}.plat-hint{display:none}}
/* Phones and tablets: the stacked layout gives the bubble stage the full width and its own height (2026-09-26). */
@media (max-width:980px){.nm-wrap .bub-stage{align-self:stretch;width:100%;flex:0 0 auto;height:250px;touch-action:pan-y}.bub.phys{touch-action:none}}
@media (prefers-reduced-motion:reduce){.bub{animation:none}}
.nm-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nm-edges line{stroke:var(--bd2);stroke-width:.6}
.nm-ring{fill:none;stroke:var(--bd);stroke-width:.6}
.nm-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;box-shadow:0 6px 16px -6px var(--coral);z-index:2}
.nm-node{position:absolute;transform:translate(-50%,-50%);min-width:52px;padding:5px 9px;border-radius:999px;background:var(--card);border:1px solid var(--bd2);color:var(--ink);font-size:11px;font-weight:600;line-height:1;white-space:nowrap;text-align:center;box-shadow:var(--shadow-sm);z-index:1;animation:nmpop .4s ease both}
@keyframes nmpop{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.nm-node{animation:none}}
/* ===== dopamine layer (created only when html.anim) ===== */
.explore{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.ex-fill{display:block;height:100%;width:0;background:var(--coral);transition:width .55s cubic-bezier(.4,1.1,.4,1)}
.cf{position:fixed;z-index:79;width:8px;height:8px;border-radius:2px;pointer-events:none;margin:-4px 0 0 -4px;animation:cfpop .9s ease-out forwards}
@keyframes cfpop{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(260deg);opacity:0}}
.fly-coin{position:fixed;z-index:80;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;box-shadow:var(--shadow);pointer-events:none;transform:translate(0,0);transition:transform .7s cubic-bezier(.5,.05,.35,1),opacity .7s}
.ai-gen.loading{position:relative;color:transparent;pointer-events:none}
.ai-gen.loading::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:13px;margin:-7px 0 0 -7px;border:2px solid rgba(255,255,255,.55);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* crisp focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.an-chart i:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* screen-reader-only + skip link */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-48px;z-index:1000;background:var(--card);color:var(--ink);border:1px solid var(--bd2);border-radius:9px;padding:9px 14px;font-weight:600;font-size:14px;transition:top .15s}
.skip-link:focus{top:12px;outline:2px solid var(--coral);outline-offset:2px}
/* mobile width caps — final block, wins on source order */
@media (max-width:980px){
  main.wrap,.split,.pane-product,.pane-auth,.preview,.authcard,.preview-body{min-width:0;max-width:100vw}
  .preview,.authcard{max-width:calc(100vw - 48px)}
  .preview-body{overflow-x:hidden}
  .find-grid{grid-template-columns:minmax(0,1fr)}
}

/* ===== full-bleed: this design owns the login viewport (WHMCS chrome hidden) ===== */
body.ivo-login-fullbleed #ivo-chrome-top,
body.ivo-login-fullbleed .master-breadcrumb,
body.ivo-login-fullbleed #ivo-chrome-foot,
body.ivo-login-fullbleed .promo-container{display:none !important}
body.ivo-login-fullbleed #main-body{padding:0 !important;margin:0 !important}
body.ivo-login-fullbleed #main-body>.container{max-width:none !important;padding:0 !important;margin:0 !important;width:100% !important}
body.ivo-login-fullbleed #main-body .row{margin:0 !important}
body.ivo-login-fullbleed #main-body .primary-content,
body.ivo-login-fullbleed #main-body [class*="col-"]{padding:0 !important;width:100% !important;max-width:100% !important;flex:0 0 100% !important}

/* ===== coral homepage-hybrid fidelity for the native WHMCS login card ===== */
/* higher specificity than login-inner's #main-body .au-* rules; scoped to fullbleed */
body.ivo-login-fullbleed #main-body .au{padding:0;place-items:stretch}
body.ivo-login-fullbleed #main-body .au-card{max-width:none;width:100%;background:var(--card);border:1px solid var(--bd);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:26px 26px 28px;-webkit-backdrop-filter:none;backdrop-filter:none}
body.ivo-login-fullbleed #main-body .au-card h1{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 4px}
body.ivo-login-fullbleed #main-body .au-lede{font-size:13.5px;color:var(--ink2);margin:0 0 18px}
body.ivo-login-fullbleed #main-body .au-field{margin-bottom:13px}
body.ivo-login-fullbleed #main-body .au-field label{font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}
body.ivo-login-fullbleed #main-body .au-input{height:46px;border-radius:12px;border:1px solid var(--bd2);background:var(--card2);color:var(--ink);font-size:14.5px}
body.ivo-login-fullbleed #main-body .au-input:focus{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-bg)}
body.ivo-login-fullbleed #main-body .au-eye{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .au-card .au-submit{height:48px;border-radius:12px;background:var(--coral-d);color:#fff;font-weight:700;font-size:15px}
body.ivo-login-fullbleed #main-body .au-card .au-submit:hover{background:var(--coral-t)}
body.ivo-login-fullbleed #main-body .au-row a,body.ivo-login-fullbleed #main-body .au-foot a{color:var(--coral-t);font-weight:600}
body.ivo-login-fullbleed #main-body .au-switch input:checked+.au-switch-track{background:var(--coral)}
body.ivo-login-fullbleed #main-body .au-foot{border-top-color:var(--bd)}
/* ---- the three sign-in buttons (passkey / Facebook / Google) render IDENTICALLY.
   Google's is an <iframe> that Google paints white and we cannot recolour, so the only
   consistent, readable choice in BOTH themes is a light button (white surface, dark
   label) that matches Google. The passkey's label/icon carry an inline dark colour that
   reads correctly on white. Clear the container background so Facebook (transparent) sits
   on the card, and paint the Google wrapper white so its iframe blends seamlessly. ---- */
body.ivo-login-fullbleed #main-body .social-signin-btns{background:transparent !important}
html body.ivo-login-fullbleed #main-body #ivoPasskeyLoginBtn,
html body.ivo-login-fullbleed #main-body .social-signin-btns .btn,
html body.ivo-login-fullbleed #main-body .social-signin-btns a.btn-social,
html body.ivo-login-fullbleed #main-body .social-signin-btns .btn-social,
html body.ivo-login-fullbleed #main-body .social-signin-btns .g_id_signin{background:#ffffff !important;border:1px solid #dcdfe5 !important;color:#1a1a1a !important;border-radius:12px !important}
html body.ivo-login-fullbleed #main-body #ivoPasskeyLoginBtn *{color:#1a1a1a !important}
html body.ivo-login-fullbleed #main-body #ivoPasskeyLoginBtn:hover,
html body.ivo-login-fullbleed #main-body .social-signin-btns .btn:hover{border-color:#b7bcc6 !important}
body.ivo-login-fullbleed #main-body #ivoPasskeyLoginBtn{font-weight:600 !important;height:46px !important;padding:0 14px !important}
body.ivo-login-fullbleed #main-body .social-signin-btns .btn,
body.ivo-login-fullbleed #main-body .social-signin-btns .btn-social{min-height:46px}

/* inputs: whmcs-skin-11.css forces .form-control colour to a token that resolves to black
   in dark mode (invisible on the dark field); force a legible colour + visible border per
   theme, above its !important. */
body.ivo-login-fullbleed #main-body .au-input{color:#0f1729 !important}
body.ivo-login-fullbleed #main-body .au-input::placeholder{color:#9aa3b2 !important}
html.dark body.ivo-login-fullbleed #main-body .au-input{color:#f0f3f9 !important;border-color:#343d4e !important;background:#1a1f2c !important}
html.dark body.ivo-login-fullbleed #main-body .au-input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #1a1f2c inset !important;-webkit-text-fill-color:#f0f3f9 !important}
html.dark body.ivo-login-fullbleed #main-body .au-input::placeholder{color:#7e8798 !important}

/* tighten the gap between the hCaptcha widget and the Remember/Forgot row */
body.ivo-login-fullbleed #main-body .au-card .row.justify-content-center,
body.ivo-login-fullbleed #main-body .au-card .g-recaptcha{margin-bottom:0 !important}
body.ivo-login-fullbleed #main-body .au-row{margin-top:-4px !important}

/* ============================================================================
   HYBRID LOGIN — theme-aware overrides (accent coral/blue + light/dark toggles)
   ============================================================================ */

/* whmcs-skin-11.css overrides ONLY --ink at #main-body (ID-specificity). Re-assert
   it here, theme-aware, so the design-master ink resolves in both light and dark.
   All other tokens cascade correctly from :root / html.dark / [data-accent]. */
body.ivo-login-fullbleed #main-body{--ink:#0f1729;--bg:#f6f6f4;--bg2:#e9edf3;--card2:#f7f9fc}
html.dark body.ivo-login-fullbleed #main-body{--ink:#f0f3f9;--bg:#0a0c12;--bg2:#11141d;--card2:#1a1f2c}

/* ACCENT DECOUPLING: WHMCS chrome JS (ivo-chrome-v4.js / app.js) owns html[data-accent]
   and re-asserts "blue" after our init runs, so we cannot drive the hybrid accent from
   that attribute. Instead define --coral on body.ivo-login-fullbleed (a nearer ancestor
   than <html> for everything inside body) and flip it with a body class the chrome never
   touches. DEFAULT = blue (platform-wide default accent); .hybrid-coral = coral opt-in;
   html.dark variants brighten for dark. (2026-09-04: default flipped coral->blue so the
   login page matches the marketing site + app default; login-hybrid.js adds .hybrid-coral
   only when the shared ivo-accent pref is coral, so blue needs NO class = no FOUC.) */
body.ivo-login-fullbleed{--coral:#2563eb;--coral-d:#1d4ed8;--coral-t:#1d4ed8;--coral-bg:rgba(37,99,235,.08)}
html.dark body.ivo-login-fullbleed{--coral:#3b82f6;--coral-d:#60a5fa;--coral-t:#60a5fa;--coral-bg:rgba(59,130,246,.16)}
/* the neutral surface tokens (--bg/--bg2/--card2) are shadowed light inside this WHMCS
   theme, so in dark mode the page stayed light while the cards went dark. Re-assert them
   per theme and paint the body so the whole gate flips together. */
body.ivo-login-fullbleed{--bg:#f6f6f4;--bg2:#e9edf3;--card2:#f7f9fc}
html.dark body.ivo-login-fullbleed{--bg:#0a0c12;--bg2:#11141d;--card2:#1a1f2c}
html body.ivo-login-fullbleed{background:var(--bg) !important}
body.ivo-login-fullbleed.hybrid-blue{--coral:#2563eb;--coral-d:#1d4ed8;--coral-t:#1d4ed8;--coral-bg:rgba(37,99,235,.08)}
html.dark body.ivo-login-fullbleed.hybrid-blue{--coral:#3b82f6;--coral-d:#60a5fa;--coral-t:#60a5fa;--coral-bg:rgba(59,130,246,.16)}
/* coral opt-in (the default is now blue): login-hybrid.js adds .hybrid-coral when the shared ivo-accent pref is coral. */
body.ivo-login-fullbleed.hybrid-coral{--coral:#e8502e;--coral-d:#c9401f;--coral-t:#b23c0f;--coral-bg:rgba(232,80,46,.08)}
html.dark body.ivo-login-fullbleed.hybrid-coral{--coral:#ff6b4a;--coral-d:#ff856a;--coral-t:#ff8a66;--coral-bg:rgba(255,107,74,.15)}

/* Remap the WHMCS theme accent tokens (native submit, links, focus rings via
   ivo-tokens-5.css) onto the hybrid coral tokens so they follow the toggles too. */
body.ivo-login-fullbleed #main-body{--ivo-accent:var(--coral);--ivo-accent-deep:var(--coral-d);--ivo-accent-text:var(--coral-t);--ivo-accent-ink:#fff}

/* The native card/inputs/submit ship inline glass + theme-blue backgrounds with
   !important, injected AFTER this sheet, so they tie on specificity and win on order.
   Prefix with html to raise specificity above the inline rule; var()s stay theme-aware. */
html body.ivo-login-fullbleed #main-body .au-card{background:var(--card) !important}
html body.ivo-login-fullbleed #main-body .au-input{background:var(--card2) !important}
/* Chrome paints autofilled fields with its own opaque background (ignores background);
   the inset box-shadow trick repaints them with the theme token so a saved email/password
   matches the card in both light and dark. */
html body.ivo-login-fullbleed #main-body .au-input:-webkit-autofill{-webkit-text-fill-color:var(--ink) !important;-webkit-box-shadow:0 0 0 1000px var(--card2) inset !important;caret-color:var(--ink)}
html body.ivo-login-fullbleed #main-body .au-card .au-submit{background:var(--coral-d) !important}
html body.ivo-login-fullbleed #main-body .au-card .au-submit:hover{background:var(--coral-t) !important}

/* .pcard collision: styles.css's legacy vertical card bleeds flex-direction/height */
body.ivo-login-fullbleed .pcard{flex-direction:row;height:auto}

/* ---- color-specificity boost: re-emit every hybrid color rule scoped under
   #main-body (dark/accent variants keep their html-prefix) so each beats
   whmcs-skin-11.css's #main-body span/div{color:var(--w-ink)} blanket. auto-gen. ---- */
body.ivo-login-fullbleed #main-body a{color:inherit}
body.ivo-login-fullbleed #main-body .muted{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .btn-primary{color:#fff}
body.ivo-login-fullbleed #main-body .btn-ghost{color:var(--ink)}
body.ivo-login-fullbleed #main-body .nav-headline{color:var(--ink)}
body.ivo-login-fullbleed #main-body .nav-headline .l2{color:var(--coral)}
body.ivo-login-fullbleed #main-body .nav-menu a{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .nav-menu a:hover{color:var(--ink)}
body.ivo-login-fullbleed #main-body .nav-menu a.on{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .nav-cta.ghost{color:var(--ink)}
body.ivo-login-fullbleed #main-body .nav-cta.primary{color:#fff}
html.dark body.ivo-login-fullbleed #main-body .nav-cta.primary{color:var(--bg)}
body.ivo-login-fullbleed #main-body .m-accent{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .m-theme{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .m-login{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .m-accent:hover{color:var(--ink)}
body.ivo-login-fullbleed #main-body .m-theme:hover{color:var(--ink)}
body.ivo-login-fullbleed #main-body .m-login:hover{color:var(--ink)}
body.ivo-login-fullbleed #main-body .icon-btn{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .icon-btn:hover{color:var(--ink)}
body.ivo-login-fullbleed #main-body .livechip{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .seg button{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .seg button.on{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .feed-lbl{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .feed-lbl .skills{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .fc-ic{color:#fff}
body.ivo-login-fullbleed #main-body .fc-match{color:var(--green-t)}
body.ivo-login-fullbleed #main-body .fc-d{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .ai-lead{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .ai-chip{color:var(--ink)}
body.ivo-login-fullbleed #main-body .fc-tag{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .fc-inc{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .tscope li{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .tcard .cico{color:#fff}
body.ivo-login-fullbleed #main-body .tcard .tt .cl{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .tcard .reward .d{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .match{color:var(--green)}
body.ivo-login-fullbleed #main-body .pill{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .mini-btn{color:#fff}
body.ivo-login-fullbleed #main-body .pav{color:#fff}
body.ivo-login-fullbleed #main-body .vbadge{color:#7a5b00}
html.dark body.ivo-login-fullbleed #main-body .vbadge{color:var(--gold)}
body.ivo-login-fullbleed #main-body .prole{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .pjobs{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .pstar{color:var(--ink)}
body.ivo-login-fullbleed #main-body .follow-btn{color:var(--ink)}
body.ivo-login-fullbleed #main-body .pback{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .pback:hover{color:var(--ink)}
body.ivo-login-fullbleed #main-body .pstatbox .k{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .pbio{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .psec-t{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .pfitem .cap{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .ex-tag{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .pd-as{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .pstats.vert .k{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .pdetail2 .prole .pstar{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .pfm-ic{color:#fff}
body.ivo-login-fullbleed #main-body .pfm-c{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .fav-tx{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .fav-tx b{color:var(--ink)}
body.ivo-login-fullbleed #main-body .gatemsg{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .authreg:hover{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .field label{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .field input{color:var(--ink)}
body.ivo-login-fullbleed #main-body .forgot{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .hcap-lbl{color:var(--ink)}
body.ivo-login-fullbleed #main-body .hcap-txt b{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .hcap-txt small{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .btn-passkey{color:var(--ink)}
body.ivo-login-fullbleed #main-body .oauth button{color:var(--ink)}
body.ivo-login-fullbleed #main-body .foot{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .foot-legal{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .foot-links a{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .foot-links a:hover{color:var(--coral-t)}
html.dark body.ivo-login-fullbleed #main-body .foot-legal{color:var(--ink)}
html.dark body.ivo-login-fullbleed #main-body .foot-links a{color:var(--ink)}
html.dark body.ivo-login-fullbleed #main-body #yr{color:var(--ink)}
body.ivo-login-fullbleed #main-body .cb-k{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .cb-badge{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .cb-ic{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .cb-add{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .cb-foot{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .cb-foot b{color:var(--ink)}
body.ivo-login-fullbleed #main-body .cb-go{color:#fff}
body.ivo-login-fullbleed #main-body .an-k{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .an-chg.up{color:var(--green-t)}
body.ivo-login-fullbleed #main-body .an-tip{color:#fff}
body.ivo-login-fullbleed #main-body .an-m .k{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .an-m .v.up{color:var(--green-t)}
body.ivo-login-fullbleed #main-body .an-hold-t{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .ah-ic{color:#fff}
body.ivo-login-fullbleed #main-body .ah-n{color:var(--ink)}
body.ivo-login-fullbleed #main-body .ah-t{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .ah-chg.up{color:var(--green-t)}
body.ivo-login-fullbleed #main-body .ah-chg.down{color:#dc2626}
body.ivo-login-fullbleed #main-body .tr-ic{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .tr-t{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .tr-btn{color:var(--ink)}
body.ivo-login-fullbleed #main-body .tr-btn:hover{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .tr-b{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .tr-b:hover{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .tr-b.buy{color:#fff}
body.ivo-login-fullbleed #main-body .tr-b.buy:hover{color:#fff}
body.ivo-login-fullbleed #main-body .tr-b.sell{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .tr-b.sell:hover{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .pdetail .cico{color:#fff}
body.ivo-login-fullbleed #main-body .ai-spark{color:var(--coral-t)}
body.ivo-login-fullbleed #main-body .ai-in{color:var(--ink)}
body.ivo-login-fullbleed #main-body .ai-gen{color:#fff}
body.ivo-login-fullbleed #main-body .ai-gen.done{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .ai-empty{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .tt-track span{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .plat-title{color:var(--ink)}
body.ivo-login-fullbleed #main-body .plat-desc{color:var(--ink2)}
body.ivo-login-fullbleed #main-body .plat-hint{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .bub{color:var(--ink)}
body.ivo-login-fullbleed #main-body .bub.on{color:#fff}
/* the active platform bubble's label is a <span>, which whmcs-skin-11's #main-body span
   blanket forces to dark; keep it white on the coral/blue gradient in every theme. */
body.ivo-login-fullbleed #main-body .bub.on span,
body.ivo-login-fullbleed #main-body .bub.on *{color:#fff !important}
body.ivo-login-fullbleed #main-body .bub-hint{color:var(--ink3)}
body.ivo-login-fullbleed #main-body .nm-hub{color:#fff}
body.ivo-login-fullbleed #main-body .nm-node{color:var(--ink)}
body.ivo-login-fullbleed #main-body .fly-coin{color:#fff}
body.ivo-login-fullbleed #main-body .ai-gen.loading{color:transparent}
body.ivo-login-fullbleed #main-body .skip-link{color:var(--ink)}

/* ---- viewport lock: match the master's no-page-scroll app shell. The body and the
   WHMCS Bootstrap wrapper chain collapse into a 100dvh flex column; header and footer
   are fixed-height, the middle fills, and the auth column scrolls internally on short
   viewports so the PAGE itself never scrolls. ---- */
/* full-bleed on ALL viewports: neutralise the Bootstrap container/row/col constraints
   so the header/footer span and the split centres, on both desktop and mobile. */
body.ivo-login-fullbleed{margin:0;background:var(--bg)}
body.ivo-login-fullbleed #main-body,
body.ivo-login-fullbleed #main-body > .container,
body.ivo-login-fullbleed #main-body > .container > .row,
body.ivo-login-fullbleed #main-body > .container > .row > .primary-content{width:100%;max-width:none;margin:0;padding:0}

/* DESKTOP ONLY (mirrors the master's min-width:981 + min-height:560 gate): collapse
   the wrapper chain into a 100dvh flex column so the PAGE never scrolls; the auth
   column scrolls internally. On mobile the page scrolls normally, the split stacks,
   and the header user icon (.m-login) jumps to the login card. */
@media (min-width:981px) and (min-height:560px){
  body.ivo-login-fullbleed{height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden}
  body.ivo-login-fullbleed #main-body,
  body.ivo-login-fullbleed #main-body > .container,
  body.ivo-login-fullbleed #main-body > .container > .row,
  body.ivo-login-fullbleed #main-body > .container > .row > .primary-content{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;height:auto}
  body.ivo-login-fullbleed #main-body{height:100dvh;max-height:100dvh;overflow:hidden}
  body.ivo-login-fullbleed #hdr{flex:0 0 auto}
  body.ivo-login-fullbleed #main.wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow:hidden;padding:10px 24px 0}
  body.ivo-login-fullbleed footer{flex:0 0 auto}
  body.ivo-login-fullbleed .split{flex:1 1 auto;min-height:0;width:100%;max-width:1700px;align-items:stretch}
  body.ivo-login-fullbleed .pane-product{min-height:0;max-height:100%;overflow:hidden}
  body.ivo-login-fullbleed .pane-auth{min-height:0;overflow:visible;position:static}
  /* moderate card compaction so a normal laptop viewport needs no internal scroll */
  body.ivo-login-fullbleed #main-body .au-card{padding:20px 22px 22px}
  body.ivo-login-fullbleed #main-body .au-card h1{font-size:22px}
  body.ivo-login-fullbleed #main-body .au-field{margin-bottom:10px}
  body.ivo-login-fullbleed #main-body .au-input{height:42px}
  body.ivo-login-fullbleed #main-body .au-card .au-submit{height:44px}
  body.ivo-login-fullbleed #main-body #ivoPasskeyLoginBtn{height:42px !important}
  body.ivo-login-fullbleed #main-body .social-signin-btns .btn,
  body.ivo-login-fullbleed #main-body .social-signin-btns .btn-social{min-height:42px}
}

/* tall desktop only: center each column vertically so the wider layout does not leave a
   large empty band below the content. Scoped to >=900px height so short laptops (which run
   the card compaction above and can be height-tight) keep the top-anchored, no-clip layout. */
/* TOP-ALIGNED, not centred, since the preview started filling its column.
   The centring above was added when the preview was a fixed 560px in a taller column:
   it had a real empty band under it, and centring hid that. Now the panel takes the
   whole column, so there is no band left to hide on the left - and centring actively
   hurt, because the two columns hold different amounts. Measured at 1440x900: the
   preview ran 77->737 while the Login card, centred in its own 760px column with 107px
   of slack, started at 131. Tops that used to line up (127 vs 131) were 54px apart.
   Aligning them by shrinking the preview back to ~553px was the other way out, and it
   is the one that gives the space back up - the arithmetic is exact, tops match only
   at 553, which is where 560 came from. So both columns anchor to the top instead: the
   tops line up at 77, and the preview keeps the full height. The Login card simply ends
   higher than the preview, which is what two columns of different content should do. */
@media (min-width:981px) and (min-height:900px){
  body.ivo-login-fullbleed .pane-product{justify-content:flex-start}
  body.ivo-login-fullbleed .pane-auth{display:flex;flex-direction:column;justify-content:flex-start}
}

/* match the master: no subtitle and no visible field labels (placeholders carry the
   fields). Labels kept for screen readers (sr-only), not removed. */
body.ivo-login-fullbleed #main-body .au-lede{display:none}
body.ivo-login-fullbleed #main-body .au-field label{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* MOBILE: the WHMCS theme clamps html,body to height:100% (=viewport) with overflow:auto,
   which my desktop lock overrode on desktop but is exposed on mobile — it turns <body>
   into an internal scroller and kills window scrolling. Unclamp so the page flows and
   scrolls naturally; the header user icon (.m-login) then reliably jumps to #authcard.
   (This sheet only loads on the hybrid login page, so touching html here is safe.) */
@media (max-width:980px){
  html{height:auto !important;overflow:visible !important}
  body.ivo-login-fullbleed{height:auto !important;min-height:100dvh;max-height:none !important;overflow:visible !important;overflow-x:hidden}
  body.ivo-login-fullbleed #main-body{height:auto !important;overflow:visible !important}
}

/* ---- toggles: SHOW them (previously hidden). The accent/theme JS in login-hybrid.js
   flips html[data-accent] and html.dark and persists to localStorage; WHMCS does not
   re-assert the accent, so the toggles hold. ---- */
body.ivo-login-fullbleed .m-accent,
body.ivo-login-fullbleed .m-theme{display:grid !important;place-items:center}

/* Smallest phones (2026-09-26): the captcha iframe is a fixed 302x76px, wider than the card's
   content box below 380px, so the login form pushed the page to 380px and it scrolled sideways
   at 320. Trim the side padding, and below 356px scale the captcha to 88% (still clickable). */
@media (max-width:379px){
  main.wrap,body.ivo-login-fullbleed main.wrap{padding-left:12px;padding-right:12px}
  .au-card,body.ivo-login-fullbleed #main-body .au-card{padding-left:14px;padding-right:14px}
}
@media (max-width:355px){
  .au-card .recaptcha-container{width:266px!important;max-width:100%;height:67px;overflow:visible}
  .au-card .recaptcha-container .g-recaptcha{width:302px;transform:scale(.88);transform-origin:0 0}
}

/* ── Unified sign-in methods (2026-09-26, owner: one design across light/dark and
   coral/blue).  one shape, one type scale, one surface per theme.
   Light = white with outline, dark = raised dark surface; the accent (coral/blue)
   drives hover border and focus ring, never the provider marks. */
body.ivo-login-fullbleed{--m-bg:#fff;--m-bd:#d5dae3;--m-ink:#15171b;--m-hov:#f5f7fa;--m-hbd:#b9c1ce}
html.dark body.ivo-login-fullbleed{--m-bg:#1b2130;--m-bd:#2e3749;--m-ink:#eef1f6;--m-hov:#222a3b;--m-hbd:#465269}
html body.ivo-login-fullbleed #main-body .social-signin-btns{max-width:none!important;width:100%!important;margin:0!important;display:flex!important;flex-direction:column!important;gap:10px!important}
html body.ivo-login-fullbleed #main-body #ivoPasskeyLoginBtn,
html body.ivo-login-fullbleed #main-body .social-signin-btns .btn-social,
html body.ivo-login-fullbleed #main-body .social-signin-btns .g_id_signin,
html body.ivo-login-fullbleed #main-body .ivo-apple-btn{
  width:100%!important;max-width:none!important;height:46px!important;min-height:46px!important;margin:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;padding:0 16px!important;
  box-sizing:border-box!important;border-radius:12px!important;border:1px solid var(--m-bd)!important;background:var(--m-bg)!important;
  color:var(--m-ink)!important;font:600 15px/1 Inter,-apple-system,system-ui,sans-serif!important;letter-spacing:0!important;
  box-shadow:none!important;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
html body.ivo-login-fullbleed #main-body #ivoPasskeyLoginBtn{margin:0 0 10px!important}
html body.ivo-login-fullbleed #main-body #ivoPasskeyLoginBtn *,
html body.ivo-login-fullbleed #main-body .ivo-apple-btn *{color:var(--m-ink)!important}
html body.ivo-login-fullbleed #main-body #ivoPasskeyLoginBtn:hover,
html body.ivo-login-fullbleed #main-body .social-signin-btns .btn-social:hover,
html body.ivo-login-fullbleed #main-body .social-signin-btns .g_id_signin:hover,
html body.ivo-login-fullbleed #main-body .ivo-apple-btn:hover{background:var(--m-hov)!important;border-color:var(--m-hbd)!important}
html body.ivo-login-fullbleed #main-body #ivoPasskeyLoginBtn:focus-visible,
html body.ivo-login-fullbleed #main-body .social-signin-btns .btn-social:focus-visible,
html body.ivo-login-fullbleed #main-body .ivo-apple-btn:focus-visible,
html body.ivo-login-fullbleed #main-body .g_id_signin:focus-within{outline:none!important;border-color:var(--coral)!important;box-shadow:0 0 0 3px var(--coral-bg)!important}
html body.ivo-login-fullbleed #main-body .ivo-apple-btn svg{width:17px;height:17px;flex:none;fill:var(--m-ink)}
html body.ivo-login-fullbleed #main-body #ivoPasskeyLoginBtn svg{width:17px;height:17px}
html body.ivo-login-fullbleed #main-body .social-signin-btns .btn-facebook i{color:#1877f2!important;font-size:18px!important;margin:0!important}
/* Google renders its own inner button: make it transparent so the shared box shows */
html body.ivo-login-fullbleed #main-body .social-signin-btns .g_id_signin{padding:0!important;overflow:hidden!important}
html body.ivo-login-fullbleed #main-body .g_id_signin>div,html body.ivo-login-fullbleed #main-body .g_id_signin iframe{width:100%!important;height:44px!important}
html body.ivo-login-fullbleed #main-body .g_id_signin div[role="button"]{background:transparent!important;border:0!important;height:44px!important;width:100%!important;max-width:none!important;border-radius:12px!important}
html body.ivo-login-fullbleed #main-body .g_id_signin div[role="button"] *{color:var(--m-ink)!important;font:600 15px/1 Inter,-apple-system,system-ui,sans-serif!important;letter-spacing:0!important}
html.dark body.ivo-login-fullbleed #main-body .g_id_signin .nsm7Bb-HzV7m-LgbsSe-Bz112c{background:#fff;border-radius:50%;padding:3px;box-sizing:content-box}
/* dark mode primary: bright accent needs dark ink to pass contrast */
html.dark body.ivo-login-fullbleed #main-body .au-card button[type="submit"],
html.dark body.ivo-login-fullbleed #main-body .au-card input[type="submit"]{color:#0a0c12!important}
html body.ivo-login-fullbleed #main-body #ivoAppleSigninWrap{max-width:none!important;height:auto!important}

/* ── Cookie card on the login page follows the theme and the accent (2026-09-26).
   The card ships inline styles from the platform hook, hence !important. */
body.ivo-login-fullbleed #ivoCookie{background:var(--card)!important;color:var(--m-ink)!important;border:1px solid var(--m-bd)!important;border-radius:16px!important;box-shadow:0 18px 50px -12px rgba(8,12,24,.28)!important;font-family:Inter,-apple-system,system-ui,sans-serif!important}
html.dark body.ivo-login-fullbleed #ivoCookie{box-shadow:0 18px 50px -12px rgba(0,0,0,.6)!important}
body.ivo-login-fullbleed #ivoCookie a{color:var(--coral-t)!important;text-decoration:underline;text-underline-offset:2px}
body.ivo-login-fullbleed #ivoCookie button{border-radius:12px!important;font:600 14px/1 Inter,-apple-system,system-ui,sans-serif!important;padding:12px 18px!important;transition:background .15s,border-color .15s}
body.ivo-login-fullbleed #ivoCookie button:first-child{background:var(--coral)!important;color:#fff!important;border:1px solid var(--coral)!important}
body.ivo-login-fullbleed #ivoCookie button:first-child:hover{background:var(--coral-d)!important;border-color:var(--coral-d)!important}
html.dark body.ivo-login-fullbleed #ivoCookie button:first-child{color:#0a0c12!important;background:var(--coral-d)!important;border-color:var(--coral-d)!important}
html.dark body.ivo-login-fullbleed #ivoCookie button:first-child:hover{background:var(--coral)!important;border-color:var(--coral)!important}
body.ivo-login-fullbleed #ivoCookie button+button{background:var(--m-bg)!important;color:var(--m-ink)!important;border:1px solid var(--m-bd)!important}
body.ivo-login-fullbleed #ivoCookie button+button:hover{background:var(--m-hov)!important;border-color:var(--m-hbd)!important}
body.ivo-login-fullbleed #ivoCookie button:focus-visible{outline:none!important;box-shadow:0 0 0 3px var(--coral-bg)!important}

/* ---- Live Preview: taller, and the gap 28 -> 20px (owner 10-03, "Both") ----
   The preview and the Login card share one row, so the preview can only grow
   WIDER by shrinking the card (owner rejected that 09-26) - it grows TALLER instead.
   The trust ticker and brands strip used to sit under the preview inside
   .pane-product and cost it ~100px of height. They are now direct children of
   .split, placed by grid areas:
     - tall desktop (>=840px high): under the Login card, where the column had
       100-240px of empty space (1440x900: card ends at 679, column at 837). The
       preview spans the whole column: 1440x900 660 -> ~760px tall.
     - shorter desktop: where they were, under the preview (no room under the card).
     - <=980px: hidden, as before.
   NEVER shrink the preview: measure .preview at 1280/1440/1920 before and after any
   change to this block (owner asked for a bigger preview four times). */
@media (min-width:981px){
  body.ivo-login-fullbleed .split{column-gap:20px;row-gap:10px;
    grid-template-columns:minmax(0,1fr) clamp(420px,34vw,490px);
    grid-template-rows:minmax(0,1fr) auto auto;
    grid-template-areas:"prod auth" "tick auth" "brand auth"}
  body.ivo-login-fullbleed .split>.pane-product{grid-area:prod}
  body.ivo-login-fullbleed .split>.pane-auth{grid-area:auth}
  body.ivo-login-fullbleed .split>.trust-ticker{grid-area:tick}
  body.ivo-login-fullbleed .split>.brands-strip{grid-area:brand}
  body.ivo-login-fullbleed .split>.trust-ticker,
  body.ivo-login-fullbleed .split>.brands-strip{min-width:0;border:1px solid var(--bd);border-radius:14px;background:var(--card);overflow:hidden}
  body.ivo-login-fullbleed .split>.trust-ticker .tt-track{padding:6px 0}
  body.ivo-login-fullbleed .split>.brands-strip .bs-track{padding:7px 20px;gap:38px}
  body.ivo-login-fullbleed .split>.brands-strip .bs-track img{height:22px}
}
@media (min-width:981px) and (min-height:840px){
  body.ivo-login-fullbleed .split{grid-template-rows:1fr auto auto;
    grid-template-areas:"prod auth" "prod tick" "prod brand"}
  body.ivo-login-fullbleed .split>.pane-auth{align-self:start}
}
@media (min-width:981px) and (max-height:719px){
  body.ivo-login-fullbleed .split>.trust-ticker,body.ivo-login-fullbleed .split>.brands-strip{display:none}
}