/* sexyrouter: owner-selected liquid chrome identity, over the existing UI. */
:root {
  --metal-ink: #181b21;
  --metal-muted: #626a77;
  --metal-line: #d7dbe1;
  --metal-blue: #075bea;
  --metal-surface: #f3f4f6;
  --metal-chrome: linear-gradient(155deg, #fff 0%, #eceff3 28%, #c9ced6 48%, #fafbfc 53%, #e1e5ea 78%, #fff 100%);
  --bg: #f3f4f6;
  --panel: #fff;
  --text: #181b21;
  --ink: #181b21;
  --muted: #626a77;
  --line: #d7dbe1;
  --blue: #075bea;
  --blue2: #257aff;
  --accent: #075bea;
  --primary: #075bea;
  --shadow: 0 8px 26px #17213208;
  --sky-shadow: 0 8px 26px #17213208;
}
body { color: var(--metal-ink); background: #f3f4f6; }
body .ambient { background: radial-gradient(ellipse at 88% 0%, #dfe5ed, transparent 55%); }
body .topbar, body>header {
  background: linear-gradient(180deg, #fffffff5, #f2f3f6f2);
  border-bottom-color: #cfd4dc;
  box-shadow: inset 0 1px #fff, 0 3px 16px #1d273107;
}
body .topbar .logo, body .logo, body .nav a, body .lang, body .login-mini { color: var(--metal-ink); }
body .nav a.active, body nav a.active { color: var(--metal-blue); }
body .nav a.active:after, body nav a.active:after { background: var(--metal-blue); }
body .site-demo-bar, body .demo-strip, body .preview-ribbon {
  background: #e9ecf0;
  border-color: #d5dae1;
  color: #5b6472;
}
body .site-demo-bar>span:first-child, body .site-demo-bar button { color: #424e60; }
body .btn.primary {
  color: #fff;
  border-color: #202933;
  background: linear-gradient(165deg, #46515f 0%, #202832 46%, #10151d 50%, #2c3541 100%);
  box-shadow: inset 0 1px #ffffff54, inset 0 -1px #0008, 0 3px 9px #18212d1c;
}
body .btn.primary:hover {
  background: linear-gradient(165deg, #59687c 0%, #293648 46%, #14213a 50%, #30435f 100%);
  border-color: #486589;
  box-shadow: inset 0 1px #ffffff70, 0 4px 14px #1b366129;
}
body .btn.outline, body .btn.secondary {
  color: #293341;
  border-color: #bbc3ce;
  background: linear-gradient(180deg, #fff, #eef0f4);
  box-shadow: inset 0 1px #fff, 0 1px 2px #18233408;
}
body .btn.outline:hover, body .btn.secondary:hover { background: #e5e9ef; border-color: #8e9aab; }
body .link, body .eyebrow, body .sky-eyebrow { color: var(--metal-blue); }
body .hero-pill, body .sky-eyebrow {
  color: #304c78;
  background: linear-gradient(180deg, #ffffffeb, #edf1f7eb) !important;
  border-color: #c4cdd9 !important;
  box-shadow: inset 0 1px #fff;
}
body .site-hero, body .site-market-mast, body .home-hero, body .market-hero, body .sky-mast {
  background: linear-gradient(115deg, #fafbfc 0%, #eef0f4 56%, #e1e5eb 100%);
  border-bottom: 1px solid #d4d9e1;
}
body .site-hero:before {
  background-image: linear-gradient(90deg, #f7f8fa 0%, #f7f8faed 30%, #f7f8fa00 63%), url('assets/brand/sexyrouter-symbol.png');
  background-repeat: no-repeat;
  background-size: cover, min(42vw, 610px) auto;
  background-position: center, 90% 40%;
  opacity: 1;
}
body .site-market-mast:before, body .market-hero:before {
  inset: 0;
  background-image: linear-gradient(90deg, #f8f9fb 0%, #f8f9fbe8 55%, #e5e9f100 100%), url('assets/brand/sexyrouter-symbol.png');
  background-repeat: no-repeat;
  background-size: cover, 330px auto;
  background-position: center, 90% 45%;
  opacity: .85;
}
body .hero-image {
  background-image: url('assets/brand/sexyrouter-symbol.png');
  background-position: 91% 42%;
  background-size: min(45vw, 620px) auto;
  background-repeat: no-repeat;
  animation: none;
}
body .home-hero:after { background: linear-gradient(90deg, #f8f9fbee, #f8f9fb80 47%, transparent 72%); }
body .site-hero h1, body .hero h1, body .site-market-mast h1, body .market-hero h1,
body .section-head h2, body .site-feature-grid h2, body .site-stats b { color: #151a22; }
body .site-hero h1 em, body .hero h1 em {
  color: var(--metal-blue);
  background: linear-gradient(105deg, #174d9e, #087aff 80%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body .site-hero .hero-copy p, body .hero-content p, body .site-market-mast p,
body .section-head p, body .site-feature-grid p, body .site-stats>div>span { color: #606b7a; }
body .site-brands .brand-choice, body .brand-pill {
  color: #303947;
  background: linear-gradient(180deg, #ffffffed, #f1f3f6ed);
  border-color: #d2d8e0;
  box-shadow: inset 0 1px #fff, 0 2px 4px #25344b05;
}
body .brand-choice.active, body .brand-pill.active {
  color: #074db9;
  background: #edf3fd;
  border-color: #92b2e4;
  box-shadow: inset 0 1px #fff;
}
body .glass-icon, body .crystal, body .logo-mark {
  color: #224c82;
  background: var(--metal-chrome);
  border-color: #b9c1ce;
  box-shadow: inset 0 1px 2px #fff, inset 0 -1px 2px #8b94a470, 0 6px 12px #26324716;
}
body .site-feature-grid article, body .feature {
  border: 1px solid #d7dce3;
  background: linear-gradient(145deg, #fff, #f5f6f8);
  box-shadow: inset 0 1px #fff, 0 6px 20px #27354506;
}
body .site-feature-grid article:hover, body .feature:hover { border-color: #abb9cd; box-shadow: 0 8px 24px #27354510; }
body .card, body .panel, body .guide-card, body .ux-metric, body .stat,
body .auth-card, body .model-row, body .ux-model-row {
  background: #fff;
  border-color: #d9dde4;
  box-shadow: 0 2px 8px #23334d04;
}
body .model-row:hover, body .ux-model-row:hover { border-color: #aabbd2; background: #fafcff; }
body .app-shell, body .admin-main { background: #f3f4f6; }
body .sidebar, body .docs-v3-sidebar, body .filter, body .doc-nav { background: #f9fafb; border-color: #d7dce3; }
body .sidebar .side-link.active, body .doc-nav a.active, body .guide-nav-title { color: #174f99; }
body .sidebar .side-link.active { background: #e9eff8; box-shadow: inset 2px 0 #075bea; }
body .modal, body .dialog, body .drawer { background: #fff; border-color: #cbd2dc; }
body .modal-head, body .dialog-head, body .dialog-foot, body .modal-foot, body .drawer-head {
  background: linear-gradient(180deg, #fdfefe, #f0f2f5);
  border-color: #d9dde4;
}
body input, body textarea, body select { accent-color: #075bea; }
body input:not([type=checkbox]):not([type=radio]), body textarea, body select {
  border-color: #c5cdd8;
  color: #252c38;
}
body :is(button,a,input,select,textarea,summary):focus-visible { outline-color: #075bea; }
body .site-footer, body .footer-v2, body footer { border-color: #d0d6df; background: #edf0f4; color: #606b7a; }
body .site-stats>div { border-color: #ccd3de; }
body .site-stats>p .ico { color: #245794; background: var(--metal-chrome); border-color: #bac6d5; }
/* Status colors remain semantic; chrome is reserved for brand and controls. */
@media (max-width: 767px) {
  body .site-hero:before { background-image: linear-gradient(135deg, #fafbfc, #e8ecf2); background-size: cover; }
  body .hero-image { opacity: .18; background-size: 340px auto; background-position: 130% 80%; }
  body .site-market-mast:before, body .market-hero:before { opacity: .3; background-position: center, 120% 40%; }
  body .nav.mobile-open { background: #fcfdfe; border-color: #cbd2dd; box-shadow: 0 10px 24px #25344a14; }
}
@media (prefers-reduced-motion: reduce) {
  body .btn, body .feature, body .site-feature-grid article { transition: none; }
}

/* Homepage artwork: generated chrome scene + original brand assets. */
body .site-hero:before, body .home-hero .hero-image {
  background-image: url('assets/brand/sexyrouter-home-banner.webp');
  background-size: cover;
  background-position: center;
  opacity: 1;
}
body .home-hero:after { background: none; }
body .home-hero .hero-content { max-width: 44%; }
body .site-hero .hero-copy { width: 46%; }
body .hero-orbit, body .hero-aside { display: none; }
body .hero h1 .accent { color: #075bea; background: none; -webkit-text-fill-color: #075bea; }
@media (min-width: 768px) and (max-width: 1100px) {
  body .home-hero .hero-image, body .site-hero:before { background-position: 55% center; }
  body .hero h1, body .site-hero h1 { font-size: 52px; }
  body .hero-content p, body .site-hero .hero-copy p { font-size: 14px; }
}
@media (max-width: 767px) {
  body .home-hero { min-height: 0; padding-bottom: calc(76vw + 35px); }
  body .home-brands { margin-top: 0; }
  body .home-hero .hero-content, body .site-hero .hero-copy { max-width: none; width: 100%; }
  body .home-hero .hero-image {
    top: auto; bottom: 18px; height: 76vw;
    background-image: url('assets/brand/sexyrouter-home-banner-mobile.webp');
    background-size: contain; background-position: center; opacity: 1;
  }
  body .site-hero:before { background: none; }
  body .site-hero .hero-copy:after {
    content: ''; display: block; height: 76vw; margin: 22px -16px 0;
    background: url('assets/brand/sexyrouter-home-banner-mobile.webp') center / contain no-repeat;
  }
}

/* Workspace and authentication headings share the restrained silver material. */
body .admin-art, body .auth-intro { background: linear-gradient(120deg, #fafbfc, #e6eaf0); border-color: #d2d8e2; color: #202b3b; }
body .admin-art:before { background-image: linear-gradient(90deg, #f8f9fbe8, #f8f9fb50), url('assets/brand/sexyrouter-symbol.png'); background-position: center, 90% center; background-size: cover, 290px auto; background-repeat: no-repeat; opacity: .3; }

body .wallet-card { background: linear-gradient(135deg, #364353, #151d29 58%, #20344f); color: #fff; border-color: #46546a; box-shadow: inset 0 1px #ffffff38, 0 5px 16px #1d2b4020; }
body .wallet-card p { color: #d5e0ef; }
body .wallet-card strong { color: #fff; }
body .wallet-card .btn { color: #164e92; background: #f7faff; }