/* ============================================================
   JustSocialPanel theme — fresh pixel-perfect build (2026-07-18)
   Source of truth: figma-refs/<page>-{dark,light}/nodes.json + frame.png
   Dark = default (:root). Light = [data-theme="light"] overrides.
   PP auto-serves this file as the theme stylesheet — no <link> needed.
   ============================================================ */

/* ---- Tokens (extracted from Figma node data) ---- */
:root {
    /* surfaces */
    --bg:            #03050C;   /* page background (frame bg) */
    --panel:         #111727;   /* sidebar */
    --active-block:  #0E2236;   /* active nav block */
    --row-a:         #060B18;   /* info-grid row variants */
    --row-b:         #050913;
    --row-c:         #040710;
    /* strokes */
    --border:        #454D63;   /* dividers, card outlines, pills */
    --avatar-line:   #EBEBFF;   /* avatar ring */
    /* text */
    --text:          #FFFFFF;
    --muted:         #9298AF;
    /* icons */
    --icon-off:      #25304D;   /* inactive nav glyph */
    --icon-off-alt:  #38425B;   /* updates glyph */
    /* brand */
    --gold:          #FFCE2E;   /* CTA + logo accents */
    --violet:        #784EFB;
    --green:         #41EB8F;   /* updates dot */
    /* type */
    --font: "Poppins", -apple-system, "Segoe UI", sans-serif;
    /* shell metrics (from frames) */
    --sidebar-w: 292px;
    --nav-item-h: 41px;
    --nav-active-w: 245px;
    --nav-active-h: 66px;
    --radius-card: 20px;
}

/* ---- Light theme (verified from light frames: bg #FFFFFF, sidebar #F8F7FE, text pure #000, muted #9298AF, pale #EBEBFF strokes/icons, rows #FBFAFE) ---- */
:root[data-theme="light"] {
    --bg:            #FFFFFF;
    --panel:         #F8F7FE;
    --active-block:  #EAE8FC;
    --row-a:         #FBFAFE;
    --row-b:         #FBFAFE;
    --row-c:         #FBFAFE;
    --border:        #EBEBFF;
    --avatar-line:   #EBEBFF;
    --text:          #000000;
    --muted:         #9298AF;
    --icon-off:      #EBEBFF;
    --icon-off-alt:  #EBEBFF;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
svg { display: block; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   SHELL — sidebar + topbar (spec: dashboard-dark frame)
   ============================================================ */

/* Sidebar: 292px, #111727, 1px right divider #454D63 */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 50;
}

/* Logo block 172x42 @ x60 y32 */
.side-logo {
    padding: 32px 0 0 60px;
    height: 74px; /* 32 + 42 */
}
.side-logo svg { width: 172px; height: 42px; }

/* Nav starts y130 */
.side-nav {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
}

/* Inactive item: 41px row, bare glyph #25304D @ x61, label 14/400 #9298AF @ x100 */
.nav-item {
    display: flex;
    align-items: center;
    height: var(--nav-item-h);
    padding-left: 61px;
    gap: 19px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
}
.nav-item .nav-ico {
    width: 20px;
    height: 20px;
    color: var(--icon-off);
    flex: none;
    display: grid;
    place-items: center;
}
.nav-item .nav-ico svg { width: 20px; height: 20px; }

/* Active item: 245x66 block #0E2236 (flush left), 33x33 r8 gradient tile @ x54, label 14/600 white @ x102 */
.nav-item.active {
    width: var(--nav-active-w);
    height: var(--nav-active-h);
    padding-left: 54px;
    gap: 15px;
    background: var(--active-block);
    color: var(--text);
    font-weight: 600;
}
.nav-item.active .nav-ico {
    width: 33px;
    height: 33px;
    border-radius: 8px;
    color: #FFFFFF;
    background: var(--nav-grad, linear-gradient(135deg, #3ABAEF, #2A8FD4));
}
.nav-item.active .nav-ico svg { width: 17px; height: 17px; }

/* Per-item active gradients (base colors extracted from Figma tiles; lightened ~12% at start) */
.nav-item[data-nav="dashboard"] .nav-ico { }
.nav-item.active[data-nav="dashboard"] .nav-ico { --nav-grad: linear-gradient(135deg, #FF7A45, #FE5218); }
.nav-item.active[data-nav="orders"]    .nav-ico { --nav-grad: linear-gradient(135deg, #F2618F, #EF396C); }
.nav-item.active[data-nav="neworder"]  .nav-ico { --nav-grad: linear-gradient(135deg, #7FAAFF, #2CBEED); }
.nav-item.active[data-nav="services"]  .nav-ico { --nav-grad: linear-gradient(135deg, #9373FA, #7850F9); }
.nav-item.active[data-nav="addfunds"]  .nav-ico { --nav-grad: linear-gradient(135deg, #FEC964, #FEBC36); }
.nav-item.active[data-nav="api"]       .nav-ico { --nav-grad: linear-gradient(135deg, #6C73F3, #4850EF); }
.nav-item.active[data-nav="tickets"]   .nav-ico { --nav-grad: linear-gradient(135deg, #62F2CB, #3BEFB9); }
.nav-item.active[data-nav="massorder"] .nav-ico { --nav-grad: linear-gradient(135deg, #9F62F2, #883BEF); }
.nav-item.active[data-nav="updates"]   .nav-ico { --nav-grad: linear-gradient(135deg, #5EE6A1, #38E085); }

/* Sidebar footer: divider @ y637 x44 w192, then Updates row */
.side-divider {
    margin: auto 44px 0;
    height: 1px;
    background: var(--border);
}
.nav-item.nav-updates .nav-ico { color: var(--icon-off-alt); }
.nav-updates .updates-dot {
    margin-left: auto;
    margin-right: 24px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--green) 25%, transparent);
    position: relative;
}
.nav-updates .updates-dot::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--green);
}
.side-foot-spacer { height: 28px; }

/* ============================================================
   MAIN (right of sidebar)
   ============================================================ */
.main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Topbar: toggle 77x31 @ y29 · balance 120x45 @ y22 · avatar 47x47 @ y20, right cluster ends x1376 */
.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    height: 90px;
    padding: 22px 64px 23px 24px;
    flex: none;
}

/* Theme toggle pill 77x31 — frame-baked crops: moon-left dark / sun-right light */
.theme-toggle {
    width: 77px;
    height: 31px;
    border: 0;
    padding: 0;
    border-radius: 19px;
    background: transparent url('https://storage.perfectcdn.com/9edfaa/2nidoip2tmdrl0os.png') center / cover no-repeat;
}
:root[data-theme="light"] .theme-toggle { background-image: url('https://storage.perfectcdn.com/9edfaa/x6ppzsdx320d6k2d.png'); }

/* Decorative wireframe polyhedron bleeding behind the header (all app frames) */
.main { position: relative; }
.topbar-poly {
    position: absolute;
    top: 0;
    left: 540px;
    width: 205px;
    height: 105px;
    background: url('https://storage.perfectcdn.com/9edfaa/0nrdyhr2ylw057to.png') center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
}
:root[data-theme="light"] .topbar-poly { background-image: url('https://storage.perfectcdn.com/9edfaa/3zk8195a2hcatyms.png'); }
.topbar, .content { position: relative; z-index: 1; }

/* Balance pill 120x45 r22.5 border #454D63 + inner 103x31 r19 ring (frame: Rectangle 235 + 236), text 12/600 white + caret */
.balance-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 120px;
    height: 45px;
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: 22.5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.balance-pill::after {
    content: "";
    position: absolute;
    inset: 6px 8px;
    border: 1px solid #FFFFFF;
    border-radius: 19px;
    pointer-events: none;
}
:root[data-theme="light"] .balance-pill::after { border-color: #000000; }
.balance-pill .caret { width: 11px; height: 7px; color: var(--text); }

/* Account chip: avatar 47x47 ring #EBEBFF holding a 35px gradient disc + caret 15x9 */
.account-chip {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: 11px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--text);
}
.account-chip .avatar {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    border: 1px solid var(--avatar-line);
    background: transparent;
    display: grid;
    place-items: center;
}
.account-chip .avatar svg {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, #04B8FE, #505CFE);
    color: #FFFFFF;
    padding: 5px;
}
.account-chip .caret { width: 15px; height: 9px; color: var(--text); }

/* Content area — frame: content starts x345 (53px from sidebar edge), title y74 */
.content {
    padding: 0 53px 53px;
    flex: 1;
}

/* Page title: Poppins 30/600 white ("Welcome!") */
.page-title {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}
.page-sub {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
}

/* Card base: r20, 1px #454D63 border (stat cards / panels) */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: transparent;
}


/* ======== part: c_account.css ======== */
/* ============================================================
   ACCOUNT page — spec: figma-refs/specs/account-dark.spec.txt
   Layout (1x px on 1440 frame, content origin x345):
   title y74 (30/600) · sub y126 (12/400 #9298AF) · grid y178:
   left col x346 w509 — username card 509x90 (input +22/+34),
   password card y293 509x341 (inputs 436x49 +40/+34, gaps 10/12,
   gold button 201x55 +31) · right col x879 w394 (gap 24) —
   timezone card 394x204 (select 333x49 +22/+30, caret right-27,
   Save 115x55 +29), API card y410 394x221 (input +23/+30,
   Generate New 173x55 +29). Light values from account-light.
   ============================================================ */

:root {
    --acct-card-bg:  #060912;
    --acct-card-bd:  #131721;
    --acct-field-bg: #020307;
    --acct-ink:      #FFFFFF;   /* input values, button text/border, select caret */
}
:root[data-theme="light"] {
    --acct-card-bg:  #FDFCFE;
    --acct-card-bd:  #EBEBFF;
    --acct-field-bg: #FFFFFF;
    --acct-ink:      #000000;
}

/* Title + sub — title y74 sits 16px up into the topbar band (same as dashboard) */
.acct-title {
    margin-top: -16px;
    line-height: 45px;
}
.acct-sub {
    margin: 7px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: #9298AF; /* Figma-verbatim in both themes */
}

/* ---- Grid (cards y178): left col 509 + 24 gap + right col 394 ---- */
.acct-grid {
    display: flex;
    align-items: flex-start;
    margin-top: 30px;
}
.acct-col-l { width: 509px; flex: none; margin-left: 1px; } /* cards at x346 */
.acct-col-r { width: 394px; flex: none; margin-left: 24px; }

/* ---- Cards (r20, bg #060912, 1px #131721 border) ---- */
.acct-card {
    background: var(--acct-card-bg);
    border-color: var(--acct-card-bd);
}
.acct-user { width: 509px; height: 90px;  padding: 21px 0 0 33px; }
.acct-pass { width: 509px; height: 341px; padding: 39px 0 0 33px; margin-top: 25px; }
.acct-tz   { width: 394px; height: 204px; padding: 21px 0 0 29px; }
.acct-api  { width: 394px; height: 221px; padding: 22px 0 0 29px; margin-top: 28px; }

/* ---- Inputs (436x49 / 333x49, r5, placeholder 14/400 #9298AF @ +28) ---- */
.acct-input {
    display: block;
    width: 436px;
    height: 49px;
    padding: 0 28px;
    border: 0;
    border-radius: 5px;
    background: var(--acct-field-bg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--acct-ink);
    outline: none;
}
.acct-col-r .acct-input { width: 333px; }
.acct-input::placeholder { color: #9298AF; opacity: 1; } /* Figma-verbatim both themes */
.acct-input:focus { box-shadow: 0 0 0 1px var(--gold); }
/* Figma nudge: password inputs 2-3 sit +10 / +12 below the previous one */
.acct-pass .acct-input + .acct-input { margin-top: 10px; }
.acct-pass .acct-input + .acct-input + .acct-input { margin-top: 12px; }

/* ---- Timezone select (333x49 r5, caret 15x9 right-27, drop shadow both themes) ---- */
.acct-select-wrap { position: relative; width: 333px; }
.acct-select {
    width: 333px;
    height: 49px;
    border: 0;
    border-radius: 5px;
    background: var(--acct-field-bg);
    box-shadow: 0 15px 30px rgba(45, 44, 136, 0.05); /* Figma DROP_(0,15,blur30,#2D2C88/0.05) */
    padding: 0 28px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #9298AF; /* placeholder option color, Figma-verbatim both themes */
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.acct-select:focus { box-shadow: 0 15px 30px rgba(45, 44, 136, 0.05), 0 0 0 1px var(--gold); }
.acct-caret {
    position: absolute;
    top: 50%;
    right: 27px;
    transform: translateY(-50%);
    color: var(--acct-ink);
    pointer-events: none;
}

/* ---- Outlined buttons (Save 115x55 / Generate New 173x55, 14/600 ink) ---- */
.acct-btn-line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 115px;
    height: 55px;
    margin-top: 29px;
    padding: 0;
    border: 1px solid var(--acct-ink); /* #FFF dark / #000 light */
    border-radius: 5px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
    color: var(--acct-ink);
}
.acct-btn-gen {
    width: 173px;
    padding-left: 8px; /* Figma nudge: text sits 4px right of geometric center */
}

/* ---- Gold button (Change Password 201x55, gold bg borderless — stroke visible:false, 14/600 #FFF) ---- */
.acct-btn-gold {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 201px;
    height: 55px;
    margin-top: 31px;
    padding: 0;
    border: 0; /* Figma stroke exists but visible:false → no border renders */
    border-radius: 5px;
    background: var(--gold);
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
    color: #FFFFFF; /* Figma-verbatim in both themes */
}


/* ======== part: c_addfunds.css ======== */
/* ============================================================
   ADDFUNDS page — spec: figma-refs/specs/add-funds-dark.spec.txt
   Layout (1x px on 1440 frame, content origin x345):
   title y74 (30/600) · Sort By y135 265x48 r5 · table x334 w492
   (header text y239, border y274, row h80, cols 48/185/147/112,
   dividers 1x30 centered) · card x888 y219 422x421 r20:
   "Add New" 18/600, method select + amount input 348x49 r5,
   Pay 111x55 gold. Light values from add-funds-light/nodes.json.
   ============================================================ */

:root {
    --af-ink:        #FFFFFF;   /* header labels, card title, amount placeholder, carets */
    --af-line:       #454D63;   /* table horizontal borders */
    --af-divider:    #454D63;   /* in-row vertical cell dividers */
    --af-row-bg:     #050913;   /* data row bg */
    --af-field-bg:   #0A1220;   /* Sort By box + amount input bg */
    --af-select-bg:  #020307;   /* method select bg */
    --af-card-bg:    #060912;
    --af-card-bd:    #131721;
    --af-shadow:     0 15px 30px rgba(0,0,0,.05);
}
:root[data-theme="light"] {
    --af-ink:        #000000;
    --af-line:       #EBEBFF;
    --af-divider:    #C3C3D9;
    --af-row-bg:     #FBFAFE;
    --af-field-bg:   #FFFFFF;
    --af-select-bg:  #FFFFFF;
    --af-card-bg:    #FDFCFE;
    --af-card-bd:    #EBEBFF;
    --af-shadow:     0 15px 30px rgba(45,44,136,.05);
}

/* Title — frame y74 sits 16px up into the topbar band (same as dashboard).
   Figma textCase TITLE on "Add funds" + "Add New" → capitalize to match render */
.af-title {
    margin-top: -16px;
    line-height: 45px;
    text-transform: capitalize;
}

/* Body row: left column (sort + table) + form card (card top lands y219) */
.af-body {
    display: flex;
    align-items: flex-start;
    margin-top: 16px;
}
.af-left {
    width: 492px;
    flex: none;
    margin-left: -11px; /* table wrapper starts x334, 11px left of content origin */
}

/* ---- Sort By (y135 x345, 265x48 r5, text 14/400 #9298AF @ +22, caret 15x9 right-20) ---- */
.af-sort {
    position: relative;
    display: flex;
    align-items: center;
    width: 265px;
    height: 48px;
    margin-left: 11px; /* back to content origin x345 */
    padding-left: 22px;
    border-radius: 5px;
    background: var(--af-field-bg);
    box-shadow: var(--af-shadow);
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim in both themes */
}
.af-caret {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--af-ink);
    pointer-events: none;
}
.af-sort .af-caret { right: 20px; }

/* ---- Transactions table (x334 w492; header y239, border y274; row y274 h80) ---- */
.af-table { margin-top: 56px; }
.af-thead {
    display: flex;
    height: 35px; /* 12px text + 23px → border lands frame y274 */
    border-bottom: 1px solid var(--af-line);
}
.af-th {
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: var(--af-ink);
    text-align: center;
}
.af-row {
    display: flex;
    align-items: center;
    height: 80px;
    border-bottom: 1px solid var(--af-line);
    background: var(--af-row-bg);
}
.af-td {
    position: relative;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim in both themes */
    text-align: center;
}
/* vertical cell dividers: 1x30 centered (frame x382/567/714 = column boundaries) */
.af-td + .af-td::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background: var(--af-divider);
}
/* column widths from divider positions: 48 / 185 / 147 / 112 */
.af-c-id     { width: 48px; }
.af-c-date   { width: 185px; }
.af-c-method { width: 147px; }
.af-c-amount { width: 112px; }
.af-td.af-c-date {
    display: flex;
    justify-content: center;
    gap: 11px; /* "2022-04-04" + "12:49:05" — 11px apart in frame */
}

/* ---- Add New card (x888 y219, 422x421 r20) ---- */
.af-card {
    width: 422px;
    height: 421px;
    flex: none;
    margin-left: 62px; /* 826 table edge → 888 card */
    margin-top: 84px;  /* 135 body top → 219 card top */
    padding: 35px 0 0 37px; /* +1px borders → content lands frame x926 / y255 */
    background: var(--af-card-bg);
    border-color: var(--af-card-bd);
}
.af-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 33px;
    color: var(--af-ink);
    text-transform: capitalize; /* Figma textCase TITLE (no-op on "Add New", kept for fidelity) */
}

/* Method select (y314, 348x49 r5, text 14/400 #9298AF @ +28, caret right-25) */
.af-select-wrap {
    position: relative;
    width: 348px;
    margin-top: 26px;
}
.af-select {
    width: 348px;
    height: 49px;
    border: 0;
    border-radius: 5px;
    background: var(--af-select-bg);
    padding: 0 28px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    color: #9298AF; /* placeholder option color, Figma-verbatim both themes */
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.af-select:focus { box-shadow: 0 0 0 1px var(--gold); }
.af-select-wrap .af-caret { right: 25px; }

/* Amount input (y373, 348x49 r5, placeholder 14/600 ink @ +28, drop shadow) */
.af-input {
    width: 348px;
    height: 49px;
    margin-top: 10px;
    border: 0;
    border-radius: 5px;
    background: var(--af-field-bg);
    box-shadow: var(--af-shadow);
    padding: 0 28px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--af-ink);
    outline: none;
    box-sizing: border-box;
}
.af-input::placeholder { color: var(--af-ink); opacity: 1; }
.af-input:focus { box-shadow: var(--af-shadow), 0 0 0 1px var(--gold); }

/* Pay button (y455, 111x55 r5, gold bg, borderless — Figma stroke visible:false, 14/600 #FFF) */
.af-pay {
    width: 111px;
    height: 55px;
    margin-top: 33px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: var(--gold);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
}

/* Corner wireframe polyhedron bleeding off bottom-right (frame x1150-1440, y500-721) */
.af-br-poly {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 290px;
    height: 221px;
    background: url('https://storage.perfectcdn.com/9edfaa/h5bdw5in59ziblq7.png') no-repeat;
    background-size: 290px 221px;
    pointer-events: none;
    z-index: -1;
}
[data-theme="light"] .af-br-poly { background-image: url('https://storage.perfectcdn.com/9edfaa/4sdp0zl4p8y1bhbp.png'); }


/* ======== part: c_affiliates.css ======== */
/* ============================================================
   AFFILIATES page — spec: figma-refs/affiliates-dark/nodes.json
   Layout (1x px on 1440 frame, content origin x345):
   title y74 (30/600) · Sort By y135 265x48 r5 · referral card
   y236 x334 805x122 r20 (boxes y255: 337/188/187 x80 r5, gap 20,
   labels 12/400 ink @ +28/+21, values 12/400 #9298AF +13) ·
   table x334 w805: head labels y402 (12/400 ink), border y437,
   row 80px #050913, cols 62/145/141/127/140/190, dividers 1x30
   centered · bottom line y516. Light from affiliates-light.
   ============================================================ */

:root {
    --aff-ink:        #FFFFFF;   /* header labels + box labels + caret */
    --aff-line:       #454D63;   /* table horizontal borders */
    --aff-divider:    #454D63;   /* in-row vertical cell dividers */
    --aff-row-bg:     #050913;   /* data row bg */
    --aff-field-bg:   #0A1220;   /* Sort By box bg */
    --aff-box-bg:     #020307;   /* referral stat boxes bg */
    --aff-card-bg:    #060912;
    --aff-card-bd:    #131721;
    --aff-shadow:     0 15px 30px rgba(0,0,0,.05);
}
:root[data-theme="light"] {
    --aff-ink:        #000000;
    --aff-line:       #EBEBFF;
    --aff-divider:    #C3C3D9;
    --aff-row-bg:     #FBFAFE;
    --aff-field-bg:   #FFFFFF;
    --aff-box-bg:     #FFFFFF;
    --aff-card-bg:    #FDFCFE;
    --aff-card-bd:    #EBEBFF;
    --aff-shadow:     0 15px 30px rgba(45,44,136,.05);
}

/* Title — frame y74 sits 16px up into the topbar band (same as dashboard) */
.aff-title {
    margin-top: -16px;
    line-height: 45px;
}

/* ---- Sort By (y135 x345, 265x48 r5, text 14/400 #9298AF @ +22, caret right-20) ---- */
.aff-sort {
    position: relative;
    display: flex;
    align-items: center;
    width: 265px;
    height: 48px;
    margin-top: 16px;
    padding-left: 22px;
    border-radius: 5px;
    background: var(--aff-field-bg);
    box-shadow: var(--aff-shadow);
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim in both themes */
}
.aff-caret {
    position: absolute;
    right: 20px; /* chevron right edge at frame x590 */
    top: 50%;
    transform: translateY(-50%);
    color: var(--aff-ink);
    pointer-events: none;
}

/* ---- Referral card (y236 x334, 805x122 r20; 11px left of content origin) ---- */
.aff-card {
    display: flex;
    gap: 20px;
    width: 805px;
    height: 122px;
    margin-left: -11px;
    margin-top: 53px; /* sort bottom y183 → card y236 */
    padding: 18px 23px 22px 28px; /* +1px borders → boxes land frame x363 / y255 */
    background: var(--aff-card-bg);
    border-color: var(--aff-card-bd);
}
.aff-box {
    flex: none;
    height: 80px;
    border-radius: 5px;
    background: var(--aff-box-bg);
    padding: 21px 0 0 28px; /* label lands frame y276 / x+28 */
}
.aff-box-link   { width: 337px; }
.aff-box-rate   { width: 188px; }
.aff-box-payout { width: 187px; }
.aff-box-label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: var(--aff-ink);
}
.aff-box-value {
    display: block;
    margin-top: 13px; /* label bottom y288 → value y301 */
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim in both themes */
}

/* ---- Stats table (head y402, border y437; row 80px; bottom line y516) ---- */
.aff-table {
    width: 805px;
    margin-left: -11px; /* table starts x334, 11px left of content origin */
    margin-top: 44px;   /* card bottom y358 → head text y402 */
}
.aff-thead {
    display: flex;
    height: 35px; /* 12px text + 23px → border lands frame y437 */
    border-bottom: 1px solid var(--aff-line);
}
.aff-th {
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: var(--aff-ink);
    text-align: center;
}
.aff-row {
    display: flex;
    align-items: center;
    height: 80px;
    border-bottom: 1px solid var(--aff-line);
    background: var(--aff-row-bg);
}
.aff-td {
    position: relative;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim in both themes */
    text-align: center;
}
/* vertical cell dividers: 1x30 centered (frame x396/541/682/809/949) */
.aff-td + .aff-td::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background: var(--aff-divider);
}
/* column widths from divider positions: 62 / 145 / 141 / 127 / 140 / 190 */
.aff-c-visits { width: 62px; }
.aff-c-regs   { width: 145px; }
.aff-c-refs   { width: 141px; }
.aff-c-conv   { width: 127px; }
.aff-c-total  { width: 140px; }
.aff-c-avail  { width: 190px; }

/* Corner wireframe polyhedron bleeding off bottom-right (frame x1150-1440, y500-721) */
.aff-br-poly {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 290px;
    height: 221px;
    background: url('https://storage.perfectcdn.com/9edfaa/h5bdw5in59ziblq7.png') no-repeat;
    background-size: 290px 221px;
    pointer-events: none;
    z-index: -1;
}
[data-theme="light"] .aff-br-poly { background-image: url('https://storage.perfectcdn.com/9edfaa/4sdp0zl4p8y1bhbp.png'); }


/* ======== part: c_api.css ======== */
/* ============================================================
   API page — spec: figma-refs/api-dark/nodes.json + api-light
   Layout (1x px on 1440 frame, content origin x345, width 840):
   title y74 (30/600 lh45) · subtitle y126 (12/400 lh22 #9298AF) ·
   meta table y196: 3 rows 840x55, divider x+382 y+13 h30, labels
   x+25 / values x+413 (12/400 #9298AF) · accordion y414: headers
   18/600 lh45 + 9px dot + 15x9 caret right-33; Service List open
   (legend y519, params y549/604, Example Response y690, code card
   y724 840x529 r20, code 12/400 lh20 #9298AF) · PHP button y1819
   222x55 r5 gold. Dark-frame param2 glyph "ç" is a Figma font
   glitch — light frame has the real text: "action".
   ============================================================ */

.api-wrap { width: 840px; }

/* Title + subtitle — title y74 sits 16px up into the topbar band */
.api-title {
    margin-top: -16px;
    line-height: 45px;
}
.api-sub {
    margin: 7px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: #9298AF; /* Figma-verbatim in both themes */
}

/* ---- Data table (meta y196, params y549: rows 840x55) ---- */
.api-meta { margin-top: 48px; }
.api-row {
    position: relative;
    display: flex;
    align-items: center;
    height: 55px;
    background: var(--row-b); /* #050913 */
    border-top: 1px solid var(--border);
}
.api-row:last-child { border-bottom: 1px solid var(--border); }
.api-row::before { /* column divider x+382, y+13 h30 */
    content: "";
    position: absolute;
    left: 382px;
    top: 12px;
    width: 1px;
    height: 30px;
    background: var(--border);
}
.api-cell {
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim both themes */
}
.api-cell-l { width: 382px; padding-left: 25px; }
.api-cell-r { padding-left: 31px; }

/* ---- Accordion (first border y414) ---- */
.api-acc { margin-top: 53px; }
.acc-item {
    border-top: 1px solid var(--border);
    padding: 17px 0;
}
.acc-item:last-child { border-bottom: 1px solid var(--border); }
/* Figma nudges — per-item padding so every border lands on spec y:
   414 / 1302 / 1382 / 1465 / 1543 / 1621 / 1701 / 1776 */
.acc-item:nth-child(1) { padding-top: 16px; padding-bottom: 49px; }
.acc-item:nth-child(3) { padding-top: 17px; padding-bottom: 20px; }
.acc-item:nth-child(4) { padding-top: 14px; padding-bottom: 18px; }
.acc-item:nth-child(5) { padding-top: 16px; padding-bottom: 16px; }
.acc-item:nth-child(6) { padding-top: 13px; padding-bottom: 21px; }
.acc-item:nth-child(7) { padding-top: 14px; padding-bottom: 15px; }

.acc-head { display: flex; align-items: center; }
.acc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}
.acc-item:nth-child(1) .acc-dot { background: #FFC85E; }
.acc-item:nth-child(2) .acc-dot { background: #5ED8FF; }
.acc-item:nth-child(3) .acc-dot { background: #84F182; }
.acc-item:nth-child(4) .acc-dot { background: #CB5EFF; }
.acc-item:nth-child(5) .acc-dot { background: #FF2C2C; }
.acc-item:nth-child(6) .acc-dot { background: #632CFF; }
.acc-item:nth-child(7) .acc-dot { background: #FFEA2C; }
.acc-name {
    margin: 0 0 0 13px;
    font-size: 18px;
    font-weight: 600;
    line-height: 45px;
    color: var(--text);
    text-transform: capitalize; /* Figma textCase TITLE → "Multiple Orders Status", "User Balance" */
}
.acc-chev {
    width: 15px;
    height: 9px;
    margin-left: auto;
    margin-right: 33px;
    color: var(--text);
    flex: none;
}
.acc-open .acc-chev {
    transform: rotate(180deg);
    margin-top: -7px; /* Figma: open caret rides 7px above title center */
}

/* ---- Open section body ---- */
.acc-body { margin-top: 43px; }
.acc-legend {
    display: flex;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: var(--text); /* #FFF dark / #000 light per spec */
}
.acc-legend span:first-child { width: 382px; padding-left: 25px; }
.acc-legend span:last-child { padding-left: 31px; }
.acc-params { margin-top: 18px; }
.acc-resp {
    margin-top: 31px;
    padding-left: 25px;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: var(--text);
}
.acc-code {
    margin: 22px 0 0;
    width: 840px;
    height: 529px;
    padding: 28px 0 0 24px; /* Figma places glyphs ~4px higher in the 20px line box than Chrome */
    border: 1px solid #131721;
    border-radius: 20px;
    background: #060912;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #9298AF; /* Figma-verbatim both themes */
    overflow: hidden;
}
.acc-code span { display: block; height: 20px; }
.acc-code .l1 { padding-left: 21px; }
.acc-code .l2 { padding-left: 39px; }
/* Figma line pitch is not uniform (node-y deltas): [→{ 22, {→service 21,
   max→}, 23, },→{ 30, {→service2 17, false→} 27, }→] 26 — deltas from 20px grid: */
.acc-code .g2  { margin-top: 2px; }
.acc-code .g1  { margin-top: 1px; }
.acc-code .gm3 { margin-top: -3px; }
.acc-code .g3  { margin-top: 3px; }
.acc-code .g10 { margin-top: 10px; }
.acc-code .g7  { margin-top: 7px; }
.acc-code .g6  { margin-top: 6px; }

/* ---- Example of PHP code button (y1819, 222x55 r5) ---- */
.api-php {
    margin-top: 42px;
    width: 222px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0; /* Figma stroke exists but visible:false → no border renders */
    border-radius: 5px;
    background: var(--gold);
    color: #FFFFFF; /* white text in both themes per spec */
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
}

/* ============================================================
   LIGHT theme — figma-refs/api-light/nodes.json
   ============================================================ */
[data-theme="light"] .api-row {
    background: #FBFAFE;
    border-color: #EBEBFF;
}
[data-theme="light"] .api-row::before { background: #C3C3D9; }
[data-theme="light"] .acc-item { border-color: #EBEBFF; }
[data-theme="light"] .acc-code {
    background: #FDFCFE;
    border-color: #EBEBFF;
}

/* Right-edge wireframe polyhedron (frame x1291-1440, y336-600; .content top = y90) */
.api-tr-poly {
    position: absolute;
    right: 0;
    top: 246px;
    width: 149px;
    height: 264px;
    background: url('https://storage.perfectcdn.com/9edfaa/cl0ykny18k40hqf2.png') no-repeat;
    background-size: 149px 264px;
    pointer-events: none;
    z-index: -1;
}
/* Small polyhedron bleeding off the page bottom (frame x999-1101, y1942-2005) */
.api-bb-poly {
    position: absolute;
    right: 339px;
    bottom: 0;
    width: 102px;
    height: 63px;
    background: url('https://storage.perfectcdn.com/9edfaa/qxmzfbg4f624qiu9.png') no-repeat;
    background-size: 102px 63px;
    pointer-events: none;
    z-index: -1;
}
[data-theme="light"] .api-tr-poly { background-image: url('https://storage.perfectcdn.com/9edfaa/xp5lo0611aunx8cj.png'); }
[data-theme="light"] .api-bb-poly { background-image: url('https://storage.perfectcdn.com/9edfaa/8js0z5skcfkrtzr3.png'); }


/* ======== part: c_childpanels.css ======== */
/* ============================================================
   CHILD-PANELS page — spec: figma-refs/child-panels-dark/nodes.json
   Layout (1x px on 1440 frame, content origin x345):
   title y74 (30/600) · sub y126 12/400 lh22 #9298AF · card y192
   x346 909x457 r20 (pad 30/33): left form col x380 w393 — inputs
   393x49 r5 at y223+59n (text 14/400 #9298AF @ +28), Currency
   select caret right-24, Submit y533 156x55 gold · right col x813
   w393 (gap 40): ns panel 393x207 r5 (title y254 @ +38, boxes
   210x41 r5 y286/y336), price row y459 393x49 r5.
   Light from child-panels-light.
   ============================================================ */

:root {
    --cp-ink:          #FFFFFF;   /* price row text, caret */
    --cp-card-bg:      #060912;
    --cp-card-bd:      #131721;
    --cp-input-bg:     #020307;   /* form inputs + select */
    --cp-panel-bg:     #0A1220;   /* nameserver info panel */
    --cp-panel-shadow: 0 15px 30px rgba(0,0,0,.05);
    --cp-ns-bd:        #444C62;   /* nameserver box borders */
    --cp-price-bg:     transparent;
    --cp-price-bd:     #454D63;
}
:root[data-theme="light"] {
    --cp-ink:          #000000;
    --cp-card-bg:      #FDFCFE;
    --cp-card-bd:      #EBEBFF;
    --cp-input-bg:     #FFFFFF;
    --cp-panel-bg:     #FFFFFF;
    --cp-panel-shadow: 0 15px 30px rgba(45,44,136,.05);
    --cp-ns-bd:        #EBEBFF;
    --cp-price-bg:     #F3F3FF;
    --cp-price-bd:     transparent;
}

/* Title — frame y74 sits 16px up into the topbar band (same as dashboard) */
.cp-title {
    margin-top: -16px;
    line-height: 45px;
    text-transform: capitalize; /* Figma textCase TITLE: "Child-panels" → "Child-Panels" */
}

/* Subtitle (y126, 12/400 lh22 #9298AF — Figma-verbatim in both themes) */
.cp-sub {
    margin: 7px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: #9298AF;
}

/* ---- Card (y192 x346, 909x457 r20; 1px right of content origin) ---- */
.cp-card {
    display: flex;
    width: 909px;
    height: 457px;
    margin-top: 44px; /* sub bottom y148 → card y192 */
    margin-left: 1px;
    padding: 30px 0 0 33px; /* +1px borders → content lands frame x380 / y223 */
    background: var(--cp-card-bg);
    border-color: var(--cp-card-bd);
}

/* Left form column — five 393x49 fields, 10px gaps */
.cp-form { width: 393px; flex: none; }
.cp-input,
.cp-select {
    width: 393px;
    height: 49px;
    margin: 0;
    border: 0;
    border-radius: 5px;
    background: var(--cp-input-bg);
    padding: 0 28px; /* placeholder lands frame x408 */
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    color: var(--cp-ink);
    outline: none;
    box-sizing: border-box;
}
.cp-input::placeholder {
    color: #9298AF; /* Figma-verbatim in both themes */
    opacity: 1;
}
.cp-input:focus,
.cp-select:focus { box-shadow: 0 0 0 1px var(--gold); }
.cp-select-wrap {
    position: relative;
    margin-top: 10px;
}
.cp-select {
    color: #9298AF; /* placeholder option color, Figma-verbatim both themes */
    appearance: none;
    -webkit-appearance: none;
}
.cp-form .cp-input + .cp-input,
.cp-form .cp-select-wrap + .cp-input { margin-top: 10px; }
.cp-caret {
    position: absolute;
    right: 24px; /* chevron right edge at frame x749 */
    top: 50%;
    transform: translateY(-50%);
    color: var(--cp-ink);
    pointer-events: none;
}

/* Submit (y533, 156x55 r5, gold bg borderless — stroke visible:false, 14/600 #FFF) */
.cp-submit {
    width: 156px;
    height: 55px;
    margin-top: 25px; /* last input bottom y508 → button y533 */
    padding: 0;
    border: 0; /* Figma stroke exists but visible:false → no border renders */
    border-radius: 5px;
    background: var(--gold);
    color: #FFFFFF; /* Figma-verbatim in both themes */
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
}

/* ---- Right column (x813 w393, 40px gap) ---- */
.cp-side {
    width: 393px;
    flex: none;
    margin-left: 40px;
}

/* Nameserver panel (y223, 393x207 r5, text y254 @ +38) */
.cp-ns-panel {
    width: 393px;
    height: 207px;
    border-radius: 5px;
    background: var(--cp-panel-bg);
    box-shadow: var(--cp-panel-shadow);
    padding: 31px 0 0 38px;
}
.cp-ns-title {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim in both themes */
}
/* NS boxes (y286/y336, 210x41 r5, text centered vertically @ +37) */
.cp-ns-box {
    display: flex;
    align-items: center;
    width: 210px;
    height: 41px;
    margin-top: 20px;
    padding-left: 37px;
    border: 1px solid var(--cp-ns-bd);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim in both themes */
    box-sizing: border-box;
}
.cp-ns-box + .cp-ns-box { margin-top: 9px; }

/* Price row (y459, 393x49 r5, 14/400 ink @ +28 both sides) */
.cp-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 393px;
    height: 49px;
    margin-top: 29px; /* ns panel bottom y430 → price y459 */
    padding: 0 28px;
    border: 1px solid var(--cp-price-bd);
    border-radius: 5px;
    background: var(--cp-price-bg);
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: var(--cp-ink);
    box-sizing: border-box;
}

/* Corner wireframe polyhedron bleeding off bottom-right (frame x1150-1440, y500-721) */
.cp-br-poly {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 290px;
    height: 221px;
    background: url('https://storage.perfectcdn.com/9edfaa/h5bdw5in59ziblq7.png') no-repeat;
    background-size: 290px 221px;
    pointer-events: none;
    z-index: -1;
}
[data-theme="light"] .cp-br-poly { background-image: url('https://storage.perfectcdn.com/9edfaa/4sdp0zl4p8y1bhbp.png'); }


/* ======== part: c_contact.css ======== */
/* ============================================================
   CONTACT page — spec: figma-refs/contact-dark + contact-light
   Guest public page. Frame 1440x858 (main band y88-721).
   Header/footer/buttons/logo reuse lp-* from c_signin.css.
   Form column x173; art panel crop at x818 y149.
   Dark = default; light = [data-theme="light"] overrides.
   ============================================================ */

.ct {
    --ct-input:        #0A1220;
    --ct-input-shadow: 0 15px 30px rgba(0,0,0,.05);
}
:root[data-theme="light"] .ct {
    --ct-input:        #F8F7FE;
    --ct-input-shadow: none;
}

/* active-nav underline sits under "Contact" (x783 w66) — exact gradient, not the stretched shared crop */
.ct .lp-nav-underline {
    left: 783px; width: 66px;
    border-radius: 3.5px;
    background-image: linear-gradient(90deg, #7D72FE 0%, #FE5588 35.4%, #FF8065 68.8%, #FFCE2E 100%);
}
/* light pill same y as dark in this frame (y26) — no override needed */
/* gold Register button is borderless in the frame */
.ct .lp-btn-gold { border-color: transparent; }

/* ---------- main band (y88-721) ---------- */
.ct-main { position: relative; height: 633px; }

.ct-shard-left {
    left: 0; top: 77px;
    width: 75px; height: 83px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/ojrfyxuky2d0b7o6.png");
}

.ct-title {
    position: absolute;
    left: 173px; top: 85px;
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 45px;
    color: var(--lp-ink);
}

/* ---------- contact channels (tiles 32x32 r6 @ y236) ---------- */
.ct-tile {
    position: absolute;
    top: 148px;
    width: 32px; height: 32px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.ct-tile-1 { left: 173px; background-image: url("https://storage.perfectcdn.com/9edfaa/39hi8hbwlcnoeryx.png"); }
.ct-tile-2 { left: 376px; background-image: url("https://storage.perfectcdn.com/9edfaa/qijhjs2halbkuht5.png"); }
.ct-tile-3 { left: 544px; background-image: url("https://storage.perfectcdn.com/9edfaa/8rotelm9wl02436m.png"); }
.ct-text {
    position: absolute;
    top: 150px;
    font-size: 12px;
    font-weight: 400;
    line-height: 28px;
    color: var(--lp-muted);
    white-space: nowrap;
}
.ct-text-1 { left: 215px; }
.ct-text-2 { left: 419px; }
.ct-text-3 { left: 587px; }

/* ---------- form (x173; inputs 55px, r5) ---------- */
.ct-input {
    position: absolute;
    left: 173px;
    height: 55px;
    border: 0;
    border-radius: 5px;
    background: var(--ct-input);
    box-shadow: var(--ct-input-shadow);
    color: var(--lp-ink);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    padding: 0 28px;
    outline: none;
    box-sizing: border-box;
    resize: none;
}
.ct-input::placeholder { color: var(--lp-muted); opacity: 1; }
.ct-input:focus { box-shadow: var(--ct-input-shadow), 0 0 0 1px var(--gold); }
.ct-in-fname   { top: 209px; width: 261px; }
.ct-in-lname   { left: 444px; top: 209px; width: 261px; }
.ct-in-subject { top: 275px; width: 532px; }
.ct-in-message { top: 341px; width: 532px; height: 113px; padding-top: 22px; }

/* Send button (x173 y574, 135x55, gold, borderless in both frame themes) */
.ct-send {
    position: absolute;
    left: 173px; top: 486px;
    width: 135px; height: 55px;
    border: 0;
    border-radius: 5px;
    background: var(--gold);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
}

/* ---------- right art panel (x818 y149, 622x505 visible) ---------- */
.ct-right {
    left: 818px; top: 61px;
    width: 622px; height: 505px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/1jjx1yf7g58a5iap.png");
}
.ct-shard {
    left: 738px; top: 283px;
    width: 146px; height: 158px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/ym42x14ujxnfjplt.png");
}

/* ---------- footer band (y721-858 = 137px) ---------- */
.ct-footer { height: 137px; }

/* ============================================================
   LIGHT theme — figma-refs/contact-light/nodes.json
   ============================================================ */
:root[data-theme="light"] .ct-shard-left {
    top: 81px; height: 76px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/q000rwoqnzfl2x3i.png");
}
:root[data-theme="light"] .ct-tile-1 { background-image: url("https://storage.perfectcdn.com/9edfaa/71li0f252311omou.png"); }
:root[data-theme="light"] .ct-tile-2 { background-image: url("https://storage.perfectcdn.com/9edfaa/oitm41pd93920ha7.png"); }
:root[data-theme="light"] .ct-tile-3 { background-image: url("https://storage.perfectcdn.com/9edfaa/5ilsnkdk8wba4zr8.png"); }
:root[data-theme="light"] .ct-right {
    background-image: url("https://storage.perfectcdn.com/9edfaa/wsbbljctb5rwp6dk.png");
}
:root[data-theme="light"] .ct-shard {
    left: 740px; top: 284px;
    width: 141px; height: 153px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/5hej22qx13lswngk.png");
}


/* ======== part: c_dashboard.css ======== */
/* ============================================================
   DASHBOARD page — spec: figma-refs/specs/dashboard-dark.spec.txt
   Layout (1x px on 1440 frame, content origin x345):
   title y74 (30/600) · stat cards y153 386x145 (inner 354x115 @ +13,+14,
   tile 60x60 r10) · info grid y338: 3 cols 316w gap 32, labels 14/400,
   rows 60px with 1px top+bottom borders, values 14/600.
   ============================================================ */

/* Title — frame y74 sits 16px up into the topbar band */
.dash-title {
    margin-top: -16px;
    line-height: 45px;
}

/* ---- Stat cards (y153, two 386x145, gap 27) ---- */
.stat-cards {
    display: flex;
    gap: 27px;
    margin-top: 34px;
}
.stat-card {
    width: 386px;
    height: 145px;
    padding: 13px 18px 15px 12px; /* +1px borders → inner lands on frame offset 13,14 */
}
.stat-card-in {
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    padding-left: 18px; /* 358 + 1 border + 18 = tile at frame x377 */
}
.stat-ico {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
}
.stat-ico-balance { background: linear-gradient(143deg, #FF7FB1, #ED2D60); }
.stat-ico-orders  { background: linear-gradient(300deg, #774DFA, #A398FF); }
/* Figma nudge: orders card tile +24 / text +22 from inner (vs +19/+18 on balance) */
.stat-cards .stat-card:nth-child(2) .stat-card-in { padding-left: 23px; }
.stat-cards .stat-card:nth-child(2) .stat-txt { margin-left: 22px; }
.stat-ico svg { width: 29px; height: 29px; }
.stat-txt { margin-left: 18px; }
.stat-label {
    display: block;
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    color: #9298AF; /* Figma-verbatim in both themes (light --muted differs) */
}
.stat-value {
    display: block;
    margin-top: 6px;
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text);
}

/* ---- Info grid (labels y338, rows y369/483/597, cols 316 + gap 32) ---- */
.info-grid {
    display: flex;
    gap: 32px;
    margin-top: 40px;
}
.info-col { width: 316px; flex: none; }
.info-item { margin-bottom: 23px; }
.info-item:last-child { margin-bottom: 0; }
.info-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim both themes */
    padding-left: 25px;
    margin-bottom: 19px;
}
.info-item + .info-item .info-label { padding-left: 28px; } /* Figma nudge on rows 2-3 */

.info-row {
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 24px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.info-ico {
    width: 29px; /* icon 24 + 5 → value text lands at frame x+53 */
    flex: none;
    display: flex;
    align-items: center;
}
/* Frame-exact icon crops (2x, transparent-keyed from figma-refs/dashboard-*) */
.info-ico .ic {
    display: block;
    flex: none;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}
.ic-person   { width: 17px;   height: 19px; background-image: url('https://storage.perfectcdn.com/9edfaa/ooo03151utzgxzxe.png'); }
.ic-envelope { width: 17.5px; height: 13px; background-image: url('https://storage.perfectcdn.com/9edfaa/g2snyocqyx235185.png'); }
.ic-check    { width: 21px;   height: 21px; background-image: url('https://storage.perfectcdn.com/9edfaa/oeidc9n42w8xpboo.png'); }
.ic-dollar   { width: 21px;   height: 21px; background-image: url('https://storage.perfectcdn.com/9edfaa/1lm4gppo7fx2rt0s.png'); }
.ic-tickets  { width: 22px;   height: 13px; background-image: url('https://storage.perfectcdn.com/9edfaa/13k0qk1dggotlw4e.png'); }
.ic-idbadge  { width: 18px;   height: 18px; background-image: url('https://storage.perfectcdn.com/9edfaa/n1wech8qba7t8od9.png'); }
.ic-globe    { width: 18px;   height: 18px; background-image: url('https://storage.perfectcdn.com/9edfaa/19p0hju345lkz562.png'); }
.info-val {
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
    color: var(--text);
}

/* Row backgrounds per Figma cell (dark = tokens) */
.bg-a { background: var(--row-a); }
.bg-b { background: var(--row-b); }
.bg-c { background: var(--row-c); }

/* ============================================================
   LIGHT theme — figma-refs/dashboard-light/nodes.json
   ============================================================ */
[data-theme="light"] .stat-card,
[data-theme="light"] .stat-card-in {
    background: #FDFCFE;
    border-color: #EBEBFF;
}
/* Figma light: primary text is #000000 verbatim (not --text) */
[data-theme="light"] .dash-title,
[data-theme="light"] .stat-value,
[data-theme="light"] .info-val {
    color: #000000;
}
[data-theme="light"] .info-row { border-color: #EBEBFF; }
[data-theme="light"] .bg-a,
[data-theme="light"] .bg-b,
[data-theme="light"] .bg-c {
    background: #FBFAFE; /* all six rows identical in light spec */
}
[data-theme="light"] .ic-person   { background-image: url('https://storage.perfectcdn.com/9edfaa/2hfzfb490xay65lu.png'); }
[data-theme="light"] .ic-envelope { background-image: url('https://storage.perfectcdn.com/9edfaa/qwp5q0nm7ien019t.png'); }
[data-theme="light"] .ic-check    { background-image: url('https://storage.perfectcdn.com/9edfaa/2llirfzai4bidtnw.png'); }
[data-theme="light"] .ic-dollar   { background-image: url('https://storage.perfectcdn.com/9edfaa/0pe2kuauowf6ucjh.png'); }
[data-theme="light"] .ic-tickets  { background-image: url('https://storage.perfectcdn.com/9edfaa/za3er5kyz1li19a5.png'); }
[data-theme="light"] .ic-idbadge  { background-image: url('https://storage.perfectcdn.com/9edfaa/ibue0c6u875adfo4.png'); }
[data-theme="light"] .ic-globe    { background-image: url('https://storage.perfectcdn.com/9edfaa/6cl0lkuk7sdxgizq.png'); }


/* ======== part: c_faq.css ======== */
/* ============================================================
   FAQ page — spec: figma-refs/faq-dark + faq-light
   Guest public page. Frame 1440x1410 (main band y88-1271).
   Header/footer/buttons/logo reuse lp-* from c_signin.css.
   Accordion: 6 items x278 w885 (open 141px, closed 83px).
   Dark = default; light = [data-theme="light"] overrides.
   ============================================================ */

.fq {
    --fq-bar: #FFFFFF;   /* plus/minus glyph color */
}
:root[data-theme="light"] .fq {
    --fq-bar: #000000;
}

/* active-nav underline sits under "FAQ" (x591 w42) — exact gradient, not the stretched shared crop */
.fq .lp-nav-underline {
    left: 591px; width: 42px;
    border-radius: 3.5px;
    background-image: linear-gradient(90deg, #7D72FE 0%, #FE5588 35.4%, #FF8065 68.8%, #FFCE2E 100%);
}
/* light pill sits 1px lower in the frame (y27) */
:root[data-theme="light"] .fq .lp-theme-toggle { top: 27px; }
/* gold Register button is borderless in the frame */
.fq .lp-btn-gold { border-color: transparent; }

/* ---------- main band (y88-1271) ---------- */
.fq-main { position: relative; height: 1183px; }

.fq-shard-left {
    left: 0; top: 77px;
    width: 75px; height: 83px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/ojrfyxuky2d0b7o6.png");
}

.fq-title {
    position: absolute;
    left: 683px; top: 84px;
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 54px;
    color: var(--lp-ink);
}
.fq-sub {
    position: absolute;
    left: 484px; top: 144px;
    width: 473px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--lp-muted);
    white-space: nowrap; /* single line in frame; Chrome renders slightly wider than Figma's 472px */
}

/* ---------- panel (x118 y294, 1205x823, r43) ---------- */
.fq-panel {
    position: absolute;
    left: 118px; top: 206px;
    width: 1205px; height: 823px;
    border-radius: 43px;
    background: var(--lp-surface);
}

/* ---------- accordion items (x278 w885 r10) ---------- */
.fq-item {
    position: absolute;
    left: 278px;
    width: 885px;
    height: 83px;
    border-radius: 10px;
    background: var(--lp-card);
}
.fq-item-1 { top: 283px; height: 141px; }
.fq-item-2 { top: 437px; }
.fq-item-3 { top: 533px; }
.fq-item-4 { top: 629px; }
.fq-item-5 { top: 725px; }
.fq-item-6 { top: 821px; }

/* number badges — cropped glyphs (border+digit baked per theme) */
.fq-badge {
    position: absolute;
    left: 26px; top: 18px;
    width: 47px; height: 47px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.fq-item-1 .fq-badge { top: 21px; }
.fq-badge-1 { background-image: url("https://storage.perfectcdn.com/9edfaa/97d2k9e2gkpg1088.png"); }
.fq-badge-2 { background-image: url("https://storage.perfectcdn.com/9edfaa/gsdwnfi0rgz4fzdf.png"); }
.fq-badge-3 { background-image: url("https://storage.perfectcdn.com/9edfaa/s7kzrcq0abhpkdsf.png"); }
.fq-badge-4 { background-image: url("https://storage.perfectcdn.com/9edfaa/z8ua4wfw2xuzyrqi.png"); }
.fq-badge-5 { background-image: url("https://storage.perfectcdn.com/9edfaa/nlud6ojpgdfm7ndl.png"); }
.fq-badge-6 { background-image: url("https://storage.perfectcdn.com/9edfaa/4a2ctrjfzm2w2tml.png"); }

/* question text */
.fq-q {
    position: absolute;
    left: 97px; top: 33px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--lp-ink);
}
.fq-q-open { top: 32px; font-weight: 700; }

/* answer (12/400 lh22, w743) */
.fq-a {
    position: absolute;
    left: 97px; top: 67px;
    width: 743px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: var(--lp-muted);
}

/* minus bar (open item): 16x3 r1.5 */
.fq-minus {
    position: absolute;
    left: 840px; top: 22px;
    width: 16px; height: 3px;
    border-radius: 1.5px;
    background: var(--fq-bar);
}
/* plus (closed items): 16x16 = h-bar 16x3 + v-bar 3x16 */
.fq-plus {
    position: absolute;
    left: 840px; top: 33px;
    width: 16px; height: 16px;
}
.fq-plus::before,
.fq-plus::after {
    content: "";
    position: absolute;
    border-radius: 1.5px;
    background: var(--fq-bar);
}
.fq-plus::before { left: 0; top: 6px; width: 16px; height: 3px; }
.fq-plus::after  { left: 6px; top: 0; width: 3px; height: 16px; }

/* ---------- decorations ---------- */
.fq-shard-right {
    left: 1244px; top: 315px;
    width: 121px; height: 125px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/p7ih6rgm7l9lzojs.png");
}
.fq-geo {
    left: 197px; top: 946px;
    width: 182px; height: 174px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/e18kzp1fk33risx8.png");
}
.fq-plant {
    left: 1044px; top: 627px;
    width: 396px; height: 637px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/cup0lwwjumua1hc7.png");
}

/* ---------- footer band (y1271-1410 = 139px) ---------- */
.fq-footer { height: 139px; }

/* ============================================================
   LIGHT theme — figma-refs/faq-light/nodes.json
   (panel 1px lower, plant 2px lower, shards shifted)
   ============================================================ */
:root[data-theme="light"] .fq-shard-left {
    top: 81px; height: 76px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/q000rwoqnzfl2x3i.png");
}
:root[data-theme="light"] .fq-panel { top: 207px; }
:root[data-theme="light"] .fq-badge-1 { background-image: url("https://storage.perfectcdn.com/9edfaa/3mwdpmj1alx7zs66.png"); }
:root[data-theme="light"] .fq-badge-2 { background-image: url("https://storage.perfectcdn.com/9edfaa/kk35s3p89o2bg2bf.png"); }
:root[data-theme="light"] .fq-badge-3 { background-image: url("https://storage.perfectcdn.com/9edfaa/4ip3qoi10sudy74u.png"); }
:root[data-theme="light"] .fq-badge-4 { background-image: url("https://storage.perfectcdn.com/9edfaa/2ahjk0gkpfz83lc6.png"); }
:root[data-theme="light"] .fq-badge-5 { background-image: url("https://storage.perfectcdn.com/9edfaa/6kjisdbfcla10nbd.png"); }
:root[data-theme="light"] .fq-badge-6 { background-image: url("https://storage.perfectcdn.com/9edfaa/loljz5m3xzelxp4m.png"); }
:root[data-theme="light"] .fq-shard-right {
    left: 1246px; top: 325px;
    width: 117px; height: 105px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/fww2p8240z9ecrr2.png");
}
:root[data-theme="light"] .fq-geo {
    top: 959px; height: 164px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/72ro57fuyef1de9a.png");
}
:root[data-theme="light"] .fq-plant {
    top: 629px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/qjb0542c0bqo0rjo.png");
}


/* ======== part: c_login.css ======== */
/* ============================================================
   c_login.css — guest login page (login.twig)
   Frame 1440x721. All coordinates = exact Figma CSS px.
   Dark = default; light = [data-theme="light"] overrides at bottom.
   ============================================================ */

:root {
    --lg-ink:      #FFFFFF;   /* heading, link highlights, SSO icons, toggle */
    --lg-muted:    #9298AF;   /* body/placeholder/SSO text */
    --lg-nav:      #9299AF;   /* nav links (frame value, one step off --muted) */
    --lg-line:     #454D63;   /* panel divider + or-lines */
    --lg-panel:    #0B101D;   /* right panel — Figma #111727 @ 60% over #03050C */
    --lg-input:    #0A1220;   /* input bg */
    --lg-sso-bd:   #454D63;   /* SSO button border */
    --lg-input-sh: 0 15px 30px rgba(0,0,0,.05);
}
:root[data-theme="light"] {
    --lg-ink:      #000000;
    --lg-line:     #EBEBFF;
    --lg-panel:    #FCFCFF;   /* #F8F7FE @ 60% over #FFFFFF */
    --lg-input:    #F8F7FE;
    --lg-sso-bd:   #E4E1F4;
    --lg-input-sh: none;
}

.lg {
    width: 1440px;
    height: 721px;
    margin: 0 auto;
    position: relative;
    background: var(--bg);
}
/* small-screen fallback: scale the fixed 1440 canvas down (desktop fidelity is primary) */
@media (max-width: 1439px) {
    .lg { zoom: calc(100vw / 1440); }
}

/* ---------- right panel (x731-1440) + illustration ---------- */
.lg-panel {
    position: absolute;
    left: 731px; top: 0;
    width: 709px; height: 721px;
    background: var(--lg-panel);
    border-left: 1px solid var(--lg-line);
    box-sizing: border-box;
}
.lg-art {
    position: absolute;
    left: 732px; top: 64px;
    width: 708px; height: 657px;
    background: url("https://storage.perfectcdn.com/9edfaa/fnat4k2zct28z3pn.png") no-repeat;
    background-size: 100% 100%;
}

/* ---------- header: logo / nav / theme toggle ---------- */
.lg-logo {
    position: absolute;
    left: 158px; top: 12px;   /* glyph lands at x165 y20 (8px crop padding) */
    width: 190px; height: 58px;
    background: url("https://storage.perfectcdn.com/9edfaa/0kpnejslluzy46h8.png") no-repeat;
    background-size: 100% 100%;
}
.lg-nav {
    position: absolute;
    left: 824px; top: 30px;
    display: flex;
    gap: 39px;
    font-size: 14px;
    line-height: 28px;
}
.lg-nav-link { color: var(--lg-nav); font-weight: 400; }
.lg-theme-toggle {
    position: absolute;
    left: 1198px; top: 29px;
    border-color: var(--lg-ink);
    color: var(--lg-ink);
}
.lg-tt {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* moon frame (1205,35) 18x19 → padding-box (6,5) */
.lg-tt-moon {
    left: 6px; top: 5px;
    width: 18px; height: 19px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/wqju5gpdzaxjlboh.png");
}
.lg-tt-sun { display: none; }

/* ---------- left column: heading + form ---------- */
.lg-h1 {
    position: absolute;
    left: 165px; top: 156px;
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 45px;
    color: var(--lg-ink);
}
.lg-sub {
    position: absolute;
    left: 165px; top: 203px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--lg-muted);
}
.lg-register { color: var(--lg-ink); font-weight: 600; }

.lg-input {
    position: absolute;
    left: 165px;
    width: 504px; height: 49px;
    border: 0;
    border-radius: 5px;
    background: var(--lg-input);
    box-shadow: var(--lg-input-sh);
    color: var(--lg-ink);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    padding: 0 28px;
    outline: none;
    box-sizing: border-box;
}
.lg-input::placeholder { color: var(--lg-muted); opacity: 1; }
.lg-input:focus { box-shadow: 0 0 0 1px var(--gold); }
.lg-in-email { top: 249px; }
.lg-in-pass  { top: 308px; }

/* remember checkbox y393 — violet 18x18 + white tick */
.lg-agree {
    position: absolute;
    left: 165px; top: 393px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 12px;
    line-height: 13.5px;
    color: var(--lg-muted);
}
.lg-agree input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.lg-agree-box {
    width: 18px; height: 18px;
    flex: none;
    border-radius: 3px;
    border: 1px solid #8B8B8B;
    background: var(--violet);
    display: grid;
    place-items: center;
    box-sizing: border-box;
}
.lg-agree-box svg { width: 8px; height: 6px; }
.lg-agree input:not(:checked) + .lg-agree-box { background: transparent; }
.lg-agree-text { font-weight: 400; }
.lg-agree-text a { color: var(--lg-ink); font-weight: 600; }

/* gold submit y433, 156x55 — frame renders the 1px stroke invisible: borderless */
.lg-btn {
    position: absolute;
    left: 165px; top: 433px;
    width: 156px; height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5px;
    background: var(--gold);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
    box-sizing: border-box;
}

/* ---------- Or divider (text y520, lines y526) ---------- */
.lg-or {
    position: absolute;
    left: 165px; top: 520px;
    width: 481px; height: 12px;
    display: flex;
    align-items: center;
}
.lg-or-line { height: 1px; background: var(--lg-line); flex: 1; transform: translateY(-0.5px); }
.lg-or-text {
    margin: 0 11px;
    font-size: 14px;
    line-height: 12px;
    color: var(--lg-muted);
}

/* ---------- SSO buttons y548 ---------- */
.lg-sso {
    position: absolute;
    top: 548px;
    width: 235px; height: 55px;
    border: 1px solid var(--lg-sso-bd);
    border-radius: 5px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 52px;   /* +1px border → label lands frame x218/464 */
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: var(--lg-muted);
}
.lg-sso-ico {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* google glyph frame (186,565) 21x21 → padding-box (20,16) */
.lg-ico-g {
    left: 20px; top: 16px;
    width: 21px; height: 21px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/okzcxlhl44657lcw.png");
}
/* facebook glyph frame (437,565.5) 11x21 → padding-box (25,16.5) */
.lg-ico-f {
    left: 25px; top: 16.5px;
    width: 11px; height: 21px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/kt2raoo92w34b885.png");
}
.lg-sso-google { left: 165px; }
.lg-sso-fb { left: 411px; }

/* ============================================================
   LIGHT THEME — shifted positions + art/logo/SSO glyph swaps
   ============================================================ */
:root[data-theme="light"] .lg-logo { background-image: url("https://storage.perfectcdn.com/9edfaa/206677m9zd3cpora.png"); }
:root[data-theme="light"] .lg-art  { background-image: url("https://storage.perfectcdn.com/9edfaa/67ckm0uk5owltwyt.png"); }
:root[data-theme="light"] .lg-ico-g { background-image: url("https://storage.perfectcdn.com/9edfaa/9qwk6ktdywi7btc9.png"); }
:root[data-theme="light"] .lg-ico-f { background-image: url("https://storage.perfectcdn.com/9edfaa/e6y2u9w9iquqt1mx.png"); }
:root[data-theme="light"] .lg-nav  { left: 817px; top: 27px; }
:root[data-theme="light"] .lg-theme-toggle { top: 26px; }
:root[data-theme="light"] .lg-tt-moon { display: none; }
/* sun frame (1246,29) 24x25 → padding-box (47,2); sits right in the light frame */
:root[data-theme="light"] .lg-tt-sun {
    display: block;
    left: 47px; top: 2px;
    width: 24px; height: 25px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/s9f4pdq9ss2k6f56.png");
}


/* ======== part: c_massorder.css ======== */
/* ============================================================
   MASSORDER page — spec: figma-refs/specs/mass-order-dark.spec.txt
   Layout (1x px on 1440 frame, content origin x345):
   title y74 (30/600) · subtitle y126 (12/400 #9298AF lh22, full lorem) ·
   card y192 573x421 r20 bg #060912 border #131721 · label y228 x391
   (14/400 #9298AF) · orders textarea y258 x380 477x223 r5 bg #020307 ·
   submit y513 x380 156x55 r5 #FFCE2E, borderless (stroke visible:false), text 14/600 #FFF.
   ============================================================ */

/* Title — frame y74 sits 16px up into the topbar band */
.mo-title {
    margin-top: -16px;
    line-height: 45px;
}

/* Subtitle — full lorem line @ y126 (7px under the title box) */
.mo-sub {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 22px;
    font-weight: 400;
    color: #9298AF; /* Figma-verbatim in both themes */
}

/* ---- Card (y192, 573x421 r20 — radius from .card token) ---- */
.mo-card {
    width: 573px;
    height: 421px;
    margin-top: 44px; /* subtitle bottom y148 → card top y192 */
    background: #060912;
    border-color: #131721;
    padding: 35px 0 0 33px; /* +1px border → content origin lands on frame x380/y228 */
}

/* Label "One order per line in format" — @ x391 (11px right of textarea edge) */
.mo-label {
    display: block;
    margin: 0 0 18px 11px; /* 18px gap → textarea top lands on frame y258 */
    font-size: 14px;
    line-height: 12px;
    font-weight: 400;
    color: #9298AF; /* Figma-verbatim in both themes */
}

/* Orders textarea (y258, 477x223 r5) */
.mo-orders {
    display: block;
    width: 477px;
    height: 223px;
    padding: 16px 20px; /* no Figma text run to measure — comfortable inner pad */
    border: 0;
    border-radius: 5px;
    background: #020307;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #FFFFFF;
    outline: none;
}

/* Submit (y513, 156x55 r5, gold) */
.mo-submit {
    margin-top: 32px; /* textarea bottom y481 → button top y513 */
    width: 156px;
    height: 55px;
    padding: 0;
    border: 0; /* Figma stroke exists but visible:false → no border renders */
    border-radius: 5px;
    background: var(--gold);
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
    color: #FFFFFF; /* Figma-verbatim in both themes */
}

/* ============================================================
   LIGHT theme — figma-refs/mass-order-light/nodes.json
   ============================================================ */
[data-theme="light"] .mo-card {
    background: #FDFCFE;
    border-color: #EBEBFF;
}
[data-theme="light"] .mo-orders {
    background: #FFFFFF;
    color: #000000; /* tickets-page convention for light inputs */
}

/* Corner wireframe polyhedron bleeding off bottom-right (frame x1150-1440, y500-721) */
.mo-br-poly {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 290px;
    height: 221px;
    background: url('https://storage.perfectcdn.com/9edfaa/h5bdw5in59ziblq7.png') no-repeat;
    background-size: 290px 221px;
    pointer-events: none;
    z-index: -1;
}
[data-theme="light"] .mo-br-poly { background-image: url('https://storage.perfectcdn.com/9edfaa/4sdp0zl4p8y1bhbp.png'); }


/* ======== part: c_neworder.css ======== */
/* ============================================================
   NEWORDER page — spec: figma-refs/new-order-unselected-dark (+ selected state)
   Layout (1x px on 1440 frame, content origin x345):
   title y74 (30/600) · stat cards y141: 277x114 @x345 + 242x114 @x642
   (inner 252x91 @+12/+11 and 219x91 @+11/+11, tiles 43x43 r10, labels 14/400
   #9298AF, values 18/600) · form card 539x436 @x345 y285 bg #060912 border
   #131721 r20-top · fields 454x49 r5 @x386, pitch 59 from y322 · terms y565 ·
   submit 156x55 y619 · info card 465x436 @x914, cells 404x49 / 197x49 pairs,
   pitch 58 from y327. Form+info cards: corners r20 top / r0 bottom.
   ============================================================ */

/* Title — frame y74 sits 16px up into the topbar band */
.no-title {
    margin-top: -16px;
    line-height: 45px;
}

/* ---- Stat cards (y141, 277 + 242, gap 20) ---- */
.no-stats {
    display: flex;
    gap: 20px;
    margin-top: 22px;
}
.no-stat {
    border: 1px solid rgba(68, 77, 98, 0.4); /* Figma: stroke #444D62, node opacity .4 */
    border-radius: 20px;
}
.no-stat-a { width: 277px; height: 114px; padding: 10px 12px 11px 11px; } /* +1px borders → inner @ +12,+11 */
.no-stat-b { width: 242px; height: 114px; padding: 10px 11px 11px 10px; } /* +1px borders → inner @ +11,+11 */
.no-stat-in {
    width: 100%;
    height: 100%;
    border: 1px solid #444D62; /* Figma-verbatim inner stroke */
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding-left: 14px; /* 1 border + 14 → tile at +15 from inner card */
}
.no-stat-ico {
    width: 43px;
    height: 43px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
}
.no-stat-ico-balance { background: linear-gradient(143deg, #FF7FB1, #ED2D60); }
.no-stat-ico-orders  { background: linear-gradient(300deg, #774DFA, #A398FF); }
.no-stat-ico svg { width: 21px; height: 21px; }
.no-stat-txt { margin-left: 13px; }
.no-stat-b .no-stat-txt { margin-left: 16px; } /* Figma nudge on the orders card */
.no-stat-label {
    display: block;
    font-size: 14px;
    line-height: 19px;
    font-weight: 400;
    color: #9298AF; /* Figma-verbatim in both themes */
}
.no-stat-value {
    display: block;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    color: var(--text);
}

/* ---- Cards grid (form 539 + info 465, gap 30, y285) ---- */
.no-grid {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}
.no-card {
    background: #060912;
    border: 1px solid #131721;
    border-radius: 20px 20px 0 0; /* nodes.json: corners [20,20,0,0] */
}
.no-form-card {
    width: 539px;
    height: 436px;
    padding: 36px 40px 0; /* +1px border → first field lands on frame x386/y322 */
}
.no-info-card {
    width: 465px;
    height: 436px;
    padding: 41px 29px 0 30px; /* +1px border → first cell lands on frame x945/y327 */
}

/* ---- Form fields (454x49 r5, pitch 59) ---- */
.no-field {
    position: relative;
    width: 454px;
    height: 49px;
    border-radius: 5px;
    margin: 0 0 10px;
}
.no-field-category { background: #010307; }
.no-field-service  { background: #020307; }
.no-field-link {
    background: #0A1220;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05); /* Figma effect, verbatim */
}
.no-field-charge {
    background: transparent;
    border: 1px solid #444D62;
    margin-bottom: 0;
    --cut: #060912; /* card bg behind the transparent field (wallet-glyph knockout) */
}

/* Icon tile 32x32 r8 @ +9, centered; glyph color = tile color at full alpha */
.no-tile {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(37, 48, 76, 0.1); /* Figma: fill #25304C, node opacity .1 */
    color: #25304C;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.no-field-category .no-tile svg { width: 16px; height: 16px; }
.no-field-service  .no-tile svg { width: 17.3px; height: 16.4px; }
.no-field-charge   .no-tile svg { width: 17px; height: 12.75px; }
/* Link (active): tile baked into ip_link.svg, its own #38425B family */
.no-field-link .no-tile {
    background: transparent;
    border-radius: 0;
    color: #38425B;
}
.no-field-link .no-tile svg { width: 32px; height: 32px; }

/* Floating label / placeholder text @ +52 */
.no-label {
    position: absolute;
    left: 52px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    color: #9298AF; /* Figma-verbatim in both themes */
    pointer-events: none;
}
/* Native select: functional but invisible — PP's data-select JS owns the widget */
.no-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 49px;
    opacity: 0;
    cursor: pointer;
}
.no-caret {
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 8px;
    color: var(--text); /* white dark / black light — Figma-verbatim */
    pointer-events: none;
}

/* Text inputs (Link mock + Charge) */
.no-input {
    width: 100%;
    height: 49px;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0 16px 0 52px;
    font-family: inherit;
    font-size: 12px;
    line-height: 49px;
    font-weight: 400;
    color: var(--text);
}
.no-field-link .no-input::placeholder   { color: var(--text); font-weight: 600; opacity: 1; }
.no-field-charge .no-input::placeholder { color: var(--text); font-weight: 400; opacity: 1; }

/* ---- Terms (y565: box 16x16 r4 #7D57FB, text @ +25) ---- */
.no-terms { margin: 17px 0 0; }
.no-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    cursor: pointer;
}
.no-check {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #7D57FB;
    background: transparent;
    margin: 0;
    padding: 0;
    flex: none;
    cursor: pointer;
}
.no-check:checked {
    background: #7D57FB url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 7"><path d="M1 3.6L3.3 5.9L7.9 1.2" stroke="%23FDFCFE" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>') center / 9px 7px no-repeat;
}
.no-terms-text {
    margin-top: 1px;
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    color: #9298AF; /* Figma-verbatim in both themes */
}
/* "Terms of Service" segment: 600 var(--text) per Figma characterStyleOverrides */
.no-terms-text a { color: var(--text); font-weight: 600; }

/* ---- Submit (y619, 156x55 r5 #FFCE2E, no border — Figma stroke is visible:false, text 14/600 #FFF) ---- */
.no-submit {
    margin-top: 38px;
    width: 156px;
    height: 55px;
    border-radius: 5px;
    background: #FFCE2E;
    border: 0;
    padding: 0;
    font-size: 14px;
    line-height: 12px;
    font-weight: 600;
    color: #FFFFFF; /* Figma-verbatim in both themes */
}

/* ---- Info card cells (404x49 full + 197x49 pairs, pitch 58) ---- */
.no-cell {
    height: 49px;
    border-radius: 5px;
    background: #020307;
    display: flex;
    align-items: center;
    padding-left: 9px;
}
.no-cell-full { width: 404px; margin-bottom: 9px; }
.no-cell-row { display: flex; gap: 10px; margin-bottom: 9px; }
.no-cell-row .no-cell { width: 197px; }
.no-cell-desc { margin-bottom: 0; }
.no-cell-ico {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    color: #25304C; /* ip_* svgs carry their own 10%-alpha tile */
}
.no-cell-ico-desc {
    width: 34.5px; /* Figma Rectangle 260: 34.5x32 */
    background: rgba(37, 48, 76, 0.1);
    border-radius: 8px;
}
.no-cell-ico-desc svg { width: 14.1px; height: 16px; }
.no-cell-label {
    margin-left: 13px; /* 9 + 32 + 13 → label at cell offset +54 */
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    color: #9298AF; /* Figma-verbatim in both themes */
}
.no-cell-desc .no-cell-label { margin-left: 10.5px; }

/* ============================================================
   LIGHT theme — figma-refs/new-order-unselected-light/nodes.json
   Figma light: primary text/carets are #000000 verbatim (not --text).
   ============================================================ */
[data-theme="light"] .no-title,
[data-theme="light"] .no-stat-value,
[data-theme="light"] .no-caret,
[data-theme="light"] .no-input,
[data-theme="light"] .no-terms-text a {
    color: #000000;
}
[data-theme="light"] .no-field-link .no-input::placeholder,
[data-theme="light"] .no-field-charge .no-input::placeholder { color: #000000; }
[data-theme="light"] .no-stat {
    background: #FDFCFE;
    border-color: #EBEBFF;
}
[data-theme="light"] .no-stat-in { border-color: #EBEBFF; }
[data-theme="light"] .no-card {
    background: #FDFCFE;
    border-color: #EBEBFF;
}
[data-theme="light"] .no-field-category,
[data-theme="light"] .no-field-service,
[data-theme="light"] .no-field-link { background: #FFFFFF; }
[data-theme="light"] .no-field-link { box-shadow: 0 15px 30px rgba(45, 44, 136, 0.05); }
[data-theme="light"] .no-field-charge {
    background: #F3F3FF;
    border-color: transparent;
    --cut: #FFFFFF; /* charge tile is solid white in light */
}
[data-theme="light"] .no-tile {
    background: rgba(195, 195, 255, 0.1);
    color: #C3C3FF;
}
[data-theme="light"] .no-field-link .no-tile {
    background: transparent;
    color: #C3C3FF;
}
[data-theme="light"] .no-field-charge .no-tile {
    background: #FFFFFF;
    color: #C3C3FF;
}
[data-theme="light"] .no-cell { background: #FFFFFF; }
[data-theme="light"] .no-cell-ico { color: #C3C3FF; }
[data-theme="light"] .no-cell-ico-desc { background: rgba(195, 195, 255, 0.1); }


/* ======== part: c_newpage.css ======== */
/* ======== part: c_newpage.css ======== */
/* newpage (generic CMS page) — design-system idiom, no Figma frame. */
.np-card {
    margin-top: 34px;
    padding: 33px 41px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.np-prose { color: var(--muted); font-size: 14px; line-height: 1.7; }
.np-prose h1, .np-prose h2, .np-prose h3 { color: var(--text); font-weight: 600; }
.np-prose a { color: var(--gold); }
.np-empty { margin: 0; color: var(--muted); font-size: 14px; }


/* ======== part: c_notifications.css ======== */
/* ======== part: c_notifications.css ======== */
/* notifications — updates-page table language, no Figma frame. */
.nt-table {
    margin-top: 34px;
    border-top: 1px solid var(--border);
}
.nt-row {
    display: flex;
    align-items: center;
    gap: 19px;
    min-height: 60px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.nt-row:nth-child(odd) { background: var(--row-a); }
.nt-ico {
    width: 35px;
    height: 35px;
    flex: none;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--icon-off);
    background: color-mix(in srgb, var(--icon-off) 12%, transparent);
}
.nt-ico svg { width: 17px; height: 17px; }
.nt-text { color: var(--text); flex: 1; }
.nt-date { color: var(--muted); font-size: 12px; flex: none; }
.nt-row--empty .nt-text { color: var(--muted); }


/* ======== part: c_orders.css ======== */
/* ============================================================
   ORDERS page — spec: figma-refs/specs/orders-dark.spec.txt
   Layout (1x px on 1440 frame, content origin x345):
   title y74 (30/600) · bar y135 h48: search 484x48, filter 265x48
   (gap 37), r5 #0A1220 + drop 0/15/30 · New Order tile 36x36 r8
   (gap 34) · head labels y230 (12/400) · rows y265+80n, top
   borders #454D63, odd rows #060B18, cells centered, dividers
   1x30 @ top 25 · pills h30 r15, status color text on 10% bg ·
   bottom line 24px wider than rows.
   ============================================================ */

/* Title — frame y74 sits 16px up into the topbar band */
.orders-title {
    margin-top: -16px;
    line-height: 45px;
}

/* ---- Bar (y135): search + filter + New Order ---- */
.orders-bar {
    display: flex;
    align-items: center;
    margin-top: 16px;
    height: 48px;
}
.orders-search,
.orders-filter {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    border-radius: 5px;
    background: #0A1220;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .05);
}
.orders-search { width: 484px; flex: none; }
.orders-filter { width: 265px; flex: none; margin-left: 37px; }
.orders-search input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 46px 0 22px; /* placeholder lands at frame x367 */
    border: 0;
    background: transparent;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    outline: none;
}
.orders-search input::placeholder {
    color: #9298AF; /* Figma-verbatim in both themes */
    opacity: 1;
}
.orders-filter-label {
    padding-left: 22px; /* "All" at frame x888 */
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim in both themes */
}
.orders-ico {
    position: absolute;
    right: 23px; /* magnifier right edge at frame x806 */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--text);
}
.orders-ico-caret { right: 20px; } /* chevron right edge at frame x1111 */

/* New Order link — 36x36 r8 gradient tile + 14/600 label */
.orders-new {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 34px;
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
    color: var(--text);
}
.orders-new-tile {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(300deg, #774DFA, #A398FF);
}

/* ---- Header labels + rows share the 9-col grid (table origin x333) ---- */
.orders-head,
.orders-row {
    display: grid;
    grid-template-columns: 70px 167px 221px 68px 103px 77px 87px 136px 83px;
}
.orders-head,
.orders-table {
    width: 1012px;
    margin-left: -12px; /* table starts at frame x333, 12px left of content */
}
.orders-head {
    margin-top: 47px;      /* labels land at frame y230 */
    padding-bottom: 23px;  /* head bottom = first row border y265 */
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: var(--text);
}

/* Rows: 80px incl. 1px top border; odd rows carry the #060B18 band */
.orders-row {
    height: 80px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim in both themes */
}
.orders-row:nth-child(odd) { background: var(--row-a); }
.orders-row:nth-child(4) { height: 81px; } /* Figma row 4 spans y505–586 → keeps borders at 586/666 */
/* Figma centers row content in the full 80px (border incl.); Chrome centers in the 79px
   content box → rows 2+ render 1px low (row 1 already matches at +26). Nudge back up. */
.orders-row:nth-child(n+2) .orders-cell { transform: translateY(-1px); }
.orders-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
/* 1x30 vertical divider, frame y+26 (25 below the border edge) */
.orders-row .orders-cell + .orders-cell::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25px;
    width: 1px;
    height: 30px;
    background: var(--border);
}
.orders-date { gap: 11px; } /* frame gap between date and time runs */

/* Status pill — 30px r15, status color text on 10% fill (nodes.json opacity .1) */
.orders-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 15px;
    font-weight: 600;
}
.p-pending   { width: 79px;  color: #FFC85E; background: rgba(255, 200, 94, .1); }
.p-progress  { width: 97px;  color: #5ED8FF; background: rgba(94, 216, 255, .1); }
.p-completed { width: 103px; color: #84F182; background: rgba(132, 241, 130, .1); }
.p-partial   { width: 79px;  color: #CB5EFF; background: rgba(203, 94, 255, .1); }
.p-canceled  { width: 103px; color: #FF2C2C; background: rgba(255, 44, 44, .1); }

/* Bottom line: Figma draws it 1036 wide vs 1012 rows → +24 past the table */
.orders-table { position: relative; }
.orders-table::after {
    content: "";
    position: absolute;
    left: 0;
    width: calc(100% + 24px);
    height: 1px;
    bottom: -1px; /* line occupies frame y666–667, just past the last row edge */
    background: var(--border);
}

/* ============================================================
   LIGHT theme — figma-refs/orders-light/nodes.json
   ============================================================ */
[data-theme="light"] .orders-search,
[data-theme="light"] .orders-filter {
    background: #FFFFFF;
    box-shadow: 0 15px 30px rgba(45, 44, 136, .05);
}
/* Figma light: primary text/icons are #000000 verbatim (not --text) */
[data-theme="light"] .orders-title,
[data-theme="light"] .orders-head,
[data-theme="light"] .orders-new,
[data-theme="light"] .orders-ico,
[data-theme="light"] .orders-search input {
    color: #000000;
}
[data-theme="light"] .orders-row { border-color: #EBEBFF; }
[data-theme="light"] .orders-row:nth-child(odd) { background: #FBFAFE; }
[data-theme="light"] .orders-row .orders-cell + .orders-cell::before { background: #C3C3D9; }
[data-theme="light"] .orders-table::after { background: #EBEBFF; }


/* ======== part: c_resetpassword.css ======== */
/* ============================================================
   RESETPASSWORD page (guest) — spec: figma-refs/reset-password-dark/light
   Guest page: layout renders content full-width, so the twig draws the full
   shell (sidebar + topbar mirror layout.twig) — only page deltas live here.
   Frame 1440x721: sidebar nav y141 (no active item, 10 rows x41) · divider
   y637 · updates y648 · content x345: title y74 (30/600) · sub y126
   (12/400 #9298AF) · card x346 y178 509x193 r20 · email input (34,22)
   436x49 r5 · Send (34,98) 126x55 r5 gold (frame renders its 1px stroke
   invisible → borderless), 14/600 #FFF.
   Logo / nav icons / toggle glyphs / shards are frame crops (assets/rp-*).
   ============================================================ */

:root {
    --rp-card-bg:    #060912;
    --rp-card-bd:    #131721;
    --rp-field-bg:   #020307;
}
:root[data-theme="light"] {
    --rp-card-bg:    #FCFCFE;   /* frame renders (252,252,254) */
    --rp-card-bd:    #EBEBFF;
    --rp-field-bg:   #FFFFFF;
}

/* ---- Shell deltas vs base (this frame's sidebar has no active item) ---- */
.rp-shell .side-nav { margin-top: 67px; } /* first row lands frame y141 (74 logo + 67) */
.rp-shell .side-divider { margin-bottom: 10px; } /* divider y637 → updates row y648 */
.rp-shell .side-foot-spacer { height: 32px; }

/* ---- Sidebar surfaces (frame renders the panel fill @60%: #0B101D / #FBFAFE) ---- */
.rp-shell .sidebar { background: #0B101D; }
:root[data-theme="light"] .rp-shell .sidebar { background: #FBFAFE; border-right-color: #EBEBFF; }
:root[data-theme="light"] .rp-shell .side-divider { background: #EBEBFF; }
/* nav labels are #9298AF in BOTH themes (frame-verbatim) */
:root[data-theme="light"] .rp-shell .nav-item { color: #9298AF; }

/* ---- Sidebar logo — frame crop (60,32) 172x42.5 ---- */
.rp-shell .side-logo { background: url("https://storage.perfectcdn.com/9edfaa/smzkucj5r6e00m1p.png") no-repeat 60px 32px / 172px 42.5px; }
:root[data-theme="light"] .rp-shell .side-logo { background-image: url("https://storage.perfectcdn.com/9edfaa/3wf21r692tgjp6sa.png"); }

/* ---- Sidebar nav icons — frame crops, centered in the 20px .nav-ico box ---- */
.rp-shell .nav-ico i { display: block; background-repeat: no-repeat; background-size: 100% 100%; }
.rp-g-dashboard  { width: 16px;   height: 16px;   background-image: url("https://storage.perfectcdn.com/9edfaa/7temxdr4cb58zgdq.png"); }
.rp-g-orders     { width: 19.5px; height: 19.5px; background-image: url("https://storage.perfectcdn.com/9edfaa/4rhigpskz5yzxxh0.png"); }
.rp-g-neworder   { width: 20px;   height: 20px;   background-image: url("https://storage.perfectcdn.com/9edfaa/042uijioql657qgf.png"); }
.rp-g-services   { width: 21px;   height: 20px;   background-image: url("https://storage.perfectcdn.com/9edfaa/e1skf2zuieuxq6be.png"); }
.rp-g-addfunds   { width: 19px;   height: 19px;   background-image: url("https://storage.perfectcdn.com/9edfaa/5yae6qzxpzlyxmtb.png"); }
.rp-g-api        { width: 21px;   height: 21px;   background-image: url("https://storage.perfectcdn.com/9edfaa/rahxka2sd7kdg59i.png"); }
.rp-g-affiliates { width: 21px;   height: 21px;   background-image: url("https://storage.perfectcdn.com/9edfaa/ocsarowuj8wz6n48.png"); }
.rp-g-childpanel { width: 20px;   height: 20px;   background-image: url("https://storage.perfectcdn.com/9edfaa/fz8cikzt4h08tgq1.png"); }
.rp-g-tickets    { width: 22px;   height: 13.5px; background-image: url("https://storage.perfectcdn.com/9edfaa/f0ij0o9walqdrb6b.png"); }
.rp-g-massorder  { width: 20px;   height: 20px;   background-image: url("https://storage.perfectcdn.com/9edfaa/urhok3zw43cffyal.png"); }
.rp-g-updates    { width: 20px;   height: 20px;   background-image: url("https://storage.perfectcdn.com/9edfaa/w8p9fg512p15tbrk.png"); }
:root[data-theme="light"] .rp-g-dashboard  { background-image: url("https://storage.perfectcdn.com/9edfaa/jofb8qll2wm135l4.png"); }
:root[data-theme="light"] .rp-g-orders     { background-image: url("https://storage.perfectcdn.com/9edfaa/iqiuhacgn3ni36jj.png"); }
:root[data-theme="light"] .rp-g-neworder   { background-image: url("https://storage.perfectcdn.com/9edfaa/f35b33rk6ag6cad8.png"); }
:root[data-theme="light"] .rp-g-services   { background-image: url("https://storage.perfectcdn.com/9edfaa/dlfbl7deih3oae7o.png"); }
:root[data-theme="light"] .rp-g-addfunds   { background-image: url("https://storage.perfectcdn.com/9edfaa/560a2erljefsag8l.png"); }
:root[data-theme="light"] .rp-g-api        { background-image: url("https://storage.perfectcdn.com/9edfaa/jehnjwas12dcw354.png"); }
:root[data-theme="light"] .rp-g-affiliates { background-image: url("https://storage.perfectcdn.com/9edfaa/mn5a88cp2g911lob.png"); }
:root[data-theme="light"] .rp-g-childpanel { background-image: url("https://storage.perfectcdn.com/9edfaa/6bqhn2uh3m4thzg8.png"); }
:root[data-theme="light"] .rp-g-tickets    { background-image: url("https://storage.perfectcdn.com/9edfaa/y6ay8effpslic6rf.png"); }
:root[data-theme="light"] .rp-g-massorder  { background-image: url("https://storage.perfectcdn.com/9edfaa/w38behp3d0bjsklp.png"); }
:root[data-theme="light"] .rp-g-updates    { background-image: url("https://storage.perfectcdn.com/9edfaa/qo05ugwc3up7bq4b.png"); }

/* ---- Theme toggle glyphs — frame crops (base pill positions the button) ---- */
.rp-shell .rp-tt {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* moon frame (1069,35) 18x19 → padding-box (6,5) */
.rp-shell .rp-tt-moon {
    left: 6px; top: 5px;
    width: 18px; height: 19px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/mxpk76byo60x7qq8.png");
}
.rp-shell .rp-tt-sun { display: none; }
/* reset-password-light frame omits the toggle; keep it functional, sun right per shared shell pattern */
:root[data-theme="light"] .rp-shell .theme-toggle { border-color: #000000; }
:root[data-theme="light"] .rp-shell .rp-tt-moon { display: none; }
:root[data-theme="light"] .rp-shell .rp-tt-sun {
    display: block;
    left: 47px; top: 2px;
    width: 24px; height: 25px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/o4by0wqtzj40epll.png");
}

/* ---- Topbar cluster — frame: avatar→caret gap 16 (base 10) → toggle x1062, pill x1153 ---- */
.rp-shell .account-chip { gap: 16px; }

/* ---- Balance pill: tinted fill + inner ring (frame inner rect (1161,29) 103x31) ---- */
.rp-shell .balance-pill {
    position: relative;
    gap: 21px;             /* frame: text x1185, caret x1236 */
    background: #13141B;   /* frame renders the fill @ ~6% over page bg */
}
.rp-shell .balance-pill::after {
    content: "";
    position: absolute;
    left: 7px; top: 6px;   /* +1px border → inner ring lands frame (8,7) */
    width: 103px; height: 31px;
    border: 1px solid #FFFFFF;
    border-radius: 19px;
    box-sizing: border-box;
    pointer-events: none;
}
:root[data-theme="light"] .rp-shell .balance-pill { background: #EFEFEF; border-color: #EBEBFF; color: #000000; }
:root[data-theme="light"] .rp-shell .balance-pill::after { border-color: #000000; }

/* ---- Account chip: avatar = frame crop (1298,20) 47x47 (ring + gradient disc + glyph) ---- */
.rp-shell .account-chip .avatar {
    border: 0;
    background: url("https://storage.perfectcdn.com/9edfaa/0fo321d5m752rlak.png") no-repeat;
    background-size: 100% 100%;
}
.rp-shell .account-chip .avatar svg { display: none; }
:root[data-theme="light"] .rp-shell .account-chip .avatar { background-image: url("https://storage.perfectcdn.com/9edfaa/kkjuqkkqkjkbq58x.png"); }
:root[data-theme="light"] .rp-shell .account-chip { color: #000000; }

/* ---- Decorative frame shards (cropped from reset-password frames; .main-relative) ---- */
.rp-shard {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.rp-shard-top    { left: 533px; top: 0;    width: 167px; height: 87.5px; background-image: url("https://storage.perfectcdn.com/9edfaa/hltq968wqum69387.png"); }
.rp-shard-bottom { left: 923px; top: 519px; width: 225px; height: 202px; background-image: url("https://storage.perfectcdn.com/9edfaa/mn1wfqsyeitjruis.png"); }
:root[data-theme="light"] .rp-shard-top    { left: 686px; width: 102px; height: 58px;  background-image: url("https://storage.perfectcdn.com/9edfaa/al6qbh8jbh3awtqk.png"); }
:root[data-theme="light"] .rp-shard-bottom { left: 872px; top: 509px; width: 276px; height: 212px; background-image: url("https://storage.perfectcdn.com/9edfaa/junp4wbl1p2al4py.png"); }

/* ---- Title y74 / sub y126 (12px per frame — base .page-sub is 14px) ---- */
.rp-title {
    margin-top: -16px;
    line-height: 45px;
}
.rp-sub {
    margin-top: 7px;
    font-size: 12px;
    line-height: 22px;
    color: #9298AF; /* Figma-verbatim in both themes */
}

/* ---- Reset card (x346 y178, 509x193 r20) ---- */
.rp-card {
    width: 509px;
    height: 193px;
    margin-top: 30px;
    margin-left: 1px;   /* frame card x346 = content x345 + 1 */
    padding: 21px 0 0 33px; /* +1px borders → content lands frame (34,22) */
    background: var(--rp-card-bg);
    border-color: var(--rp-card-bd);
}

/* Email input (436x49 r5, placeholder 14/400 #9298AF @ +28) — frame has NO shadow */
.rp-input {
    display: block;
    width: 436px;
    height: 49px;
    border: 0;
    border-radius: 5px;
    background: var(--rp-field-bg);
    padding: 0 28px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    outline: none;
    box-sizing: border-box;
}
.rp-input::placeholder { color: #9298AF; opacity: 1; } /* Figma-verbatim both themes */
.rp-input:focus { box-shadow: 0 0 0 1px var(--gold); }

/* Send button (126x55 r5, gold, frame renders the 1px stroke invisible: borderless, 14/600 #FFF) */
.rp-send {
    width: 126px;
    height: 55px;
    margin-top: 27px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: var(--gold);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
}


/* ======== part: c_services.css ======== */
/* ============================================================
   SERVICES page — spec: figma-refs/specs/services-dark.spec.txt
   (+ services-popup-dark for the detail modal)
   Layout (1x px on 1440 frame, content origin x345):
   title y74 (30/600) · tools y135: search 484x48 r5 + filter 265x48
   (gap 37) · table x334 w1036 (margin-left -11): header h35 (12/400),
   cat row h62, rows h130 zebra, cols 48/250/82/103/123/160/270 ·
   modal 1001x544 r20 #FFF centered, overlay rgba(3,5,12,.55).
   ============================================================ */

/* Title — frame y74 sits 16px up into the topbar band */
.svc-title {
    margin-top: -16px;
    line-height: 45px;
}

/* ---- Tools row (y135, h48, r5 cards) ---- */
.svc-tools {
    display: flex;
    margin-top: 16px;
}
.svc-search {
    position: relative;
    width: 484px;
    height: 48px;
    border-radius: 5px;
    background: #0A1220;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}
.svc-search input {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0 50px 0 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    outline: none;
}
.svc-search input::placeholder { color: #9298AF; } /* Figma-verbatim both themes */
.svc-search-ico {
    position: absolute;
    right: 23px; /* magnifier right edge at frame x806 */
    top: 14px;
    color: var(--text);
    pointer-events: none;
}
.svc-filter {
    position: relative;
    display: flex;
    align-items: center;
    width: 265px;
    height: 48px;
    margin-left: 37px;
    padding-left: 22px;
    border-radius: 5px;
    background: #0A1220;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    font-size: 14px;
    font-weight: 400;
    color: #9298AF; /* Figma-verbatim both themes */
}
.svc-filter-caret {
    position: absolute;
    right: 20px;
    top: 19px;
    color: var(--text);
}

/* ---- Table (x334 w1036, header y239) ---- */
.svc-table {
    position: relative;
    width: 1036px;
    margin-left: -11px;
    margin-top: 56px;
}

/* Faux scrollbar (Figma decor): track y274 h401 x1401, thumb h96 #7D57FB */
.svc-scroll {
    position: absolute;
    left: 1067px;
    top: 35px;
    width: 4px;
    height: 401px;
    border-radius: 2px;
    background: #080C19;
}
.svc-scroll::before {
    content: "";
    display: block;
    width: 4px;
    height: 96px;
    border-radius: 3.5px;
    background: #7D57FB;
}

/* Header labels y239 (12/400), underline y274 */
.svc-thead {
    display: flex;
    align-items: flex-start;
    height: 35px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: var(--text);
}
.svc-h-id      { width: 48px;  padding-left: 19px; }
.svc-h-service { width: 250px; padding-left: 19px; }
.svc-h-rate    { width: 82px;  text-align: center; }
.svc-h-min     { width: 103px; text-align: center; }
.svc-h-max     { width: 123px; text-align: center; padding-left: 6px; } /* Figma +3 nudge */
.svc-h-avg     { width: 160px; text-align: center; }
.svc-h-desc    { width: 270px; padding-left: 23px; }

/* Category row (y274-336): YT glyph 19x13 @ +16, label @ +48 */
.svc-cat {
    display: flex;
    align-items: center;
    height: 62px;
    padding-left: 16px;
    border-bottom: 1px solid var(--border);
}
.svc-cat-ico {
    width: 19px;
    height: 13.5px; /* Figma 18.8x13.3 tube glyph, cropped from frame */
    flex: none;
    background: url('https://storage.perfectcdn.com/9edfaa/9qmujchksoxbey00.png') center / contain no-repeat;
}
.svc-cat-name {
    margin-left: 13px;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: var(--text);
}

/* Data rows (h130, zebra on odd rows) */
.svc-row {
    position: relative;
    display: flex;
    height: 130px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 400;
    color: #9298AF;
}
.svc-row:nth-of-type(odd) { background: rgba(6, 11, 24, 0.6); } /* Figma rect #060B18 @ 60% → renders #050913 */

/* Column separators: 1x30 @ top 29, on each cell's right edge */
.svc-cell { position: relative; }
.svc-cell::after {
    content: "";
    position: absolute;
    right: 0;
    top: 29px;
    width: 1px;
    height: 30px;
    background: #454D63;
}
.svc-cell.svc-id::after { background: #C3C3D9; } /* Figma: first sep lighter in dark */
.svc-cell:last-child::after { display: none; }

.svc-id      { width: 48px;  padding: 38px 0 0 19px; line-height: 12px; }
.svc-service { width: 250px; padding: 25px 0 0 19px; }
.svc-rate    { width: 82px;  padding-top: 38px; text-align: center; line-height: 12px; }
.svc-min     { width: 103px; padding-top: 38px; text-align: center; line-height: 12px; }
.svc-max     { width: 123px; padding: 38px 0 0 6px; text-align: center; line-height: 12px; } /* Figma +3 nudge */
.svc-avg     { width: 160px; padding-top: 38px; text-align: center; line-height: 12px; }
.svc-desc    { width: 270px; padding: 16px 0 0 27px; }

.svc-name {
    display: block;
    width: 221px;
    line-height: 18px;
}
.svc-name-narrow { width: 205px; } /* row 3 Figma text box */

.svc-desc-text {
    display: block;
    line-height: 18px;
}
.svc-desc-link {
    display: block;
    width: 64px;
    margin-top: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--text);
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    color: var(--text);
}
.svc-desc-link:hover { text-decoration: none; }
/* Row 3 link is #000000 verbatim in BOTH themes (invisible on dark row — Figma-faithful) */
.svc-link-dark {
    color: #000000;
    border-bottom-color: #000000;
}

/* Row 3 bottom dissolve — overlays the cells too: frame fades row bg AND text,
   solid to y630, linear to page bg by y666, page bg after (measured on frame) */
.svc-band {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(3, 5, 12, 0) 34px, #03050C 70px);
    pointer-events: none;
}

/* ---- Detail modal (figma-refs/services-popup-dark — identical both themes) ---- */
.svc-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
}
.svc-modal.open { display: block; }
.svc-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 12, 0.55);
}
.svc-modal-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1001px;
    height: 544px;
    border-radius: 20px;
    background: #FFFFFF;
    padding: 43px 0 0 60px;
}
.svc-modal-x {
    position: absolute;
    left: 943px;
    top: 34px;
    width: 17px;
    height: 17px;
    background: none;
    border: 0;
    padding: 0;
}
.svc-modal-x::before,
.svc-modal-x::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px; /* frame glyph 16.5x16.5 */
    height: 4px;
    margin: -2px 0 0 -11px;
    background: #000000;
}
.svc-modal-x::before { transform: rotate(45deg); }
.svc-modal-x::after  { transform: rotate(135deg); }

.svc-modal-head {
    display: flex;
    align-items: center;
    height: 56px;
}
.svc-modal-id {
    margin-right: 27px;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    color: #000000;
}
.svc-modal-title {
    margin: 0;
    max-width: 461px;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: #000000;
}

/* Stat cards y209: 160x86 r20, gap 13 */
.svc-modal-stats {
    display: flex;
    gap: 13px;
    margin-top: 21px;
}
.svc-stat {
    width: 160px;
    height: 86px;
    flex: none;
    background: #FDFCFE;
    border: 1px solid #EBEBFF;
    border-radius: 20px;
    padding: 21px 0 0 22px;
}
.svc-stat-label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: #000000;
}
.svc-stat-line {
    display: block;
    width: 121px;
    height: 1px;
    margin-top: 10px;
    background: #EBEBFF;
}
.svc-stat-value {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 18px;
    color: #9298AF;
}

/* Description panel y315: 679x274 r20 */
.svc-panel-desc {
    width: 679px;
    height: 274px;
    margin-top: 20px;
    background: #FDFCFE;
    border: 1px solid #EBEBFF;
    border-radius: 20px;
    padding: 27px 0 0 23px;
}
.svc-panel-label {
    display: block;
    font-size: 12px;
    line-height: 12px;
    color: #000000;
}
.svc-panel-line {
    display: block;
    width: 303px;
    height: 1px;
    margin-top: 10px;
    background: #EBEBFF;
}
.svc-panel-text {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: #9298AF;
}
.svc-mt-12 { margin-top: 12px; }
.svc-mt-11 { margin-top: 11px; }
.svc-mt-16 { margin-top: 16px; }

/* Art panel docked bottom-right (crop incl. its 1px border + rounded corners) */
.svc-panel-art {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 294px;
    height: 274px;
    background: url("https://storage.perfectcdn.com/9edfaa/azfg25yus93obyif.png") no-repeat;
    background-size: 294px 274px;
}

/* ============================================================
   LIGHT theme — figma-refs/services-light/nodes.json
   Figma light: primary text/icons are #000000 verbatim (not --text).
   ============================================================ */
[data-theme="light"] .svc-search,
[data-theme="light"] .svc-filter {
    background: #FFFFFF;
    box-shadow: 0 15px 30px rgba(45, 44, 136, 0.05);
}
[data-theme="light"] .svc-title,
[data-theme="light"] .svc-thead,
[data-theme="light"] .svc-cat-name,
[data-theme="light"] .svc-search input,
[data-theme="light"] .svc-search-ico,
[data-theme="light"] .svc-filter-caret,
[data-theme="light"] .svc-desc-link {
    color: #000000;
}
[data-theme="light"] .svc-desc-link { border-bottom-color: #000000; }
[data-theme="light"] .svc-cat-ico { background-image: url('https://storage.perfectcdn.com/9edfaa/lkcaj1xjq9jd2a1f.png'); }
[data-theme="light"] .svc-thead,
[data-theme="light"] .svc-cat,
[data-theme="light"] .svc-row {
    border-bottom-color: #EBEBFF;
}
[data-theme="light"] .svc-row:nth-of-type(odd) { background: rgba(251, 250, 254, 0.6); } /* #FBFAFE @ 60% → renders #FCFCFE */
[data-theme="light"] .svc-cell::after { background: #C3C3D9; } /* all seps light in light */
[data-theme="light"] .svc-band {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 34px, #FFFFFF 70px);
}
[data-theme="light"] .svc-scroll { background: #EBEBFF; }
[data-theme="light"] .svc-modal-overlay { background: rgba(0, 0, 0, 0.55); }
[data-theme="light"] .svc-panel-art {
    background-image: url("https://storage.perfectcdn.com/9edfaa/xe8f6ucauk1oca97.png");
}


/* ======== part: c_signin.css ======== */
/* ============================================================
   c_signin.css — guest marketing landing (signin.twig)
   Frame 1440x3902. All coordinates = exact Figma CSS px.
   Dark = default; light = [data-theme="light"] overrides at bottom.
   ============================================================ */

:root {
    --lp-ink:        #FFFFFF;   /* headings, strong text */
    --lp-strong:     #FFFFFF;   /* icon glyphs, outline-btn borders */
    --lp-muted:      #9298AF;   /* body/secondary text */
    --lp-line:       #454D63;   /* section divider lines */
    --lp-card:       #03050C;   /* why-choose card bg */
    --lp-surface:    #131723;   /* why-choose container + reviews bg */
    --lp-input:      #1C212E;   /* form input bg */
    --lp-stats:      #1C212E;   /* stats pill bg */
    --lp-review-bg:  transparent;
    --lp-review-bd:  #454D63;
    --lp-stat-div:   #454D63;
    --lp-sso-bd:     #454D63;
    --lp-stats-shadow: 0 15px 30px rgba(0,0,0,.05);
}
:root[data-theme="light"] {
    --lp-ink:        #000000;
    --lp-strong:     #000000;
    --lp-line:       #EBEBFF;
    --lp-card:       #FFFFFF;
    --lp-surface:    #F8F7FE;
    --lp-input:      #F8F7FE;
    --lp-stats:      #FFFFFF;
    --lp-review-bg:  #FFFFFF;
    --lp-review-bd:  transparent;
    --lp-stat-div:   #D5D5FF;
    --lp-sso-bd:     #E4E1F4;
    --lp-stats-shadow: 0 40px 40px rgba(45,44,136,.10);
}

.lp {
    width: 1440px;
    margin: 0 auto;
    position: relative;
    background: var(--bg);
}
/* small-screen fallback: scale the fixed 1440 canvas down (desktop fidelity is primary) */
@media (max-width: 1439px) {
    .lp { zoom: calc(100vw / 1440); }
}

/* theme-swapped art (decorative) */
.lp-art { position: absolute; background-repeat: no-repeat; background-size: 100% 100%; }

/* ---------- shared buttons ---------- */
.lp-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
    box-sizing: border-box;
}
.lp-btn-outline {
    border: 1px solid var(--lp-strong);
    color: var(--lp-ink);
    background: transparent;
}
.lp-btn-gold {
    background: var(--gold);
    border: 0;   /* Figma: black stroke is disabled on gold buttons */
    color: #FFFFFF;
}

/* ---------- logo (header + footer) ---------- */
.lp-logo {
    position: absolute;
    width: 190px;
    height: 58px;
    background: url("https://storage.perfectcdn.com/9edfaa/0kpnejslluzy46h8.png") no-repeat;
    background-size: 100% 100%;
}

/* ============================================================
   HEADER (y0-88)
   ============================================================ */
.lp-header {
    position: relative;
    height: 88px;
    border-bottom: 1px solid var(--lp-line);
}
.lp-header .lp-logo { left: 158px; top: 12px; }
.lp-nav {
    position: absolute;
    left: 434px;
    top: 27px;
    display: flex;
    gap: 32px;
    font-size: 14px;
    line-height: 28px;
}
.lp-nav-link { color: var(--lp-muted); font-weight: 400; }
.lp-nav-link.is-active { color: var(--lp-ink); font-weight: 500; }
.lp-nav-underline {
    position: absolute;
    left: 427px;
    top: 84px;
    width: 56px;
    height: 5px;
    background: url("https://storage.perfectcdn.com/9edfaa/pwfam9wa6l6tfoyj.png") no-repeat;
    background-size: 100% 100%;
}
.lp-header .lp-btn-outline { left: 874px; top: 14px; width: 136px; }
.lp-header .lp-btn-gold    { left: 1024px; top: 14px; width: 156px; }
.lp-theme-toggle {
    position: absolute;
    left: 1198px;
    top: 26px;
    border: 0;
    background: url("https://storage.perfectcdn.com/9edfaa/2nidoip2tmdrl0os.png") no-repeat;
    background-size: 100% 100%;
}

/* ============================================================
   HERO (y88-721)
   ============================================================ */
.lp-hero {
    position: relative;
    height: 633px;
    overflow: hidden;
}
.lp-hero-art {
    left: 490px; top: 0;
    width: 950px; height: 632px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/ew07qajf40mlsrxo.png");
}
.lp-shard-hero-left {
    left: 0; top: 77px;
    width: 46px; height: 80px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/fka36bk322i1d8rl.png");
}
.lp-h1 {
    position: absolute;
    left: 165px; top: 153px;
    width: 503px;
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 54px;
    color: var(--lp-ink);
}
.lp-hero-sub {
    position: absolute;
    left: 165px; top: 279px;
    width: 470px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--lp-muted);
}
.lp-hero-cta { left: 165px; top: 387px; width: 160px; }

/* ============================================================
   STATS (pill y721-911, overlaps why-choose top)
   ============================================================ */
.lp-stats {
    position: relative;
    height: 102px;
    z-index: 5;
}
.lp-stats-pill {
    position: absolute;
    left: 216px; top: 0;
    width: 1008px; height: 190px;
    border-radius: 95px;
    background: var(--lp-stats);
    box-shadow: var(--lp-stats-shadow);
}
.lp-stat-tile {
    position: absolute;
    top: 65px;
    width: 60px; height: 60px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.lp-stat-tile-1 { background-image: url("https://storage.perfectcdn.com/9edfaa/7q1qputru44rr1xk.png"); }
.lp-stat-tile-2 { background-image: url("https://storage.perfectcdn.com/9edfaa/piydktjj4h0yrota.png"); }
.lp-stat-tile-3 { background-image: url("https://storage.perfectcdn.com/9edfaa/mpc6ajyeo2so4ntz.png"); }
.lp-stat-1 .lp-stat-tile { left: 87px; }   /* 303-216 */
.lp-stat-2 .lp-stat-tile { left: 392px; }  /* 608-216 */
.lp-stat-3 .lp-stat-tile { left: 694px; }  /* 910-216 */
.lp-stat-num {
    position: absolute;
    top: 70px;
    font-size: 26px;
    font-weight: 700;
    line-height: 24.5px;
    color: var(--lp-ink);
    white-space: nowrap;
}
.lp-stat-1 .lp-stat-num { left: 172px; }  /* 388-216 */
.lp-stat-2 .lp-stat-num { left: 477px; }  /* 693-216 */
.lp-stat-3 .lp-stat-num { left: 779px; }  /* 995-216 */
.lp-stat-label {
    position: absolute;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--lp-muted);
    white-space: nowrap;
}
.lp-stat-1 .lp-stat-label { left: 172px; top: 105px; }
.lp-stat-2 .lp-stat-label { left: 477px; top: 104px; }
.lp-stat-3 .lp-stat-label { left: 779px; top: 102px; }
/* Figma textCase:TITLE on these two labels — characters stay verbatim, CSS applies the transform */
.lp-stat-2 .lp-stat-label,
.lp-stat-3 .lp-stat-label { text-transform: capitalize; }
.lp-stat-div {
    position: absolute;
    top: 46px;
    width: 1px; height: 108px;
    background: var(--lp-stat-div);
}
.lp-stat-div-1 { left: 345px; }  /* 561-216 */
.lp-stat-div-2 { left: 655px; }  /* 871-216 */

/* ============================================================
   WHY CHOOSE (y823-1628)
   ============================================================ */
.lp-why {
    position: relative;
    height: 805px;
}
.lp-why-box {
    position: absolute;
    left: 53px; top: 0;
    width: 1335px; height: 805px;
    border-radius: 43px;
    background: var(--lp-surface);
    overflow: hidden;
}
.lp-shard-why {
    left: 1147px; top: 157px;   /* 1200-53 (container x) */
    width: 80px; height: 75px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/oil1l6shtggufwxb.png");
}
.lp-shard-why-bl-a {
    left: 107px; top: 717px;   /* 160-53 (container x) */
    width: 185px; height: 88px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/4w4gsjrq21px7ls6.png");
}
.lp-h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 45px;
    color: var(--lp-ink);
}
.lp-why-title {
    position: absolute;
    left: 108px; top: 182px;   /* 161-53 */
    line-height: 55px;
}
.lp-why-sub {
    position: absolute;
    left: 108px; top: 236px;
    margin: 0;
    font-size: 14px;
    line-height: 28px;
    color: var(--lp-muted);
}
.lp-why-card {
    position: absolute;
    width: 540px;
    border-radius: 10px;
    background: var(--lp-card);
}
.lp-why-card-1 { left: 112px; top: 305px; height: 164px; }  /* 165-53 */
.lp-why-card-2 { left: 682px; top: 305px; height: 164px; }  /* 735-53 */
.lp-why-card-3 { left: 112px; top: 484px; height: 187px; }
.lp-why-card-4 { left: 682px; top: 484px; height: 187px; }
.lp-why-ico {
    position: absolute;
    left: 27px; top: 22px;
    width: 67px; height: 67px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.lp-why-ico-1 { background-image: url("https://storage.perfectcdn.com/9edfaa/l2u406s5izykfq4d.png"); }
.lp-why-ico-2 { background-image: url("https://storage.perfectcdn.com/9edfaa/3lma23q49btz0uqe.png"); }
.lp-why-ico-3 { background-image: url("https://storage.perfectcdn.com/9edfaa/76n77863syoitpnu.png"); }
.lp-why-ico-4 { background-image: url("https://storage.perfectcdn.com/9edfaa/oaki4eh8xfl46m1t.png"); }
.lp-why-card-title {
    position: absolute;
    left: 124px; top: 32px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    color: var(--lp-ink);
}
.lp-why-card-text {
    position: absolute;
    left: 124px; top: 67px;
    width: 344px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: var(--lp-muted);
}
.lp-why-card-2 .lp-why-card-text,
.lp-why-card-4 .lp-why-card-text { width: 364px; }
.lp-why-card-3 .lp-why-card-text { width: 379px; }
/* right-column cards sit 1px further right in Figma (icon 763-735=28, text 860-735=125) */
.lp-why-card-2 .lp-why-ico,
.lp-why-card-4 .lp-why-ico { left: 28px; }
.lp-why-card-2 .lp-why-card-title,
.lp-why-card-4 .lp-why-card-title,
.lp-why-card-2 .lp-why-card-text,
.lp-why-card-4 .lp-why-card-text { left: 125px; }

/* ============================================================
   BENEFITS (y1628-2249)
   ============================================================ */
.lp-benefits {
    position: relative;
    height: 621px;
    overflow: hidden;
}
.lp-plane-art {
    left: 0; top: 1px;
    width: 800px; height: 617px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/8nr5cdijfb61d7af.png");
}
.lp-shard-why-bl-b {
    left: 160px; top: 0;
    width: 185px; height: 87px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/fey4jt93c0aog1nt.png");
}
.lp-benefits-title {
    position: absolute;
    left: 815px; top: 169px;
    width: 336px;
    text-transform: capitalize;   /* Figma textCase:TITLE — characters stay verbatim */
}
.lp-up { text-transform: uppercase; }  /* TITLE cases the 'c' after the hyphen too */
.lp-benefits-list {
    position: absolute;
    left: 815px; top: 280px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-benefits-list li {
    display: flex;
    align-items: center;
    height: 36px;
    gap: 18px;
    font-size: 14px;
    line-height: 22px;
    color: var(--lp-muted);
}
.lp-bullet {
    width: 36px; height: 36px;
    flex: none;
    background: url("https://storage.perfectcdn.com/9edfaa/8czs4n5r5g3hukqz.png") no-repeat;
    background-size: 100% 100%;
}

/* ============================================================
   REVIEWS (y2249-2790)
   ============================================================ */
.lp-reviews {
    position: relative;
    height: 541px;
    background: var(--lp-surface);
    overflow: hidden;
}
.lp-shard-rev-a {
    left: 370px; top: 451px;
    width: 190px; height: 90px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/371jzsi3t4fu5q26.png");
    z-index: 0;
}
.lp-reviews-side .lp-h2 { position: absolute; left: 165px; top: 154px; }
.lp-reviews-sub {
    position: absolute;
    left: 165px; top: 213px;
    width: 350px;
    margin: 0;
    font-size: 14px;
    line-height: 28px;
    color: var(--lp-muted);
}
.lp-try-btn { left: 165px; top: 320px; width: 152px; }
.lp-review-card {
    position: absolute;
    width: 374px; height: 217px;
    border-radius: 20px;
    border: 1px solid var(--lp-review-bd);
    background: var(--lp-review-bg);
    box-sizing: border-box;
}
.lp-review-1 { left: 574px; top: 43px; }
.lp-review-2 { left: 967px; top: 43px; }
.lp-review-ghost { left: 1372px; top: 43px; }
.lp-review-3 { left: 686px; top: 281px; width: 389px; }
.lp-review-4 { left: 1100px; top: 281px; }
.lp-avatar {
    position: absolute;
    left: 24px; top: 29px;
    width: 57px; height: 57px;
    border-radius: 5px;
    object-fit: cover;
}
.lp-review-name {
    position: absolute;
    left: 91px; top: 38px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--lp-ink);
}
.lp-stars {
    position: absolute;
    left: 91px; top: 63px;
    display: flex;
    gap: 4px;
}
.lp-star {
    width: 18px; height: 18px;
    background: url("https://storage.perfectcdn.com/9edfaa/i383ocxy2kmbe64t.png") no-repeat;
    background-size: 100% 100%;
}
.lp-review-text {
    position: absolute;
    left: 24px; top: 98px;
    width: 306px;
    margin: 0;
    font-size: 12px;
    line-height: 24.5px;
    color: var(--lp-muted);
}
.lp-review-text-wide { width: 337px; }

/* ============================================================
   GAP + PAYMENTS STRIP (y2790-2990)
   ============================================================ */
.lp-gap {
    position: relative;
    height: 54px;
}
.lp-shard-rev-b {
    left: 370px; top: 0;
    width: 190px; height: 53px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/7fjugcxch316na88.png");
}
.lp-payments {
    position: relative;
    width: 1440px; height: 146px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/5y37ageolusyzmuu.png");
}

/* ============================================================
   GET STARTED (y2990-3753)
   ============================================================ */
.lp-getstarted {
    position: relative;
    height: 763px;
    border-top: 1px solid var(--lp-line);
    overflow: hidden;
}
.lp-thumbs-art {
    left: 660px; top: 50px;
    width: 780px; height: 705px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/5yk4x4fqrq9zpspr.png");
}
.lp-gs-title { position: absolute; left: 165px; top: 107px; }
.lp-gs-sub {
    position: absolute;
    left: 165px; top: 154px;
    margin: 0;
    font-size: 14px;
    line-height: 28px;
    color: var(--lp-muted);
}
.lp-gs-login { color: #000000; font-weight: 600; }

.lp-input {
    position: absolute;
    height: 55px;
    border: 0;
    border-radius: 5px;
    background: var(--lp-input);
    color: var(--lp-ink);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    padding: 0 28px;
    outline: none;
    box-sizing: border-box;
}
.lp-input::placeholder { color: var(--lp-muted); opacity: 1; }
.lp-input:focus { box-shadow: 0 0 0 1px var(--gold); }
.lp-in-fname { left: 165px; top: 209px; width: 230px; }
.lp-in-lname { left: 410px; top: 209px; width: 230px; }
.lp-in-email { left: 165px; top: 275px; width: 475px; }
.lp-in-pass  { left: 165px; top: 341px; width: 475px; }

.lp-agree {
    position: absolute;
    left: 165px; top: 412px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 12px;
    line-height: 13.5px;
    color: var(--lp-muted);
}
.lp-agree input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.lp-agree-box {
    width: 18px; height: 18px;
    flex: none;
    border-radius: 3px;
    border: 1px solid #8B8B8B;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.lp-agree input:checked + .lp-agree-box {
    border: 0;
    background-image: url("https://storage.perfectcdn.com/9edfaa/1sksjanonnbrmtpc.png");
}
.lp-agree-text { font-weight: 400; }
.lp-agree-text a { color: var(--lp-ink); font-weight: 600; }
.lp-signup-btn { left: 165px; top: 475px; width: 156px; }

.lp-or {
    position: absolute;
    left: 165px; top: 568px;
    width: 481px;
    display: flex;
    align-items: center;
}
.lp-or-line {
    height: 1px;
    background: var(--lp-line);
    flex: 1;
}
.lp-or-text {
    margin: 0 11px;
    font-size: 14px;
    line-height: 12px;
    color: var(--lp-muted);
}
.lp-sso-row { position: static; }
.lp-sso {
    position: absolute;
    top: 590px;
    width: 235px; height: 55px;
    border: 1px solid var(--lp-sso-bd);
    border-radius: 5px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: var(--lp-muted);
}
.lp-sso-ico {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.lp-sso-google { left: 165px; padding-left: 52px; }
.lp-sso-ico-g {
    left: 20px; top: 16px;
    width: 21px; height: 21px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/g7wjfft692erhi0u.png");
}
.lp-sso-fb { left: 411px; padding-left: 53px; }
.lp-sso-ico-f {
    left: 25px; top: 17px;
    width: 11px; height: 20px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/g1q41j1woy7p66uz.png");
}

/* ============================================================
   FOOTER (y3753-3902)
   ============================================================ */
.lp-footer {
    position: relative;
    height: 149px;
    border-top: 1px solid var(--lp-line);
}
.lp-footer-logo { left: 158px; top: 22px; }   /* crop padding 8px → glyph lands at y3783 */
.lp-footer-nav {
    position: absolute;
    left: 755px; top: 49px;
    display: flex;
    gap: 43px;
    font-size: 14px;
    line-height: 28px;
}
.lp-socials {
    position: absolute;
    left: 1175px; top: 42px;
    display: flex;
    gap: 12px;
}
.lp-social {
    width: 44px; height: 44px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.lp-social-telegram { background-image: url("https://storage.perfectcdn.com/9edfaa/5dimp08t7jrw21ng.png"); }
.lp-social-skype    { background-image: url("https://storage.perfectcdn.com/9edfaa/agdg0ygt5upbexc9.png"); }
.lp-copy {
    position: absolute;
    left: 165px; top: 86px;
    margin: 0;
    font-size: 12px;
    line-height: 28px;
    color: var(--lp-muted);
}

/* ============================================================
   LIGHT THEME — art swaps
   ============================================================ */
:root[data-theme="light"] .lp-logo            { background-image: url("https://storage.perfectcdn.com/9edfaa/206677m9zd3cpora.png"); }
/* light strip is 7px lower in the frame (y2851-2997): shift the taller light image down
   inside the same band; its baked bottom line lands at y2997, so hide the section border */
:root[data-theme="light"] .lp-payments        { background-size: 1440px 147px; background-position: 0 7px; }
:root[data-theme="light"] .lp-getstarted      { border-top-color: transparent; }
:root[data-theme="light"] .lp-hero-art        { background-image: url("https://storage.perfectcdn.com/9edfaa/c9m5nqt5md5k5yfb.png"); }
:root[data-theme="light"] .lp-shard-hero-left { background-image: url("https://storage.perfectcdn.com/9edfaa/8blwzpzftinok2hz.png"); }
:root[data-theme="light"] .lp-shard-why       { background-image: url("https://storage.perfectcdn.com/9edfaa/96mjuuj5thc9pene.png"); }
:root[data-theme="light"] .lp-shard-why-bl-a  { background-image: url("https://storage.perfectcdn.com/9edfaa/lesq1oxc9e0gq8wy.png"); }
:root[data-theme="light"] .lp-shard-why-bl-b  { background-image: url("https://storage.perfectcdn.com/9edfaa/t0cbexna7q3lb35c.png"); }
:root[data-theme="light"] .lp-plane-art       { background-image: url("https://storage.perfectcdn.com/9edfaa/smfhdhrmkp441bje.png"); }
:root[data-theme="light"] .lp-shard-rev-a     { background-image: url("https://storage.perfectcdn.com/9edfaa/wmcsxgxi4hz5rty2.png"); }
:root[data-theme="light"] .lp-shard-rev-b     { background-image: url("https://storage.perfectcdn.com/9edfaa/l2bjq4cmwtxwfwnw.png"); }
:root[data-theme="light"] .lp-payments        { background-image: url("https://storage.perfectcdn.com/9edfaa/j3zcbmx9hka2a008.png"); }
:root[data-theme="light"] .lp-thumbs-art      { background-image: url("https://storage.perfectcdn.com/9edfaa/f2ahcqhl59r70lwl.png"); }
:root[data-theme="light"] .lp-nav-underline   { background-image: url("https://storage.perfectcdn.com/9edfaa/o429zp39ed2rlsee.png"); }
:root[data-theme="light"] .lp-theme-toggle    { background-image: url("https://storage.perfectcdn.com/9edfaa/x6ppzsdx320d6k2d.png"); }
:root[data-theme="light"] .lp-stat-tile-1     { background-image: url("https://storage.perfectcdn.com/9edfaa/7qab9mzg8w7yykxf.png"); }
:root[data-theme="light"] .lp-stat-tile-2     { background-image: url("https://storage.perfectcdn.com/9edfaa/d42654xtw4mds8gl.png"); }
:root[data-theme="light"] .lp-stat-tile-3     { background-image: url("https://storage.perfectcdn.com/9edfaa/9eenbmmdg8posk9f.png"); }
:root[data-theme="light"] .lp-why-ico-1       { background-image: url("https://storage.perfectcdn.com/9edfaa/fp0xod5mmudh5grn.png"); }
:root[data-theme="light"] .lp-why-ico-2       { background-image: url("https://storage.perfectcdn.com/9edfaa/6wuxeng2hki52ot5.png"); }
:root[data-theme="light"] .lp-why-ico-3       { background-image: url("https://storage.perfectcdn.com/9edfaa/70la19akau6c5zf8.png"); }
:root[data-theme="light"] .lp-why-ico-4       { background-image: url("https://storage.perfectcdn.com/9edfaa/aj0o3bcmoq0mnlph.png"); }
:root[data-theme="light"] .lp-bullet          { background-image: url("https://storage.perfectcdn.com/9edfaa/82wfx31kt0x8a6ms.png"); }
:root[data-theme="light"] .lp-star            { background-image: url("https://storage.perfectcdn.com/9edfaa/qcgl8c9fz3xrmnxo.png"); }
:root[data-theme="light"] .lp-sso-ico-g       { background-image: url("https://storage.perfectcdn.com/9edfaa/w0x0oxjepehphs2k.png"); }
:root[data-theme="light"] .lp-sso-ico-f       { background-image: url("https://storage.perfectcdn.com/9edfaa/9dktgtqegnhzwqz1.png"); }
:root[data-theme="light"] .lp-social-telegram { background-image: url("https://storage.perfectcdn.com/9edfaa/34gc8m54s1sc4c4c.png"); }
:root[data-theme="light"] .lp-social-skype    { background-image: url("https://storage.perfectcdn.com/9edfaa/jyq9pgnqrsexfboz.png"); }
:root[data-theme="light"] .lp-agree input:checked + .lp-agree-box { background-image: url("https://storage.perfectcdn.com/9edfaa/fan7od0u1bh4hqyb.png"); }


/* ======== part: c_signup.css ======== */
/* ============================================================
   c_signup.css — guest register page (signup.twig)
   Frame 1440x721. All coordinates = exact Figma CSS px.
   Dark = default; light = [data-theme="light"] overrides.
   ============================================================ */

:root {
    --su-ink:        #FFFFFF;   /* title, "Log In", agree links, SSO glyphs */
    --su-strong:     #FFFFFF;   /* toggle border + icon */
    --su-muted:      #9298AF;   /* sub, placeholders, nav, SSO text */
    --su-line:       #454D63;   /* panel divider + Or lines */
    --su-panel:      #0B101D;   /* right panel — frame #111727 @ 60% over #03050C */
    --su-input:      #0A1220;   /* input bg */
    --su-input-sh:   0 15px 30px rgba(0,0,0,.05);
    --su-sso-bd:     #454D63;
}
:root[data-theme="light"] {
    --su-ink:        #000000;
    --su-strong:     #000000;
    --su-line:       #EBEBFF;
    --su-panel:      #FCFCFF;   /* #F8F7FE @ 60% over #FFFFFF */
    --su-input:      #F8F7FE;
    --su-input-sh:   none;
    --su-sso-bd:     #E4E1F4;
}

.su {
    width: 1440px;
    height: 721px;
    margin: 0 auto;
    position: relative;
    background: var(--bg);
    overflow: hidden;
}
/* small-screen fallback: scale the fixed 1440 canvas down (desktop fidelity is primary) */
@media (max-width: 1439px) {
    .su { zoom: calc(100vw / 1440); }
}

/* ============================================================
   LEFT — logo (y20) + form column (y115-661)
   ============================================================ */
.su-logo {
    position: absolute;
    left: 165px; top: 20px;
    width: 172px; height: 43px;   /* Figma group 172x42.32; crop is 344x86 @2x */
    background: url("https://storage.perfectcdn.com/9edfaa/2ub1ieobjupwg2j0.png") no-repeat;
    background-size: 100% 100%;
}

.su-h1 {
    position: absolute;
    left: 165px; top: 115px;
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 45px;
    color: var(--su-ink);
}
.su-sub {
    position: absolute;
    left: 165px; top: 162px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--su-muted);
}
.su-login { color: var(--su-ink); font-weight: 600; }

/* inputs: 49px tall r5, placeholder text lands at +28px */
.su-input {
    position: absolute;
    height: 49px;
    border: 0;
    border-radius: 5px;
    background: var(--su-input);
    box-shadow: var(--su-input-sh);
    color: var(--su-ink);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    padding: 0 28px;
    outline: none;
    box-sizing: border-box;
}
.su-input::placeholder { color: var(--su-muted); opacity: 1; }
.su-input:focus { box-shadow: 0 0 0 1px var(--gold); }
.su-in-fname    { left: 165px; top: 208px; width: 246px; }
.su-in-lname    { left: 423px; top: 208px; width: 246px; }
.su-in-username { left: 165px; top: 266px; width: 246px; }
.su-in-email    { left: 423px; top: 266px; width: 246px; }
.su-in-pass     { left: 165px; top: 324px; width: 504px; }
.su-in-pass2    { left: 165px; top: 383px; width: 504px; }

/* terms row y461: violet checkbox + 12px copy */
.su-agree {
    position: absolute;
    left: 165px; top: 461px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 12px;
    line-height: 14px;
    color: var(--su-muted);
}
.su-agree input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.su-agree-box {
    width: 18px; height: 18px;
    flex: none;
    border-radius: 3px;
    border: 1px solid #8B8B8B;
    background: var(--violet);
    display: grid;
    place-items: center;
    box-sizing: border-box;
}
.su-agree-box svg { width: 8px; height: 6px; }
.su-agree input:not(:checked) + .su-agree-box { background: transparent; }
.su-agree-text { font-weight: 400; }
.su-agree-text a { color: var(--su-ink); font-weight: 600; }

/* gold CTA 156x55 y501 — frame renders the 1px stroke invisible: borderless */
.su-btn-gold {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    border-radius: 5px;
    background: var(--gold);
    border: 0;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
    box-sizing: border-box;
}
.su-signup-btn { left: 165px; top: 501px; width: 156px; }

/* Or divider y578: 221px lines at y584, 11px gaps around text */
.su-or {
    position: absolute;
    left: 165px; top: 578px;
    width: 481px;
    display: flex;
    align-items: center;
}
.su-or-line { height: 1px; background: var(--su-line); flex: 1; }
.su-or-text {
    margin: 0 11px;
    font-size: 14px;
    line-height: 12px;
    color: var(--su-muted);
}

/* SSO buttons y606: 235x55, border only; glyph = frame crop, label at +53px */
.su-sso-row { position: static; }
.su-sso {
    position: absolute;
    top: 606px;
    width: 235px; height: 55px;
    border: 1px solid var(--su-sso-bd);
    border-radius: 5px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 52px;   /* +1px border → label lands frame x218/464 */
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: var(--su-muted);
}
.su-sso-ico {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* google glyph frame (186,623) 21x21 → padding-box (20,16) */
.su-ico-g {
    left: 20px; top: 16px;
    width: 21px; height: 21px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/1tmbusz8d4me5jr6.png");
}
/* facebook glyph frame (437,623.5) 11x21 → padding-box (25,16.5) */
.su-ico-f {
    left: 25px; top: 16.5px;
    width: 11px; height: 21px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/k7lh4d96fbtp8bz4.png");
}
.su-sso-google { left: 165px; }
.su-sso-fb { left: 411px; }

/* ============================================================
   RIGHT — panel x731 (709x721) + art crop + divider + nav/toggle
   ============================================================ */
.su-panel {
    position: absolute;
    left: 731px; top: 0;
    width: 709px; height: 721px;
    background: var(--su-panel);
}
.su-art {
    position: absolute;
    left: 731px; top: 64px;   /* nav band (y0-60) is flat panel bg, not cropped */
    width: 709px; height: 657px;
    background: url("https://storage.perfectcdn.com/9edfaa/w6c9woja7uhq015b.png") no-repeat;
    background-size: 100% 100%;
}
.su-divider {
    position: absolute;
    left: 731px; top: 0;
    width: 1px; height: 721px;
    background: var(--su-line);
    z-index: 2;
}
.su-nav {
    position: absolute;
    left: 824px; top: 30px;
    display: flex;
    gap: 39px;
    font-size: 14px;
    line-height: 28px;
    z-index: 3;
}
.su-nav-link { color: var(--su-muted); font-weight: 400; }

/* toggle pill 77x31 @ x1198 y29 — glyphs are frame crops; dark: moon left; light: sun right */
.su-theme-toggle {
    position: absolute;
    left: 1198px; top: 29px;
    border-color: var(--su-strong);
    color: var(--su-strong);
    z-index: 3;
}
.su-tt {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* moon frame (1205,35) 18x19 → padding-box (6,5) */
.su-tt-moon {
    left: 6px; top: 5px;
    width: 18px; height: 19px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/uu4cf639ud2op9ts.png");
}
.su-tt-sun { display: none; }

/* ============================================================
   LIGHT THEME — value swaps (art/logo/nav/toggle/SSO glyphs)
   ============================================================ */
:root[data-theme="light"] .su-logo { background-image: url("https://storage.perfectcdn.com/9edfaa/yqoj9sydsfur5ezz.png"); }
:root[data-theme="light"] .su-art  { background-image: url("https://storage.perfectcdn.com/9edfaa/ft85q8dyabyg0c41.png"); }
:root[data-theme="light"] .su-ico-g { background-image: url("https://storage.perfectcdn.com/9edfaa/iu27u18kat6u97sh.png"); }
:root[data-theme="light"] .su-ico-f { background-image: url("https://storage.perfectcdn.com/9edfaa/exqf7ezaqta7hf57.png"); }
/* light frame shifts the nav 7px left / 3px up and the toggle 3px up (verified in register-light nodes) */
:root[data-theme="light"] .su-nav { left: 817px; top: 27px; }
:root[data-theme="light"] .su-theme-toggle { top: 26px; }
:root[data-theme="light"] .su-tt-moon { display: none; }
/* sun frame (1246,29) 24x25 → padding-box (47,2); sits right in the light frame */
:root[data-theme="light"] .su-tt-sun {
    display: block;
    left: 47px; top: 2px;
    width: 24px; height: 25px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/cgyauqsu2y30yhnz.png");
}


/* ======== part: c_terms.css ======== */
/* ============================================================
   TERMS page — spec: figma-refs/terms-dark + terms-light
   Guest public page. Frame 1440x2517 (main band y88-2371).
   Header/footer/buttons/logo reuse lp-* from c_signin.css.
   Panel origin x118 y272; children positioned 1x px exact.
   Dark = default; light = [data-theme="light"] overrides.
   ============================================================ */

.tms {
    --tms-tab-on:    #1C212E;   /* active tab bg */
    --tms-tab-shadow: 0 15px 30px rgba(0,0,0,.05);
}
:root[data-theme="light"] .tms {
    --tms-tab-on:    #FFFFFF;
    --tms-tab-shadow: 0 40px 40px rgba(45,44,136,.10);
}

/* active-nav underline sits under "Terms" (x652 w56) — exact gradient, not the stretched shared crop */
.tms .lp-nav-underline {
    left: 652px; width: 56px;
    border-radius: 3.5px;
    background-image: linear-gradient(90deg, #7D72FE 0%, #FE5588 35.4%, #FF8065 68.8%, #FFCE2E 100%);
}
/* light pill sits 2px lower in the frame (y28) */
:root[data-theme="light"] .tms .lp-theme-toggle { top: 28px; }
/* gold Register button is borderless in the frame */
.tms .lp-btn-gold { border-color: transparent; }

/* ---------- main band (y88-2371) ---------- */
.tms-main { position: relative; height: 2283px; }

.tms-shard-left {
    left: 0; top: 77px;
    width: 75px; height: 83px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/ojrfyxuky2d0b7o6.png");
}

.tms-title {
    position: absolute;
    left: 683px; top: 84px;
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 54px;
    color: var(--lp-ink);
}

/* ---------- panel (x118 y272, 1205x1859, r43) ---------- */
.tms-panel {
    position: absolute;
    left: 118px; top: 184px;
    width: 1205px; height: 1859px;
    border-radius: 43px;
    background: var(--lp-surface);
}

/* tab bar (y337, h72, r10) — static per frame */
.tms-tab {
    position: absolute;
    top: 65px;
    height: 72px;
    border-radius: 10px;
    background: var(--lp-card);
}
.tms-tab-1 { left: 124px; width: 224px; }
.tms-tab-2 { left: 365px; width: 161px; }
.tms-tab-3 { left: 543px; width: 291px; }
.tms-tab-4 { left: 851px; width: 229px; }
.tms-tab-4.is-active {
    background: var(--tms-tab-on);
    box-shadow: var(--tms-tab-shadow);
}
.tms-tab-t {
    position: absolute;
    top: 22px;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--lp-muted);
    white-space: nowrap;
}
.tms-tab-t1 { left: 49px; }
.tms-tab-t2 { left: 55px; }
.tms-tab-t3 { left: 50px; }
.tms-tab-t4 {
    left: 58px; top: 26px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--lp-ink);
}

/* panel heading "Privacy Policy" (26/600, y451) */
.tms-panel-title {
    position: absolute;
    left: 512px; top: 179px;
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 54px;
    color: var(--lp-ink);
}

/* body copy — centered, 14/400 lh28 muted */
.tms-p {
    position: absolute;
    left: 100px;
    width: 1005px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--lp-muted);
    text-align: center;
    white-space: pre-line;
}
.tms-h {
    position: absolute;
    left: 100px;
    width: 1005px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 28px;
    color: var(--lp-ink);
    text-align: center;
}

.tms-p1 { top: 253px; }
.tms-p2 { top: 394px; }
.tms-h1 { top: 434px; }
.tms-p3 { top: 474px; }
.tms-h2 { top: 654px; }
.tms-p4 { top: 694px; }
.tms-li1 { top: 762px; }
.tms-li2 { top: 802px; }
.tms-li3 { top: 842px; }
.tms-li4 { top: 882px; }
.tms-li5 { top: 922px; }
.tms-li6 { top: 962px; }
.tms-h3 { top: 1002px; }
.tms-h4 { top: 1111px; }
.tms-h5 { top: 1276px; }
.tms-h6 { top: 1414px; }
.tms-h7 { top: 1587px; }
/* wider paragraphs (x194/x199 w1050 in frame) */
.tms-p5 { top: 1042px; left: 76px; width: 1050px; }
.tms-p6 { top: 1151px; left: 81px; width: 1050px; }
.tms-p7 { top: 1317px; left: 81px; width: 1050px; }
.tms-p8 { top: 1456px; left: 81px; width: 1050px; }
.tms-p9 { top: 1627px; left: 81px; width: 1050px; }

/* ---------- decorations ---------- */
.tms-shard-right {
    left: 1244px; top: 315px;
    width: 121px; height: 125px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/p7ih6rgm7l9lzojs.png");
}
.tms-geo {
    left: 197px; top: 1959px;
    width: 182px; height: 174px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/2yfcn7nmwb11zan9.png");
}
.tms-plant {
    left: 1130px; top: 1867px;
    width: 310px; height: 473px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/8sm8yp5l7urex97s.png");
}

/* ---------- footer band (y2371-2517 = 146px) ---------- */
.tms-footer { height: 146px; }

/* ============================================================
   LIGHT theme — figma-refs/terms-light/nodes.json
   ============================================================ */
:root[data-theme="light"] .tms-shard-left {
    top: 81px; height: 76px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/q000rwoqnzfl2x3i.png");
}
:root[data-theme="light"] .tms-shard-right {
    left: 1246px; top: 271px;
    width: 117px; height: 109px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/f6jwtrupx4w3mcd2.png");
}
:root[data-theme="light"] .tms-geo {
    top: 1970px; height: 164px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/o07dfp0wlurno3oc.png");
}
:root[data-theme="light"] .tms-plant {
    background-image: url("https://storage.perfectcdn.com/9edfaa/6qeqd3m4t7n0moxg.png");
}


/* ======== part: c_tickets.css ======== */
/* ============================================================
   TICKETS page — spec: figma-refs/tickets-dark.spec.txt
   Layout (1x px on 1440 frame, content origin x345):
   title y74 (30/600) · sub y126 (12/400 #9298AF) · panel y175 x350
   763x511 r20 (inner +32/+29): Subject label y208, pill row y235
   h45 (gap 9, widths 120/140/120/146/120), Order ID label y295,
   input y322 682x49, Request label y386, pill row y413 (gap 10,
   widths 124/144/120/120), textarea y482 682x90, button y595 176x55.
   Frame has NO ticket-history table — New Ticket form only.
   ============================================================ */

/* Title + sub — same -16px topbar overlap as dashboard */
.tickets-title {
    margin-top: -16px;
    line-height: 45px;
}
.tickets-sub {
    margin: 7px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: #9298AF; /* Figma-verbatim in both themes (light --muted differs) */
}

/* ---- Panel (y175 x350, 763x511, r20) ---- */
.ticket-panel {
    width: 763px;
    height: 511px;
    margin: 27px 0 0 5px;
    padding: 32px 29px 0; /* +1px border → content lands on frame x380/y208 */
    background: #060912;
    border: 1px solid #131721;
    border-radius: var(--radius-card);
}

/* Field labels 14/400 lh12 (Subject / Order ID / Request) */
.tk-label {
    margin-top: 15px; /* control → next label gap, Figma-verbatim */
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: #FFFFFF;
}
.ticket-panel > .tk-label:first-of-type { margin-top: 0; }

/* ---- Segmented pills (h45 r22.5) ---- */
.tk-pills {
    display: flex;
    gap: 9px;
    height: 45px;
    margin-top: 15px; /* label → control gap, Figma-verbatim */
}
.tk-pills-request { gap: 10px; }
/* Figma nudge: "Speed Up" text sits 4px right of pill center */
.tk-pills-request .tk-pill:nth-child(3) .tk-pill-box { padding-left: 8px; }
.tk-pill { position: relative; height: 45px; flex: none; }
.tk-w120 { width: 120px; }
.tk-w124 { width: 124px; }
.tk-w140 { width: 140px; }
.tk-w144 { width: 144px; }
.tk-w146 { width: 146px; }
.tk-pill input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.tk-pill-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px solid #2E3546;
    border-radius: 22.5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF;
}
/* Checked pill: white border + 600 text, violet dot pinned at +9, text +11 past dot */
.tk-pill input:checked + .tk-pill-box {
    border-color: #FFFFFF;
    color: #FFFFFF;
    font-weight: 600;
    justify-content: flex-start;
    padding-left: 8px; /* 1px border + 8 → dot at frame +9 */
}
.tk-dot {
    display: none;
    width: 27px;
    height: 27px;
    flex: none;
    border-radius: 50%;
    background: #7D57FB;
    place-items: center;
    margin-right: 11px;
}
.tk-pill input:checked + .tk-pill-box .tk-dot { display: grid; }

/* ---- Order ID input (y322, 682x49, r5) ---- */
.tk-input {
    display: block;
    margin-top: 15px;
    width: 682px;
    height: 49px;
    padding: 0 28px; /* placeholder text lands at frame x408 */
    border: 0;
    border-radius: 5px;
    background: #020307;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    outline: none;
}
.tk-input::placeholder { color: #9298AF; opacity: 1; }

/* ---- Message textarea (y482, 682x90, r5) ---- */
.tk-textarea {
    display: block;
    margin-top: 24px;
    width: 682px;
    height: 90px;
    padding: 18px 28px; /* "Message" text lands at frame x408/y500 */
    border: 0;
    border-radius: 5px;
    background: #0A1220;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05); /* Figma DROP_(0,15,blur30,#000/0.05) */
    resize: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px; /* placeholder glyph lands on frame y500 */
    color: #FFFFFF;
    outline: none;
}
/* Dark Figma shows "Message" as 14/600 white (light frame: 14/400 #9298AF) */
.tk-textarea::placeholder { color: #FFFFFF; font-weight: 600; opacity: 1; }

/* ---- Submit (y595, 176x55, r5, gold) ---- */
.tk-submit {
    margin-top: 23px;
    width: 176px;
    height: 55px;
    padding: 3px 0 0; /* Figma text sits 1.5px below geometric center (y617) */
    border: 0; /* Figma stroke exists but visible:false → no border renders */
    border-radius: 5px;
    background: var(--gold);
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
    color: #FFFFFF; /* Figma-verbatim in both themes */
}

/* ============================================================
   LIGHT theme — figma-refs/tickets-light/nodes.json
   ============================================================ */
[data-theme="light"] .ticket-panel {
    background: #FDFCFE;
    border-color: #EBEBFF;
}
[data-theme="light"] .tk-label { color: #000000; }
[data-theme="light"] .tk-pill-box { border-color: #EBEBFF; }
[data-theme="light"] .tk-pill input:checked + .tk-pill-box {
    border-color: #000000;
    color: #000000;
}
[data-theme="light"] .tk-input {
    background: #FFFFFF;
    color: #000000;
}
[data-theme="light"] .tk-textarea {
    background: #FFFFFF;
    box-shadow: 0 15px 30px rgba(45, 44, 136, 0.05); /* Figma #2D2C88/0.05 */
    color: #000000;
}
[data-theme="light"] .tk-textarea::placeholder {
    color: #9298AF;
    font-weight: 400;
}

/* Corner wireframe polyhedron bleeding off bottom-right (frame x1150-1440, y500-721) */
.tk-br-poly {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 290px;
    height: 221px;
    background: url('https://storage.perfectcdn.com/9edfaa/h5bdw5in59ziblq7.png') no-repeat;
    background-size: 290px 221px;
    pointer-events: none;
    z-index: -1;
}
[data-theme="light"] .tk-br-poly { background-image: url('https://storage.perfectcdn.com/9edfaa/4sdp0zl4p8y1bhbp.png'); }


/* ======== part: c_updates.css ======== */
/* ============================================================
   UPDATES page — spec: figma-refs/updates-dark/nodes.json
   Layout (1x px on 1440 frame, content origin x345):
   title y74 (30/600) · bar y135 h48: search 484x48, filter
   265x48 (gap 37), r5 #0A1220 + drop 0/15/30 · head labels
   y230 (12/400) · rows y265+80n, top borders #444D62, odd
   rows #050913, cells left-aligned, vertical dividers 1x30 @
   top 26 · update tile 35x35 r8 (10% color bg, solid glyph) ·
   New pill 79x30 r15 #83F181 on 10% bg, right:31 top:26 ·
   bottom line same 1012 width as rows.
   ============================================================ */

/* Title — frame y74 sits 16px up into the topbar band */
.updates-title {
    margin-top: -16px;
    line-height: 45px;
}

/* ---- Bar (y135): search + filter ---- */
.updates-bar {
    display: flex;
    align-items: center;
    margin-top: 16px;
    height: 48px;
}
.updates-search,
.updates-filter {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    border-radius: 5px;
    background: #0A1220;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .05);
}
.updates-search { width: 484px; flex: none; }
.updates-filter { width: 265px; flex: none; margin-left: 37px; }
.updates-search input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 46px 0 22px; /* placeholder lands at frame x367 */
    border: 0;
    background: transparent;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    outline: none;
}
.updates-search input::placeholder {
    color: #9298AF; /* Figma-verbatim in both themes */
    opacity: 1;
}
.updates-filter-label {
    padding-left: 22px; /* "All" at frame x888 */
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim in both themes */
}
.updates-ico {
    position: absolute;
    right: 23px; /* magnifier right edge at frame x806 */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--text);
}
.updates-ico-caret { right: 20px; } /* chevron right edge at frame x1111 */

/* ---- Header labels + rows share the 3-col grid (table origin x333) ---- */
.updates-head,
.updates-row {
    display: grid;
    grid-template-columns: 276px 203px 1fr; /* dividers at frame x609 / x812 */
}
.updates-head,
.updates-table {
    width: 1012px;
    margin-left: -12px; /* table starts at frame x333, 12px left of content */
}
.updates-head {
    margin-top: 47px;      /* labels land at frame y230 */
    padding-bottom: 23px;  /* head bottom = first row border y265 */
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: var(--text);
}
.updates-head .updates-cell:first-child { padding-left: 29px; } /* "Service" at frame x362 */
.updates-head .updates-cell:nth-child(2) { padding-left: 43px; } /* "Date" at frame x652 */
.updates-head .updates-cell:nth-child(3) { padding-left: 28px; } /* "Update" at frame x840 */

/* Rows: 80px incl. 1px top border; odd rows carry the #050913 band */
.updates-row {
    position: relative;
    height: 80px;
    border-top: 1px solid #444D62;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: #9298AF; /* Figma-verbatim in both themes */
}
.updates-row:nth-child(odd) { background: #050913; }
.updates-cell {
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.updates-row .updates-cell:nth-child(1) { padding-left: 25px; } /* values at frame x358 */
.updates-row .updates-cell:nth-child(2) { padding-left: 43px; } /* date at frame x652 */
.updates-row .updates-cell:nth-child(3) { padding-left: 28px; } /* tile at frame x840 */
/* 1x30 vertical divider, frame y+26 (26 below the border edge) */
.updates-row .updates-cell + .updates-cell::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    width: 1px;
    height: 30px;
    background: #444D62;
}
.updates-date span:first-child { width: 82px; } /* time column lands at frame x734 */

/* Update cell — 35x35 r8 tile (10% color bg, solid glyph) + 18px gap */
.updates-update { gap: 18px; }
.updates-tile {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: none;
    background-repeat: no-repeat;
    background-position: 7px 7px; /* glyph crop box starts tile+7 */
    background-size: 21px 21px;
}
.t-star { background-color: rgba(255, 206, 46, .1); background-image: url('https://storage.perfectcdn.com/9edfaa/hstnhojc6pch6kna.png'); }
.t-ban  { background-color: rgba(255, 93, 123, .1); background-image: url('https://storage.perfectcdn.com/9edfaa/rszc5dupe7rw0zgx.png'); }
.t-up   { background-color: rgba(60, 228, 137, .1); background-image: url('https://storage.perfectcdn.com/9edfaa/cam3cwhdlh9jdf7u.png'); }
.t-down { background-color: rgba(71, 206, 255, .1); background-image: url('https://storage.perfectcdn.com/9edfaa/s6kz4m3jhl05ol1l.png'); }
[data-theme="light"] .t-star { background-image: url('https://storage.perfectcdn.com/9edfaa/wrb1ft9wnomlypfr.png'); }
[data-theme="light"] .t-ban  { background-image: url('https://storage.perfectcdn.com/9edfaa/nga5lhcw0b9d88rf.png'); }
[data-theme="light"] .t-up   { background-image: url('https://storage.perfectcdn.com/9edfaa/xwszy39pxb2bdld7.png'); }
[data-theme="light"] .t-down { background-image: url('https://storage.perfectcdn.com/9edfaa/wq8us8fdyg8fy0up.png'); }

/* New pill — 79x30 r15, #83F181 text on 10% fill (nodes.json opacity .1) */
.updates-pill {
    position: absolute;
    right: 31px; /* pill right edge at frame x1314 */
    top: 26px;
    width: 79px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #83F181;
    background: rgba(131, 241, 129, .1);
}

/* Bottom line: Figma draws it the same 1012 width as the rows */
.updates-table { border-bottom: 1px solid #444D62; }

/* ============================================================
   LIGHT theme — figma-refs/updates-light/nodes.json
   ============================================================ */
[data-theme="light"] .updates-search,
[data-theme="light"] .updates-filter {
    background: #FFFFFF;
    box-shadow: 0 15px 30px rgba(45, 43, 136, .05);
}
[data-theme="light"] .updates-ico { color: #000000; }
[data-theme="light"] .updates-row { border-color: #EBEBFF; }
[data-theme="light"] .updates-row:nth-child(odd) { background: rgba(251, 250, 254, .6); }
[data-theme="light"] .updates-row .updates-cell + .updates-cell::before { background: #C3C3D8; }
[data-theme="light"] .updates-table { border-color: #EBEBFF; }


/* ======== c_ws1.css ======== */
/* ============================================================
   c_ws1.css — ws1 contract-chrome skins for the Figma-built pages:
   layout account dropdown · signin login-modal · signup · neworder ·
   massorder · services · orders · addfunds · tickets · account ·
   affiliates · api · updates · notifications · resetpassword · terms ·
   child_panel_order.

   Why this file exists: the Figma pages replace Bootstrap markup with
   bespoke class systems, but several PP contract blocks (alerts,
   pagination, dropdowns, modals, tooltips, .hidden) must keep their
   platform class names for PP's script.js hooks. These rules skin that
   contract chrome in the theme idiom. Every rule is standalone-complete
   (no reliance on bootstrap.css); two-class selectors where Bootstrap
   conflicts are likely. Load order: anywhere after theme style.css.
   ============================================================ */

/* ---- Shared platform chrome ------------------------------------- */

/* PP toggles the .hidden class (Bootstrap convention) on service
   description, ajax alerts, etc. Theme style.css never defined it. */
.hidden { display: none !important; }

/* Alerts — keep .alert + data-dismiss="alert" (PP/Bootstrap JS hook),
   skin via the per-page .x-alert companion class. */
.alert.w1-alert {
    position: relative;
    margin: 0 0 16px;
    padding: 14px 46px 14px 18px;
    border-radius: 12px;
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid transparent;
}
.alert.w1-alert-danger {
    background: color-mix(in srgb, #FF2C2C 9%, transparent);
    border-color: color-mix(in srgb, #FF2C2C 32%, transparent);
    color: #FF6B6B;
}
.alert.w1-alert-success {
    background: color-mix(in srgb, #41EB8F 9%, transparent);
    border-color: color-mix(in srgb, #41EB8F 32%, transparent);
    color: #41EB8F;
}
.alert.w1-alert-info {
    background: var(--active-block);
    color: var(--text);
}
:root[data-theme="light"] .alert.w1-alert-danger { color: #C81E1E; }
:root[data-theme="light"] .alert.w1-alert-success { color: #128A43; }
.w1-alert .close {
    position: absolute;
    top: 10px;
    right: 14px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}
.w1-alert .close:hover { opacity: 1; }

/* Pagination — platform renders ul.pagination; skin in the pill idiom. */
ul.pagination.w1-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}
ul.pagination.w1-pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
}
ul.pagination.w1-pagination li a:hover { color: var(--text); border-color: var(--text); }
ul.pagination.w1-pagination li.active a {
    background: var(--active-block);
    border-color: transparent;
    color: var(--text);
    font-weight: 600;
}

/* Bootstrap dropdowns used by contract blocks (account menu, services
   filter, orders/updates status filters). JS toggles .open on the parent. */
.w1-dropdown { position: relative; display: inline-block; }
.w1-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 300;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.w1-dropdown.open .dropdown-menu { display: block; }
.w1-dropdown .dropdown-menu li a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.w1-dropdown .dropdown-menu li a:hover { background: var(--active-block); }
.w1-dropdown .dropdown-menu li.active a { background: var(--active-block); font-weight: 600; }
.w1-dropdown-menu-right { left: auto !important; right: 0; }

/* Bootstrap modals (change-email, order details). JS shows them inline. */
.modal.w1-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    overflow-y: auto;
    padding: 40px 16px;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .55);
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.in { opacity: 1; }
.w1-modal .modal-dialog { max-width: 520px; margin: 40px auto; position: relative; z-index: 1051; }
.w1-modal .modal-content {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    color: var(--text);
    font-family: var(--font);
    overflow: hidden;
}
.w1-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
}
.w1-modal .modal-title { margin: 0; font-size: 16px; font-weight: 600; }
.w1-modal .modal-body { padding: 22px 24px; }
.w1-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}
.w1-modal .close {
    padding: 0;
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}
.w1-modal .close:hover { color: var(--text); }

/* Tooltips (data-toggle="tooltip" contract hooks) */
.tooltip { position: absolute; z-index: 1070; display: block; font-family: var(--font); font-size: 12px; }
.tooltip .tooltip-inner {
    max-width: 260px;
    padding: 6px 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    text-align: center;
}

/* ---- Layout: account chip dropdown ------------------------------- */
.jsp-account { position: relative; display: inline-block; }
.jsp-account .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 300;
    min-width: 210px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.jsp-account.open .dropdown-menu { display: block; }
.jsp-account .dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.jsp-account .dropdown-menu li a:hover { background: var(--active-block); }
.jsp-account .dropdown-menu li.active a { background: var(--active-block); font-weight: 600; }
.jsp-account .jsp-acct-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    font-size: 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.jsp-account .jsp-acct-balance {
    font-weight: 600;
    color: var(--gold);
}
.jsp-account .jsp-acct-cur { padding-left: 12px; font-size: 12px; color: var(--muted); }

/* ---- Signin: login modal (:target, no JS) ------------------------ */
/* The open mechanics live in signin.twig itself so login can never be
   stranded by a missing stylesheet; these are only the looks. */
.lp-login-card {
    width: min(1440px, 96vw);
    margin: 4vh auto;
    position: relative;
}
.lp-login-close {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 20;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 18px;
    text-decoration: none;
}
.lp-login-close:hover { color: var(--gold); border-color: var(--gold); }
.lp-login-alerts {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    width: min(430px, 92%);
}

/* ---- Services: real <table> driven by PP hooks, Figma flex look --- */
#service-table.w1-svc-table { display: block; border-collapse: collapse; }
#service-table.w1-svc-table thead,
#service-table.w1-svc-table tbody { display: block; }
#service-table.w1-svc-table tr { display: flex; }
#service-table.w1-svc-table th,
#service-table.w1-svc-table td { display: block; padding: 0; border: 0; font-weight: inherit; text-align: inherit; }
#service-table.w1-svc-table .svc-cell { display: block; }
/* Favorite star (Font Awesome isn't loaded; glyph + data hooks kept) */
.svc-fav { display: block; width: 42px; padding-top: 54px; text-align: center; }
.svc-fav [data-favorite-service-id] { cursor: pointer; }
.svc-fav [data-favorite-icon] { font-size: 15px; font-style: normal; color: var(--muted); }
.svc-fav [data-favorite-icon].fas { color: var(--gold); }
/* Per-service details modal (:target, no JS) */
.svc-modal:target { display: block; }

/* ---- API docs: details/summary accordion ------------------------- */
details.acc-item > summary.acc-head { list-style: none; cursor: pointer; }
details.acc-item > summary.acc-head::-webkit-details-marker { display: none; }
details.acc-item[open] > summary.acc-head .acc-chev { transform: rotate(180deg); }
.acc-type-table { display: none; }
.acc-type-table.acc-type-current { display: block; }
.acc-body .acc-code { white-space: pre; overflow-x: auto; }
select.w1-select {
    height: 44px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    appearance: none;
    -webkit-appearance: none;
}

/* ---- Notifications settings matrix ------------------------------- */
.nt-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.nt-card h5 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.nt-card p { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.nt-matrix { width: 100%; border-collapse: collapse; }
.nt-matrix th, .nt-matrix td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text);
    text-align: left;
}
.nt-matrix th { color: var(--muted); font-weight: 500; }
.nt-matrix input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); }
.nt-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.nt-tabs li a {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 19px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
}
.nt-tabs li.active a { background: var(--active-block); color: var(--text); font-weight: 600; }
.nt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 22px;
    border: 1px solid var(--gold);
    border-radius: 21px;
    background: var(--gold);
    color: #111;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.nt-btn-line { background: transparent; color: var(--gold); }

/* ---- Account page extensions (2FA / language cards reuse acct-*) -- */
.acct-2fa-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.acct-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.acct-readonly-row { display: flex; gap: 12px; flex-wrap: wrap; }
.acct-readonly-row .acct-input { flex: 1 1 200px; }

/* ---- Child panel order extras ------------------------------------ */
.cp-ns-list { margin: 0; padding-left: 18px; }
.cp-ns-list li { font-size: 13px; color: var(--text); line-height: 1.9; }

/* ---- Orders: status dropdown + search keep .orders-* visuals ------ */
.orders-filter.w1-dropdown { cursor: pointer; }
.w1-filter-menu { min-width: 160px; }

/* ---- Signup page: contract blocks over the fixed canvas ----------- */
.su-form-alerts {
    position: absolute;
    left: 165px;
    top: 88px;
    width: 504px;
    z-index: 30;
}
.su-extra {
    position: absolute;
    left: 165px;
    top: 556px;
    width: 504px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 30;
}
.su-extra .su-input { position: static; width: 100%; margin-bottom: 10px; }
.su-captcha {
    position: absolute;
    left: 165px;
    top: 440px;
    z-index: 40;
    background: var(--panel);
    border-radius: 8px;
}

/* ============================================================
   APPENDIX — small component rules referenced by ws1 templates
   ============================================================ */

/* Bare icon/label buttons inside designed wells (search submits, filter
   dropdown toggles) — strip browser button chrome, keep the Figma look. */
.orders-search-btn, .updates-search-btn, .svc-search-ico,
.orders-filter-btn, .updates-filter-btn, .svc-filter-btn {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.orders-filter-btn, .updates-filter-btn, .svc-filter-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Small inline action buttons (orders refill/cancel, affiliates payout) */
.orders-action {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border: 1px solid var(--gold);
    border-radius: 13px;
    background: transparent;
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.orders-action:hover { background: var(--gold); color: #111; }
.orders-action-mute { border-color: var(--border); color: var(--muted); }
.orders-action-mute:hover { background: var(--border); color: var(--text); }
.orders-action-off { opacity: .45; cursor: default; }
.orders-action-off:hover { background: transparent; color: var(--gold); }

/* Generic contract list rows (tickets history, affiliates payouts) */
.w1-list { margin-top: 24px; border-top: 1px solid var(--border); }
.w1-list-row {
    display: flex;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
}
.w1-list-row > * { flex: 1; padding: 8px 12px; }
.w1-list-row a { color: var(--text); text-decoration: none; }
.w1-list-row a:hover { color: var(--gold); }
.w1-list-head { min-height: 40px; color: var(--text); }

/* Labeled field rows inside modals / forms */
.w1-field { margin-bottom: 14px; }
.w1-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--muted);
}
.w1-field input, .w1-field textarea, .w1-field .form-control {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    box-sizing: border-box;
}
.w1-field [disabled] { opacity: .7; }

/* Services favorites header cell */
.svc-h-fav { width: 42px; }

/* Tickets page additions */
.tk-select-wrap { margin-bottom: 22px; }
.tk-upload { margin: 18px 0; }
.tk-history-bar { margin-top: 40px; }

/* Addfunds empty state */
.af-empty { font-size: 13px; color: var(--muted); margin: 12px 0 0; }

/* Child-panel readonly price field wears the Figma value look */
.cp-price-val {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: right;
    outline: none;
}

/* api.twig PHP-example link keeps the button look */
a.api-php { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }


/* ======== c_reskins.css ======== */
/* ============================================================
   c_reskins.css — ws2 re-skins (pages with NO Figma frame):
   drip_feed (.df-) · subscriptions (.sub-) · refill (.rf-) ·
   refunds (.rfd-) · viewticket (.vt-) · child_panel (.chp-) ·
   2fa (.tfa-) · setnewpassword (.snp-) · confirmemail (.cem-) ·
   blog (.blg-) · blogpost (.bp-).
   Skin = theme idiom (orders/services/tickets/account/resetpassword
   feel) over the untouched PP default contract. Same values as the
   Figma-built pages, grouped per pattern to avoid 4x repetition.
   Load order: after bootstrap.css + theme style.css.
   ============================================================ */

/* ---- Reskin tokens (theme-verbatim values; light overrides) ---- */
:root {
    --rk-card-bg:  #060912;   /* card fill (account/rp cards) */
    --rk-card-bd:  #131721;   /* card outline */
    --rk-field-bg: #020307;   /* input/textarea fill */
    --rk-well-bg:  #0A1220;   /* search/filter wells (orders bar) */
    --rk-ink:      #FFFFFF;   /* ink on fields, outline buttons */
    --rk-red:      #FF2C2C;   /* danger (orders p-canceled, both themes) */
    --rk-ok:       #41EB8F;   /* success (matches --green) */
}
:root[data-theme="light"] {
    --rk-card-bg:  #FDFCFE;
    --rk-card-bd:  #EBEBFF;
    --rk-field-bg: #FFFFFF;
    --rk-well-bg:  #FFFFFF;
    --rk-ink:      #000000;
    --rk-ok:       #128A43;   /* readable green on light */
}

/* ============================================================
   SHARED TABLE-PAGE KIT — drip_feed / subscriptions / refill /
   refunds (+ child_panel table). Feel: theme/orders + updates.
   ============================================================ */

/* Page titles — same -16px topbar overlap as orders/updates/account */
.df-title, .sub-title, .rf-title, .rfd-title, .vt-title, .chp-title {
    margin-top: -16px;
    line-height: 45px;
}

/* ---- Toolbar: status tabs left, search right ---- */
.df-bar, .sub-bar, .rf-bar, .rfd-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

/* Status tabs (was bootstrap nav-pills) — pill language of the shell */
.df-tabs, .sub-tabs, .rf-tabs, .rfd-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.df-tabs li a, .sub-tabs li a, .rf-tabs li a, .rfd-tabs li a {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 19px;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    white-space: nowrap;
}
.df-tabs li a:hover, .sub-tabs li a:hover, .rf-tabs li a:hover, .rfd-tabs li a:hover {
    color: var(--text);
}
.df-tabs li.active a, .sub-tabs li.active a, .rf-tabs li.active a, .rfd-tabs li.active a {
    background: var(--active-block);
    color: var(--text);
    font-weight: 600;
}

/* Search well (orders/updates bar idiom: h48 r5 well + trailing control) */
.df-search, .sub-search, .rf-search, .rfd-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    min-width: 280px;
    flex: 0 1 360px;
    border-radius: 5px;
    background: var(--rk-well-bg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, .05);
}
[data-theme="light"] .df-search, [data-theme="light"] .sub-search,
[data-theme="light"] .rf-search, [data-theme="light"] .rfd-search {
    box-shadow: 0 15px 30px rgba(45, 44, 136, .05);
}
.df-search input, .sub-search input, .rf-search input, .rfd-search input {
    flex: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 12px 0 22px;
    border: 0;
    background: transparent;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    outline: none;
}
.df-search input::placeholder, .sub-search input::placeholder,
.rf-search input::placeholder, .rfd-search input::placeholder {
    color: var(--muted);
    opacity: 1;
}
/* Icon submit (drip_feed/refill/refunds) */
.df-search-btn, .rf-search-btn, .rfd-search-btn {
    display: grid;
    place-items: center;
    height: 48px;
    padding: 0 20px;
    border: 0;
    background: transparent;
    color: var(--text);
}
/* Text submit (subscriptions keeps its lang('subscriptions.search.button')) */
.sub-search-btn {
    height: 34px;
    margin-right: 7px;
    padding: 0 18px;
    border: 0;
    border-radius: 5px;
    background: var(--gold);
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF; /* gold-button ink, Figma-verbatim both themes */
}

/* ---- Tables (open rows: head labels, top borders, odd bands) ---- */
.df-table-wrap, .sub-table-wrap, .rf-table-wrap, .rfd-table-wrap, .chp-table-wrap {
    width: 100%;
    margin-top: 26px;
    overflow-x: auto;
}
.chp-table-wrap { margin-top: 8px; }
.df-table, .sub-table, .rf-table, .rfd-table, .chp-table {
    width: 100%;
    border-collapse: collapse;
}
.df-table th, .sub-table th, .rf-table th, .rfd-table th, .chp-table th {
    padding: 0 14px 16px;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    color: var(--text);
    text-align: left;
    white-space: nowrap;
}
.df-table td, .sub-table td, .rf-table td, .rfd-table td, .chp-table td {
    padding: 17px 14px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.df-table tbody tr:nth-child(odd), .sub-table tbody tr:nth-child(odd),
.rf-table tbody tr:nth-child(odd), .rfd-table tbody tr:nth-child(odd),
.chp-table tbody tr:nth-child(odd) {
    background: var(--row-a);
}
.df-table td a, .sub-table td a, .rf-table td a, .rfd-table td a {
    color: var(--text);
}
.df-table td a:hover, .sub-table td a:hover, .rf-table td a:hover, .rfd-table td a:hover {
    text-decoration: underline;
}
/* Long-URL cells: wrap instead of blowing the row width */
.df-table .link, .sub-table .link, .rf-table .rf-link {
    max-width: 240px;
    white-space: normal;
    word-break: break-all;
}
.sub-table .nowrap, .df-table .nowrap { white-space: nowrap; }

/* Status pill — neutral (row status slugs aren't exposed to the template) */
.df-status, .sub-status, .rf-status, .rfd-status, .chp-status {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 12%, transparent);
}

/* Row action buttons (subscriptions cancel/unpause/reorder, child_panel admin) */
.sub-actions { white-space: nowrap; }
.sub-btn, .chp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.sub-btn-line, .chp-btn-line {
    border: 1px solid var(--rk-ink);
    background: transparent;
    color: var(--rk-ink);
}
.sub-btn-line:hover, .chp-btn-line:hover { opacity: .75; }
.sub-btn-gold {
    border: 0;
    background: var(--gold);
    color: #FFFFFF; /* Figma-verbatim both themes */
}
.sub-btn-gold:hover { opacity: .9; }

/* Empty-state row (list var empty) */
.df-empty, .sub-empty, .rf-empty, .rfd-empty {
    padding: 44px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

/* ---- Pagination (was bootstrap .pagination) ---- */
.df-pagination, .sub-pagination, .rf-pagination, .rfd-pagination, .blg-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}
.blg-pagination { justify-content: center; margin-top: 34px; }
.df-pagination li a, .sub-pagination li a, .rf-pagination li a,
.rfd-pagination li a, .blg-pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}
.df-pagination li a:hover, .sub-pagination li a:hover, .rf-pagination li a:hover,
.rfd-pagination li a:hover, .blg-pagination li a:hover {
    color: var(--text);
    border-color: var(--text);
}
.df-pagination li.active a, .sub-pagination li.active a, .rf-pagination li.active a,
.rfd-pagination li.active a, .blg-pagination li.active a {
    background: var(--active-block);
    border-color: transparent;
    color: var(--text);
    font-weight: 600;
}

/* ============================================================
   ALERTS — bootstrap .alert kept for data-dismiss JS; skin is ours.
   (.alert.x-alert two-class selectors outrank bootstrap's single classes)
   ============================================================ */
.alert.rfd-alert, .alert.vt-alert, .alert.snp-alert, .alert.chp-alert, .alert.cem-alert {
    position: relative;
    margin: 0 0 16px;
    padding: 14px 46px 14px 18px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
}
.alert.rfd-alert-info {
    border: 1px solid transparent;
    background: var(--active-block);
    color: var(--text);
}
.alert.vt-alert-danger, .alert.snp-alert-danger, .alert.chp-alert-danger, .alert.cem-alert-danger {
    border: 1px solid color-mix(in srgb, var(--rk-red) 32%, transparent);
    background: color-mix(in srgb, var(--rk-red) 9%, transparent);
    color: var(--rk-red);
}
.alert.snp-alert-success, .alert.chp-alert-success, .alert.cem-alert-success {
    border: 1px solid color-mix(in srgb, var(--rk-ok) 32%, transparent);
    background: color-mix(in srgb, var(--rk-ok) 9%, transparent);
    color: var(--rk-ok);
}
/* Dismiss button (bootstrap .close restyled to the theme) */
.rfd-alert .close, .vt-alert .close, .snp-alert .close, .chp-alert .close, .cem-alert .close {
    position: absolute;
    top: 10px;
    right: 12px;
    float: none;
    margin: 0;
    padding: 4px;
    border: 0;
    background: transparent;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: inherit;
    opacity: .6;
    text-shadow: none;
}
.rfd-alert .close:hover, .vt-alert .close:hover, .snp-alert .close:hover,
.chp-alert .close:hover, .cem-alert .close:hover { opacity: 1; }
.rfd-bar { margin-top: 22px; }

/* ============================================================
   VIEWTICKET (.vt-) — thread + reply form (tickets-page feel)
   ============================================================ */
.vt-card {
    max-width: 860px;
    margin-top: 26px;
    padding: 30px 32px 32px;
    background: var(--rk-card-bg);
    border: 1px solid var(--rk-card-bd);
    border-radius: var(--radius-card);
}
.vt-thema {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}
.vt-thread {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 0 8px;
}
.vt-msg { display: flex; flex-direction: column; max-width: 78%; }
.vt-msg-user { align-self: flex-end; align-items: flex-end; }
.vt-msg-support { align-self: flex-start; align-items: flex-start; }
.vt-bubble {
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    word-break: break-word;
}
.vt-msg-user .vt-bubble {
    background: var(--active-block);
    border-bottom-right-radius: 4px;
}
.vt-msg-support .vt-bubble {
    background: var(--rk-well-bg);
    border: 1px solid var(--rk-card-bd);
    border-bottom-left-radius: 4px;
}
.vt-files {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.vt-files a {
    font-size: 12px;
    color: var(--muted);
    text-decoration: underline;
}
.vt-files a:hover { color: var(--text); }
.vt-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 7px;
    font-size: 11px;
    color: var(--muted);
}
.vt-meta strong { font-weight: 600; color: var(--text); }
.vt-meta small { font-size: 11px; }

/* Reply form */
.vt-card form {
    margin-top: 20px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}
.vt-field { margin-bottom: 14px; }
.vt-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.vt-textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    padding: 14px 16px;
    border: 0;
    border-radius: 5px;
    background: var(--rk-field-bg);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    outline: none;
    resize: vertical;
}
.vt-textarea:focus { box-shadow: 0 0 0 1px var(--gold); }
.vt-upload { margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.vt-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 176px;
    height: 49px;
    margin-top: 14px;
    padding: 0 28px;
    border: 0;
    border-radius: 5px;
    background: var(--gold);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF; /* Figma-verbatim both themes */
}
.vt-submit:hover { opacity: .9; }

/* ============================================================
   AUTH CARDS — 2fa (.tfa-) / setnewpassword (.snp-) / confirmemail (.cem-)
   (reset-password auth-card idiom: centered r20 card, r5 fields, gold CTA)
   ============================================================ */
.tfa-wrap, .snp-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 48px 20px;
}
.cem-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62vh;
    padding: 40px 20px;
}
.tfa-card, .snp-card, .cem-card {
    width: 100%;
    max-width: 480px;
    padding: 36px 36px 32px;
    background: var(--rk-card-bg);
    border: 1px solid var(--rk-card-bd);
    border-radius: var(--radius-card);
}
.tfa-title, .snp-title, .cem-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}
.tfa-text {
    margin: 10px 0 22px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}
.snp-title { margin-bottom: 22px; }
.tfa-field, .snp-field, .cem-field { margin-bottom: 16px; }
.tfa-label, .snp-label, .cem-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.tfa-input, .snp-input, .cem-input {
    display: block;
    width: 100%;
    height: 49px;
    padding: 0 16px;
    border: 0;
    border-radius: 5px;
    background: var(--rk-field-bg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    outline: none;
    box-sizing: border-box;
}
.tfa-input:focus, .snp-input:focus, .cem-input:focus { box-shadow: 0 0 0 1px var(--gold); }
.snp-input[readonly] { color: var(--muted); }
.cem-input-disabled {
    display: flex;
    align-items: center;
    color: var(--muted);
}
.tfa-submit, .snp-submit, .cem-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 49px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: var(--gold);
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF; /* Figma-verbatim both themes */
}
.tfa-submit:hover, .snp-submit:hover, .cem-submit:hover { opacity: .9; }

/* confirmemail specifics */
.cem-card { text-align: center; }
.cem-alerts { text-align: left; }
.cem-desc {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
}
.cem-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}
.cem-actions .cem-submit { margin-top: 0; }
.cem-link {
    padding: 6px;
    border: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: underline;
}
.cem-link:hover { color: var(--text); }

/* Change-email modal — bootstrap structure kept, surfaces re-tokened */
.cem-modal.modal-content {
    background: var(--rk-card-bg);
    border: 1px solid var(--rk-card-bd);
    border-radius: var(--radius-card);
    color: var(--text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.cem-modal .modal-header {
    padding: 20px 28px;
    border-bottom: 1px solid var(--border);
}
.cem-modal .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}
.cem-modal .modal-body { padding: 22px 28px; }
.cem-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 28px;
    border-top: 1px solid var(--border);
}
.cem-modal .close {
    margin-top: 0;
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
    opacity: .6;
    text-shadow: none;
}
.cem-modal .close:hover { opacity: 1; }
.cem-btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    border: 1px solid var(--rk-ink);
    border-radius: 5px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--rk-ink);
}
.cem-btn-line:hover { opacity: .75; }
.cem-submit-modal { width: auto; min-width: 140px; height: 44px; margin-top: 0; padding: 0 22px; }

/* ============================================================
   CHILD_PANEL (.chp-) — panels list card
   ============================================================ */
.chp-card {
    max-width: 900px;
    margin-top: 26px;
    padding: 24px 28px;
    background: var(--rk-card-bg);
    border: 1px solid var(--rk-card-bd);
    border-radius: var(--radius-card);
}
/* Renew/restore banners: message left, action right */
.alert.chp-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
}
.chp-alert-action { flex: none; order: 2; }

/* ============================================================
   BLOG (.blg-) / BLOGPOST (.bp-) — public content pages
   (chrome = shared lp-* from c_signin.css; content cards are ours)
   ============================================================ */
.blg-main, .bp-main {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 64px 24px 84px;
}
.blg-title {
    margin: 0 0 28px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}
.blg-intro {
    margin-bottom: 28px;
    padding: 26px 30px;
    background: var(--rk-card-bg);
    border: 1px solid var(--rk-card-bd);
    border-radius: var(--radius-card);
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}
.blg-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.blg-card, .bp-card {
    padding: 28px 30px;
    background: var(--rk-card-bg);
    border: 1px solid var(--rk-card-bd);
    border-radius: var(--radius-card);
}
.bp-card { padding: 34px 36px; }
.blg-card-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}
.blg-img, .bp-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 18px;
    border-radius: 12px;
}
.bp-img { margin-bottom: 22px; }
.blg-card-text, .bp-content {
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
}
.blg-card-text { margin-bottom: 20px; }
.blg-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 5px;
    background: var(--gold);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF; /* Figma-verbatim both themes */
}
.blg-more:hover { opacity: .9; }
.bp-title {
    margin: 0 0 18px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}
.bp-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 49px;
    margin-top: 24px;
    padding: 0 28px;
    border: 1px solid var(--rk-ink);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rk-ink);
}
.bp-back:hover { opacity: .75; }

/* Admin-authored HTML inside blog bodies — prose defaults on tokens */
.blg-intro p, .blg-card-text p, .bp-content p { margin: 0 0 14px; }
.blg-intro h1, .blg-intro h2, .blg-intro h3, .blg-intro h4,
.blg-card-text h1, .blg-card-text h2, .blg-card-text h3, .blg-card-text h4,
.bp-content h1, .bp-content h2, .bp-content h3, .bp-content h4 {
    margin: 20px 0 10px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}
.blg-intro strong, .blg-card-text strong, .bp-content strong { color: var(--text); }
.blg-intro a, .blg-card-text a, .bp-content a {
    color: var(--text);
    text-decoration: underline;
}
.blg-intro ul, .blg-intro ol, .blg-card-text ul, .blg-card-text ol,
.bp-content ul, .bp-content ol { margin: 0 0 14px; padding-left: 22px; }
.blg-intro img, .blg-card-text img, .bp-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ============================================================
   Small screens — let bars/cards breathe below the shell's frames
   ============================================================ */
@media (max-width: 700px) {
    .df-search, .sub-search, .rf-search, .rfd-search { flex: 1 1 100%; min-width: 0; }
    .vt-msg { max-width: 92%; }
    .tfa-card, .snp-card, .cem-card { padding: 28px 22px 26px; }
    .blg-card, .bp-card { padding: 22px 20px; }
}


/* ======== c_fixes.css ======== */
/* ============================================================
   c_fixes.css — ws3 surgical fixes from the founder's live review
   (2026-07-19). Loads LAST in the deploy merge:
   theme/style.css → c_ws1.css → c_reskins.css → c_fixes.css.

   Sections:
   F1  Real sidebar logo (frame crops, theme-swapped)
   F2  Poppins beats Bootswatch "Journal" (Georgia/News Cycle)
   F3  Profile dropdown rebuild (header + balance pill + currency
       chip cloud + clean rows, 320px cap)
   F4  Full-width shell (24px gutters, kill bootswatch container caps,
       tables flex to fill)
   F5  One hover/press system for everything interactive
   F6  Orders fluid grid (incl. the task==1 actions column)
   F7  Neworder service-description card
   F8  Services fluid table + 2-line description clamp
   F9  Signup flowing fields (any admin field set, no duplicates)
   F10 Terms working tabs + complete-terms card
   F11 Guest-chrome parity helpers (.lp wraps for services/api/blog)
   All colors via theme vars — dark + light both served.
   ============================================================ */

/* ============================================================
   F2 — FONTS. Bootswatch Journal sets Georgia on body and
   "News Cycle" on h1–h6 (equal specificity, loads before us — we
   win by loading later). One rule family covers every element the
   founder listed; no !important needed.
   ============================================================ */
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
table, th, td, label, .nav, .dropdown-menu, .pagination, .alert,
.btn, button, input, select, textarea, .form-control {
    font-family: var(--font);
}

/* ============================================================
   F1 — SIDEBAR LOGO. Two <img> crops swapped by [data-theme].
   ============================================================ */
.side-logo { display: flex; align-items: center; }
.side-logo-img { display: block; width: auto; height: 30px; }
.side-logo-light { display: none; }
:root[data-theme="light"] .side-logo-dark { display: none; }
:root[data-theme="light"] .side-logo-light { display: block; }

/* ============================================================
   F3 — PROFILE DROPDOWN. Bootstrap mechanics unchanged
   (.jsp-account.open .dropdown-menu from c_ws1.css shows it);
   this is the designed interior.
   ============================================================ */
.jsp-account .dropdown-menu.jsp-menu {
    left: auto; /* bootswatch sets left:0 — over-constrained abs-pos ignores right:0 without this */
    right: 0;
    min-width: 248px;
    max-width: 284px;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
}
.jsp-account .dropdown-menu .jsp-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px 10px;
    border-bottom: 1px solid var(--border);
}
.jsp-menu-name { font-size: 12px; color: var(--muted); }
.jsp-menu-balance {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    font-size: 12px;
    font-weight: 600;
    color: var(--gold);
    white-space: nowrap;
}
/* Currency chip cloud — all #currencies-item hooks kept; 2 rows max */
.jsp-account .dropdown-menu .jsp-menu-curs {
    padding: 10px 4px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.jsp-cur-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 58px; /* 2 chip rows, then scroll */
    overflow-y: auto;
    scrollbar-width: thin;
}
.jsp-cur-cloud a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 13px;
    font-size: 11px;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}
.jsp-cur-cloud a b { font-weight: 600; color: var(--text); }
.jsp-cur-cloud a:hover { border-color: var(--gold); color: var(--text); }
/* Account links — clean rows */
.jsp-account .dropdown-menu .jsp-menu-item a {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.jsp-account .dropdown-menu .jsp-menu-item a:hover { background: var(--active-block); }
.jsp-account .dropdown-menu .jsp-menu-item.active a { background: var(--active-block); font-weight: 600; }

/* ============================================================
   F4 — FULL-WIDTH SHELL. 24px gutters; bootswatch .container caps
   and grid floats neutralized inside the authed shell; admin-text
   .well blocks skinned; tables flex to fill.
   ============================================================ */
.content { padding: 0 24px 40px; }

.main .container, .main .container-fluid {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
.main .row { margin-left: 0; margin-right: 0; }
.main .row > [class*="col-"] {
    float: none;
    width: auto;
    min-height: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
}
/* Admin page-text blocks (newOrderText / servicesText / addfunds …) */
.main .well, .lp .well {
    min-height: 0;
    padding: 18px 22px;
    margin: 22px 0 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: none;
    color: var(--text);
    font-size: 13px;
    line-height: 1.7;
}

/* ---- Orders table: fluid 9/10-col grid (details in F6) ---- */
.orders-head, .orders-table { width: 100%; margin-left: 0; }
.orders-table::after { width: 100%; }

/* ---- Updates table: fluid ---- */
.updates-head, .updates-table { width: 100%; margin-left: 0; }
.updates-head, .updates-row {
    grid-template-columns: minmax(220px, 1.1fr) minmax(150px, .7fr) 2fr;
}

/* ---- Affiliates: cards + table fluid ---- */
.aff-card, .aff-table { width: 100%; }

/* ---- Account: two fluid columns ---- */
.acct-col-l { flex: 1 1 56%; width: auto; }
.acct-col-r { flex: 1 1 44%; width: auto; }
.acct-user, .acct-pass, .acct-tz, .acct-api { width: 100%; }
/* Figma fixed heights clip the real contract content (2 inputs + change-email
   button in the 90px user card) — cards size to content instead. */
.acct-card { height: auto; min-height: 0; padding-right: 26px; padding-bottom: 24px; }
.acct-card .acct-input, .acct-card .acct-select-wrap { width: 100%; max-width: none; box-sizing: border-box; }
.acct-card .acct-input + .acct-input, .acct-card .acct-select-wrap + .acct-input { margin-top: 12px; }
.acct-user .acct-btn-line, .acct-tz .acct-btn-line { margin-top: 12px; }
.acct-pass .acct-btn-gold { margin-top: 14px; }
.acct-api form, .acct-tz form { margin-top: 12px; }
.acct-api form { margin-top: 14px; }

/* ---- Add funds: history flexes, pay card keeps its measure ---- */
.af-left { flex: 1 1 auto; width: auto; margin-left: 0; }
.af-table { width: 100%; }

/* ---- Tickets / massorder: panels flex ---- */
.ticket-panel { width: 100%; max-width: 100%; height: auto; min-height: 480px; margin-left: 0; }
.mo-card { width: 100%; max-width: 720px; height: auto; min-height: 380px; }
/* ---- Child panels: the 900px cap read as a dead right gutter ---- */
.chp-card { max-width: none; }
/* ---- Child panel ORDER: card + form flex with the shell ---- */
.cp-card { width: 100%; max-width: 1100px; height: auto; min-height: 380px; padding-right: 30px; padding-bottom: 30px; }
.cp-form { flex: 1 1 46%; width: auto; }
.cp-form .cp-input, .cp-form .cp-select { width: 100%; }

/* ---- API: fluid wrap ---- */
.api-wrap { width: 100%; max-width: 1100px; }

/* ============================================================
   F5 — HOVER / PRESS SYSTEM (one language, design tokens)
   ============================================================ */

/* Sidebar nav */
.sidebar .nav-item { transition: background-color .15s ease, color .15s ease; }
.sidebar .nav-item:hover { background: color-mix(in srgb, var(--active-block) 55%, transparent); color: var(--text); }
.sidebar .nav-item:hover .nav-ico { color: var(--muted); }

/* Buttons — explicit roster (bare `button` would fight the absolute-
   positioned icon buttons that center with translateY(-50%)). */
.btn, .lp-btn, .orders-new, .orders-action, .no-submit, .af-pay, .tk-submit,
.nt-btn, .su-btn-gold, .su-sso, .vt-submit, .cem-submit, .cem-btn-line,
.snp-submit, .tfa-submit, .mo-submit, .sub-btn, .api-php, .blg-more, .bp-back,
.chp-btn, .acct-btn-gold, .acct-btn-line, .svc-desc-link, .rp-send,
input[type="submit"], .df-pagination a, .sub-pagination a, .rf-pagination a,
.rfd-pagination a, .blg-pagination a, .w1-pagination a {
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease,
        color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover, .lp-btn:hover, .orders-new:hover, .orders-action:hover, .no-submit:hover,
.af-pay:hover, .tk-submit:hover, .nt-btn:hover, .su-btn-gold:hover, .su-sso:hover,
.vt-submit:hover, .cem-submit:hover, .snp-submit:hover, .tfa-submit:hover,
.mo-submit:hover, .sub-btn:hover, .api-php:hover, .blg-more:hover, .bp-back:hover,
.chp-btn:hover, .acct-btn-gold:hover, .acct-btn-line:hover, .rp-send:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
}
.btn:active, .lp-btn:active, .orders-new:active, .orders-action:active, .no-submit:active,
.af-pay:active, .tk-submit:active, .nt-btn:active, .su-btn-gold:active, .su-sso:active,
.vt-submit:active, .cem-submit:active, .snp-submit:active, .tfa-submit:active,
.mo-submit:active, .sub-btn:active, .api-php:active, .blg-more:active, .bp-back:active,
.chp-btn:active, .acct-btn-gold:active, .acct-btn-line:active, .rp-send:active,
input[type="submit"]:active {
    transform: scale(.98);
}
/* Gold primaries get the gold glow on hover */
.no-submit:hover, .af-pay:hover, .tk-submit:hover, .nt-btn:not(.nt-btn-line):hover,
.su-btn-gold:hover, .vt-submit:hover, .sub-btn-gold:hover, .cem-submit:hover,
.mo-submit:hover, .lp-btn-gold:hover, .blg-more:hover {
    box-shadow: 0 8px 22px color-mix(in srgb, var(--gold) 26%, transparent);
}

/* Table rows — pointer + active-block tint (beats the zebra rules) */
.orders-table .orders-row:hover,
#service-table .svc-row:hover {
    background: var(--active-block);
    cursor: pointer;
}

/* Cards — gentle raise */
.stat-card, .no-stat, .aff-box, .no-card, .nt-card, .chp-card {
    transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover, .no-stat:hover, .aff-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
:root[data-theme="light"] .stat-card:hover,
:root[data-theme="light"] .no-stat:hover,
:root[data-theme="light"] .aff-box:hover {
    box-shadow: 0 14px 34px rgba(45, 44, 136, .12);
}

/* Pagination / tabs / dropdown items — one accent behavior */
.df-tabs li a, .sub-tabs li a, .rf-tabs li a, .rfd-tabs li a, .nt-tabs li a,
.w1-dropdown .dropdown-menu li a, .jsp-cur-cloud a, .tms-tab {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.w1-dropdown .dropdown-menu li a:hover, .df-tabs li a:hover, .sub-tabs li a:hover,
.rf-tabs li a:hover, .rfd-tabs li a:hover, .nt-tabs li a:hover {
    background: var(--active-block);
    color: var(--text);
}
ul.pagination.w1-pagination li a { background: transparent; } /* bootswatch fills #fff otherwise */
ul.pagination.w1-pagination li a:hover,
.df-pagination a:hover, .sub-pagination a:hover, .rf-pagination a:hover,
.rfd-pagination a:hover, .blg-pagination a:hover {
    color: var(--text);
    border-color: var(--gold);
    transform: translateY(-1px);
}

/* ============================================================
   F6 — ORDERS fluid grid. 9 cols; with task==1 the template adds
   .orders-has-actions and the actions column joins the grid.
   Link/Service cells ellipsize instead of overflowing.
   ============================================================ */
.orders-head, .orders-row {
    grid-template-columns: 56px minmax(128px, 1.05fr) minmax(150px, 1.35fr) 76px 92px 78px minmax(140px, 1.2fr) 112px 82px;
}
.orders-head.orders-has-actions, .orders-table.orders-has-actions .orders-row {
    grid-template-columns: 56px minmax(118px, 1fr) minmax(140px, 1.25fr) 72px 88px 74px minmax(128px, 1.1fr) 108px 78px 124px;
}
.orders-row .orders-cell { min-width: 0; }
/* Link + Service cells: flex-centered ellipsis, modal trigger stays usable */
.orders-ellip {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orders-row .orders-cell:nth-child(3),
.orders-row .orders-cell:nth-child(7) {
    padding: 0 10px;
}
.orders-row .orders-cell:nth-child(3) a { flex: none; margin-left: 6px; }
/* Refill/Cancel cluster */
.orders-row .orders-cell .orders-action { margin: 2px 2px; }

/* ============================================================
   F7 — NEWORDER service description: the JS-filled block becomes
   the designed card (was an unstyled .panel-body blob).
   ============================================================ */
#service_description { margin-top: 4px; }
#service_description .control-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    color: var(--muted);
    text-transform: uppercase;
}
#service_description .panel-body {
    position: relative;
    max-height: 240px;
    overflow-y: auto;
    padding: 16px 18px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 14px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.75;
    scrollbar-width: thin;
}
#service_description .panel-body * { font-family: var(--font); }
#service_description .panel-body b, #service_description .panel-body strong { color: var(--text); font-weight: 600; }
#service_description .panel-body a { color: var(--gold); }

/* ============================================================
   F8 — SERVICES: fluid table + 2-line clamp + guest wrap.
   (ws1 remaps the real table to flex rows; these rules size the
   columns fluidly and kill the 1036px / -11px clip.)
   ============================================================ */
#service-table.w1-svc-table { width: 100%; margin-left: 0; margin-top: 40px; }
#service-table .svc-h-fav, #service-table .svc-fav { flex: 0 0 42px; width: 42px; }
#service-table .svc-fav { display: flex; align-items: center; justify-content: center; padding-top: 0; }
#service-table .svc-h-id, #service-table .svc-id { flex: 0 0 62px; width: auto; }
#service-table .svc-h-service, #service-table .svc-service { flex: 1 1 24%; width: auto; min-width: 0; }
#service-table .svc-h-rate, #service-table .svc-rate { flex: 0 0 92px; width: auto; }
#service-table .svc-h-min, #service-table .svc-min { flex: 0 0 92px; width: auto; }
#service-table .svc-h-max, #service-table .svc-max { flex: 0 0 104px; width: auto; }
#service-table .svc-h-avg, #service-table .svc-avg { flex: 0 0 140px; width: auto; }
#service-table .svc-h-desc, #service-table .svc-desc { flex: 1 1 26%; width: auto; min-width: 0; }
#service-table .svc-cat td { flex: 1 1 100%; }
/* Rows breathe with content; nothing overflows into the next row */
#service-table .svc-row { height: auto; min-height: 96px; }
#service-table .svc-row .svc-cell { overflow: hidden; }
#service-table .svc-name { width: auto; }
/* The 2-line clamp — "View Details" opens the full text in the modal */
#service-table .svc-desc-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: auto;
    padding-right: 12px;
}
/* Tools row: search flexes up to its Figma measure */
.svc-search { flex: 1 1 auto; max-width: 484px; }

/* Guest wrap (F11): lp chrome + comfortable measure for the table */
.svc-guest, .api-guest { background: var(--bg); min-height: 100vh; }
.svc-guest-main, .api-guest-main {
    max-width: 1220px;
    margin: 0 auto;
    padding: 44px 32px 72px;
}
.svc-guest .svc-title, .api-guest .api-title { margin-top: 0; }

/* ============================================================
   F9 — SIGNUP: all fields from the admin loop, flowing layout.
   First two fields share a 2-col row; the rest stack. Any field
   set works — no static duplicates, nothing absolutely positioned.
   The canvas grows with the field count (right panel stretches,
   art crop stays top-anchored in the first 721px).
   ============================================================ */
.su { height: auto; min-height: 721px; overflow: visible; }
.su-panel, .su-divider { top: 0; bottom: 0; height: auto; }
.su-left {
    position: relative;
    z-index: 5;
    width: 504px;
    margin-left: 165px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}
.su-left .su-logo { position: static; flex: none; }
.su-left .su-h1 { position: static; margin-top: 26px; }
.su-left .su-sub { position: static; margin-top: 4px; }
.su-left .su-form { position: static; margin-top: 22px; width: 100%; }
.su-form .su-form-alerts, .su-form .su-captcha {
    position: static;
    width: auto;
    max-height: none;
    margin: 0 0 14px;
}
.su-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.su-fields .su-input {
    position: static;
    width: 100%;
    grid-column: auto;
    margin: 0;
}
.su-fields .su-input:nth-child(n+3) { grid-column: 1 / -1; }
.su-form .su-agree { position: static; margin-top: 16px; }
.su-form .su-signup-btn { position: static; width: 100%; margin-top: 18px; }
.su-left .su-or { position: static; width: 100%; margin-top: 20px; }
.su-left .su-sso-row { position: static; margin-top: 20px; display: flex; gap: 11px; }
.su-left .su-sso { position: static; top: auto; left: auto; flex: 1 1 0; width: auto; }

/* ============================================================
   F10 — TERMS: working tabs + flowing panel + complete-terms card.
   The Figma tab bar look (72px rounded tabs, centered 1005px copy)
   is kept; bodies flow and a tiny JS switcher (in terms.twig)
   toggles .is-active / hidden. Guests get the lp canvas, authed
   users the same card inside the shell (.tms-shell).
   ============================================================ */
/* Panel: from fixed 1205x1859 absolute → flowing card */
.tms-panel {
    position: relative;
    left: auto;
    top: auto;
    width: min(1205px, calc(100% - 80px));
    height: auto;
    min-height: 480px;
    margin: 46px auto 0;
    padding: 44px 100px 60px;
}
/* Tab bar — Figma metrics, now a flex row of real buttons */
.tms-tabs { display: flex; flex-wrap: wrap; gap: 17px; }
.tms-tabs .tms-tab {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: 72px;
    margin: 0;
    padding: 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--lp-card, var(--panel));
    box-shadow: none;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    color: var(--lp-muted, var(--muted));
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.tms-tabs .tms-tab:hover { color: var(--lp-ink, var(--text)); }
.tms-tabs .tms-tab.is-active {
    background: var(--tms-tab-on, var(--active-block));
    box-shadow: var(--tms-tab-shadow, none);
    color: var(--lp-ink, var(--text));
    font-weight: 600;
}
.tms-tabs .tms-tab .tms-tab-t { position: static; font: inherit; color: inherit; line-height: 1; }
/* Bodies — Figma copy metrics (centered, 14/28 muted), flowing */
.tms-bodies { margin-top: 36px; }
.tms-body[hidden] { display: none; }
.tms-body .tms-panel-title {
    position: static;
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--lp-ink, var(--text));
    text-align: center;
}
.tms-body .tms-h, .tms-body .tms-p { position: static; left: auto; width: auto; max-width: 1005px; margin-left: auto; margin-right: auto; }
.tms-body .tms-h { margin-top: 28px; margin-bottom: 12px; }
.tms-body .tms-p { margin-bottom: 14px; }
.tms-body .tms-li { margin-bottom: 8px; }
/* Complete terms (admin {{ termsofservice }} — never lost) */
.tms-full {
    width: min(1205px, calc(100% - 80px));
    margin: 28px auto 0;
    padding: 30px 60px;
    background: var(--lp-surface, var(--panel));
    border: 1px solid var(--border);
    border-radius: 24px;
}
.tms-full-title { margin: 0 0 12px; font-size: 18px; font-weight: 600; color: var(--lp-ink, var(--text)); }
.tms-full-text { font-size: 13px; line-height: 1.8; color: var(--lp-muted, var(--muted)); white-space: pre-line; }
/* Authed shell variant */
.tms-shell { --tms-tab-on: var(--active-block); --tms-tab-shadow: 0 15px 30px rgba(0,0,0,.05); }
.tms-shell .tms-panel, .tms-shell .tms-full { width: 100%; margin-left: 0; margin-right: 0; }
.tms-shell .tms-panel { margin-top: 24px; }
/* Guest page: title flows above the panel (was absolute), footer flows
   after the content (keeps position:relative — its logo/nav/socials
   are absolutely positioned). */
.tms .tms-title { position: relative; left: auto; top: auto; padding-top: 84px; text-align: center; }
.tms .tms-main { height: auto; min-height: 0; padding-bottom: 60px; }
.tms .lp-footer { margin-top: 20px; }

/* ============================================================
   F11 — FAQ / CONTACT authed shell variants (guests keep the
   Figma canvas; logged-in users get flowing cards in the shell).
   ============================================================ */
.fq-shell-title, .ct-shell-title { margin-top: -16px; line-height: 45px; }
.fq-shell-sub, .ct-shell-sub { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.fq-shell-list { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.fq-shell-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 22px;
}
.fq-shell-q { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.fq-shell-a { margin: 10px 0 0; font-size: 13px; line-height: 1.75; color: var(--muted); }
.ct-shell-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 26px; align-items: flex-start; }
.ct-shell-card {
    flex: 1 1 420px;
    max-width: 560px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 26px 28px;
}
.ct-shell-channels { flex: 1 1 260px; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.ct-shell-channel {
    display: flex; align-items: center; gap: 12px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 14px 18px;
    font-size: 13px; color: var(--text); word-break: break-all;
}
.ct-shell-channel .ct-tile { position: static; top: auto; left: auto; flex: none; width: 32px; height: 32px; }
.ct-shell-card .ct-form { display: flex; flex-direction: column; gap: 12px; }
.ct-shell-card .ct-input {
    position: static; width: 100%; height: 46px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg); color: var(--text);
    padding: 0 16px; font-family: var(--font); font-size: 13px; outline: none;
}
.ct-shell-card textarea.ct-input { height: 120px; padding: 12px 16px; resize: vertical; }
.ct-shell-card .ct-input:focus { border-color: var(--gold); }
.ct-shell-card .ct-send {
    position: static;
    height: 46px; border: 0; border-radius: 23px;
    background: var(--gold); color: #111;
    font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
}

/* Guest blog/blogpost keep ws2 lp chrome — authed renders bare (ws2
   classes already flow inside the shell). Post images get sane caps
   (a tall upload rendered full-height before). */
.blg-img { max-height: 320px; object-fit: cover; }
.bp-img { max-height: 420px; object-fit: cover; }

/* Reskin table-pages: header labels may wrap so wide tables fit the shell
   (the lang-key labels are longer than live English in this preview). */
.df-table th, .sub-table th, .rf-table th, .rfd-table th, .chp-table th {
    white-space: normal;
    min-width: 64px;
}
/* Reskin rows: hover tint, same language as orders/services */
.df-table tbody tr:hover, .sub-table tbody tr:hover,
.rf-table tbody tr:hover, .rfd-table tbody tr:hover, .chp-table tbody tr:hover {
    background: var(--active-block);
}

/* ============================================================
   F12 — FORM-CONTROL normalization vs bootswatch. Journal paints
   .form-control white (+ #eee when readonly/disabled, blue focus
   ring) — on our dark surfaces that's an unreadable white tile.
   Equal/higher specificity, later load order, no !important.
   ============================================================ */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: var(--panel);
    color: var(--text);
}
.form-control:focus {
    border-color: var(--gold);
    box-shadow: none;
    outline: 0;
}
/* The Figma text inputs (Charge, Link) are transparent on their tile —
   restore that over bootswatch's readonly fill. */
.form-control.no-input[disabled], .form-control.no-input[readonly] {
    background: transparent;
    color: var(--text);
}
/* neworder service search (bare .form-control on the dark well) */
#new-order-search .form-control {
    background-color: var(--panel);
    border-color: var(--border);
    color: var(--text);
}


/* ======== c_polish.css ======== */
/* ============================================================
   WS6 POLISH — addfunds + tickets finishing touches (live evidence 2026-07-19)
   Merge order: AFTER c_fixes.css, before the meta/shell parts.
   ============================================================ */

/* ---- Add Funds: payment-history columns -------------------------
   Real method names run long ("PhonePe [ Min - 1000 INR ]",
   "JazzCash / EasyPaisa | Min - 10$ | 5% Fee"). Method becomes the
   flexible column (c_fixes made .af-table fluid): it absorbs the slack,
   never wraps mid-bracket — single line + ellipsis, full name in the
   cell's title attr. th + td flex identically so columns stay aligned. */
.af-th.af-c-method, .af-td.af-c-method {
    flex: 1 1 0;
    min-width: 147px; /* Figma column width — never narrower */
    max-width: 340px;
    box-sizing: border-box;
}
.af-td.af-c-method {
    padding: 0 10px; /* clear of the 1px in-row dividers */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* ID + Date stay on one line */
.af-td.af-c-id, .af-td.af-c-date { white-space: nowrap; }
/* Amount: right-aligned tabular figures */
.af-th.af-c-amount, .af-td.af-c-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.af-td.af-c-amount {
    padding-right: 14px;
    box-sizing: border-box;
    white-space: nowrap;
}

/* ---- Add Funds: method select ----------------------------------
   Long option labels ran under the custom chevron (right-25, 15px wide
   → ends at 40px). 52px right padding clears it; ellipsis on overflow. */
.af-select {
    padding-right: 52px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* ---- Tickets: platform-injected additional fields ----------------
   PP script.js renders the subcategory select + extra inputs into
   #ticket-fields with bare bootswatch classes (.form-group/.control-label/
   .form-control) — alien white on our panel. Re-dress them in the Figma
   field language (.tk-input: h49 r5, #020307 → #FFF in light). */
#ticket-fields .form-group { margin: 15px 0 0; }
#ticket-fields .control-label {
    display: block;
    margin: 0 0 15px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
    color: #FFFFFF;
}
#ticket-fields .form-control {
    display: block;
    width: 100%;
    height: 49px;
    padding: 0 28px;
    border: 0;
    border-radius: 5px;
    background: #020307;
    box-shadow: none;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    outline: none;
}
#ticket-fields .form-control::placeholder { color: #9298AF; opacity: 1; }
#ticket-fields .form-control:focus { box-shadow: 0 0 0 1px var(--gold); }
#ticket-fields select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 52px; /* clear the chevron */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9' width='15' height='9'%3E%3Cpath d='M1.5 1.5l6 6 6-6' fill='none' stroke='%239298AF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 25px center;
    background-size: 15px 9px;
}
[data-theme="light"] #ticket-fields .control-label { color: #000000; }
[data-theme="light"] #ticket-fields .form-control {
    background-color: #FFFFFF;
    color: #000000;
    box-shadow: 0 15px 30px rgba(45, 44, 136, 0.05); /* Figma light field shadow */
}
[data-theme="light"] #ticket-fields .form-control:focus { box-shadow: 0 15px 30px rgba(45, 44, 136, 0.05), 0 0 0 1px var(--gold); }


/* ======== c_neworder_meta.css ======== */
/* ============================================================
   c_neworder_meta.css — ws4: fill the new-order info card from the
   selected service's real data (window.modules.siteOrder.services).
   The six Figma cells keep their sizes/icons; each now carries a
   muted label + strong value. Empty values render an em-dash.
   Loads AFTER c_fixes.css in the deploy merge.
   All colors via theme vars — dark + light both served.
   ============================================================ */

/* Text stack inside every cell: label (as built) over value */
.no-cell-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin-left: 13px; /* same offset the bare label had (icon +9/+32/+13) */
}
.no-cell .no-cell-txt .no-cell-label { margin-left: 0; }
.no-cell:not(.no-cell-desc) .no-cell-txt { overflow: hidden; }
.no-cell-desc .no-cell-txt { margin-left: 10.5px; flex: 1 1 auto; }

/* The filled value — 12.5px strong, single-line ellipsis on the small tiles */
.no-cell-value {
    display: block;
    max-width: 100%;
    margin-top: 2px;
    font-family: var(--font);
    font-size: 12.5px;
    line-height: 16px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.no-cell-value:empty::before {
    content: "—";
    font-weight: 400;
    color: var(--muted);
}

/* Description tile: grows downward into the card's slack, value scrolls */
.no-cell.no-cell-desc {
    height: auto;
    min-height: 49px;
    align-items: flex-start;
    padding-top: 9px;
    padding-bottom: 9px;
    padding-right: 12px;
}
.no-cell-desc .no-cell-value {
    margin-top: 3px;
    font-weight: 400;
    color: var(--muted);
    line-height: 18px;
    white-space: pre-line; /* remaining lines, joined with breaks */
    max-height: 150px;
    overflow-y: auto;
    scrollbar-width: thin;
    text-overflow: clip;
}

/* Form card: the Figma-fixed 436px predates the platform-rendered fields
   (#fields gains link/quantity once a service is picked, and the service
   description block unhides) — let it grow with content. min-height keeps
   the approved initial render pixel-identical. */
.no-form-card {
    height: auto;
    min-height: 436px;
    padding-bottom: 26px;
}


/* ======== c_services_meta.css ======== */
/* ============================================================
   c_services_meta.css — ws4: services rows show parsed meta chips
   (Source / Start Time / Delivery Speed / Guarantee) under the
   service name instead of the raw description blob. The full
   description HTML lives only in the View Details modal.
   Loads AFTER c_fixes.css in the deploy merge.
   All colors via theme vars — dark + light both served.
   ============================================================ */

/* Chip cloud under the service name — wraps to max 2 rows, never
   overflows into the next row (rows stay min-height bounded) */
#service-table .svc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    max-height: 50px; /* two chip rows (22px + 6 + 22px) */
    overflow: hidden;
}
#service-table .svc-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
#service-table .svc-chip-label {
    flex: none;
    font-size: 8.5px;
    line-height: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
}
#service-table .svc-chip-value {
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Name cell re-balanced for name + chips (was 25px top for name only) */
#service-table .svc-cell.svc-service {
    padding-top: 18px;
    padding-bottom: 12px;
}

/* Column rebalance: the raw description blob is gone, so the Details
   column shrinks to its trigger and the freed width goes to the Service
   cell — the four chips (Source/Start/Speed/Guarantee) fit in 2 rows. */
#service-table .svc-h-service, #service-table .svc-service { flex: 1 1 auto; }
#service-table .svc-h-desc, #service-table .svc-desc { flex: 0 0 132px; }

/* Description column now holds only the modal trigger — center it */
#service-table.w1-svc-table .svc-cell.svc-desc {
    display: flex;
    align-items: center;
    padding-top: 0;
}
#service-table .svc-desc .svc-desc-link { margin-top: 0; }


/* ======== c_shell2.css ======== */
/* ============================================================
   c_shell2.css — ws5 shell + dashboard refinements (founder live
   review #2, 2026-07-19). Loads LAST in the deploy merge:
   theme/style.css → c_ws1.css → c_reskins.css → c_fixes.css → c_shell2.css.

   Sections:
   S1  Sidebar logo — homepage-grade presence (bigger art, brand band)
   S2  Profile dropdown — currency compact row + "Change" expander
   S3  Profile dropdown — menu row icons + sidebar hover language
   All colors via theme vars — dark + light both served.
   ============================================================ */

/* ============================================================
   S1 — SIDEBAR LOGO. REVISED 2026-07-21: the old band approach
   (baked page-bg crops on a --bg band) rendered a WHITE slab on
   the light sidebar. Exact sidebar-bg-baked 172x42.32 crops now
   sit directly on the sidebar — all logo rules moved to
   c_fx_shell.css (loads last, wins). Nothing here on purpose.
   ============================================================ */

/* ============================================================
   S2 — CURRENCY: one compact row (label + current + "Change"
   chevron button); the full chip cloud is collapsed behind it and
   expands in place. Current currency via the platform's own vars
   (user.currency.label → site.currency.label fallback, the
   live-defaults pattern). Every #currencies-item hook untouched.
   ============================================================ */
.jsp-account .dropdown-menu .jsp-menu-curs { padding-top: 4px; }
/* Expanded cloud adds ~70px — give the menu room so all rows stay visible
   (viewport-short screens still get the overflow-y scroll from c_fixes). */
.jsp-account .dropdown-menu.jsp-menu { max-height: 430px; }
.jsp-cur-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
}
.jsp-cur-label { color: var(--muted); }
.jsp-cur-current { color: var(--text); font-weight: 600; white-space: nowrap; }
.jsp-cur-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.jsp-cur-toggle:hover { color: var(--text); border-color: var(--gold); }
.jsp-cur-toggle .chev { width: 9px; height: 6px; transition: transform .18s ease; }
.jsp-menu-curs.is-open .jsp-cur-toggle { color: var(--text); border-color: var(--gold); }
.jsp-menu-curs.is-open .jsp-cur-toggle .chev { transform: rotate(180deg); }
/* c_fixes gives the cloud display:flex — that would beat the UA
   [hidden] rule, so the collapsed state must be explicit. */
.jsp-cur-cloud[hidden] { display: none; }
.jsp-cur-cloud { margin-top: 6px; }

/* ============================================================
   S3 — MENU LINK ROWS: leading glyph (muted → bright on hover) and
   the sidebar's exact hover language (55% active-block tint from
   c_fixes F5 `.sidebar .nav-item:hover`).
   ============================================================ */
.jsp-account .dropdown-menu .jsp-menu-item a {
    gap: 10px;
    transition: background-color .15s ease, color .15s ease;
}
.jsp-account .dropdown-menu .jsp-menu-item a:hover {
    background: color-mix(in srgb, var(--active-block) 55%, transparent);
}
.jsp-menu-ico {
    width: 16px;
    height: 16px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--muted);
    transition: color .15s ease;
}
.jsp-menu-ico svg { width: 15px; height: 15px; }
.jsp-account .dropdown-menu .jsp-menu-item a:hover .jsp-menu-ico { color: var(--text); }


/* ======== c_fx_account.css ======== */
/* ============================================================
   FX ACCOUNT — Figma-fidelity restore (figma-refs/account-dark|light)
   c_fixes.css made the account cards fluid (height:auto, %columns,
   width:100% inputs, compressed margins); the Figma frame is exact:
   left col x346 w509 / right col x879 w394 (gap 24), cards
   509x90 · 509x341 · 394x204 · 394x221, inputs 436x49 / 333x49,
   password gaps 10/12, button tops 29/29/31. This part loads last,
   so these rules re-assert the frame geometry (1x px).
   ============================================================ */

/* ---- Content padding: frames put content at x345 (sidebar 292 + 53).
   c_fixes.css:130 globally set .content padding to 24px (drifts every page
   29px left). Scoped, idempotent restore for this page only — if the global
   rule is fixed centrally this resolves to the same 53px, no double-fix. ---- */
.content:has(> .acct-grid) { padding-left: 53px; padding-right: 53px; }

/* ---- Columns: 509 + 24 + 394, cards left edge x346/x879 ---- */
.acct-col-l { flex: none; width: 509px; margin-left: 1px; }
.acct-col-r { flex: none; width: 394px; margin-left: 24px; }

/* ---- Cards: fixed frame sizes, per-card padding (border 1px incl.) ---- */
.acct-user { width: 509px; height: 90px;  min-height: 0; padding: 21px 0 0 33px; }
.acct-pass { width: 509px; height: 341px; min-height: 0; padding: 39px 0 0 33px; margin-top: 25px; }
.acct-tz   { width: 394px; height: 204px; min-height: 0; padding: 21px 0 0 29px; }
.acct-api  { width: 394px; height: 221px; min-height: 0; padding: 22px 0 0 29px; margin-top: 28px; }

/* ---- Inputs: frame widths (left 436 / right 333), height 49 ---- */
.acct-card .acct-input { width: 436px; max-width: none; }
.acct-col-r .acct-input { width: 333px; }
.acct-card .acct-select-wrap { width: 333px; max-width: none; }

/* Figma nudge: password inputs 2-3 sit +10 / +12 below the previous one */
.acct-pass .acct-input + .acct-input { margin-top: 10px; }
.acct-pass .acct-input + .acct-input + .acct-input { margin-top: 12px; }

/* ---- Vertical rhythm inside cards (frame: button tops 29/29/31) ---- */
.acct-tz form, .acct-api form { margin-top: 0; }
.acct-tz .acct-btn-line { margin-top: 29px; }
.acct-api .acct-btn-gen { margin-top: 29px; }
.acct-pass .acct-btn-gold { margin-top: 31px; }

/* ---- Language card (only renders when site has >1 language; the frame
   does not draw it — same idiom as the timezone card, left column) ---- */
.acct-lang { width: 509px; margin-top: 25px; padding: 21px 0 22px 33px; }
.acct-lang .acct-select-wrap,
.acct-lang .acct-select { width: 436px; }
.acct-lang .acct-btn-line { margin-top: 29px; }

/* ---- Change-email modal: keep fluid inside the dialog ---- */
.w1-modal .acct-input { width: 100%; max-width: none; }
.w1-modal .acct-btn-line,
.w1-modal .acct-btn-gold { margin-top: 0; }

/* ---- Small screens: stack (frame is 1440 desktop; fluid fallback) ---- */
@media (max-width: 1279px) {
    .acct-grid { flex-wrap: wrap; }
    .acct-col-l, .acct-col-r { flex: 1 1 100%; width: 100%; margin-left: 0; }
    .acct-col-r { margin-top: 25px; }
    .acct-user, .acct-pass, .acct-tz, .acct-api, .acct-lang { width: 100%; height: auto; padding-bottom: 22px; padding-right: 33px; }
    .acct-card .acct-input, .acct-card .acct-select-wrap, .acct-card .acct-select { width: 100%; }
}


/* ======== c_fx_addfunds.css ======== */
/* ============================================================
   FIDELITY FIX — addfunds (frames add-funds-dark / add-funds-light,
   1440x721, spec figma-refs/specs/add-funds-dark.spec.txt)
   c_fixes made the history table fluid (flex:1 + width:100%) and
   c_polish made the method column flexible — that drifted the table
   past the frame's fixed 492px (x334..826) and pushed the Add New
   card off x888. Restore the frame geometry; KEEP the ws6 method-
   column ellipsis (single line + text-overflow, full name in title).
   This part merges last, so it wins the cascade.
   ============================================================ */

/* Left column + table back to the frame measure: x334, w492.
   The shell's .content padding is 24px (content origin x316) while every
   frame's content origin is x345 — compensate the 29px here, scoped to
   this page only. (If the shell is ever fixed centrally to 53px, drop
   these two margins.) */
.af-title { margin-left: 29px; }
.af-body { margin-left: 29px; }
.af-left { flex: none; width: 492px; margin-left: -11px; }
.af-table { width: 492px; }

/* Columns back to the frame's divider positions: 48 / 185 / 147 / 112.
   Method stays single-line ellipsis (ws6) inside its fixed 147px. */
.af-th.af-c-method, .af-td.af-c-method {
    flex: none;
    width: 147px;
    min-width: 0;
    max-width: none;
}

/* Amount column is centered in the frame, but biased 5px left of the
   geometric column center (frame header "Amount" center 764.75, data
   "2.00" center 764.5 vs column center 770) — 10px right padding in a
   border-box cell reproduces that exactly. */
.af-th.af-c-amount, .af-td.af-c-amount {
    text-align: center;
    padding-right: 10px;
    box-sizing: border-box;
}


/* ======== c_fx_affiliates.css ======== */
/* ============================================================
   c_fx_affiliates.css — Affiliates Figma fidelity (affiliates-dark|light)
   Frame 1440x721: card + stats table x334 w805 (margin-left:-11px from
   the x345 content origin lives in style.css). Loads LAST (c_fx_*),
   so these rules restore the spec widths that c_fixes.css made fluid.
   ============================================================ */

.aff-card  { width: 805px; }
.aff-table { width: 805px; }

/* Sort By caret — svg needs explicit size or it floods the box (frame: 15x9) */
.aff-caret { width: 15px; height: 9px; flex: none; }

/* Frame content origin is x345 (sidebar 292 + 53). c_fixes.css set
   .content padding-left:24 → origin 316; restore 53px for this page only. */
.content:has(.aff-sort) { padding-left: 53px; }


/* ======== c_fx_api.css ======== */
/* ============================================================
   c_fx_api.css — API page Figma fidelity (figma-refs/api-dark|light)
   Frame 1440x2005, content column x345 w840. Loads LAST (c_fx_*),
   so these rules restore the spec widths that c_fixes.css made fluid.
   ============================================================ */

/* Frame-exact content width (undoes c_fixes "fluid wrap") */
.api-wrap { width: 840px; max-width: none; }

/* Frame content origin is x345 (sidebar 292 + 53). c_fixes.css set
   .content padding-left:24 → origin 316; restore 53px for this page only. */
.content:has(.api-wrap) { padding-left: 53px; }


/* ======== c_fx_auth.css ======== */
/* ============================================================
   c_fx_auth.css — AUTH fidelity wave (login / signup / resetpassword / signin modal)
   Auto-merged LAST → wins the cascade over c_fixes / c_reskins.
   Frames: figma-refs/login-*, register-*, reset-password-* (all 1440x721, dark+light).
   Scoped to each page's own wrapper (.su / .lg / .rp-shell / .snp- / .tfa- / .cem-).
   ============================================================ */

/* ============================================================
   SIGNUP (register frame) — c_fixes F9 made the admin-fields loop a generic
   flow; restore the frame's exact 2-2-1-1 grid + vertical rhythm while
   keeping the loop (any field count still fits; 6 fields = frame-perfect).
   Frame rows (1x): fields y208/266/324/383 · agree y461 · button y501 ·
   Or y578 · SSO y606. Left column x165, width 504 (set by c_fixes).
   ============================================================ */
.su-left .su-h1 { margin-top: 52px; }   /* logo y20+43 → heading y115 */
.su-left .su-sub { margin-top: 2px; }   /* y162 */
.su-left .su-form { margin-top: 18px; } /* first field row y208 */

.su-fields { grid-template-columns: 246px 246px; column-gap: 12px; row-gap: 9px; }
.su-fields .su-input:nth-child(3),
.su-fields .su-input:nth-child(4) { grid-column: auto; }      /* row 2 = 2-col (Username / Email) */
.su-fields .su-input:nth-child(n+5) { grid-column: 1 / -1; }  /* rows 3+ = full-width (Password, Confirm…) */
.su-fields .su-input:nth-child(6) { margin-top: 1px; }        /* frame row 4 lands y383 (grid gives 382) */

.su-form .su-agree { margin-top: 29px; }        /* y461 with the 6 frame fields */
.su-form .su-signup-btn { width: 156px; margin-top: 22px; }   /* 156x55 @ y501 — not full-width */
.su-left .su-or { margin-top: 22px; }           /* Or text y578 / lines y584 */
.su-left .su-sso-row { margin-top: 16px; }      /* SSO y606 */
.su-left .su-sso { position: relative; flex: none; width: 235px; }  /* 235x55 each — not stretched; relative so the glyph spans anchor to the button, not .su-left */

/* ============================================================
   CHECKBOX (su + lg) — Figma stroke on the 18x18 box is visible:false in all
   four frames → NO border in the checked state. Unchecked keeps the gray
   border so the empty box stays discoverable (frame only draws checked).
   ============================================================ */
.su-agree input:checked + .su-agree-box,
.lg-agree input:checked + .lg-agree-box { border-color: transparent; }

/* ============================================================
   GOOGLE SSO — static frame-visual fallback INSIDE the PP g_id_signin hook
   (GIS replaces this content in production; the hook bytes stay verbatim).
   The .su-sso / .lg-sso container already carries the 235x55 bordered box,
   the glyph crop and the 52px label offset.
   ============================================================ */
.su-sso-google .g_id_signin,
.lg-sso-google .g_id_signin {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 12px;
}
.su-sso-google .g_id_signin { color: var(--su-muted); }
.lg-sso-google .g_id_signin { color: var(--lg-muted); }

/* ============================================================
   LOGIN page (login.twig) — error/success alerts are not in the frame:
   they flow above the fixed 1440x721 canvas, page grows when PP renders them.
   ============================================================ */
.lg-alerts { width: 1440px; margin: 0 auto; padding: 16px 0 0 165px; box-sizing: border-box; }
.lg-alerts .alert { max-width: 504px; margin: 0 0 12px; }
@media (max-width: 1439px) {
    .lg-alerts { width: 100%; padding-left: 24px; padding-right: 24px; }
}

/* ============================================================
   SIGNIN LOGIN MODAL — align the .lg canvas 1:1 with the login frame at the
   1440 review size (c_ws1 used 96vw/4vh modal chrome). max-width keeps
   smaller viewports working with the .lg zoom fallback.
   ============================================================ */
.lp-login-card { width: 1440px; max-width: 100vw; margin: 0 auto; }

/* ============================================================
   RESET PASSWORD (reset-password frame)
   ============================================================ */
/* Stray-glyph fix: .rp-tt spans are position:absolute but the toggle button
   itself is not positioned, so they anchored to .main (moon/sun floating at
   the content origin). The base .theme-toggle background crop already carries
   the frame's moon/sun glyph → hide the redundant spans. */
.rp-shell .rp-tt { display: none; }

/* reset-password-light frame (nodes.json): NO theme toggle in the topbar.
   Dark keeps it. */
:root[data-theme="light"] .rp-shell .theme-toggle { display: none; }

/* Balance pill: frame Rectangle 235 fill visible:false → transparent,
   1px #454D63 stroke + white inner ring (light: #EBEBFF stroke, transparent). */
.rp-shell .balance-pill { background: transparent; }
:root[data-theme="light"] .rp-shell .balance-pill { background: transparent; border-color: #EBEBFF; }

/* c_fixes F4 set 24px gutters for the full-width shell; the reset-password
   frame keeps the base 53px content gutter (title/card land x345-346). */
.rp-shell .content { padding: 0 53px 53px; }

/* Light sidebar: frame Rectangle 217 pixel-samples #FBFAFE (60% alpha composite, verified vs dashboard-light + reset-password-light frames). */
:root[data-theme="light"] .rp-shell .sidebar { background: #FBFAFE; }


/* ======== c_fx_childpanels.css ======== */
/* ============================================================
   c_fx_childpanels.css — FIDELITY restore for CHILD PANELS
   Frames: figma-refs/child-panels-dark + child-panels-light
   (1440x721, content origin x345). Loads last → wins cascade.
   Undoes the c_fixes fluid-card overrides that drifted the page
   off the frame; keeps every PP contract hook untouched.
   ============================================================ */

/* Card: frame @(346,192) 909x457 r20 — fixed measure, not fluid */
.cp-card {
    width: 909px;
    max-width: none;
    height: 457px;
    min-height: 0;
    padding: 30px 0 0 33px; /* +1px border → content lands frame x380 / y223 */
}

/* Left form column: five fixed 393x49 fields (frame x380, pitch 59) */
.cp-form { flex: none; width: 393px; }
.cp-form .cp-input,
.cp-form .cp-select { width: 393px; }

/* Price row (frame y459, 393x49): label never wraps, value right */
.cp-price span { white-space: nowrap; }
.cp-price .cp-price-val {
    flex: none;
    width: 90px;
    margin-left: 12px;
    text-align: right;
}

/* Panels list (no frame): stays full-width like df/sub/rf/rfd sibling
   table pages — c_fixes `.chp-card { max-width: none }` intentionally kept. */


/* ======== c_fx_contact.css ======== */
/* ============================================================
   c_fx_contact.css — CONTACT fidelity part (guest lp canvas)
   Frames: figma-refs/contact-dark + contact-light (1440x858).
   Fidelity sweep 2026-07-21: the existing absolute layout
   (style.css part c_contact.css) already matches the frame
   exactly, pixel-verified in both themes:
     - title 30/600 lh45 @ x173 y173
     - channels y236: tiles 32x32 @ x173/376/544 + 12/400 labels
     - form x173: First/Last 261x55 @ y297, Subject 532x55 @ y363,
       Message 532x113 @ y429 — bg #0A1220 dark / #F8F7FE light
     - Send 135x55 @ y574, #FFCE2E, text 14/600
     - right art panel crop @ x818 y149 (622x505 visible) + shard
   Residual diff (~1.8-2%) is font anti-aliasing + the shared
   lp-header/lp-footer divider 1px item reported to the shell
   owner. No page-scoped overrides required. This file is kept
   as the CONTACT fidelity part of record.
   ============================================================ */


/* ======== c_fx_dashboard.css ======== */
/* ============================================================
   c_fx_dashboard.css — dashboard fidelity fixes vs
   figma-refs/dashboard-{dark,light}/nodes.json (frame 1440x721).
   Scoped under .fx-dash (dashboard.twig wrapper) so nothing bleeds
   onto other pages. Merged LAST → wins the cascade.

   Fixes:
   1. Content origin — frame content x345 (sidebar 292 + 53). The
      style.css F4 full-width shell rule (.content padding 0 24px 40px)
      moved every page to 24px gutters; dashboard wants +29px more.
   2. Dark outer stat-card border — Rectangles 237/250 carry
      stroke #454D63 at NODE opacity 0.4 → renders #1E222F over page
      bg #03050C. Inner rect (239/251) stays solid #454D63.
      Light rects are opacity 1 → #EBEBFF both rings (unchanged).
   3. Figma textCase:TITLE on heading + stat labels → capitalize.
   4. Dark info-row borders — the Line-5 strokes are #454D63 at
      GROUP opacity 0.5 → rgba(); light lines are solid #EBEBFF.
      The bottom line sits ON the box's bottom edge (Figma centers the
      stroke on y=box-end) → move it outside via box-shadow so it
      renders one pixel lower, exactly like the frame.
   5. Stat-chip gradients — Figma interpolates stops in linear RGB and
      spans only the handle segment, not the box diagonal. Recreate
      with `in srgb-linear` + handle-projected stop positions:
      balance S(7,15.5)→E(41,60) of 60px chip ⇒ 142.7deg, 19.7%/86.3%;
      orders  S(41,50)→E(4.5,28.5)          ⇒ 300.5deg, 26.0%/77.6%.
   ============================================================ */

.fx-dash { margin-left: 29px; }

.fx-dash .dash-title,
.fx-dash .stat-label { text-transform: capitalize; }

/* Dark outer ring at 40% (Figma node opacity); light keeps solid ring */
.fx-dash .stat-card { border-color: rgba(69, 77, 99, 0.4); }
:root[data-theme="light"] .fx-dash .stat-card { border-color: #EBEBFF; }

/* Row hairlines: top inside, bottom ON the edge (outside) like Figma */
.fx-dash .info-row {
    border-color: rgba(69, 77, 99, 0.5);
    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(69, 77, 99, 0.5);
}
:root[data-theme="light"] .fx-dash .info-row {
    border-color: #EBEBFF;
    box-shadow: 0 1px 0 #EBEBFF;
}

/* Chip gradients — Figma handle geometry + linear-RGB interpolation */
.fx-dash .stat-ico-balance { background: linear-gradient(142.7deg in srgb-linear, #FF7FB1 19.7%, #ED2D60 86.3%); }
.fx-dash .stat-ico-orders  { background: linear-gradient(300.5deg in srgb-linear, #774DFA 26.0%, #A398FF 77.6%); }
/* Chip icon sits at chip+15,15 in the frame (grid centering gives 15.5) */
.fx-dash .stat-ico svg { position: relative; top: -0.5px; left: -0.5px; }

/* Real-data robustness — Figma text never wraps; long values clip, not wrap */
.fx-dash .stat-card-in,
.fx-dash .info-row { overflow: hidden; }
.fx-dash .stat-txt { min-width: 0; }
.fx-dash .stat-label,
.fx-dash .stat-value,
.fx-dash .info-val {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ======== c_fx_faq.css ======== */
/* ============================================================
   c_fx_faq.css — FAQ fidelity part (guest lp canvas)
   Frames: figma-refs/faq-dark + faq-light (1440x1410).
   Fidelity sweep 2026-07-21: the existing absolute layout
   (style.css part c_faq.css) already matches the frame exactly:
     - panel x118 y294 1205x823 r43 (light: 1px lower) — bg
       #131723 dark / #F8F7FE light, pixel-verified
     - items x278 w885 r10, tops 371/525/621/717/813/909 (h141
       open / 83 closed) — bg #03050C dark / #FFFFFF light
     - badges 45x45 asset crops, Q 16/700(open)|600, A 12/400
       lh22 w743, minus 16x3 / plus 16x16 — pixel-aligned
     - decorations (shard-left, shard-right, geo, plant) match
   Residual diff (~2%) is font anti-aliasing + two shared-chrome
   items reported to the shell owner (NOT page bugs):
     1. lp-header/lp-footer divider renders ~1px lower than the
        Figma 0-height line (Line 5 y87 / Line 6 y1271).
     2. Light-theme lp-logo asset renders #000; frame is #434343.
   No page-scoped overrides required. This file is kept as the
   FAQ fidelity part of record so the analysis isn't repeated.
   ============================================================ */


/* ======== c_fx_landing.css ======== */
/* ============================================================
   c_fx_landing.css — fx swarm fixes for blog / blogpost / newpage
   (scoped to those pages' wrapper classes only — never bleeds)
   ============================================================ */

/* newpage guest: contain the CMS card like the blog content column
   (mirrors .blg-main metrics from c_reskins.css) */
.npg-main {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 64px 24px 84px;
}

/* blog / blogpost / newpage have NO item in the guest nav, so no link is
   is-active — hide the stray underline pill (it defaults to the landing's
   "Home" position and falsely marks Home active on these pages) */
.blg .lp-nav-underline,
.bp .lp-nav-underline,
.npg .lp-nav-underline {
    display: none;
}


/* ======== c_fx_massorder.css ======== */
/* ============================================================
   FX MASSORDER — frame-exact restore (figma-refs/mass-order-dark|light)
   Frame 1440x721: card x346 y192, 573x421 r20 (dark #060912/#131721,
   light #FDFCFE/#EBEBFF); label x391 y228 (14/400 #9298AF); textarea
   x380 y258 477x223 r5 (dark #020307 / light #FFFFFF); submit x380
   y513 156x55 r5 gold, white 14/600 text. c_fixes F4 stretched the
   card fluid (100%/720px, height auto) — this part re-asserts the
   frame geometry. Merged LAST (c_fx_* wins the cascade).
   ============================================================ */

/* ---- Content gutter: frames put content at x345 (sidebar 292 + 53);
   c_fixes.css:130 globally set 24px (drifts every page off its frame).
   Scoped restore — same idiom as c_fx_account.css. ---- */
.content:has(> .mo-card) { padding-left: 53px; padding-right: 53px; }

/* Card back to frame size: 573x421 fixed (border 1px included),
   left edge lands on frame x346 (content origin 345 + 1) */
.mo-card {
    width: 573px;
    max-width: none;
    height: 421px;
    min-height: 0;
    margin-left: 1px;
}

/* Real-data safety: on narrow viewports the fixed card must not
   overflow the content column — shrink as a block, textarea follows. */
@media (max-width: 1279px) {
    .mo-card { width: 100%; max-width: 573px; height: auto; min-height: 421px; }
    .mo-orders { width: 100%; }
}


/* ======== c_fx_neworder.css ======== */
/* ============================================================
   c_fx_neworder.css — Figma-fidelity fixes for /page/neworder
   (fidelity swarm, 2026-07-21). Merged LAST → wins the cascade.
   Every rule is scoped to new-order hooks (.no-*, #order-form,
   #fields) so nothing bleeds onto other pages.
   Frames: figma-refs/new-order-(un)selected-(dark|light).
   ============================================================ */

/* 1. Content column must sit at frame x345 (292 sidebar + 53 pad).
   c_fixes.css sets a global 24px for other pages; restore the Figma
   53px for the new-order page only (:has scoping = no bleed). */
.content:has(.no-form-card) { padding: 0 53px 53px; }

/* 2. Figma frames have NO in-form description panel — the right info
   card carries the description (ws4). PP's JS can still write/toggle
   .hidden on it (MutationObserver unaffected); it just never shows. */
#order-form #service_description { display: none !important; }

/* 3. Figma textCase:TITLE on the page title ("New Order" is a no-op,
   kept for contract fidelity). */
.no-title { text-transform: capitalize; }

/* 4. Link field tile — Figma: 32x32 r8 tile @ +9, chain glyph
   (#38425B dark / #C3C3FF light, tile = 10% alpha). The platform
   injects the link input into #fields with no tile element. */
#order-form #fields .form-group { position: relative; }
#order-form #fields .form-group:has(input[name="OrderForm[link]"])::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    pointer-events: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="%2338425B" fill-opacity="0.1"/><path d="M16 7C14.22 7 12.4799 7.52784 10.9999 8.51677C9.51983 9.50571 8.36628 10.9113 7.68509 12.5558C7.0039 14.2004 6.82567 16.01 7.17294 17.7558C7.5202 19.5016 8.37737 21.1053 9.63604 22.364C10.8947 23.6226 12.4984 24.4798 14.2442 24.8271C15.99 25.1743 17.7996 24.9961 19.4442 24.3149C21.0887 23.6337 22.4943 22.4802 23.4832 21.0001C24.4722 19.5201 25 17.78 25 16C25.0006 14.8179 24.7683 13.6473 24.3162 12.5551C23.8642 11.4629 23.2013 10.4705 22.3654 9.6346C21.5295 8.79875 20.5371 8.13583 19.4449 7.68377C18.3527 7.23171 17.1821 6.99936 16 7ZM17.1536 19.4691L16.5809 20.05C15.9668 20.6641 15.1339 21.0091 14.2655 21.0091C13.397 21.0091 12.5641 20.6641 11.95 20.05C11.3359 19.4359 10.9909 18.603 10.9909 17.7345C10.9909 16.8661 11.3359 16.0332 11.95 15.4191L12.5309 14.8464C12.6874 14.7123 12.8888 14.6423 13.0947 14.6502C13.3006 14.6582 13.4959 14.7436 13.6416 14.8893C13.7874 15.035 13.8727 15.2303 13.8807 15.4362C13.8886 15.6421 13.8186 15.8435 13.6845 16L13.1036 16.5809C12.7966 16.888 12.6241 17.3044 12.6241 17.7386C12.6241 18.1729 12.7966 18.5893 13.1036 18.8964C13.4107 19.2034 13.8271 19.3759 14.2614 19.3759C14.6956 19.3759 15.112 19.2034 15.4191 18.8964L16 18.3155C16.1565 18.1814 16.3579 18.1114 16.5638 18.1193C16.7697 18.1273 16.965 18.2126 17.1107 18.3584C17.2564 18.5041 17.3418 18.6994 17.3498 18.9053C17.3577 19.1112 17.2877 19.3126 17.1536 19.4691ZM17.4482 15.7136L15.7136 17.4482C15.5596 17.6022 15.3506 17.6888 15.1327 17.6888C14.9148 17.6888 14.7059 17.6022 14.5518 17.4482C14.3978 17.2941 14.3112 17.0852 14.3112 16.8673C14.3112 16.6494 14.3978 16.4404 14.5518 16.2864L16.2864 14.5518C16.4404 14.3978 16.6494 14.3112 16.8673 14.3112C17.0852 14.3112 17.2941 14.3978 17.4482 14.5518C17.6023 14.7059 17.6888 14.9148 17.6888 15.1327C17.6888 15.3506 17.6023 15.5596 17.4482 15.7136ZM20.05 16.5809L19.4691 17.1536C19.3126 17.2877 19.1112 17.3577 18.9053 17.3498C18.6994 17.3418 18.5041 17.2564 18.3584 17.1107C18.2126 16.965 18.1273 16.7697 18.1193 16.5638C18.1114 16.3579 18.1814 16.1565 18.3155 16L18.8964 15.4191C19.2034 15.112 19.3759 14.6956 19.3759 14.2614C19.3759 13.8271 19.2034 13.4107 18.8964 13.1036C18.5893 12.7966 18.1729 12.6241 17.7386 12.6241C17.3044 12.6241 16.888 12.7966 16.5809 13.1036L16 13.6845C15.8435 13.8186 15.6421 13.8886 15.4362 13.8807C15.2303 13.8727 15.035 13.7874 14.8893 13.6416C14.7436 13.4959 14.6582 13.3006 14.6502 13.0947C14.6423 12.8888 14.7123 12.6874 14.8464 12.5309L15.4191 11.95C16.0332 11.3359 16.8661 10.9909 17.7345 10.9909C18.603 10.9909 19.4359 11.3359 20.05 11.95C20.6641 12.5641 21.0091 13.397 21.0091 14.2655C21.0091 15.1339 20.6641 15.9668 20.05 16.5809Z" fill="%2338425B"/></svg>') center / 32px 32px no-repeat;
}
[data-theme="light"] #order-form #fields .form-group:has(input[name="OrderForm[link]"])::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="%23C3C3FF" fill-opacity="0.1"/><path d="M16 7C14.22 7 12.4799 7.52784 10.9999 8.51677C9.51983 9.50571 8.36628 10.9113 7.68509 12.5558C7.0039 14.2004 6.82567 16.01 7.17294 17.7558C7.5202 19.5016 8.37737 21.1053 9.63604 22.364C10.8947 23.6226 12.4984 24.4798 14.2442 24.8271C15.99 25.1743 17.7996 24.9961 19.4442 24.3149C21.0887 23.6337 22.4943 22.4802 23.4832 21.0001C24.4722 19.5201 25 17.78 25 16C25.0006 14.8179 24.7683 13.6473 24.3162 12.5551C23.8642 11.4629 23.2013 10.4705 22.3654 9.6346C21.5295 8.79875 20.5371 8.13583 19.4449 7.68377C18.3527 7.23171 17.1821 6.99936 16 7ZM17.1536 19.4691L16.5809 20.05C15.9668 20.6641 15.1339 21.0091 14.2655 21.0091C13.397 21.0091 12.5641 20.6641 11.95 20.05C11.3359 19.4359 10.9909 18.603 10.9909 17.7345C10.9909 16.8661 11.3359 16.0332 11.95 15.4191L12.5309 14.8464C12.6874 14.7123 12.8888 14.6423 13.0947 14.6502C13.3006 14.6582 13.4959 14.7436 13.6416 14.8893C13.7874 15.035 13.8727 15.2303 13.8807 15.4362C13.8886 15.6421 13.8186 15.8435 13.6845 16L13.1036 16.5809C12.7966 16.888 12.6241 17.3044 12.6241 17.7386C12.6241 18.1729 12.7966 18.5893 13.1036 18.8964C13.4107 19.2034 13.8271 19.3759 14.2614 19.3759C14.6956 19.3759 15.112 19.2034 15.4191 18.8964L16 18.3155C16.1565 18.1814 16.3579 18.1114 16.5638 18.1193C16.7697 18.1273 16.965 18.2126 17.1107 18.3584C17.2564 18.5041 17.3418 18.6994 17.3498 18.9053C17.3577 19.1112 17.2877 19.3126 17.1536 19.4691ZM17.4482 15.7136L15.7136 17.4482C15.5596 17.6022 15.3506 17.6888 15.1327 17.6888C14.9148 17.6888 14.7059 17.6022 14.5518 17.4482C14.3978 17.2941 14.3112 17.0852 14.3112 16.8673C14.3112 16.6494 14.3978 16.4404 14.5518 16.2864L16.2864 14.5518C16.4404 14.3978 16.6494 14.3112 16.8673 14.3112C17.0852 14.3112 17.2941 14.3978 17.4482 14.5518C17.6023 14.7059 17.6888 14.9148 17.6888 15.1327C17.6888 15.3506 17.6023 15.5596 17.4482 15.7136ZM20.05 16.5809L19.4691 17.1536C19.3126 17.2877 19.1112 17.3577 18.9053 17.3498C18.6994 17.3418 18.5041 17.2564 18.3584 17.1107C18.2126 16.965 18.1273 16.7697 18.1193 16.5638C18.1114 16.3579 18.1814 16.1565 18.3155 16L18.8964 15.4191C19.2034 15.112 19.3759 14.6956 19.3759 14.2614C19.3759 13.8271 19.2034 13.4107 18.8964 13.1036C18.5893 12.7966 18.1729 12.6241 17.7386 12.6241C17.3044 12.6241 16.888 12.7966 16.5809 13.1036L16 13.6845C15.8435 13.8186 15.6421 13.8886 15.4362 13.8807C15.2303 13.8727 15.035 13.7874 14.8893 13.6416C14.7436 13.4959 14.6582 13.3006 14.6502 13.0947C14.6423 12.8888 14.7123 12.6874 14.8464 12.5309L15.4191 11.95C16.0332 11.3359 16.8661 10.9909 17.7345 10.9909C18.603 10.9909 19.4359 11.3359 20.05 11.95C20.6641 12.5641 21.0091 13.397 21.0091 14.2655C21.0091 15.1339 20.6641 15.9668 20.05 16.5809Z" fill="%23C3C3FF"/></svg>');
}

/* 5. Quantity field (platform-injected, absent from the Figma frames —
   kept visible: hiding it would break real orders). Styled as the
   inactive field family (service-field bg), muted placeholder, own
   list glyph tile in the same 10%-alpha language. */
#order-form #fields .form-group:has(input[name="OrderForm[quantity]"]) {
    background: #020307;
    box-shadow: none;
}
[data-theme="light"] #order-form #fields .form-group:has(input[name="OrderForm[quantity]"]) {
    background: #FFFFFF;
}
#order-form #fields .form-group:has(input[name="OrderForm[quantity]"])::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    pointer-events: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="%2325304C" fill-opacity="0.1"/><path d="M11 10.4h10v2.2H11zM11 14.9h7.4v2.2H11zM11 19.4h10v2.2H11z" fill="%2325304C"/></svg>') center / 32px 32px no-repeat;
}
[data-theme="light"] #order-form #fields .form-group:has(input[name="OrderForm[quantity]"])::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="%23C3C3FF" fill-opacity="0.1"/><path d="M11 10.4h10v2.2H11zM11 14.9h7.4v2.2H11zM11 19.4h10v2.2H11z" fill="%23C3C3FF"/></svg>');
}
#order-form #fields input[name="OrderForm[quantity]"]::placeholder {
    color: #9298AF;
    font-weight: 400;
    opacity: 1;
}

/* 6. Link field stays the Figma "active" family (elevated bg + strong
   placeholder) — re-asserted on the attribute hook so it also holds if
   the platform markup lacks the .no-field-link skin (live PP JS). */
#order-form #fields .form-group:has(input[name="OrderForm[link]"]) {
    background: #0A1220;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] #order-form #fields .form-group:has(input[name="OrderForm[link]"]) {
    background: #FFFFFF;
    box-shadow: 0 15px 30px rgba(45, 44, 136, 0.05);
}
#order-form #fields input[name="OrderForm[link]"]::placeholder {
    color: var(--text);
    font-weight: 600;
    opacity: 1;
}
[data-theme="light"] #order-form #fields input[name="OrderForm[link]"]::placeholder {
    color: #000000;
}

/* 7. Live-markup fallback: if PP injects an unskinned .form-group (no
   .no-field classes), give it the same 454x49 r5 field language. */
#order-form #fields .form-group:not(.no-field) {
    width: 454px;
    min-height: 49px;
    border-radius: 5px;
    margin: 0 0 10px;
    background: #020307;
}
[data-theme="light"] #order-form #fields .form-group:not(.no-field) { background: #FFFFFF; }
#order-form #fields .form-group:not(.no-field) .form-control {
    width: 100%;
    height: 49px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 16px 0 52px;
    font-family: inherit;
    font-size: 12px;
    line-height: 49px;
    font-weight: 400;
    color: var(--text);
}
[data-theme="light"] #order-form #fields .form-group:not(.no-field) .form-control { color: #000000; }


/* ======== c_fx_notifications.css ======== */
/* ============================================================
   FX NOTIFICATIONS — design-language consistency pass (no Figma frame
   exists for this page; aligned to the shell + account/mass-order/
   updates idioms). c_ws1 styled .nt-* with --panel (sidebar navy)
   cards and dark-text pill buttons; the JSP card idiom is
   #060912/#131721 dark · #FDFCFE/#EBEBFF light, r20, and the gold
   primary is r5 with WHITE 14/600 text (acct-btn-gold / mo-submit).
   Merged LAST (c_fx_* wins the cascade).
   ============================================================ */

/* ---- Content gutter: match the account/settings pages (x345 = 292 + 53);
   c_fixes.css:130 globally set 24px. Scoped restore (c_fx_account idiom). ---- */
.content:has(> .nt-tabs) { padding-left: 53px; padding-right: 53px; }

/* ---- Title: same frame convention as every auth page (y74, lh 45) ---- */
.nt-title {
    margin-top: -16px;
    line-height: 45px;
}

/* ---- Tabs: same gap rhythm as the updates bar (16px under title) ---- */
.nt-tabs { margin: 16px 0 24px; }

/* ---- Cards: JSP card idiom, not the sidebar navy ---- */
.nt-card {
    background: #060912;
    border-color: #131721;
}
[data-theme="light"] .nt-card {
    background: #FDFCFE;
    border-color: #EBEBFF;
}

/* ---- Gold primary: r5, white 14/600 — the settings-page button idiom ---- */
.nt-btn {
    height: 55px;
    padding: 0 28px;
    border: 0;
    border-radius: 5px;
    background: var(--gold);
    color: #FFFFFF;
    font-size: 14px;
    line-height: 12px;
}
.nt-btn-line {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
}

/* ---- Matrix: hairlines in the updates-row color, headers muted ---- */
.nt-matrix th, .nt-matrix td { border-bottom-color: #454D63; }
[data-theme="light"] .nt-matrix th,
[data-theme="light"] .nt-matrix td { border-bottom-color: #EBEBFF; }


/* ======== c_fx_orders.css ======== */
/* ============================================================
   c_fx_orders.css — ORDERS frame-fidelity restore
   Frames: figma-refs/orders-dark / orders-light (1440x721 @2x)
   c_fixes.css F4/F6 made the page fluid (24px gutters, 100% table,
   different column tracks). The Figma frame is FIXED geometry:
   content origin x345, table x333 w1012, 9 columns
   70/167/221/68/103/77/87/136/83. These rules win the cascade
   (c_fx_* merges last) and carry page scoping via .orders-page.
   ============================================================ */

/* Content origin back to frame x345 (c_fixes F4 set 24px gutters) */
.content:has(> .orders-page) { padding-left: 53px; padding-right: 53px; }

/* Table sits 12px left of content (frame x333) at fixed 1012px */
.orders-page .orders-head,
.orders-page .orders-table {
    width: 1012px;
    margin-left: -12px;
}

/* 9 frame columns — beats the F6 fluid tracks */
.orders-page .orders-head,
.orders-page .orders-row {
    grid-template-columns: 70px 167px 221px 68px 103px 77px 87px 136px 83px;
}

/* Bottom line runs 24px wider than the rows (frame dark x333..1369) */
.orders-page .orders-table::after { width: calc(100% + 24px); }

/* Figma hand-places header labels off the true column centers by
   1–3.5px (measured against frame.png glyph edges). Flex centering
   shifts by half the added padding — nudge back to the frame. */
.orders-page .orders-head .orders-cell:nth-child(2) { padding-left: 3px; }  /* Date +1.5 */
.orders-page .orders-head .orders-cell:nth-child(3) { padding-left: 5px; }  /* Link +2.5 */
.orders-page .orders-head .orders-cell:nth-child(4) { padding-left: 2px; }  /* Charge +1 */
.orders-page .orders-head .orders-cell:nth-child(5) { padding-left: 7px; }  /* Start Count +3.5 */
.orders-page .orders-head .orders-cell:nth-child(7) { padding-right: 4px; } /* Service −2 */
.orders-page .orders-head .orders-cell:nth-child(8) { padding-left: 4px; }  /* Status +2 */

/* Filter toggle fills the 48px well and centers its label
   (frame: "All" glyphs y154–163.5); without a height the label
   rides the top of the box. */
.orders-page .orders-filter-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Status pills center at frame x1195.5, 1.5px right of the column center */
.orders-page .orders-row .orders-cell:nth-child(8) { padding-left: 3px; }

/* Decorative table scrollbar (frame Group 1023): track x1386 y265
   4x401 r2 + purple thumb 4x96 r3.5 — pure ornament, frame-verbatim.
   .orders-page top edge = y90 → scrollbar offset 175.
   display:flow-root stops the h1's -16px margin collapsing through
   the wrapper, which would drag the absolute anchor up to y74. */
.orders-page { position: relative; display: flow-root; }
.orders-page::after {
    content: "";
    position: absolute;
    top: 175px;
    right: -3px; /* frame x1386..1390 */
    width: 4px;
    height: 401px;
    border-radius: 2px;
    background: #080C19;
}
.orders-page::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 175px;
    right: -3px;
    width: 4px;
    height: 96px;
    border-radius: 3.5px;
    background: #7D57FB;
}
[data-theme="light"] .orders-page::after { background: #EBEBFF; }

/* Light frame draws the bottom line from x321 (12px further left) */
[data-theme="light"] .orders-page .orders-table::after { left: -12px; }


/* ======== c_fx_services.css ======== */
/* ============================================================
   c_fx_services.css — SERVICES page Figma fidelity restore
   (figma-refs/services-dark|light + services-popup-dark|light,
   frame 1440x721, all coordinates = exact Figma CSS px).
   Loads LAST in the deploy merge (c_fx_* sorted after c_shell2),
   so these rules win over the c_fixes "fluid table" rework and the
   c_services_meta column rebalance. ws5 meta chips stay — only the
   geometry/typography returns to the frame spec.

   Frame truth (dark; light swaps surface/text colors):
   · content origin x345 (sidebar 292 + content padding 53)
   · title y74 30/600 · tools row y135 h48 (search 484 + gap 37 + filter 265)
   · table x334 w1036 · header labels y239 (12/400) underline y274
   · category row h62, glyph 19x13.5 @+16, name @+48 (12/400)
   · data rows: odd rows carry card rgba(6,11,24,.6) (frame PNG blend
     #050913), bottom hairline #454D63, min-height 130
   · cell text y+38 (12/400 #9298AF), name y+25 lh18.5 w221
   · column separators 1x30 @ y+29 (#C3C3D9 first, #454D63 rest)
   · description col x+766 w270: 3-line preview + "View Details"
     10/600 with 64px underline
   · faux scrollbar x1401 y274 w4 h401, thumb h96 #7D57FB
   · popup modal identical both themes: white card 1001x544 r20 on
     55% dim; stat cards 160x86 r20 #FDFCFE/#EBEBFF
   ============================================================ */

/* NOTE: content-origin compensation (x345) is applied centrally by the
   shell agent — intentionally NOT repeated here (double-shift guard). */

/* ---- Tools row: exact frame measures (undo fluid flex) ---- */
.svc-tools { margin-top: 16px; }
.svc-search { flex: 0 0 484px; width: 484px; max-width: 484px; }
.svc-filter { flex: 0 0 265px; width: 265px; margin-left: 37px; }

/* ---- Table shell: fixed frame width (undo c_fixes fluid).
   Margins live on the wrapper (not the table) so they cannot collapse
   through it and shift the absolutely-positioned faux scrollbar. ---- */
.svc-table-hold { position: relative; margin: 56px 0 0 -11px; }
#service-table.w1-svc-table {
    width: 1036px;
    margin-left: 0;
    margin-top: 0;
}

/* Faux scrollbar — Figma decor x1401 y274 (wrapper-relative 1067/35),
   track #080C19 r2, thumb h96 #7D57FB r3.5 */
.svc-table-hold .svc-scroll { left: 1067px; top: 35px; }

/* ---- Header: labels 12/400 at y239, hairline at y274.
   (.w1-svc-table in the selector = 1-3-0, needed to beat c_ws1's
   #service-table.w1-svc-table th { padding:0 } at 1-2-1.) ---- */
#service-table .svc-thead { height: 35px; }
#service-table .svc-thead tr { align-items: flex-start; }
#service-table.w1-svc-table .svc-h { font-size: 12px; font-weight: 400; line-height: 12px; }
#service-table.w1-svc-table .svc-h-id      { flex: 0 0 48px;  width: 48px;  padding-left: 19px; }
#service-table.w1-svc-table .svc-h-service { flex: 0 0 250px; width: 250px; padding-left: 19px; }
#service-table.w1-svc-table .svc-h-rate    { flex: 0 0 82px;  width: 82px;  padding-left: 0; text-align: center; }
#service-table.w1-svc-table .svc-h-min     { flex: 0 0 103px; width: 103px; padding-left: 0; text-align: center; }
#service-table.w1-svc-table .svc-h-max     { flex: 0 0 123px; width: 123px; padding-left: 6px; text-align: center; }
#service-table.w1-svc-table .svc-h-avg     { flex: 0 0 160px; width: 160px; padding-left: 0; text-align: center; }
#service-table.w1-svc-table .svc-h-desc    { flex: 0 0 270px; width: 270px; padding-left: 23px; }

/* ---- Category row: h62, glyph 19x13.5 @+16, name 12/400 @+48 ---- */
#service-table .svc-cat td {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    height: 62px;
    padding: 0 0 0 16px;
    border-bottom: 1px solid var(--border);
}
#service-table .svc-cat-ico-wrap {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 13.5px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1;
}
#service-table .svc-cat-ico-wrap img {
    max-width: 19px;
    max-height: 13.5px;
    object-fit: contain;
}
#service-table .svc-cat-name { margin-left: 13px; font-size: 12px; line-height: 12px; }

/* ---- Data rows: frame min-height 130, zebra on odd DATA rows.
   In the table DOM each category tr shifts parity, so the frame's
   "rows 1 & 3 carded" = .svc-row:nth-of-type(even). ---- */
#service-table .svc-row { height: auto; min-height: 130px; }
#service-table .svc-row:nth-of-type(odd)  { background: transparent; }
#service-table .svc-row:nth-of-type(even) { background: rgba(6, 11, 24, 0.6); }

/* Cells: frame text baseline y+38, name y+25 (undo c_ws1 padding:0
   and the c_services_meta 18px name top) */
#service-table.w1-svc-table .svc-cell.svc-id {
    flex: 0 0 48px; width: 48px;
    padding: 38px 0 0 19px;
    font-size: 12px; line-height: 12px;
}
#service-table.w1-svc-table .svc-cell.svc-service {
    flex: 0 0 250px; width: 250px;
    padding: 25px 0 12px 19px;
}
#service-table.w1-svc-table .svc-cell.svc-rate {
    flex: 0 0 82px; width: 82px;
    padding: 38px 0 0;
    font-size: 12px; line-height: 12px; text-align: center;
}
#service-table.w1-svc-table .svc-cell.svc-min {
    flex: 0 0 103px; width: 103px;
    padding: 38px 0 0;
    font-size: 12px; line-height: 12px; text-align: center;
}
#service-table.w1-svc-table .svc-cell.svc-max {
    flex: 0 0 123px; width: 123px;
    padding: 38px 0 0 6px;
    font-size: 12px; line-height: 12px; text-align: center;
}
#service-table.w1-svc-table .svc-cell.svc-avg {
    flex: 0 0 160px; width: 160px;
    padding: 38px 0 0;
    font-size: 12px; line-height: 12px; text-align: center;
}
#service-table.w1-svc-table .svc-cell.svc-desc {
    flex: 0 0 270px; width: 270px;
    display: block;
    padding: 16px 0 0 27px;
}

/* Favorites column (platform feature; not in the frames): keeps its
   42px, borrowed from the description column so the table stays 1036. */
#service-table .svc-h-fav, #service-table .svc-fav { flex: 0 0 42px; width: 42px; }
#service-table .svc-h-fav ~ .svc-h-desc { flex-basis: 228px; width: 228px; }
#service-table .svc-fav ~ .svc-cell.svc-desc { flex-basis: 228px; width: 228px; }

/* Service name: frame w221 lh18.5, wraps like the frame (no clamp) */
#service-table .svc-name { width: 221px; font-size: 12px; line-height: 18.5px; }

/* Description preview: 3 lines of plain text, frame lh18.5 */
#service-table .svc-desc-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: auto;
    padding-right: 12px;
    font-size: 12px;
    line-height: 18.5px;
}
#service-table .svc-desc .svc-desc-link { margin-top: 12px; }

/* Column separators: 1x30 @ y+29 — first (#C3C3D9) lighter in dark,
   all #C3C3D9 in light (frame Line 8 vs Lines 9–14) */
#service-table .svc-cell::after { top: 29px; height: 30px; }

/* ---- Popup modal: identical both themes (services-popup frames) ---- */
/* Modal is JS-portaled to <body> so z-200 beats the shell sidebar. */
.svc-modal { z-index: 200; }
.svc-modal-card { z-index: 1; }
.svc-stat-value { line-height: 18.5px; }
.svc-panel-text { line-height: 18.5px; }

/* ============================================================
   LIGHT theme — frame swaps: card row rgba(251,250,254,.6) (PNG
   blend #FCFCFE), hairlines #EBEBFF, header text #000000.
   ============================================================ */
:root[data-theme="light"] #service-table .svc-row:nth-of-type(odd)  { background: transparent; }
:root[data-theme="light"] #service-table .svc-row:nth-of-type(even) { background: rgba(251, 250, 254, 0.6); }
:root[data-theme="light"] .svc-table-hold .svc-scroll { background: #EBEBFF; }


/* ======== c_fx_shell.css ======== */
/* ============================================================
   c_fx_shell.css — shell fidelity fixes (founder review 2026-07-21)
   Canonical frames: figma-refs/dashboard-dark + dashboard-light
   (1440x721); nav geometry cross-checked against all 10 app frames
   (orders / neworder / services / addfunds / api / affiliates /
   childpanels / tickets / massorder / updates).

   Scoped to `body > .sidebar` / `body > .main` so the rules can
   NEVER bleed into the reset-password guest shell (.rp-shell),
   which mirrors the same class names inside a wrapper div.

   Figma composites (nodes.json fills × node opacity, verified
   against frame.png renders):
   · sidebar  dark #111727 @60% over #03050C → #0B101D solid
              light #F8F7FE @60% over #FFFFFF → #FBFAFE solid
   · pill     dark #0E2236 @50% over sidebar  → rgba(14,34,54,.5)
              light #EBEBFF @50% over sidebar → rgba(235,235,255,.5)
   ============================================================ */

/* ---- Sidebar surfaces ---- */
body > .sidebar { background: #0B101D; border-right-color: #454D63; }
:root[data-theme="light"] body > .sidebar { background: #FBFAFE; border-right-color: #EBEBFF; }

/* ---- S1 · Logo: art 172x42.32 at x60 y32, directly on the sidebar
   (no band, no border — the crops bake the sidebar bg itself) ---- */
body > .sidebar .side-logo {
    display: block;
    height: 74.32px;             /* 32 top pad + 42.32 art */
    padding: 32px 0 0 60px;
    background: none;
    border-bottom: 0;
}
body > .sidebar .side-logo-img { display: block; width: 172px; height: 42.32px; }
/* Theme swap (mirrors c_fixes, but with the specificity to hold here) */
body > .sidebar .side-logo-light { display: none; }
:root[data-theme="light"] body > .sidebar .side-logo-dark { display: none; }
:root[data-theme="light"] body > .sidebar .side-logo-light { display: block; }

/* ---- S2 · Nav stack: rows 41px, first row top y≈141.5 ---- */
body > .sidebar .side-nav { margin-top: 67px; }   /* 74.32 + 67 = 141.3 */
body > .sidebar .nav-item { height: 41px; gap: 20px; }  /* label lands x≈101 */

/* Per-item nudges so every frame's inactive rows land exactly
   (Figma hand-placement drift, measured across all 10 frames) */
body > .sidebar .nav-item[data-nav="orders"]      { margin-top: -2px; }
body > .sidebar .nav-item[data-nav="services"]    { margin-top: 1px; }
body > .sidebar .nav-item[data-nav="api"]         { margin-top: 1px; }
body > .sidebar .nav-item[data-nav="affiliates"]  { margin-top: 1px; }
body > .sidebar .nav-item[data-nav="childpanels"] { margin-top: 1px; }
body > .sidebar .nav-item[data-nav="tickets"]     { margin-top: -2px; }
body > .sidebar .nav-item[data-nav="massorder"]   { margin-top: -3px; }

/* ---- S3 · Active pill: 245x66, flush left, rounded right only ---- */
body > .sidebar .nav-item.active {
    height: 66px;
    padding-left: 54px;
    gap: 15px;
    border-radius: 0 10px 10px 0;
    background: rgba(14, 34, 54, .5);
}
:root[data-theme="light"] body > .sidebar .nav-item.active { background: rgba(235, 235, 255, .5); }

/* Pill vertical placement per active page (matches each frame's pill y) */
body > .sidebar .nav-item.active[data-nav="dashboard"]   { margin-top: -11.5px; margin-bottom: 15.5px; }
body > .sidebar .nav-item.active[data-nav="orders"]      { margin-top: 12.5px;  margin-bottom: 11.5px; }
body > .sidebar .nav-item.active[data-nav="neworder"]    { margin-top: 14.5px;  margin-bottom: 11.5px; }
body > .sidebar .nav-item.active[data-nav="services"]    { margin-top: 7.5px;   margin-bottom: 7.5px; }
body > .sidebar .nav-item.active[data-nav="addfunds"]    { margin-top: 6.5px;   margin-bottom: 11.5px; }
body > .sidebar .nav-item.active[data-nav="api"]         { margin-top: 12.5px;  margin-bottom: 6.5px; }
body > .sidebar .nav-item.active[data-nav="affiliates"]  { margin-top: 9.5px;   margin-bottom: 9.5px; }
body > .sidebar .nav-item.active[data-nav="childpanels"] { margin-top: 9.5px;   margin-bottom: 8.5px; }
body > .sidebar .nav-item.active[data-nav="tickets"]     { margin-top: 6.5px;   margin-bottom: 9.5px; }
body > .sidebar .nav-item.active[data-nav="massorder"]   { margin-top: 3.5px;   margin-bottom: 0; }

/* Active tile 33x33 r8, exact per-page Figma gradients (angles from
   Figma gradient handles) — overrides the invented hues in style.css */
body > .sidebar .nav-item.active .nav-ico { border-radius: 8px; }
body > .sidebar .nav-item.active[data-nav="dashboard"]   .nav-ico { --nav-grad: linear-gradient(143deg, #FFAF36, #FF3E13); }
body > .sidebar .nav-item.active[data-nav="orders"]      .nav-ico { --nav-grad: linear-gradient(143deg, #FF7FB1, #ED2D60); }
body > .sidebar .nav-item.active[data-nav="neworder"]    .nav-ico { --nav-grad: linear-gradient(143deg, #7FABFF, #2DBFED); }
body > .sidebar .nav-item.active[data-nav="services"]    .nav-ico { --nav-grad: linear-gradient(240deg, #774DFA, #A398FF); }
body > .sidebar .nav-item.active[data-nav="addfunds"]    .nav-ico { --nav-grad: linear-gradient(314deg, #FF7063, #FFCE2E); }
body > .sidebar .nav-item.active[data-nav="api"]         .nav-ico { --nav-grad: linear-gradient(143deg, #7FE0FF, #3C2DED); }
body > .sidebar .nav-item.active[data-nav="affiliates"]  .nav-ico { --nav-grad: linear-gradient(314deg, #63A1FF, #2EF2FF); }
body > .sidebar .nav-item.active[data-nav="childpanels"] .nav-ico { --nav-grad: linear-gradient(143deg, #FF7F7F, #ED2D89); }
body > .sidebar .nav-item.active[data-nav="tickets"]     .nav-ico { --nav-grad: linear-gradient(143deg, #7FFFAB, #2DEDBF); }
body > .sidebar .nav-item.active[data-nav="massorder"]   .nav-ico { --nav-grad: linear-gradient(143deg, #DE7FFF, #762DED); }
body > .sidebar .nav-item.nav-updates.active             .nav-ico { --nav-grad: linear-gradient(319deg, #21BF69, #41EB8F); }

/* ---- S4 · Affiliates / Child Panel glyphs: transparent 2x frame
   crops (exact Figma colors), white inside the active tile ---- */
body > .sidebar .nav-ico > .sh-ic { display: block; background: center / contain no-repeat; }
body > .sidebar .nav-ico > .sh-ic-affiliates { width: 21px; height: 21px; background-image: url("https://storage.perfectcdn.com/9edfaa/ocsarowuj8wz6n48.png"); }
body > .sidebar .nav-ico > .sh-ic-childpanel { width: 20px; height: 20px; background-image: url("https://storage.perfectcdn.com/9edfaa/fz8cikzt4h08tgq1.png"); }
:root[data-theme="light"] body > .sidebar .nav-ico > .sh-ic-affiliates { background-image: url("https://storage.perfectcdn.com/9edfaa/mn5a88cp2g911lob.png"); }
:root[data-theme="light"] body > .sidebar .nav-ico > .sh-ic-childpanel { background-image: url("https://storage.perfectcdn.com/9edfaa/6bqhn2uh3m4thzg8.png"); }
body > .sidebar .nav-item.active .nav-ico > .sh-ic {
    width: 17px;
    height: 17px;
    filter: brightness(0) invert(1);   /* exact white glyph on the tile */
}

/* ---- S5 · Divider + Updates row + green dot ---- */
body > .sidebar .side-divider {
    margin: auto 0 0 44px;   /* pinned to bottom, x44 — frame w192 */
    width: 192px;
}
body > .sidebar .nav-updates { height: 41px; margin-top: 9.5px; gap: 0; }
body > .sidebar .nav-updates .nav-label { margin-left: 20px; }
body > .sidebar .nav-updates.active .nav-label { margin-left: 15px; }
body > .sidebar .nav-updates .nav-ico { color: #38425B; }
:root[data-theme="light"] body > .sidebar .nav-updates .nav-ico { color: #9F9FAE; }
/* Dot sits 9px after the "Updates" label (frame x170), NOT at the
   sidebar's right edge; 18px @10% ring + 8.4px solid core, top y649 */
body > .sidebar .nav-updates .updates-dot {
    align-self: flex-start;
    margin: 1.5px 0 0 10px;
    background: rgba(65, 235, 143, .1);
}
body > .sidebar .nav-updates .updates-dot::after { inset: 4.8px; }
/* Updates ACTIVE (updates-dark frame): gradient tile + white 600 label,
   NO pill block, dot gone */
body > .sidebar .nav-item.nav-updates.active {
    width: auto;
    height: 41px;
    margin: 9.5px 0 0;
    padding-left: 54px;
    gap: 0;
    background: none;
    border-radius: 0;
    color: var(--text);
    font-weight: 600;
}
body > .sidebar .nav-item.nav-updates.active .updates-dot { display: none; }
body > .sidebar .side-foot-spacer { height: 32.5px; }

/* ---- S7 · Content-gutter restores (shell-owned per founder decision:
   c_fixes.css:130 keeps 24px globally; frames want 53px → origin x345.
   Page agents compensated their own pages; tickets + services were
   deliberately left to shell. :has() scoping = zero bleed. ---- */
.content:has(.tickets-title) { padding-left: 53px; }
.content:has(.svc-title)     { padding-left: 53px; }
/* child_panel_order (.cp-card view) is frame-backed (x345); the panels
   list (.chp-card) intentionally keeps c_fixes' 24px like its table
   siblings (drip-feed/subscriptions/refill/refunds — no frames). */
.content:has(.cp-title)      { padding-left: 53px; }

/* ---- S6 · Header cluster ---- */
/* Polygon wireframe art: exact 2x frame crop, frame x825 (533 from
   .main), top-clipped by the frame, 167x87.5 visible */
body > .main .topbar-poly {
    left: 533px;
    top: 0;
    width: 167px;
    height: 87.5px;
    background-image: url("https://storage.perfectcdn.com/9edfaa/o9gokinob2aaojyp.png");
    background-size: 100% 100%;
}
:root[data-theme="light"] body > .main .topbar-poly { background-image: url("https://storage.perfectcdn.com/9edfaa/wy6ee7jpdq996xh5.png"); }

/* Balance pill inner ring: frame insets L8 T7 R9 B7 (was 6px 8px) */
body > .main .balance-pill::after { inset: 7px 9px 7px 8px; }
/* Pill content is left-anchored in the frame: text at pill+32, chevron at
   pill+83 (gap 23) — not centered. Longer balances flow right from there. */
body > .main .balance-pill { justify-content: flex-start; padding-left: 32px; gap: 20px; }
/* Avatar 47px in the 45px topbar band centers at y21 — frame wants y20 */
body > .main .account-chip { margin-top: -2px; }

/* Avatar: exact 2x frame crops (47px ring #EBEBFF + 35px gradient disc +
   white person glyph), per theme — the ring-to-disc band bakes the page
   bg, so dark/light get their own crop. Circle-clipped via border-radius. */
body > .main .account-chip .avatar {
    border: 0;
    background: url("https://storage.perfectcdn.com/9edfaa/5w08as1dmoojcnek.png") center / cover no-repeat;
}
:root[data-theme="light"] body > .main .account-chip .avatar { background-image: url("https://storage.perfectcdn.com/9edfaa/zugew71r88jxzqdc.png"); }
body > .main .account-chip .avatar svg { display: none; }

/* Bootstrap 3 `.caret` (border-triangle + margin-left:2px) leaks onto our
   svg chevrons — it drew a fat triangle over the stroke chevron and added
   ~2px to the chip width. Kill borders + margin outright. */
body > .main .balance-pill .caret,
body > .main .account-chip .caret { border: 0; margin-left: 0; }


/* ======== c_fx_terms.css ======== */
/* ============================================================
   c_fx_terms.css — TERMS fidelity restore (guest lp canvas only)
   Frames: figma-refs/terms-dark + terms-light (1440x2517).
   c_fixes.css (F10) turned the guest panel into a flowing card;
   the Figma frame is an exact absolute canvas. These overrides
   restore the frame geometry for the guest page (.lp.tms) while
   leaving the authed .tms-shell flow layout and the JS tab
   switcher intact. This file loads LAST, so it wins the cascade.
   ============================================================ */

/* ---------- main band: y88-2371 → 2283px (grows only if admin
   termsofservice text renders below the panel) ---------- */
.lp.tms .tms-main {
    display: flow-root; /* stop .tms-full's margin collapsing through */
    height: auto;
    min-height: 2283px;
    padding-bottom: 0;
}

/* ---------- title "Terms" (36/700 lh54 @ x683 y84) ---------- */
.lp.tms .tms-title {
    position: absolute;
    left: 683px;
    top: 84px;
    padding-top: 0;
    text-align: left;
}

/* ---------- panel (x118 y272 frame → top:184, 1205x1859, r43) ---------- */
.lp.tms .tms-panel {
    position: absolute;
    left: 118px;
    top: 184px;
    width: 1205px;
    height: 1859px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 43px;
}

/* ---------- tab bar: back to frame-exact absolute tabs ---------- */
.lp.tms .tms-tabs { display: block; margin: 0; }
.lp.tms .tms-tabs .tms-tab {
    position: absolute;
    top: 65px;
    left: auto;               /* per-tab lefts from style.css */
    width: auto;              /* per-tab widths from style.css */
    height: 72px;
    margin: 0;
    padding: 0;
    display: block;
    border: 0;
    border-radius: 10px;
    background: var(--lp-card, var(--panel));
    box-shadow: none;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
}
.lp.tms .tms-tabs .tms-tab-1 { left: 124px; width: 224px; }
.lp.tms .tms-tabs .tms-tab-2 { left: 365px; width: 161px; }
.lp.tms .tms-tabs .tms-tab-3 { left: 543px; width: 291px; }
.lp.tms .tms-tabs .tms-tab-4 { left: 851px; width: 229px; }
.lp.tms .tms-tabs .tms-tab.is-active {
    background: var(--tms-tab-on);
    box-shadow: var(--tms-tab-shadow);
}
/* tab labels — frame metrics (14/400 lh28 @ y+22; active 16/600 lh20 @ y+26) */
.lp.tms .tms-tabs .tms-tab .tms-tab-t {
    position: absolute;
    top: 22px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: var(--lp-muted);
    white-space: nowrap;
}
.lp.tms .tms-tabs .tms-tab .tms-tab-t1 { left: 49px; }
.lp.tms .tms-tabs .tms-tab .tms-tab-t2 { left: 55px; }
.lp.tms .tms-tabs .tms-tab .tms-tab-t3 { left: 50px; }
.lp.tms .tms-tabs .tms-tab .tms-tab-t4 {
    left: 58px;
    top: 26px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--lp-ink);
}
/* if another tab is clicked, its label takes the active metrics */
.lp.tms .tms-tabs .tms-tab.is-active .tms-tab-t { color: var(--lp-ink); font-weight: 600; }

/* ---------- bodies: Figma state (Privacy Policy) is absolute-exact ---------- */
.lp.tms .tms-bodies { margin-top: 0; }
.lp.tms .tms-body-4 .tms-panel-title {
    position: absolute;
    left: 512px;
    top: 179px;
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 54px;
    color: var(--lp-ink);
    text-align: left;
}
.lp.tms .tms-body-4 .tms-p,
.lp.tms .tms-body-4 .tms-h {
    position: absolute;
    left: 100px;
    width: 1005px;
    max-width: none;
    margin: 0;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
}
/* wider paragraphs (x194/x199 w1050 in frame) — tops live in style.css */
.lp.tms .tms-body-4 .tms-p5 { left: 76px; width: 1050px; }
.lp.tms .tms-body-4 .tms-p6,
.lp.tms .tms-body-4 .tms-p7,
.lp.tms .tms-body-4 .tms-p8,
.lp.tms .tms-body-4 .tms-p9 { left: 81px; width: 1050px; }

/* non-Figma tab bodies (clicked states) keep a sane flow inside the
   fixed panel: start under the tab row like the Figma title (y179) */
.lp.tms .tms-body-1,
.lp.tms .tms-body-2,
.lp.tms .tms-body-3 { margin: 179px 100px 0; }
.lp.tms .tms-body-1 .tms-panel-title,
.lp.tms .tms-body-2 .tms-panel-title,
.lp.tms .tms-body-3 .tms-panel-title {
    position: static;
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--lp-ink);
    text-align: center;
}

/* ---------- admin {{ termsofservice }} card — below the panel ---------- */
.lp.tms .tms-full {
    width: 1205px;
    margin: 2080px 0 0 118px;
    position: relative;
    z-index: 1; /* paint above the geo/plant decorations */
}

/* ---------- footer flows exactly at y2371 ---------- */
.lp.tms .lp-footer { margin-top: 0; }


/* ======== c_fx_tickets.css ======== */
/* ============================================================
   FX-TICKETS — frame-exact restore (figma-refs/tickets-dark|light)
   Frame 1440x721; card x350 y175, 763x511, r20 (#060912/#131721 dark,
   #FDFCFE/#EBEBFF light). Subject + Request are pill rows bridging the
   real PP selects (ws6 pattern) — the selects stay in the DOM, hidden.
   Merged LAST (c_fx_* wins the cascade). Scoped to the tickets page.
   ============================================================ */

/* Card back to frame size (c_fixes had made it fluid). min-height so
   live extra injected fields can grow it; mock content lands on 511.
   Frame x350 = title x345 + 5 → margin-left 5px (c_fixes zeroed it). */
.ticket-panel { width: 763px; max-width: 100%; height: auto; min-height: 511px; margin-left: 5px; }

/* Category select is driven by the Subject pill row — keep in DOM
   (PP contract: script.js reads/renders off it), hide visually. */
.ticket-panel .tk-select-wrap { display: none; }

/* ws6 put the AJAX alert div before the first .tk-label, so the base
   `:first-of-type` margin reset stopped matching and the whole interior
   dropped 15px. The label always follows the alert — reset it here. */
.ticket-panel > .alert + .tk-label { margin-top: 0; }

/* Subcategory select is driven by the Request pill row (ws6 bridge) —
   hide its platform-injected form-group. */
#ticket-fields .form-group:has(#ticket-subcategory) { display: none; }

/* Injected additional fields (Order ID) at frame width 682 (x380→1062) —
   c_polish had them at 100%. */
#ticket-fields .form-control { width: 682px; max-width: 100%; }

/* Attach-file widget is platform-hydrated; while empty (no uploader JS
   in preview) it must not add vertical space — frame textarea→button
   gap is 23px. */
.tk-upload:has(.tickets-uploader:empty) { margin: 0; }

/* Corner wireframe polyhedron: frame pins it to the viewport's bottom-right
   (x1150-1440, y500-721), not the bottom of a taller page. */
.tk-br-poly { position: fixed; right: 0; bottom: 0; }


/* ======== c_fx_updates.css ======== */
/* ============================================================
   FX UPDATES — frame-exact restore (figma-refs/updates-dark|light)
   Frame 1440x721: title y74 · bar y135 (search x345 484x48 r5,
   filter x866 265x48) · head labels y230 (12/400) · table x333
   w1012, rows 80px, col grid 276/203/1fr, dividers rgba(69,77,99)
   dark / #EBEBFF + #C3C3D9 light, odd-row band #050913 dark /
   rgba(251,250,254,.6) light · update tiles 35x35 r8 (10% color
   wash + solid glyph) · New pill 79x30 r15.
   c_fixes F4 made the table fluid (100%, minmax grid); this part
   re-asserts the frame geometry. Merged LAST (c_fx_* wins).
   ============================================================ */

/* ---- Content gutter: frames put content at x345 (sidebar 292 + 53);
   c_fixes.css:130 globally set 24px. Scoped restore (c_fx_account idiom). ---- */
.content:has(> .updates-bar) { padding-left: 53px; padding-right: 53px; }

/* ---- Table back to frame geometry: x333, 1012 wide, fixed columns ---- */
.updates-head,
.updates-table {
    width: 1012px;
    margin-left: -12px; /* 12px left of content origin → frame x333 */
}
.updates-head,
.updates-row {
    grid-template-columns: 276px 203px 1fr; /* dividers at frame x609 / x812 */
}

/* ---- Exact frame hairline color: rgba(69,77,99) = #454D63 ---- */
.updates-row { border-top-color: #454D63; }
.updates-table { border-bottom-color: #454D63; }
.updates-row .updates-cell + .updates-cell::before { background: #454D63; }
[data-theme="light"] .updates-row { border-top-color: #EBEBFF; }
[data-theme="light"] .updates-table { border-bottom-color: #EBEBFF; }
[data-theme="light"] .updates-row .updates-cell + .updates-cell::before { background: #C3C3D9; }

/* ---- New pill: exact frame green rgba(132,241,130) on its 10% wash ---- */
.updates-pill { color: #84F182; background: rgba(132, 241, 130, .1); }

/* ---- Long real data: truncate at the column edge like the frame ---- */
.updates-cell { min-width: 0; overflow: hidden; }
.updates-ellip {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.updates-update .updates-ellip { flex: 1 1 auto; }
.updates-date span { flex: none; }

/* ---- Narrow viewports: let the fixed table shrink instead of overflow ---- */
@media (max-width: 1279px) {
    .updates-head, .updates-table { width: 100%; margin-left: 0; }
    .updates-head, .updates-row { grid-template-columns: minmax(180px, 1fr) minmax(140px, .7fr) 2fr; }
}