/* HypeMyWeb presentation system
 * Mobile-first, no framework, and intentionally usable without JavaScript.
 */
@layer reset, tokens, base, components, pages, utilities, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }
  button, [type="button"], [type="submit"], summary { -webkit-tap-highlight-color: transparent; }
  table { border-collapse: collapse; border-spacing: 0; }
  dialog { padding: 0; }
}

@layer components {
/* Consent is server-rendered so the protective default and both choices work without JavaScript. */
.consent-dialog { position:fixed; z-index:80; inset:auto .5rem max(.5rem,env(safe-area-inset-bottom)); width:min(100% - 1rem,46rem); max-width:none; border:0; border-radius:1.2rem; margin:0 auto; background:transparent; color:var(--ink); }
.consent-dialog::backdrop { background:rgb(5 6 10 / .58); backdrop-filter:blur(4px); }
.consent-dialog__panel { padding:1rem; border:1px solid var(--line); border-radius:1.2rem; background:var(--bg-elevated); box-shadow:var(--shadow-lg); }
.consent-dialog__copy { position:relative; display:flex; align-items:flex-start; gap:.75rem; padding-right:2.3rem; }
.consent-dialog__copy h2 { color:var(--ink-strong); font-size:1rem; }
.consent-dialog__copy p { max-width:58rem; margin-top:.35rem; font-size:.73rem; }
.consent-dialog__icon { display:grid; width:2.4rem; height:2.4rem; flex:0 0 auto; place-items:center; border-radius:.75rem; background:var(--brand-soft); color:var(--brand); }
.consent-dialog__close { position:absolute; top:-.25rem; right:-.25rem; }
.consent-dialog__actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.9rem; }
.consent-dialog__actions form { flex:1 1 10rem; }
.consent-dialog__actions .button { width:100%; }
.consent-dialog__status { padding-top:.7rem; border-top:1px solid var(--line); margin-top:.7rem; font-size:.65rem; }
.consent-dialog__status a { color:var(--brand); font-weight:750; }
@media (min-width:48rem) { .consent-dialog { bottom:1.25rem; } .consent-dialog__panel { padding:1.2rem; } .consent-dialog__actions { justify-content:flex-end; } .consent-dialog__actions form { flex:0 0 auto; } .consent-dialog__actions .button { width:auto; } }
}

@layer pages {
  .verification-layout { margin-top:1rem; }
  .verification-account { display:flex;align-items:center;gap:.75rem;margin-bottom:.8rem; }
  .verification-account > div { min-width:0;flex:1; }
  .verification-account h2 { margin-top:.2rem;font-size:1rem; }
  .verification-account p { overflow:hidden;font-size:.72rem;text-overflow:ellipsis;white-space:nowrap; }
  .verification-methods { display:grid;gap:.65rem; }
  .verification-methods form { display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.7rem;padding:.8rem;border:1px solid var(--line);border-radius:.8rem;background:var(--bg-soft); }
  .verification-methods form > .button { grid-column:1/-1; }
  .verification-method-icon { display:grid;width:2.7rem;height:2.7rem;place-items:center;border-radius:.8rem;background:var(--brand-soft);color:var(--brand); }
  .verification-methods h3 { font-size:.86rem; }
  .verification-methods p { margin-top:.2rem;font-size:.68rem; }
  .challenge-panel > p { font-size:.8rem; }
  .verification-code { display:flex;align-items:center;gap:.6rem;padding:.8rem;border:1px dashed color-mix(in srgb,var(--brand) 45%,var(--line));border-radius:.8rem;margin-top:1rem;background:var(--brand-soft); }
  .verification-code code { min-width:0;flex:1;background:transparent;color:var(--brand);font-size:clamp(.85rem,3vw,1.15rem);font-weight:850;letter-spacing:.06em;overflow-wrap:anywhere; }
  .challenge-expiry { display:flex;gap:.35rem;margin-top:.65rem;font-size:.67rem!important; }
  .delete-account-card { max-width:47rem;margin:1rem auto 0;border-color:color-mix(in srgb,var(--danger) 28%,var(--line)); }
  .delete-warning-icon { display:grid;width:3.5rem;height:3.5rem;place-items:center;border-radius:1rem;margin-bottom:1rem;background:var(--danger-soft);color:var(--danger); }
  .delete-account-copy h2 { color:var(--danger);font-size:1.2rem; }
  .delete-account-copy > p { margin-top:.55rem; }
  .delete-account-copy ul { padding-left:1.2rem;margin-top:1rem;color:var(--muted); }
  .delete-account-copy li + li { margin-top:.55rem; }
  .delete-confirm-form { padding-top:1.2rem;border-top:1px solid var(--line);margin-top:1.2rem; }
  .two-factor-wrap { max-width:42rem;margin-inline:auto; }.two-factor-card { padding:1.3rem; }.security-hero-icon { display:grid;width:3.5rem;height:3.5rem;flex:0 0 auto;place-items:center;border-radius:1rem;margin-bottom:1rem;background:var(--brand-soft);color:var(--brand); }.two-factor-card > h2 { font-size:1.25rem; }.numbered-steps { display:grid;gap:1rem;margin-top:1.2rem;list-style:none; }.numbered-steps > li { display:flex;align-items:flex-start;gap:.7rem;padding-top:1rem;border-top:1px solid var(--line); }.numbered-steps > li > span { display:grid;width:1.7rem;height:1.7rem;flex:0 0 auto;place-items:center;border-radius:50%;background:var(--ink-strong);color:var(--bg-elevated);font-size:.7rem;font-weight:850; }.numbered-steps > li > div { min-width:0;flex:1; }.numbered-steps p { margin-top:.25rem;font-size:.72rem; }.break-all { word-break:break-all; }.two-factor-code-form { padding-top:1.2rem;border-top:1px solid var(--line);margin-top:1.2rem; }.two-factor-code-form input { font-size:1.2rem;letter-spacing:.2em;text-align:center; }.challenge-card { text-align:center; }.challenge-card .security-hero-icon { margin-inline:auto; }.challenge-card > p { margin-top:.55rem; }.two-factor-status { display:flex;align-items:flex-start;gap:.8rem; }.two-factor-status .security-hero-icon { margin:0; }.two-factor-status h2 { margin-top:.4rem;font-size:1.1rem; }.two-factor-status p { margin-top:.3rem;font-size:.76rem; }.recovery-codes { padding:1rem;border:1px solid var(--line);border-radius:.8rem;margin-top:1.2rem;background:var(--bg-soft); }.recovery-codes h3 { font-size:.9rem; }.recovery-codes p { margin-top:.3rem;font-size:.7rem; }.recovery-codes ul { display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.8rem;list-style:none; }.recovery-codes code { display:block;padding:.45rem;text-align:center; }.two-factor-disable { margin-top:1.2rem;padding:1rem; }.two-factor-note { display:flex;align-items:flex-start;gap:.6rem;margin-top:.8rem; }.two-factor-note .icon { flex:0 0 auto;color:var(--brand); }
}

@layer responsive {
  @media (min-width: 32rem) {
    .verification-methods form { grid-template-columns:auto minmax(0,1fr) auto; }
    .verification-methods form > .button { grid-column:auto; }
  }
}

@layer pages { .setup-key-intro { margin-top:.65rem; } .two-factor-status + .button { margin-top:1rem; } }

@layer tokens {
  :root {
    color-scheme: light;
    --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bg: #f7f8fb;
    --bg-elevated: #ffffff;
    --bg-subtle: #f0f2f7;
    --bg-soft: #f9fafc;
    --ink: #16171d;
    --ink-strong: #08090d;
    --muted: #686c79;
    --faint: #9196a3;
    --line: #e2e4eb;
    --line-strong: #cfd2dc;
    --brand: #6d4aff;
    --brand-hover: #5934ef;
    --brand-soft: #ede9ff;
    --accent: #12b98e;
    --accent-soft: #dcf9f1;
    --danger: #d83a52;
    --danger-soft: #ffeaee;
    --warning: #c77800;
    --warning-soft: #fff3d8;
    --success: #087f62;
    --success-soft: #dcf8ef;
    --focus: #2a71ff;
    --shadow-xs: 0 1px 2px rgb(16 20 30 / .05);
    --shadow-sm: 0 4px 16px rgb(25 28 40 / .07), 0 1px 3px rgb(25 28 40 / .06);
    --shadow-md: 0 18px 45px rgb(25 28 40 / .11), 0 4px 12px rgb(25 28 40 / .06);
    --shadow-lg: 0 30px 80px rgb(10 12 22 / .17), 0 8px 24px rgb(10 12 22 / .08);
    --radius-xs: .5rem;
    --radius-sm: .75rem;
    --radius-md: 1rem;
    --radius-lg: 1.35rem;
    --radius-xl: 1.8rem;
    --header-height: 4.25rem;
    --container: 76rem;
    --container-wide: 92rem;
    --ease: cubic-bezier(.2, .75, .25, 1);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0c11;
    --bg-elevated: #13151c;
    --bg-subtle: #1a1c25;
    --bg-soft: #101218;
    --ink: #e7e9ef;
    --ink-strong: #ffffff;
    --muted: #a4a8b4;
    --faint: #767b89;
    --line: #292c37;
    --line-strong: #3a3e4c;
    --brand: #8b73ff;
    --brand-hover: #9d89ff;
    --brand-soft: #29223f;
    --accent: #39d2aa;
    --accent-soft: #12372f;
    --danger: #ff6c81;
    --danger-soft: #3c1d25;
    --warning: #f4b64a;
    --warning-soft: #392d17;
    --success: #43d0aa;
    --success-soft: #14362e;
    --focus: #75a7ff;
    --shadow-xs: 0 1px 2px rgb(0 0 0 / .25);
    --shadow-sm: 0 4px 18px rgb(0 0 0 / .25);
    --shadow-md: 0 18px 45px rgb(0 0 0 / .34);
    --shadow-lg: 0 30px 80px rgb(0 0 0 / .52);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0b0c11; --bg-elevated: #13151c; --bg-subtle: #1a1c25; --bg-soft: #101218;
      --ink: #e7e9ef; --ink-strong: #fff; --muted: #a4a8b4; --faint: #767b89;
      --line: #292c37; --line-strong: #3a3e4c; --brand: #8b73ff; --brand-hover: #9d89ff;
      --brand-soft: #29223f; --accent: #39d2aa; --accent-soft: #12372f; --danger: #ff6c81;
      --danger-soft: #3c1d25; --warning: #f4b64a; --warning-soft: #392d17;
      --success: #43d0aa; --success-soft: #14362e; --focus: #75a7ff;
      --shadow-xs: 0 1px 2px rgb(0 0 0 / .25); --shadow-sm: 0 4px 18px rgb(0 0 0 / .25);
      --shadow-md: 0 18px 45px rgb(0 0 0 / .34); --shadow-lg: 0 30px 80px rgb(0 0 0 / .52);
    }
  }
}

@layer base {
  body { min-width: 20rem; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: .9375rem; line-height: 1.55; text-rendering: optimizeLegibility; }
  body::selection { background: var(--brand); color: #fff; }
  a { color: inherit; text-decoration: none; }
  button, a { touch-action: manipulation; }
  button { color: inherit; }
  h1, h2, h3 { color: var(--ink-strong); font-family: var(--font-display); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
  h1 { font-size: clamp(2.25rem, 9vw, 4.8rem); }
  h2 { font-size: clamp(1.55rem, 5vw, 2.5rem); }
  h3 { font-size: 1.06rem; }
  p { color: var(--muted); }
  small { color: var(--muted); }
  code { padding: .15rem .38rem; border-radius: .35rem; background: var(--bg-subtle); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8em; overflow-wrap: anywhere; }
  :focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 70%, transparent); outline-offset: 3px; }
  :target { scroll-margin-top: calc(var(--header-height) + 1.5rem); }
  .site-main { min-height: 60vh; }
  .container, .container-wide { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
  .container-wide { width: min(100% - 1.5rem, var(--container-wide)); }
  .narrow-container { max-width: 48rem; }
  .skip-link { position: fixed; z-index: 9999; top: .75rem; left: .75rem; translate: 0 -180%; padding: .65rem 1rem; border-radius: var(--radius-sm); background: var(--ink-strong); color: var(--bg); font-weight: 800; transition: translate .16s ease; }
  .skip-link:focus { translate: 0; }
  .icon { display: inline-block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
  .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
  .eyebrow { display: inline-flex; align-items: center; gap: .4rem; color: var(--brand); font-size: .72rem; font-weight: 850; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
  .muted { color: var(--muted); }
}

@layer components {
  .button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.05rem; border: 1px solid transparent; border-radius: .78rem; cursor: pointer; font-weight: 750; line-height: 1.1; text-align: center; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, translate .18s var(--ease); }
  .button:hover { translate: 0 -1px; }
  .button:active { translate: 0 0; }
  .button:disabled { cursor: not-allowed; opacity: .55; translate: none; }
  .button-primary { background: var(--brand); color: #fff; box-shadow: 0 7px 18px color-mix(in srgb, var(--brand) 24%, transparent); }
  .button-primary:hover { background: var(--brand-hover); }
  .button-secondary { border-color: var(--line); background: var(--bg-elevated); color: var(--ink); box-shadow: var(--shadow-xs); }
  .button-secondary:hover, .button-ghost:hover { border-color: var(--line-strong); background: var(--bg-subtle); }
  .button-ghost { border-color: transparent; background: transparent; color: var(--ink); box-shadow: none; }
  .button-inverse { background: #fff; color: #17131f; box-shadow: 0 8px 22px rgb(0 0 0 / .15); }
  .button-danger { background: var(--danger); color: #fff; }
  .button-danger-outline { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); color: var(--danger); background: transparent; }
  .button-success { background: var(--success); color: #071b16; }
  .button-compact { min-height: 2.35rem; padding: .52rem .78rem; border-radius: .66rem; font-size: .83rem; }
  .button-large { min-height: 3.25rem; padding: .9rem 1.25rem; border-radius: .9rem; }
  .button-full { width: 100%; }
  .icon-button { display: inline-grid; width: 2.65rem; height: 2.65rem; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: .75rem; background: var(--bg-elevated); cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; }
  .icon-button:hover { border-color: var(--line-strong); background: var(--bg-subtle); }
  .text-button, .text-link { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: transparent; color: var(--brand); cursor: pointer; font-weight: 750; }
  .text-link:hover, .text-button:hover { text-decoration: underline; text-underline-offset: .2em; }
  .danger-text { color: var(--danger); }

  .site-header { position: sticky; z-index: 100; top: 0; height: var(--header-height); border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--bg) 87%, transparent); backdrop-filter: blur(18px) saturate(140%); }
  .header-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 1rem; }
  .brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 900; letter-spacing: -.035em; }
  .brand-mark { display: grid; width: 1.85rem; height: 1.85rem; grid-template: 1fr 1fr / 1fr 1fr; gap: 2px; padding: 3px; border-radius: .55rem; background: #15151c; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), var(--shadow-xs); }
  .brand-mark span { border-radius: 2px; background: linear-gradient(135deg, #927aff, #6b46ff); }
  .brand-mark span:nth-child(2), .brand-mark span:nth-child(3) { background: #fff; opacity: .88; }
  .brand-mark span:nth-child(4) { background: linear-gradient(135deg, #20d3a6, #13a982); }
  .brand-name { color: var(--ink-strong); font-size: 1.12rem; }
  .desktop-nav { display: none; align-items: center; gap: .2rem; }
  .nav-link { display: inline-flex; align-items: center; gap: .45rem; padding: .58rem .75rem; border-radius: .65rem; color: var(--muted); font-size: .84rem; font-weight: 720; }
  .nav-link:hover, .nav-link.is-active { background: var(--bg-subtle); color: var(--ink-strong); }
  .header-actions { display: flex; align-items: center; gap: .42rem; }
  .theme-toggle { width: 2.45rem; height: 2.45rem; border-color: transparent; background: transparent; }
  .theme-icon-dark { display: none; }
  [data-theme="dark"] .theme-icon-dark { display: block; }
  [data-theme="dark"] .theme-icon-light { display: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-icon-dark { display: block; } :root:not([data-theme="light"]) .theme-icon-light { display: none; } }
  .buy-button span, .sign-in-button { display: none; }
  .avatar-button { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; overflow: hidden; border: 0; border-radius: 50%; background: var(--brand-soft); color: var(--brand); cursor: pointer; font-weight: 850; }
  .avatar-button img { width: 100%; height: 100%; object-fit: cover; }
  .menu { position: relative; }
  .menu-panel { position: absolute; z-index: 120; top: calc(100% + .65rem); right: 0; width: 15.5rem; padding: .45rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-elevated); box-shadow: var(--shadow-md); }
  .menu-panel[hidden] { display: none; }
  .menu-identity { display: flex; flex-direction: column; padding: .65rem .7rem .75rem; border-bottom: 1px solid var(--line); margin-bottom: .35rem; overflow: hidden; }
  .menu-identity span { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; }
  .menu-panel a, .menu-panel button { display: flex; width: 100%; align-items: center; gap: .6rem; padding: .62rem .7rem; border: 0; border-radius: .55rem; background: none; color: var(--ink); cursor: pointer; font-size: .84rem; text-align: left; }
  .menu-panel a:hover, .menu-panel button:hover { background: var(--bg-subtle); }
  .mobile-menu-button { width: 2.45rem; height: 2.45rem; border-color: transparent; background: transparent; }
  .menu-close-icon { display: none; }
  .mobile-menu-button[aria-expanded="true"] .menu-open-icon { display: none; }
  .mobile-menu-button[aria-expanded="true"] .menu-close-icon { display: block; }
  .mobile-menu { position: absolute; top: 100%; left: 0; width: 100%; border-bottom: 1px solid var(--line); background: var(--bg-elevated); box-shadow: var(--shadow-md); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu-inner { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding-block: .75rem 1rem; }
  .mobile-nav-link { display: flex; align-items: center; gap: .6rem; padding: .75rem; border-radius: .7rem; color: var(--muted); font-weight: 720; }
  .mobile-nav-link.is-active { background: var(--brand-soft); color: var(--brand); }
  .mobile-tabbar { position: fixed; z-index: 95; right: .75rem; bottom: max(.65rem, env(safe-area-inset-bottom)); left: .75rem; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; padding: .35rem; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: 1.15rem; background: color-mix(in srgb, var(--bg-elevated) 90%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(18px); }
  .mobile-tabbar a { display: flex; min-height: 3rem; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; border-radius: .78rem; color: var(--muted); font-size: .62rem; font-weight: 750; }
  .mobile-tabbar a.is-active { color: var(--brand); }
  .mobile-tabbar .mobile-tabbar-buy { position: relative; min-height: 3.1rem; background: var(--brand); color: #fff; box-shadow: 0 7px 16px color-mix(in srgb, var(--brand) 30%, transparent); }

  .site-footer { padding: 4rem 0 6.5rem; border-top: 1px solid var(--line); margin-top: 5rem; background: var(--bg-elevated); }
  .footer-inner { display: grid; gap: 2.5rem; }
  .footer-brand p { max-width: 18rem; margin-top: .9rem; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .footer-links div { display: flex; flex-direction: column; gap: .6rem; }
  .footer-links h2 { margin-bottom: .25rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
  .footer-links a { width: fit-content; color: var(--muted); font-size: .84rem; }
  .footer-links a:hover { color: var(--ink); }
  .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); margin-top: 2rem; font-size: .78rem; }
  .footer-bottom .text-button { font-size: inherit; }

  .flash-region { position: relative; z-index: 80; margin-top: .75rem; }
  .alert { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
  .alert > .icon { margin-top: .08rem; }
  .alert > div { flex: 1; }
  .alert p { color: inherit; }
  .alert-success { border-color: color-mix(in srgb, var(--success) 25%, var(--line)); background: var(--success-soft); color: var(--success); }
  .alert-warning { border-color: color-mix(in srgb, var(--warning) 25%, var(--line)); background: var(--warning-soft); color: var(--warning); }
  .alert-error { border-color: color-mix(in srgb, var(--danger) 25%, var(--line)); background: var(--danger-soft); color: var(--danger); }
  .alert-info { border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); background: var(--brand-soft); color: var(--brand); }
  .alert-close { width: 2rem; height: 2rem; border: 0; background: transparent; }

  .field { display: flex; min-width: 0; flex-direction: column; gap: .38rem; color: var(--ink); font-size: .82rem; font-weight: 710; }
  .field small { font-size: .72rem; font-weight: 500; line-height: 1.45; }
  .field input, .field select, .field textarea, .search-field, .compact-search { width: 100%; border: 1px solid var(--line-strong); border-radius: .72rem; background: var(--bg-elevated); color: var(--ink); box-shadow: inset 0 1px 1px rgb(0 0 0 / .025); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
  .field input, .field select { min-height: 2.8rem; padding: .65rem .75rem; }
  .field textarea { min-height: 7rem; padding: .72rem .75rem; resize: vertical; }
  .field input::placeholder, .field textarea::placeholder, .search-field input::placeholder { color: var(--faint); }
  .field input:focus, .field select:focus, .field textarea:focus, .search-field:focus-within, .compact-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); outline: 0; }
  .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }
  .field-error { color: var(--danger) !important; }
  .field-label-row { display: flex; justify-content: space-between; gap: 1rem; }
  .field-label-row a { color: var(--brand); font-weight: 680; }
  .form-row { display: grid; gap: 1rem; }
  .stack-form { display: flex; flex-direction: column; gap: 1rem; }
  .check-field { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .79rem; font-weight: 600; line-height: 1.4; }
  .check-field-top { align-items: flex-start; }
  .check-field input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin: 0; accent-color: var(--brand); }
  .check-field a { color: var(--brand); text-decoration: underline; text-underline-offset: .15em; }
  .input-prefix, .input-suffix, .password-input { display: flex; overflow: hidden; align-items: center; border: 1px solid var(--line-strong); border-radius: .72rem; background: var(--bg-elevated); }
  .input-prefix:focus-within, .input-suffix:focus-within, .password-input:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
  .input-prefix > span, .input-suffix > span { padding-inline: .7rem; color: var(--muted); }
  .input-prefix input, .input-suffix input, .password-input input { min-width: 0; flex: 1; border: 0; border-radius: 0; box-shadow: none; }
  .password-input button { display: grid; width: 2.8rem; height: 2.8rem; flex: 0 0 auto; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
  .password-input .hide-icon { display: none; }
  .password-input.is-visible .hide-icon { display: block; }
  .password-input.is-visible .show-icon { display: none; }
  .form-actions { display: flex; flex-wrap: wrap; gap: .65rem; padding-top: .5rem; }
  .form-error-summary ul { margin: .35rem 0 0 1.15rem; }
  .hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
  .search-field, .compact-search { display: flex; align-items: center; gap: .55rem; min-height: 2.8rem; padding: 0 .75rem; }
  .search-field input, .compact-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); }

  .panel, .sidebar-card, .purchase-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow-xs); }
  .panel { padding: 1.15rem; }
  .sidebar-card { padding: 1.15rem; }
  .sidebar-card h2 { margin-bottom: .55rem; font-size: 1rem; }
  .sidebar-card p { font-size: .83rem; }
  .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
  .panel-heading h2 { font-size: 1.05rem; letter-spacing: -.02em; }
  .panel-heading p { margin-top: .25rem; font-size: .76rem; }
  .card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
  .card-heading h2 { margin-top: .5rem; font-size: 1.2rem; }
  .step-pill, .count-badge { display: inline-flex; align-items: center; justify-content: center; padding: .25rem .5rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .68rem; font-weight: 800; }
  .status-badge { display: inline-flex; width: fit-content; align-items: center; gap: .3rem; padding: .25rem .48rem; border-radius: 999px; background: var(--bg-subtle); color: var(--muted); font-size: .66rem; font-style: normal; font-weight: 800; line-height: 1.15; text-transform: capitalize; white-space: nowrap; }
  .status-active, .status-approved, .status-paid, .status-success, .status-verified, .status-completed, .status-healthy { background: var(--success-soft); color: var(--success); }
  .status-pending, .status-processing, .status-open, .status-running { background: var(--warning-soft); color: var(--warning); }
  .status-suspended, .status-rejected, .status-failed, .status-error, .status-revoked, .status-disputed { background: var(--danger-soft); color: var(--danger); }
  .status-disabled, .status-deleted, .status-refunded { background: var(--bg-subtle); color: var(--muted); }

  .inventory-card { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
  .inventory-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .inventory-summary > div { display: flex; flex-direction: column; gap: .3rem; }
  .inventory-summary strong { color: var(--ink-strong); font-size: 1.05rem; }
  .live-indicator { display: inline-flex; align-items: center; gap: .35rem; color: var(--success); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
  .live-indicator span { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--success) 13%, transparent); }
  .meter { position: relative; height: .65rem; overflow: hidden; border-radius: 999px; margin: 1rem 0; background: var(--bg-subtle); }
  .meter-sold, .meter-reserved { position: absolute; inset-block: 0; left: 0; border-radius: inherit; }
  .meter-sold { width: var(--meter-value); background: linear-gradient(90deg, var(--brand), #8f72ff 55%, var(--accent)); }
  .meter-reserved { left: var(--meter-start); width: var(--meter-width); background: repeating-linear-gradient(135deg, var(--faint) 0 4px, transparent 4px 8px); opacity: .55; }
  .inventory-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .inventory-stats div { display: flex; min-width: 0; flex-direction: column; gap: .1rem; }
  .inventory-stats span { color: var(--muted); font-size: .65rem; }
  .inventory-stats strong { color: var(--ink-strong); font-size: .85rem; }
  .inventory-stats small { margin-left: .12rem; font-size: .65rem; font-weight: 600; }

  .grid-controls { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
  .segmented-control { display: flex; max-width: 100%; overflow-x: auto; gap: .18rem; padding: .24rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--bg-elevated); scrollbar-width: none; }
  .segmented-control::-webkit-scrollbar { display: none; }
  .segmented-control a { flex: 0 0 auto; padding: .5rem .7rem; border-radius: .57rem; color: var(--muted); font-size: .72rem; font-weight: 750; white-space: nowrap; }
  .segmented-control a.is-active { background: var(--ink-strong); color: var(--bg-elevated); box-shadow: var(--shadow-xs); }
  .filter-toggle { flex: 0 0 auto; }
  .filter-panel { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: .85rem; background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
  .js .filter-panel[data-collapsed], .filter-panel[hidden] { display: none; }
  .filter-actions { display: flex; align-items: end; justify-content: flex-end; gap: .5rem; }

  .ranked-grid { display: grid; grid-auto-flow: dense; grid-auto-rows: clamp(3.7rem, 14vw, 5.2rem); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .38rem; }
  .profile-tile { min-width: 0; min-height: 0; overflow: hidden; grid-column: span var(--tile-columns-mobile); grid-row: span var(--tile-rows-mobile); border-radius: clamp(.55rem, 2vw, 1.05rem); background: var(--tile-bg, var(--bg-subtle)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), var(--shadow-xs); container-type: size; }
  .tile-link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; color: #fff; }
  .tile-link::after { position: absolute; inset: 0; border: 2px solid transparent; border-radius: inherit; content: ""; pointer-events: none; transition: border-color .16s ease; }
  .tile-link:focus-visible { outline: none; }
  .tile-link:focus-visible::after { border-color: #fff; box-shadow: inset 0 0 0 2px var(--focus); }
  .tile-media, .tile-media img, .tile-shade, .tile-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; }
  .tile-media img { object-fit: cover; transition: scale .5s var(--ease), filter .3s ease; }
  .tile-link:hover .tile-media img, .tile-link:focus-visible .tile-media img { scale: 1.035; }
  .tile-placeholder { display: grid; place-items: center; background: var(--tile-gradient); color: rgb(255 255 255 / .82); font-size: clamp(1.3rem, 11cqw, 5rem); font-weight: 900; }
  .tile-shade { background: linear-gradient(180deg, rgb(5 5 12 / .03) 35%, rgb(5 5 12 / .86) 100%); }
  .tile-rank, .tile-trend { position: absolute; z-index: 1; top: .45rem; display: inline-flex; min-height: 1.45rem; align-items: center; justify-content: center; padding: .2rem .4rem; border: 1px solid rgb(255 255 255 / .2); border-radius: .45rem; background: rgb(8 9 14 / .58); box-shadow: 0 2px 8px rgb(0 0 0 / .18); backdrop-filter: blur(7px); font-size: .62rem; font-weight: 850; }
  .tile-rank { left: .45rem; }
  .tile-trend { right: .45rem; color: #85efcc; }
  .tile-info { position: absolute; z-index: 1; right: .5rem; bottom: .5rem; left: .5rem; display: flex; min-width: 0; flex-direction: column; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
  .tile-name { display: flex; min-width: 0; align-items: center; gap: .25rem; }
  .tile-name strong { overflow: hidden; font-size: clamp(.68rem, 8cqw, 1.25rem); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
  .verified-badge { display: inline-flex; flex: 0 0 auto; color: #70d9ff; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .4)); }
  .tile-meta, .tile-pixels { display: none; overflow: hidden; color: rgb(255 255 255 / .78); font-size: clamp(.54rem, 4.5cqw, .76rem); text-overflow: ellipsis; white-space: nowrap; }
  .tile-pixels { width: fit-content; margin-top: .3rem; padding: .18rem .35rem; border-radius: .35rem; background: rgb(255 255 255 / .14); color: #fff; }
  @container (min-width: 7rem) and (min-height: 7rem) { .tile-meta { display: block; } }
  @container (min-width: 12rem) and (min-height: 12rem) { .tile-pixels { display: block; } .tile-info { right: .7rem; bottom: .7rem; left: .7rem; } }
  .tile-palette-0 { --tile-bg: #5a42d6; --tile-gradient: linear-gradient(135deg, #9a78ff, #5235d3); }
  .tile-palette-1 { --tile-bg: #007f75; --tile-gradient: linear-gradient(135deg, #34d3b2, #087c77); }
  .tile-palette-2 { --tile-bg: #ad4a58; --tile-gradient: linear-gradient(135deg, #ff8b9c, #a53e58); }
  .tile-palette-3 { --tile-bg: #b76800; --tile-gradient: linear-gradient(135deg, #ffc061, #ad5b00); }
  .tile-palette-4 { --tile-bg: #1b69b7; --tile-gradient: linear-gradient(135deg, #63b8ff, #1753a8); }
  .tile-palette-5 { --tile-bg: #7f3a91; --tile-gradient: linear-gradient(135deg, #db86e6, #76368e); }
  .tile-palette-6 { --tile-bg: #326c37; --tile-gradient: linear-gradient(135deg, #8bcf75, #286d43); }
  .tile-palette-7 { --tile-bg: #59606f; --tile-gradient: linear-gradient(135deg, #a9afbc, #4d5362); }
  .pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; margin-top: 1.25rem; }
  .pagination > :last-child { justify-self: end; }
  .pagination-label { color: var(--muted); font-size: .75rem; }
  .empty-state { display: flex; min-height: 18rem; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-elevated); text-align: center; }
  .empty-state-icon { display: grid; width: 3.3rem; height: 3.3rem; place-items: center; border-radius: 1rem; margin-bottom: 1rem; background: var(--brand-soft); color: var(--brand); }
  .empty-state h2 { font-size: 1.2rem; }
  .empty-state p { max-width: 28rem; margin: .5rem auto 1.15rem; }
  .skeleton { position: relative; overflow: hidden; border-radius: .55rem; background: var(--bg-subtle); }
  .skeleton::after { position: absolute; inset: 0; translate: -100% 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-elevated) 65%, transparent), transparent); content: ""; animation: shimmer 1.4s infinite; }
  .skeleton-profile { width: 7rem; height: 7rem; border-radius: 1rem; }
  .skeleton-line { width: 70%; height: .8rem; margin: .65rem 0; }
  .skeleton-line-wide { width: 95%; height: 1.2rem; }
  @keyframes shimmer { to { translate: 100% 0; } }
}

@layer pages {
  .hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 9vw, 7rem) 0 3.5rem; }
  .hero::before { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 42px 42px; content: ""; mask-image: linear-gradient(to bottom, rgb(0 0 0 / .4), transparent 78%); opacity: .42; pointer-events: none; }
  .hero-glow { position: absolute; width: 32rem; height: 32rem; border-radius: 50%; filter: blur(90px); opacity: .14; pointer-events: none; }
  .hero-glow-one { top: -16rem; left: -12rem; background: var(--brand); }
  .hero-glow-two { right: -16rem; bottom: -18rem; background: var(--accent); }
  .hero-inner { position: relative; display: grid; align-items: center; gap: 3rem; }
  .hero-kicker { display: inline-flex; width: fit-content; align-items: center; gap: .4rem; padding: .4rem .65rem; border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .7rem; font-weight: 800; }
  .hero h1 { max-width: 13ch; margin-top: 1rem; }
  .hero h1 span { color: transparent; background: linear-gradient(105deg, var(--brand), #a24cff 55%, var(--accent)); background-clip: text; -webkit-background-clip: text; }
  .hero-copy > p { max-width: 38rem; margin-top: 1.15rem; font-size: clamp(1rem, 3vw, 1.2rem); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
  .hero-social-proof { display: flex; align-items: center; gap: .7rem; margin-top: 1.5rem; color: var(--muted); font-size: .75rem; }
  .hero-social-proof strong { color: var(--ink); }
  .avatar-stack { display: flex; padding-left: .5rem; }
  .avatar-stack img { width: 2rem; height: 2rem; border: 2px solid var(--bg); border-radius: 50%; margin-left: -.5rem; object-fit: cover; }
  .hero-art { position: relative; display: none; }
  .mini-mosaic { display: grid; height: 31rem; grid-auto-flow: dense; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); gap: .55rem; rotate: 2deg; }
  .mini-tile { overflow: hidden; border-radius: 1rem; background: var(--tile-gradient, var(--bg-subtle)); box-shadow: var(--shadow-md); }
  .mini-tile img { width: 100%; height: 100%; object-fit: cover; }
  .mini-tile:nth-child(1), .mini-tile:nth-child(8) { grid-column: span 2; grid-row: span 2; }
  .mini-tile:nth-child(4), .mini-tile:nth-child(10) { grid-row: span 2; }
  .mini-tile-0 { --tile-gradient: linear-gradient(135deg,#846aff,#5434d8); }.mini-tile-1 { --tile-gradient: linear-gradient(135deg,#4bd8b8,#0a8576); }.mini-tile-2 { --tile-gradient: linear-gradient(135deg,#ff929e,#ab425a); }.mini-tile-3 { --tile-gradient: linear-gradient(135deg,#ffbd5e,#a75e0b); }.mini-tile-4 { --tile-gradient: linear-gradient(135deg,#68bfff,#2259a9); }.mini-tile-5 { --tile-gradient: linear-gradient(135deg,#d989ea,#73368d); }
  .floating-rank { position: absolute; right: -1rem; bottom: 2rem; display: grid; grid-template-columns: auto 1fr; gap: 0 .55rem; padding: .75rem .9rem; border: 1px solid rgb(255 255 255 / .28); border-radius: 1rem; background: color-mix(in srgb, var(--bg-elevated) 84%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(18px); }
  .floating-rank > span { grid-row: span 2; align-self: center; color: var(--brand); font-size: 1.35rem; font-weight: 900; }
  .floating-rank strong { font-size: .78rem; }.floating-rank small { font-size: .65rem; }
  .inventory-wrap { position: relative; z-index: 5; margin-top: -1rem; }
  .mosaic-section { padding-top: clamp(3.5rem, 7vw, 6rem); }
  .section-heading { margin-bottom: 1.4rem; }
  .section-heading h2 { margin-top: .5rem; }
  .section-heading p { max-width: 40rem; margin-top: .55rem; }
  .section-heading-centered { max-width: 48rem; margin-inline: auto; text-align: center; }
  .mosaic-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
  .how-it-works { padding-block: 6rem 1rem; }
  .steps-grid { display: grid; gap: .8rem; margin-top: 2rem; }
  .steps-grid article { position: relative; overflow: hidden; padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elevated); }
  .step-number { position: absolute; top: .6rem; right: .85rem; color: var(--bg-subtle); font-size: 3.2rem; font-weight: 950; letter-spacing: -.08em; }
  .step-icon { position: relative; display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border-radius: .85rem; margin-bottom: 1.1rem; background: var(--brand-soft); color: var(--brand); }
  .steps-grid article:nth-child(2) .step-icon { background: var(--accent-soft); color: var(--accent); }
  .steps-grid article:nth-child(3) .step-icon { background: var(--warning-soft); color: var(--warning); }
  .steps-grid h3 { position: relative; }.steps-grid p { position: relative; margin-top: .5rem; font-size: .84rem; }
  .cta-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 2rem; border-radius: var(--radius-xl); margin-top: 5rem; background: linear-gradient(120deg, #5032d5, #7352e9 55%, #167f79); box-shadow: var(--shadow-md); color: #fff; }
  .cta-panel .eyebrow, .cta-panel h2, .cta-panel p { color: #fff; }.cta-panel p { max-width: 38rem; margin-top: .6rem; opacity: .8; }
  .page-hero { padding: 4.5rem 0 3rem; text-align: center; }.page-hero-compact { padding: 3.5rem 0 2rem; }.page-hero h1 { margin-top: .65rem; }.page-hero p { max-width: 42rem; margin: .75rem auto 0; font-size: 1rem; }
  .ranking-note { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .65rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); margin-top: 1.5rem; background: var(--bg-elevated); color: var(--muted); font-size: .78rem; }.ranking-note p { flex: 1 1 24rem; font-size: inherit; }.ranking-note strong { color: var(--ink); }.ranking-note a { color: var(--brand); font-weight: 750; }
}

@layer pages {
  .admin-shell { display:grid;gap:1rem;padding-top:1rem; }.admin-sidebar { min-width:0; }.admin-sidebar-title { display:none; }.admin-nav { display:flex;overflow-x:auto;gap:.25rem;padding:.25rem;border:1px solid var(--line);border-radius:.9rem;background:var(--bg-elevated);scrollbar-width:none; }.admin-nav::-webkit-scrollbar { display:none; }.admin-nav a { display:flex;flex:0 0 auto;align-items:center;gap:.45rem;padding:.62rem .72rem;border-radius:.65rem;color:var(--muted);font-size:.72rem;font-weight:730; }.admin-nav a.is-active { background:var(--brand-soft);color:var(--brand); }.admin-content { min-width:0; }.admin-header { display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.1rem; }.admin-header h1 { margin-top:.4rem;font-size:clamp(1.85rem,6vw,2.7rem); }.admin-header p { max-width:44rem;margin-top:.4rem; }.admin-filters { display:flex;flex-wrap:wrap;align-items:end;gap:.55rem;padding:.75rem;border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:.8rem;background:var(--bg-elevated); }.admin-filters .search-field { flex:1 1 16rem; }.admin-filters .field { flex:1 1 9rem; }.audit-filters .field { flex:0 1 10rem; }.queue-list { display:grid; }.queue-list a { display:flex;align-items:center;gap:.65rem;padding:.7rem 0;border-bottom:1px solid var(--line); }.queue-list a:last-child { border-bottom:0; }.queue-icon { display:grid;width:2.35rem;height:2.35rem;flex:0 0 auto;place-items:center;border-radius:.7rem;background:var(--brand-soft);color:var(--brand); }.queue-list a > div { display:flex;min-width:0;flex:1;flex-direction:column; }.queue-list small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.queue-list b { color:var(--ink-strong); }.health-list dt { display:flex;align-items:center;gap:.45rem; }.health-dot { width:.5rem;height:.5rem;border-radius:50%;background:var(--faint); }.health-dot.status-healthy { background:var(--success);box-shadow:0 0 0 .2rem var(--success-soft); }.health-dot.status-warning { background:var(--warning); }.health-dot.status-error { background:var(--danger); }.priority-urgent,.priority-high { background:var(--danger-soft);color:var(--danger); }.priority-normal { background:var(--brand-soft);color:var(--brand); }
  .moderation-list { display:grid;gap:.7rem; }.moderation-card { display:grid;gap:.8rem;padding:.85rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-elevated); }.moderation-media { display:grid;width:5.5rem;height:5.5rem;place-items:center;overflow:hidden;border-radius:.85rem;background:var(--tile-gradient);color:#fff; }.moderation-media img { width:100%;height:100%;object-fit:cover; }.moderation-body { min-width:0; }.moderation-title { display:flex;justify-content:space-between;gap:1rem; }.moderation-title > div { min-width:0; }.review-type { margin-left:.35rem;color:var(--muted);font-size:.66rem; }.moderation-title h2 { display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem;margin-top:.35rem;font-size:1rem; }.moderation-title h2 small { font-size:.7rem;font-weight:500; }.case-id { color:var(--faint);font-family:ui-monospace,monospace;font-size:.65rem; }.moderation-body > p { margin-top:.4rem;font-size:.75rem; }.moderation-meta { display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.65rem; }.moderation-meta div { display:flex;flex-direction:column; }.moderation-meta dt { color:var(--faint);font-size:.58rem;text-transform:uppercase; }.moderation-meta dd { font-size:.68rem;font-weight:700; }.moderation-actions { display:flex;flex-wrap:wrap;align-items:center;gap:.4rem; }
  .moderation-tabs { display:flex;overflow-x:auto;gap:.35rem;padding:.3rem;border:1px solid var(--line);border-radius:.85rem;margin-bottom:1.3rem;background:var(--bg-elevated); }.moderation-tabs a { display:flex;flex:0 0 auto;align-items:center;gap:.4rem;padding:.55rem .7rem;border-radius:.6rem;color:var(--muted);font-size:.72rem;font-weight:750; }.moderation-tabs a:hover { background:var(--bg-subtle);color:var(--ink); }.moderation-tabs span { padding:.12rem .3rem;border-radius:999px;background:var(--bg-subtle);font-size:.6rem; }.moderation-section { padding-top:.5rem; }.moderation-section + .moderation-section { padding-top:2.5rem; }.moderation-section .section-heading h2 { font-size:1.35rem; }.queue-empty { padding:1rem;border:1px dashed var(--line);border-radius:.75rem;background:var(--bg-elevated);font-size:.78rem; }.moderation-decision-form { display:grid;gap:.55rem;padding-top:.7rem;border-top:1px solid var(--line); }.moderation-decision-form textarea { min-height:4.1rem; }.moderation-decision-form > div { display:flex;flex-wrap:wrap;gap:.4rem; }.moderation-report-form { align-self:center;border-top:0;padding-top:0; }
  .risk-distribution { display:grid;gap:.75rem; }.risk-distribution > div { display:grid;grid-template-columns:1fr auto;gap:.3rem .7rem;align-items:center; }.risk-distribution > div > span:first-child { display:flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.72rem; }.risk-distribution .performance-bar { grid-column:1/-1; }.risk-color { width:.55rem;height:.55rem;border-radius:50%;background:var(--faint); }.risk-trusted { background:var(--success); }.risk-staged { background:var(--warning); }.risk-suppressed,.risk-rejected { background:var(--danger); }
  .fraud-layout { margin-bottom:.8rem; }.block-table { margin-top:.8rem; }
  .job-grid { display:grid;gap:.7rem; }.job-card { padding:1rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-elevated); }.job-card header { display:flex;align-items:flex-start;gap:.65rem; }.job-status { display:grid;width:2.4rem;height:2.4rem;flex:0 0 auto;place-items:center;border-radius:.7rem;background:var(--bg-subtle); }.job-status.status-healthy { background:var(--success-soft);color:var(--success); }.job-status.status-error { background:var(--danger-soft);color:var(--danger); }.job-card header > div { min-width:0;flex:1; }.job-card h2 { font-size:.88rem; }.job-card code { display:block;overflow:hidden;margin-top:.25rem;text-overflow:ellipsis;white-space:nowrap; }.job-card dl { display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:1rem; }.job-card dt { color:var(--faint);font-size:.58rem;text-transform:uppercase; }.job-card dd { font-size:.72rem;font-weight:700; }.job-card form { margin-top:.8rem; }.job-error { padding:.6rem;border-radius:.55rem;margin-top:.75rem;background:var(--danger-soft);color:var(--danger);font-family:ui-monospace,monospace;font-size:.65rem; }
  .job-locks { margin-bottom:.8rem; }.job-locks .tag-list { max-width:none; }
  .settings-stack { display:grid;gap:.8rem; }.settings-form { display:grid;gap:1rem; }.three-fields,.ranking-settings-grid { display:grid;gap:.8rem; }.platform-settings-list,.operations-list { display:grid; }.platform-settings-list > div,.operations-list > div { display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;padding:.7rem 0;border-bottom:1px solid var(--line); }.platform-settings-list > div:last-child,.operations-list > div:last-child { border-bottom:0; }.platform-settings-list > div > div,.operations-list > div > span { display:flex;min-width:10rem;flex:1;flex-direction:column; }.platform-settings-list small,.operations-list small { font-size:.66rem; }
  .ranking-weight-form { display:flex;align-items:end;gap:.55rem;padding:.65rem;border:1px solid var(--line);border-radius:.75rem;background:var(--bg-soft); }.ranking-weight-form .field { min-width:0;flex:1; }

  .search-hero { padding:3.5rem 0 2.2rem;background:linear-gradient(180deg,var(--brand-soft),transparent);text-align:center; }.search-hero h1 { margin-top:.5rem;font-size:clamp(2.2rem,8vw,4rem); }.hero-search { display:flex;max-width:42rem;align-items:center;gap:.6rem;padding:.35rem .35rem .35rem .85rem;border:1px solid var(--line);border-radius:1rem;margin:1.2rem auto 0;background:var(--bg-elevated);box-shadow:var(--shadow-md);text-align:left; }.hero-search label { min-width:0;flex:1; }.hero-search input { width:100%;border:0;outline:0;background:transparent;color:var(--ink); }.search-page { padding-top:1.2rem; }.search-filters { display:grid;gap:.65rem;padding:.8rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-elevated); }.search-results-heading { display:flex;align-items:end;justify-content:space-between;gap:1rem;padding:1.5rem 0 .8rem; }.search-results-heading h2 { font-size:1.2rem; }.search-results-heading p { font-size:.72rem; }
  .leaderboard-page { padding-top:1rem; }.leaderboard-controls { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.8rem; }.ranking-updated { display:flex;align-items:center;gap:.3rem;color:var(--muted);font-size:.67rem; }.leaderboard-list { display:grid;gap:.45rem;list-style:none;counter-reset:none; }.leaderboard-list li { display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;align-items:center;gap:.6rem;padding:.65rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-elevated);transition:border-color .16s ease,translate .16s var(--ease),box-shadow .16s ease; }.leaderboard-list li:hover { border-color:var(--line-strong);box-shadow:var(--shadow-sm);translate:0 -1px; }.leader-rank { color:var(--faint);font-size:.78rem;font-weight:900;text-align:center; }.leaderboard-list li:nth-child(1) .leader-rank { color:#d79b13; }.leaderboard-list li:nth-child(2) .leader-rank { color:#8d96a8; }.leaderboard-list li:nth-child(3) .leader-rank { color:#b8693d; }.leader-identity { display:flex;min-width:0;align-items:center;gap:.6rem; }.leader-identity > img,.leader-identity > span { display:grid;width:2.7rem;height:2.7rem;flex:0 0 auto;place-items:center;border-radius:.75rem;background:var(--brand-soft);color:var(--brand);object-fit:cover;font-weight:900; }.leader-identity > div { min-width:0; }.leader-identity strong { display:flex;align-items:center;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.leader-identity strong .icon { color:#19aee9; }.leader-identity small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.leader-pixels,.leader-score,.leader-change { display:none; }.leader-pixels,.leader-score { flex-direction:column;color:var(--ink);font-size:.78rem; }.leader-pixels small,.leader-score small { font-size:.58rem; }.leader-change { font-size:.7rem;font-weight:800; }.leader-change.is-up { color:var(--success); }.leader-change.is-down { color:var(--danger); }

  .report-layout { padding-top:1rem; }.report-form-card { padding:1.15rem; }.reported-profile { display:flex;align-items:center;gap:.7rem;padding:.7rem;border-radius:.8rem;background:var(--bg-subtle); }.reported-profile > div { display:flex;flex-direction:column; }.reported-profile span { color:var(--muted);font-size:.66rem; }.report-note { padding:1rem;border-left:3px solid var(--warning);margin-top:1rem;background:var(--warning-soft); }.report-note h2 { font-size:.9rem;color:var(--warning); }.report-note p { margin-top:.35rem;color:var(--warning);font-size:.72rem; }
  .legal-hero { padding:4rem 0 2.5rem;border-bottom:1px solid var(--line);background:var(--bg-elevated);text-align:center; }.legal-hero h1 { margin-top:.5rem;font-size:clamp(2.3rem,8vw,4rem); }.legal-hero p { margin-top:.6rem;font-size:.76rem; }.legal-layout { display:grid;gap:2rem;padding-top:2rem; }.legal-layout aside { display:none; }.legal-layout aside nav { position:sticky;top:calc(var(--header-height) + 1.5rem);display:flex;flex-direction:column;gap:.2rem; }.legal-layout aside a { padding:.45rem .6rem;border-left:2px solid var(--line);color:var(--muted);font-size:.72rem; }.legal-layout aside a:hover { border-color:var(--brand);color:var(--brand); }.legal-content { max-width:48rem; }.legal-intro { padding:1rem;border-left:3px solid var(--brand);border-radius:0 .7rem .7rem 0;background:var(--brand-soft);color:var(--ink);font-size:1rem; }.legal-content section { padding-top:2rem; }.legal-content h2 { font-size:1.25rem; }.legal-content p,.legal-content li { margin-top:.65rem;color:var(--muted);line-height:1.75; }.legal-content ul { padding-left:1.25rem; }.legal-content a { color:var(--brand);text-decoration:underline;text-underline-offset:.18em; }
  .explain-page { padding-top:1rem; }.formula-card { padding:1.5rem;border:1px solid color-mix(in srgb,var(--brand) 25%,var(--line));border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--brand-soft),var(--bg-elevated));text-align:center; }.formula-card code { display:block;margin:.8rem 0;background:transparent;color:var(--ink-strong);font-size:clamp(.85rem,3vw,1.2rem);font-weight:800; }.explain-grid { display:grid;gap:.7rem;margin:1rem 0; }.explain-grid article { padding:1.1rem;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-elevated); }.explain-grid article > span { display:grid;width:2.6rem;height:2.6rem;place-items:center;border-radius:.75rem;margin-bottom:.8rem;background:var(--brand-soft);color:var(--brand); }.explain-grid h2 { font-size:1rem; }.explain-grid p { margin-top:.4rem;font-size:.77rem; }.explain-page > .panel h2 { font-size:1.05rem; }.explain-page > .panel p { margin-top:.45rem; }
  .error-page { display:flex;min-height:70vh;flex-direction:column;align-items:center;justify-content:center;padding-block:3rem;text-align:center; }.error-pixels { display:flex;align-items:end;gap:.3rem;height:3rem;margin-bottom:1rem; }.error-pixels span { width:1.2rem;border-radius:.3rem;background:linear-gradient(var(--brand),var(--accent)); }.error-pixels span:nth-child(1){height:1.2rem}.error-pixels span:nth-child(2){height:2.1rem}.error-pixels span:nth-child(3){height:2.7rem}.error-pixels span:nth-child(4){height:1.7rem}.error-pixels span:nth-child(5){height:.8rem}.error-icon { display:grid;width:3.6rem;height:3.6rem;place-items:center;border-radius:1rem;background:var(--brand-soft);color:var(--brand); }.error-code { margin-top:1rem;color:var(--brand);font-size:.72rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase; }.error-page h1 { max-width:15ch;margin-top:.45rem;font-size:clamp(2.1rem,8vw,3.6rem); }.error-page > p:not(.error-code) { max-width:34rem;margin-top:.7rem; }.retry-note { padding:.4rem .65rem;border-radius:.5rem;background:var(--warning-soft);color:var(--warning) !important;font-size:.75rem; }.request-id { margin-top:1.5rem;font-family:ui-monospace,monospace; }
}

@layer responsive {
  @media (min-width: 32rem) {
    .buy-button span,.sign-in-button { display:inline; }
    .inventory-stats { grid-template-columns:repeat(5,1fr); }
    .filter-panel,.search-filters { grid-template-columns:repeat(2,1fr);align-items:end; }
    .filter-panel .check-field,.filter-panel .filter-actions { align-self:end;min-height:2.8rem; }
    .form-row { grid-template-columns:1fr 1fr; }
    .purchase-total { flex-direction:row;align-items:center;justify-content:space-between; }
    .social-destinations { grid-template-columns:1fr 1fr; }
    .owned-tile-row { grid-template-columns:12rem 1fr; }
    .moderation-card { grid-template-columns:5.5rem minmax(0,1fr); }.moderation-actions { grid-column:2; }
    .leaderboard-list li { grid-template-columns:2.6rem minmax(0,1fr) auto auto; }.leader-score { display:flex; }
    .explain-grid { grid-template-columns:1fr 1fr; }
  }

  @media (min-width: 48rem) {
    :root { --header-height:4.65rem; }
    body { font-size:1rem; }
    .container,.container-wide { width:min(100% - 3rem,var(--container)); }.container-wide { width:min(100% - 3rem,var(--container-wide)); }
    .desktop-nav { display:flex; }.mobile-menu-button,.mobile-tabbar { display:none; }.buy-button span,.sign-in-button { display:inline; }
    .site-footer { padding-bottom:3rem; }.footer-inner { grid-template-columns:1fr 2fr; }.footer-links { grid-template-columns:repeat(3,1fr); }
    .hero-inner { grid-template-columns:minmax(0,1.15fr) minmax(19rem,.85fr); }.hero-art { display:block; }.inventory-wrap { margin-top:-2.2rem; }
    .inventory-card { padding:1.2rem 1.35rem; }.inventory-summary strong { font-size:1.2rem; }.inventory-stats strong { font-size:.95rem; }
    .ranked-grid { grid-auto-rows:clamp(4.3rem,7vw,6.3rem);grid-template-columns:repeat(12,minmax(0,1fr));gap:.5rem; }.profile-tile { grid-column:span var(--tile-columns-wide);grid-row:span var(--tile-rows-wide); }
    .steps-grid { grid-template-columns:repeat(3,1fr); }.cta-panel { flex-direction:row;align-items:center;justify-content:space-between;padding:2.5rem; }.desktop-only { display:inline-flex; }
    .profile-dialog { width:min(100% - 2rem,43rem);max-height:calc(100dvh - 3rem);border-radius:1.35rem;margin:auto; }.dialog-shell { border-bottom:1px solid var(--line); }.dialog-handle { display:none; }
    .profile-page { padding-top:1.5rem; }.profile-page-grid { grid-template-columns:minmax(0,2fr) minmax(15rem,.8fr); }.profile-detail-body { padding:1.35rem; }.post-preview { display:grid;grid-template-columns:42% 1fr; }.post-preview > img { height:100%;aspect-ratio:auto; }
    .purchase-layout { grid-template-columns:minmax(0,1.7fr) minmax(18rem,.8fr);align-items:start; }.purchase-card { padding:1.5rem; }.purchase-sidebar { position:sticky;top:calc(var(--header-height) + 1rem); }.status-page { min-height:70vh; }
    .auth-layout { grid-template-columns:minmax(20rem,.85fr) minmax(28rem,1.15fr); }.auth-aside { display:flex;flex-direction:column; }.auth-panel { padding:3rem; }
    .dashboard-shell { grid-template-columns:13rem minmax(0,1fr);align-items:start;padding-top:1.5rem; }.subnav { position:sticky;top:calc(var(--header-height) + 1rem);display:flex;overflow:visible;flex-direction:column;padding:.45rem; }.subnav a { width:100%; }.dashboard-grid { grid-template-columns:minmax(0,1.65fr) minmax(16rem,.7fr); }.stats-grid { grid-template-columns:repeat(4,1fr); }.stats-grid-five { grid-template-columns:repeat(5,1fr); }.settings-layout { grid-template-columns:minmax(0,1.6fr) minmax(15rem,.65fr); }.settings-main.panel { padding:1.4rem; }
    .admin-shell { grid-template-columns:13rem minmax(0,1fr);align-items:start;padding-top:1.5rem; }.admin-sidebar { position:sticky;top:calc(var(--header-height) + 1rem);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-elevated); }.admin-sidebar-title { display:flex;align-items:center;gap:.5rem;padding:.9rem;border-bottom:1px solid var(--line);font-size:.8rem; }.admin-sidebar-title > span { color:var(--brand); }.admin-nav { display:flex;overflow:visible;flex-direction:column;padding:.45rem;border:0;background:transparent; }.admin-nav a { width:100%; }.admin-dashboard-grid { grid-template-columns:1.2fr .8fr; }.moderation-card { grid-template-columns:6.5rem minmax(0,1fr) auto;align-items:center; }.moderation-media { width:6.5rem;height:6.5rem; }.moderation-actions { grid-column:auto;flex-direction:column;align-items:stretch; }.job-grid { grid-template-columns:1fr 1fr; }.three-fields { grid-template-columns:repeat(3,1fr); }.ranking-settings-grid { grid-template-columns:repeat(2,1fr); }
    .search-filters { grid-template-columns:repeat(4,1fr) auto auto; }.leaderboard-list li { grid-template-columns:3rem minmax(0,1.5fr) .55fr .65fr .4fr 2.65rem; }.leader-pixels,.leader-score { display:flex; }.leader-change { display:block; }.legal-layout { grid-template-columns:12rem minmax(0,48rem);justify-content:center;gap:3rem; }.legal-layout aside { display:block; }
  }

  @media (min-width: 68rem) {
    .nav-link { padding:.62rem .9rem; }.nav-link .icon { display:none; }
    .hero-inner { grid-template-columns:1fr 31rem;gap:5rem; }.mini-mosaic { height:34rem; }
    .panel { padding:1.3rem; }.stat-card { padding:1.05rem; }
    .admin-shell,.dashboard-shell { grid-template-columns:14.5rem minmax(0,1fr);gap:1.5rem; }
    .job-grid { grid-template-columns:repeat(3,1fr); }
  }

  @media (min-width: 90rem) {
    .ranked-grid { grid-auto-rows:6.7rem;gap:.6rem; }.hero-inner { grid-template-columns:1fr 35rem; }.mini-mosaic { height:37rem; }
  }

  @media (max-width: 31.99rem) {
    .button-large { width:100%; }.hero-actions { flex-direction:column; }.grid-controls { align-items:stretch; }.segmented-control { flex:1; }.filter-toggle { padding-inline:.65rem; }.filter-toggle > .icon { display:none; }
    .pagination { grid-template-columns:1fr 1fr; }.pagination-label { display:none; }.pagination .button { font-size:.72rem; }
    .profile-metrics div { padding:.5rem; }.profile-metrics dt { font-size:.55rem; }.profile-metrics dd { font-size:.78rem; }.profile-actions .button { flex:1; }.profile-actions .danger-text { width:100%;justify-content:center;margin:.25rem 0 0; }
    .receipt-summary { grid-template-columns:1fr; }.stats-grid-five { grid-template-columns:repeat(2,1fr); }
    .session-list article { align-items:flex-start; }.session-list article form { width:100%; }.session-list article .button { width:100%; }
    .hero-search .button { padding-inline:.8rem; }.leaderboard-list .icon-button { width:2.25rem;height:2.25rem; }.leaderboard-list li { grid-template-columns:2rem minmax(0,1fr) 2.25rem; }.leader-score { display:none; }
  }
}

@layer utilities {
  .desktop-only { display: none; }
  [hidden] { display: none !important; }
}

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

@layer components {
  .profile-dialog { width: min(100% - 1rem, 43rem); max-width: none; max-height: min(92dvh, 58rem); overflow: visible; border: 0; border-radius: 1.35rem 1.35rem 0 0; margin: auto 0 0; background: transparent; color: var(--ink); }
  .profile-dialog::backdrop { background: rgb(5 6 10 / .68); backdrop-filter: blur(5px); }
  .dialog-shell { position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-bottom: 0; border-radius: inherit; background: var(--bg-elevated); box-shadow: var(--shadow-lg); }
  .dialog-handle { position: sticky; z-index: 5; top: .45rem; width: 2.8rem; height: .25rem; border-radius: 999px; margin: .45rem auto -.7rem; background: var(--line-strong); }
  .dialog-close { position: sticky; z-index: 6; top: .65rem; float: right; margin: .65rem .65rem -3.3rem 0; border-color: rgb(255 255 255 / .28); background: rgb(8 9 14 / .58); color: #fff; backdrop-filter: blur(8px); }
  .dialog-content { clear: both; }
  .dialog-loading { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 1rem; min-height: 15rem; padding: 2rem; }
  .dialog-error { display: flex; min-height: 18rem; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 2rem; text-align: center; }
  body.has-dialog { overflow: hidden; }

  .profile-detail-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
  .profile-dialog .profile-detail-card { border: 0; border-radius: 0; box-shadow: none; }
  .profile-cover { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--tile-gradient); }
  .profile-cover img { width: 100%; height: 100%; object-fit: cover; }
  .profile-cover::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(5 6 10 / .36)); content: ""; pointer-events: none; }
  .profile-cover-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: rgb(255 255 255 / .8); font-size: 6rem; font-weight: 900; }
  .profile-rank-pill { position: absolute; z-index: 1; bottom: .8rem; left: .8rem; padding: .4rem .65rem; border: 1px solid rgb(255 255 255 / .22); border-radius: .6rem; background: rgb(7 8 12 / .58); color: #fff; font-size: .75rem; font-weight: 850; backdrop-filter: blur(8px); }
  .profile-detail-body { padding: 1.15rem; }
  .profile-identity { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  .profile-identity h1 { display: flex; align-items: center; gap: .4rem; font-size: 1.65rem; }
  .profile-identity p { margin-top: .2rem; font-size: .85rem; }
  .favorite-button.is-active { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-soft); color: var(--danger); }
  .favorite-button.is-active .icon { fill: currentColor; }
  .profile-bio { margin-top: .9rem; color: var(--ink); font-size: .9rem; }
  .profile-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: 1rem; }
  .profile-metrics div { min-width: 0; padding: .65rem; border-radius: .75rem; background: var(--bg-subtle); }
  .profile-metrics dt { overflow: hidden; color: var(--muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
  .profile-metrics dd { margin-top: .15rem; color: var(--ink-strong); font-size: .92rem; font-weight: 850; }
  .post-preview { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); margin-top: 1rem; background: var(--bg-soft); }
  .post-preview > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .post-preview > div { padding: .9rem; }
  .post-preview h2 { margin-top: .35rem; font-size: 1rem; }
  .post-preview p { display: -webkit-box; overflow: hidden; margin-top: .4rem; font-size: .78rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .post-stats { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; color: var(--muted); font-size: .7rem; }.post-stats strong { color: var(--ink); }
  .post-preview-link { margin-top:.7rem;font-size:.74rem; }
  .social-destinations { display: grid; gap: .5rem; margin-top: 1rem; }
  .social-button { justify-content: flex-start; }.social-button > .icon:last-child { margin-left: auto; }
  .platform-mark { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: .5rem; background: rgb(255 255 255 / .17); font-size: .7rem; font-weight: 900; }
  .profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }.profile-actions .danger-text { margin-left: auto; }
  .safe-link-note { display: flex; align-items: flex-start; gap: .35rem; margin-top: .85rem; font-size: .67rem; }

  .callout { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 1rem; background: var(--bg-elevated); }
  .callout > div { flex: 1 1 18rem; }.callout p { font-size: .76rem; }.callout-warning { border-color: color-mix(in srgb, var(--warning) 25%, var(--line)); background: var(--warning-soft); color: var(--warning); }.callout-warning p { color: inherit; }
  .plain-list { padding-left: 1.15rem; color: var(--muted); font-size: .8rem; }.plain-list li + li { margin-top: .4rem; }

  .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-bottom: 1rem; }
  .stat-card { min-width: 0; padding: .9rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-elevated); box-shadow: var(--shadow-xs); }
  .stat-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .68rem; font-weight: 700; }.stat-card-top .icon { color: var(--brand); }
  .stat-card > strong { display: block; overflow: hidden; margin-top: .5rem; color: var(--ink-strong); font-size: clamp(1.25rem, 5vw, 1.8rem); letter-spacing: -.04em; text-overflow: ellipsis; }
  .stat-trend, .stat-note { display: block; margin-top: .35rem; color: var(--muted); font-size: .62rem; font-weight: 700; }.stat-trend.is-positive { color: var(--success); }.stat-trend.is-negative { color: var(--danger); }.stat-trend small { color: var(--muted); font-weight: 500; }
  .bar-chart { display: flex; height: 13rem; align-items: end; gap: clamp(.25rem, 2vw, .7rem); padding-top: 1rem; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 25%); }
  .bar-chart > span { display: flex; height: 100%; min-width: 0; flex: 1; flex-direction: column; justify-content: end; gap: .35rem; text-align: center; }.bar-chart i { width: 100%; height: var(--bar); min-height: 2px; border-radius: .3rem .3rem 0 0; background: linear-gradient(to top, var(--brand), #9c83ff); }.bar-chart small { height: 1rem; overflow: hidden; font-size: .55rem; }
  .chart-empty { display: flex; min-height: 13rem; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; color: var(--faint); text-align: center; }.chart-empty p { font-size: .78rem; }
  .radial-progress { display: grid; width: 7rem; height: 7rem; place-items: center; border-radius: 50%; margin: 1rem auto; background: conic-gradient(var(--brand) calc(var(--progress) * 1%), var(--bg-subtle) 0); }.radial-progress::before { width: 5.4rem; height: 5.4rem; border-radius: 50%; background: var(--bg-elevated); content: ""; }.radial-progress span { position: absolute; color: var(--ink-strong); font-weight: 850; }
  .checklist { list-style: none; }.checklist li { display: flex; align-items: center; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }.checklist li.is-complete { color: var(--success); }.checklist li span { flex: 1; }.checklist li a { color: var(--brand); font-weight: 750; }

  .table-scroll { overflow-x: auto; scrollbar-width: thin; }
  table { width: 100%; min-width: 46rem; }
  th { padding: .65rem .75rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
  td { padding: .75rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .76rem; vertical-align: middle; }
  tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: var(--bg-soft); }
  td > small, td > strong { display: block; }.table-actions { text-align: right; }
  .table-user { display: flex; align-items: center; gap: .65rem; }.table-user > img, .table-user > span { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); object-fit: cover; font-weight: 850; }.table-user strong { display: flex; align-items: center; gap: .35rem; }.table-user i { padding: .14rem .3rem; border-radius: .3rem; background: var(--brand-soft); color: var(--brand); font-size: .55rem; font-style: normal; }
  .user-action-group { display:flex;align-items:center;gap:.3rem;white-space:nowrap; }

  .tag-list { display: flex; max-width: 15rem; flex-wrap: wrap; gap: .25rem; }.tag-list span { padding: .2rem .35rem; border-radius: .35rem; background: var(--bg-subtle); color: var(--muted); font-size: .61rem; }
  .movement-list div, .metric-list div, .health-list div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }.movement-list div:last-child, .metric-list div:last-child, .health-list div:last-child { border-bottom: 0; }.movement-list dt, .metric-list dt, .health-list dt { color: var(--muted); font-size: .75rem; }.movement-list dd, .metric-list dd, .health-list dd { color: var(--ink); font-weight: 800; }.movement-list small.positive { color: var(--success); }.movement-list small.negative { color: var(--danger); }
  .performance-bar { display: block; width: 100%; height: .38rem; overflow: hidden; border-radius: 999px; background: var(--bg-subtle); }.performance-bar i { display: block; width: var(--value); height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--brand),var(--accent)); }
}

@layer pages {
  .profile-page { padding-top: 1rem; }.breadcrumb { margin-bottom: .75rem; }.breadcrumb a, .back-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .78rem; font-weight: 700; }.breadcrumb a:hover, .back-link:hover { color: var(--ink); }
  .profile-page-grid { display: grid; gap: 1rem; }.profile-sidebar { display: grid; align-content: start; gap: .75rem; }

  .purchase-layout { display: grid; gap: 1rem; }.purchase-card { padding: 1.15rem; }.purchase-sidebar { display: grid; align-content: start; gap: .8rem; }.pixel-picker { padding: 1rem; border-radius: var(--radius-md); background: var(--bg-subtle); }.pixel-input-field input { font-size: 1.35rem; font-weight: 850; }.range-input { width: 100%; margin-top: 1rem; accent-color: var(--brand); }.quick-amounts { display: flex; overflow-x: auto; gap: .4rem; padding: .85rem 0; }.quick-amounts button { flex: 0 0 auto; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--bg-elevated); color: var(--muted); cursor: pointer; font-size: .72rem; font-weight: 750; }.quick-amounts button:hover, .quick-amounts button.is-active { border-color: var(--brand); color: var(--brand); }.tile-size-preview { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 1rem; }.tile-size-preview p { font-size: .7rem; }.preview-canvas { display: grid; width: 5.5rem; height: 5.5rem; place-items: center; border-radius: .7rem; background: repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 10px); }.preview-canvas > span { width: 1.2rem; height: 1.2rem; max-width: 90%; max-height: 90%; border-radius: .3rem; background: linear-gradient(135deg,var(--brand),var(--accent)); box-shadow: var(--shadow-sm); transition: width .25s var(--ease),height .25s var(--ease); }.purchase-total { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); margin-top: 1rem; }.purchase-total > div { display: flex; flex-direction: column; }.purchase-total strong { color: var(--ink-strong); font-size: 1.65rem; }.purchase-total small { font-size: .67rem; }.checkout-security { display: flex; justify-content: center; gap: .3rem; margin-top: .8rem; font-size: .66rem; }.what-you-get ul { display: flex; flex-direction: column; gap: .7rem; list-style: none; }.what-you-get li { display: flex; gap: .5rem; color: var(--muted); font-size: .76rem; }.what-you-get .icon { color: var(--success); }

  .status-page { display: flex; min-height: 65vh; flex-direction: column; align-items: center; justify-content: center; padding-block: 3rem; text-align: center; }.status-page.embedded { min-height: 28rem; }.status-icon { display: grid; width: 4.5rem; height: 4.5rem; place-items: center; border-radius: 1.3rem; margin-bottom: 1.2rem; }.status-success { background: var(--success-soft); color: var(--success); }.status-warning { background: var(--warning-soft); color: var(--warning); }.status-neutral { background: var(--brand-soft); color: var(--brand); }.status-page h1 { max-width: 14ch; margin-top: .5rem; font-size: clamp(2rem,7vw,3.2rem); }.status-page > p { max-width: 36rem; margin-top: .8rem; }.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.4rem; }.receipt-summary { display: grid; width: min(100%,30rem); grid-template-columns: repeat(3,1fr); gap: .5rem; margin-top: 1.5rem; }.receipt-summary div { padding: .75rem; border-radius: .75rem; background: var(--bg-elevated); }.receipt-summary dt { color: var(--muted); font-size: .65rem; }.receipt-summary dd { margin-top: .2rem; font-weight: 800; overflow-wrap: anywhere; }.status-note { padding-top: 1.2rem; border-top: 1px solid var(--line); margin-top: 1.5rem !important; font-size: .72rem; }.inline-action-form { margin-top: 1.2rem; }

  .auth-layout { display: grid; min-height: calc(100vh - var(--header-height)); background: var(--bg-elevated); }.auth-aside { position: relative; display: none; overflow: hidden; padding: 2rem; background: linear-gradient(145deg,#151120,#221a3a 62%,#12463f); color: #fff; }.auth-aside .brand-name { color: #fff; }.auth-aside-copy { position: relative; z-index: 2; max-width: 31rem; margin: auto 0; }.auth-aside-copy .eyebrow { color: #a999ff; }.auth-aside-copy h2 { margin-top: .8rem; color: #fff; font-size: clamp(2.2rem,4vw,4rem); }.auth-aside-copy > p { margin-top: 1rem; color: rgb(255 255 255 / .7); }.auth-proof { display: flex; gap: .7rem; padding: .8rem; border: 1px solid rgb(255 255 255 / .13); border-radius: 1rem; margin-top: 1.5rem; background: rgb(255 255 255 / .07); }.auth-proof > span { display: grid; width: 2.3rem; height: 2.3rem; flex: 0 0 auto; place-items: center; border-radius: .7rem; background: rgb(255 255 255 / .1); }.auth-proof div { display:flex; flex-direction:column; }.auth-proof small { color: rgb(255 255 255 / .6); }.auth-mosaic { position: absolute; right: -7rem; bottom: -7rem; display: grid; width: 24rem; height: 24rem; rotate: 12deg; grid-template-columns:repeat(4,1fr); gap:.35rem; opacity:.32; }.auth-mosaic span { border-radius:.65rem; background:var(--tile-gradient); }.auth-panel { display: grid; align-items: center; padding: 2.5rem 1rem; }.auth-form-wrap { width: min(100%,29rem); margin-inline:auto; }.auth-heading { margin-bottom: 1.4rem; }.auth-heading h1 { margin-top:.55rem; font-size:clamp(2rem,7vw,2.8rem); }.auth-heading p { margin-top:.55rem; }.auth-switch { margin-top:1.25rem; text-align:center; font-size:.8rem; }.auth-switch a { color:var(--brand); font-weight:750; }.auth-success-panel { padding:1.5rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-soft); text-align:center; }.auth-success-panel > span { display:grid; width:3.5rem; height:3.5rem; place-items:center; border-radius:1rem; margin:0 auto 1rem; background:var(--brand-soft); color:var(--brand); }.auth-success-panel h2 { font-size:1.25rem; }.auth-success-panel p { margin-top:.55rem; }.password-strength { height:.28rem; overflow:hidden; border-radius:999px; background:var(--bg-subtle); }.password-strength span { display:block; width:var(--strength,0%); height:100%; background:var(--strength-color,var(--danger)); transition:width .2s ease,background .2s ease; }

  .dashboard-shell { display:grid; gap:1.2rem; padding-top:1.2rem; }.subnav { display:flex; overflow-x:auto; gap:.3rem; padding:.25rem; border:1px solid var(--line); border-radius:.9rem; background:var(--bg-elevated); scrollbar-width:none; }.subnav::-webkit-scrollbar { display:none; }.subnav a { display:flex; flex:0 0 auto; align-items:center; gap:.45rem; padding:.62rem .75rem; border-radius:.65rem; color:var(--muted); font-size:.75rem; font-weight:730; }.subnav a.is-active { background:var(--brand-soft); color:var(--brand); }.dashboard-content { min-width:0; }.dashboard-header { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }.dashboard-header h1 { margin-top:.4rem; font-size:clamp(1.8rem,6vw,2.6rem); }.dashboard-header p { max-width:40rem; margin-top:.4rem; }.dashboard-grid { display:grid; gap:.8rem; margin-bottom:.8rem; }.panel-wide { min-width:0; }.owned-tile-row { display:grid; gap:1rem; }.owned-tile-preview { width:min(100%,12rem); height:12rem; }.owned-tile-preview .profile-tile { width:100%; height:100%; }.owned-tile-row dl { display:grid; align-content:center; gap:.5rem; }.owned-tile-row dl div { display:flex; justify-content:space-between; gap:2rem; padding:.6rem 0; border-bottom:1px solid var(--line); }.owned-tile-row dt { color:var(--muted); }.owned-tile-row dd { font-weight:800; }.settings-layout { display:grid; gap:1rem; }.settings-main { min-width:0; }.settings-aside { display:grid; align-content:start; gap:.75rem; }.avatar-editor { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding-bottom:1.2rem; border-bottom:1px solid var(--line); margin-bottom:1.1rem; }.avatar-preview { display:grid; width:5.5rem; height:5.5rem; flex:0 0 auto; overflow:hidden; place-items:center; border-radius:1.25rem; background:var(--bg-subtle); color:var(--faint); }.avatar-preview img { width:100%;height:100%;object-fit:cover; }.file-button input { position:absolute; width:1px;height:1px;opacity:0; }.avatar-editor p { margin-top:.4rem;font-size:.7rem; }.account-list { display:grid; gap:.7rem; }.social-account-card { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; padding:1rem; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-elevated); }.platform-avatar { display:grid; width:2.75rem;height:2.75rem;flex:0 0 auto;place-items:center;overflow:hidden;border-radius:.85rem;background:var(--brand-soft);color:var(--brand);font-weight:900; }.platform-avatar.small { width:2rem;height:2rem;border-radius:.58rem;font-size:.7rem; }.platform-avatar img { width:100%;height:100%;object-fit:cover; }.social-account-info { min-width:10rem;flex:1; }.social-account-info > div { display:flex;align-items:center;gap:.45rem; }.social-account-info h2 { font-size:.95rem; }.social-account-info p { font-size:.75rem; }.social-account-info small { font-size:.65rem; }.card-actions { display:flex;align-items:center;gap:.4rem;margin-left:auto; }.action-menu { position:relative; }.action-menu summary { list-style:none; }.action-menu summary::-webkit-details-marker { display:none; }.action-menu > div { position:absolute;z-index:10;right:0;top:calc(100% + .35rem);width:8rem;padding:.3rem;border:1px solid var(--line);border-radius:.65rem;background:var(--bg-elevated);box-shadow:var(--shadow-md); }.action-menu a,.action-menu button { display:block;width:100%;padding:.5rem;border:0;border-radius:.4rem;background:none;text-align:left;cursor:pointer;font-size:.72rem; }.action-menu a:hover,.action-menu button:hover { background:var(--bg-subtle); }.add-social-card .stack-form { margin-top:1rem; }.analytics-filters { display:flex;flex-wrap:wrap;align-items:end;gap:.6rem;padding:.8rem;border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:.8rem;background:var(--bg-elevated); }.analytics-filters .field { flex:1 1 8rem; }.metrics-legend { display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:.8rem;color:var(--muted);font-size:.65rem; }.metrics-legend span { display:flex;align-items:center;gap:.3rem; }.metrics-legend i { width:.5rem;height:.5rem;border-radius:50%;background:var(--brand); }.metrics-legend .legend-raw { background:var(--faint); }.metrics-legend .legend-estimated { background:var(--accent); }.multi-bar-chart { display:flex;height:14rem;align-items:end;gap:.35rem;padding-top:1rem;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,var(--line) 0 1px,transparent 1px 25%); }.multi-bar-chart > div { display:flex;height:100%;min-width:0;flex:1;flex-direction:column;justify-content:end;gap:.3rem;text-align:center; }.multi-bars { display:flex;height:calc(100% - 1rem);align-items:end;justify-content:center;gap:2px; }.multi-bars i { width:35%;height:var(--bar);min-height:2px;border-radius:.2rem .2rem 0 0;background:var(--brand); }.multi-bars .raw-bar { background:var(--faint);opacity:.65; }.multi-bar-chart small { height:1rem;overflow:hidden;font-size:.52rem; }.performance-list { display:grid;gap:.8rem; }.performance-list > div { display:flex;align-items:center;gap:.6rem; }.performance-list > div > div { min-width:0;flex:1; }.performance-list strong { display:block;font-size:.76rem; }.performance-list > div > span:last-child { color:var(--muted);font-size:.72rem; }.session-list article { display:flex;align-items:center;gap:.75rem;padding:.8rem 0;border-top:1px solid var(--line); }.session-list article:first-child { border-top:0; }.session-icon { display:grid;width:2.5rem;height:2.5rem;flex:0 0 auto;place-items:center;border-radius:.75rem;background:var(--bg-subtle);color:var(--muted); }.session-list article > div { min-width:0;flex:1; }.session-list h3 { display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.83rem; }.session-list p,.session-list small { font-size:.67rem; }.security-feature { display:flex;gap:.7rem; }.security-feature > span { display:grid;width:2.8rem;height:2.8rem;flex:0 0 auto;place-items:center;border-radius:.85rem;background:var(--brand-soft);color:var(--brand); }.security-feature + .button { margin-top:1rem; }.preference-form { display:grid;gap:.85rem; }.switch-field { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line); }.switch-field > span { display:flex;flex-direction:column; }.switch-field small { font-size:.7rem; }.switch-field input { position:absolute;opacity:0; }.switch-field i { position:relative;width:2.6rem;height:1.45rem;flex:0 0 auto;border-radius:999px;background:var(--line-strong);transition:background .2s ease; }.switch-field i::after { position:absolute;top:.2rem;left:.2rem;width:1.05rem;height:1.05rem;border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);content:"";transition:translate .2s var(--ease); }.switch-field input:checked + i { background:var(--brand); }.switch-field input:checked + i::after { translate:1.15rem 0; }.switch-field input:focus-visible + i { outline:3px solid color-mix(in srgb,var(--focus) 70%,transparent);outline-offset:3px; }.export-status { display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem;border-radius:.7rem;background:var(--bg-subtle);font-size:.72rem; }.export-status a { margin-left:auto;color:var(--brand);font-weight:750; }.danger-zone { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;border-color:color-mix(in srgb,var(--danger) 30%,var(--line)); }.danger-zone div { flex:1 1 20rem; }.danger-zone h2 { color:var(--danger);font-size:1rem; }.danger-zone p { margin-top:.3rem;font-size:.76rem; }
}