/* ============================================================
   RennCraft — THEME 3 · "Nolli App"
   Faithful port of the Nolli Manager desktop UI.
   Active only under html[data-theme="app"].
   Tokens copied 1:1 from Nolli Manager.html :root.
============================================================ */

html[data-theme="app"] {
  --bg-0: #0f1117;
  --bg-1: #151922;
  --panel: #151922;
  --panel-2: #1b212c;
  --panel-hi: #222a37;
  --line: rgba(255,255,255,.13);      /* --line-2 in source */
  --line-soft: rgba(255,255,255,.075); /* --line in source */

  --diamond: #296bff;
  --diamond-bright: #5b8bff;
  --diamond-deep: #1b4fd0;
  --cyan: #3b9bff;            /* --info */
  --gold: #f5b528;
  --gold-bright: #ffce55;
  --gold-deep: #b9851a;

  --text: #e7eaf1;
  --text-dim: #9aa3b4;
  --text-mute: #6b7382;

  --online: #37d07f;
  --offline: #ff5a72;

  --pixel: "Silkscreen", "JetBrains Mono", monospace;
  --sans: "Plus Jakarta Sans", system-ui, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --r: 10px;          /* --radius-sm */
  --r-lg: 14px;       /* --radius */
  --shadow-block: 0 24px 70px rgba(0,0,0,.55);
  --glow-blue: 0 0 0 3px rgba(41,107,255,.16);
}

/* ---- signature radial backdrop ---- */
html[data-theme="app"] body {
  background:
    radial-gradient(120% 90% at 50% -10%, #1a2436 0%, #090b10 60%) fixed,
    #090b10;
}
html[data-theme="app"] body::before {
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 120% 70% at 50% 0%, #000 30%, transparent 72%);
}

/* ---- Silkscreen headers: tame size + line-height (blocky font) ---- */
html[data-theme="app"] .hero h1 { font-size: clamp(18px, 2.6vw, 28px); letter-spacing: .08em; line-height: 1.4; }
html[data-theme="app"] .section-head h2 { font-size: clamp(18px, 2.4vw, 26px); letter-spacing: .08em; line-height: 1.35; }
html[data-theme="app"] .page-head h1 { font-size: clamp(20px, 2.8vw, 30px); letter-spacing: .08em; line-height: 1.35; }
html[data-theme="app"] .cat-title { font-size: 17px; letter-spacing: .08em; }
html[data-theme="app"] .brand .name { font-size: 13px; line-height: 1.5; letter-spacing: .02em; }
html[data-theme="app"] .panel-h,
html[data-theme="app"] .feature h3,
html[data-theme="app"] .rank-card h3,
html[data-theme="app"] .prod h3,
html[data-theme="app"] .news-card h3,
html[data-theme="app"] .login-card h1,
html[data-theme="app"] .discord-band h3,
html[data-theme="app"] .scard h4,
html[data-theme="app"] .owner h3 { font-family: var(--pixel); letter-spacing: .02em; line-height: 1.4; }
html[data-theme="app"] .feature h3,
html[data-theme="app"] .news-card h3,
html[data-theme="app"] .scard h4 { font-size: 14px; }

/* ---- sec-label / eyebrow: tiny uppercase Silkscreen with trailing rule ---- */
html[data-theme="app"] .eyebrow {
  font-family: var(--pixel);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--text-mute);
}
html[data-theme="app"] .eyebrow::before {
  width: 7px; height: 7px;
  background: var(--diamond);
  box-shadow: 0 0 8px var(--diamond);
}

/* ---- monospace for ALL technical / numeric data ---- */
html[data-theme="app"] .ip-card .ip,
html[data-theme="app"] .ip-card .label,
html[data-theme="app"] .foot-ip,
html[data-theme="app"] .float-ip .fi-ip,
html[data-theme="app"] .hero-meta b,
html[data-theme="app"] .player-stat,
html[data-theme="app"] .player-rank,
html[data-theme="app"] .tbl .val,
html[data-theme="app"] .tbl .rank,
html[data-theme="app"] .stat .v,
html[data-theme="app"] .metric .mv,
html[data-theme="app"] .cl-ver,
html[data-theme="app"] .cl-group li .plug,
html[data-theme="app"] .news-thumb .ver,
html[data-theme="app"] .rank-card .price,
html[data-theme="app"] .prod .price,
html[data-theme="app"] .rb,
html[data-theme="app"] .branch,
html[data-theme="app"] code { font-family: var(--mono); }

html[data-theme="app"] .ip-card .ip { text-shadow: none; }

/* ---- flat surfaces, hairline borders, app radii ---- */
html[data-theme="app"] .feature,
html[data-theme="app"] .news-card,
html[data-theme="app"] .rank-card,
html[data-theme="app"] .prod,
html[data-theme="app"] .panel,
html[data-theme="app"] .tbl-wrap,
html[data-theme="app"] .ip-card,
html[data-theme="app"] .stat,
html[data-theme="app"] .metric,
html[data-theme="app"] .lrow,
html[data-theme="app"] .vote-site,
html[data-theme="app"] .acc,
html[data-theme="app"] .side-nav,
html[data-theme="app"] .scard,
html[data-theme="app"] .cl-entry {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: none;
}

/* ---- STAT cards = Nolli dashboard tiles ---- */
html[data-theme="app"] .stat { padding: 16px 18px; }
html[data-theme="app"] .stat .k {
  color: var(--text-mute);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
html[data-theme="app"] .stat .v {
  font-family: var(--pixel); font-size: 18px; font-weight: 400; margin-top: 13px;
}
html[data-theme="app"] .stat .v.gold { color: var(--gold); }
html[data-theme="app"] .stat .v.cyan { color: var(--cyan); }
html[data-theme="app"] .stat .v.green { color: var(--online); }

html[data-theme="app"] .metric .mv { font-family: var(--pixel); font-size: 19px; font-weight: 400; }
html[data-theme="app"] .metric .ml { letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }

/* feature icon = rounded accent-soft square (dashboard .si) */
html[data-theme="app"] .ficon {
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(41,107,255,.16);
  border: none; color: var(--diamond);
}
html[data-theme="app"] .ficon svg { width: 19px; height: 19px; stroke: var(--diamond) !important; }

/* git-style left accent reveal on hover */
html[data-theme="app"] .feature,
html[data-theme="app"] .news-card { border-left: 3px solid transparent; transition: transform .12s, border-color .12s, background .12s; }
html[data-theme="app"] .feature:hover,
html[data-theme="app"] .news-card:hover { border-left-color: var(--diamond); border-color: var(--line); transform: translateY(-3px); }

html[data-theme="app"] .news-thumb {
  background: var(--panel-2);
  background-image: radial-gradient(circle at 50% 45%, rgba(41,107,255,.12), transparent 70%);
}

/* ---- header ---- */
html[data-theme="app"] .header { background: rgba(13,17,25,.82); }
html[data-theme="app"] .header.scrolled { background: rgba(13,17,25,.96); }
html[data-theme="app"] .brand img { filter: drop-shadow(0 4px 10px rgba(41,107,255,.4)); }
html[data-theme="app"] .nav-links a.active { color: var(--diamond-bright); }
html[data-theme="app"] .nav-online { border-radius: 999px; background: var(--bg-1); }

/* ---- button system (1:1 with Nolli .btn) ---- */
html[data-theme="app"] .btn { border-radius: 10px; font-weight: 700; }
html[data-theme="app"] .btn-ghost { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); }
html[data-theme="app"] .btn-ghost:hover { filter: brightness(1.12); background: var(--panel-2); border-color: var(--line); }
html[data-theme="app"] .btn-primary {
  background: var(--diamond); color: #fff; border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(41,107,255,.32);
}
html[data-theme="app"] .btn-primary:hover { filter: brightness(1.08); background: var(--diamond); box-shadow: 0 8px 22px rgba(41,107,255,.44); }
html[data-theme="app"] .btn-gold { background: var(--gold); color: #231a02; box-shadow: 0 6px 18px rgba(245,181,40,.28); }
html[data-theme="app"] .btn-discord { box-shadow: 0 6px 18px rgba(88,101,242,.3); }
html[data-theme="app"] .btn:active { transform: translateY(1px); }

/* ---- IP card: terminal feel ---- */
html[data-theme="app"] .ip-card { box-shadow: 0 10px 30px rgba(0,0,0,.42); }
html[data-theme="app"] .ip-card .copy { color: var(--diamond-bright); }

/* ---- hero glow ---- */
html[data-theme="app"] .hero::before {
  background: radial-gradient(ellipse 58% 55% at 50% 18%, rgba(41,107,255,.2), transparent 64%);
}
html[data-theme="app"] .hero-logo { filter: drop-shadow(0 10px 30px rgba(41,107,255,.34)); }

/* ---- status / online pills: glowing ring (Nolli signature) ---- */
html[data-theme="app"] .dot { box-shadow: 0 0 0 3px rgba(55,208,127,.18); }
html[data-theme="app"] .online-tag { display: inline-flex; align-items: center; }

/* ---- pills / side-nav active ---- */
html[data-theme="app"] .pills button.active { background: rgba(41,107,255,.16); border-color: rgba(41,107,255,.45); color: var(--diamond-bright); }
html[data-theme="app"] .side-nav a.active,
html[data-theme="app"] .side-nav button.active {
  background: rgba(41,107,255,.16); color: #fff; position: relative;
  border-left: 3px solid var(--diamond); padding-left: 11px;
}

/* ---- badges: mono, app radii (nav-badge gold treatment) ---- */
html[data-theme="app"] .rb { border-radius: 7px; font-weight: 800; }
html[data-theme="app"] .pill-tag { border-radius: 7px; font-family: var(--mono); }

/* ---- tables: log-line feel for values ---- */
html[data-theme="app"] .tbl th { font-family: var(--pixel); font-size: 10.5px; letter-spacing: .06em; }

/* ---- consoles / inline code = real terminal ---- */
html[data-theme="app"] .acc .acc-body code,
html[data-theme="app"] code { background: #090c12; color: var(--diamond-bright); }

/* ---- discord band ---- */
html[data-theme="app"] .discord-band {
  background: linear-gradient(135deg, #1a2030, #12161f);
  border-color: var(--line-soft);
  box-shadow: var(--shadow-block);
}

/* ---- section alt: subtle, no hard divider ---- */
html[data-theme="app"] .section--alt { background: rgba(255,255,255,.012); border-color: var(--line-soft); }

/* ---- login card ---- */
html[data-theme="app"] .login-card { box-shadow: var(--shadow-block); }
html[data-theme="app"] .login-card img { filter: drop-shadow(0 4px 12px rgba(41,107,255,.4)); }

/* ---- 3-up swatch in switcher ---- */
.theme-switch button[data-t="app"] .sw { background: linear-gradient(135deg, #296bff, #37d07f); }