/* Neo-brutalism skin for the member area (future.mbg.ninja), loaded after style.css by base.html.
   Boxy version (owner chose it 2026-11-01): cream canvas, yellow header, thick ink outlines with hard offset shadows
   (no blur), small corners, flat loud accents, heavy grotesk type. Rule: thick lines only OUTSIDE (cards, buttons,
   chips, inputs); dividers INSIDE stay thin and faint (--line), or they pile up. The public meme page empties this
   block. Delete the <link> in base.html to go back to the old look. */
:root {
  --bg: #fff4e0; --card: #ffffff; --muted-bg: #fff0c9; --text: #111111; --muted: #4a4a4a; --line: rgba(17, 17, 17, .14);
  --primary: #ffc900; --on-primary: #111111; --link: #111111; --ring: #ff4f9a;
  --pos: #00803a; --neg: #d9001b; --off: #8a8a8a;
  --ok-bg: #c8f7d4; --err-bg: #ffd0d0;
  --ink: #111111; --shadow: #111111; --pink: #ff8fc4; --blue: #7cc8ff; --lime: #b8f04a;
  --bw: 2.5px; --sh: 4px 4px 0 var(--shadow); --sh-lg: 6px 6px 0 var(--shadow); --sh-sm: 2px 2px 0 var(--shadow);
  --r: 4px;
  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Space Mono", "Fira Code", ui-monospace, Consolas, monospace;
  --ease: 110ms ease-out;
}
:root[data-theme=dark] {
  --bg: #16130f; --card: #221e19; --muted-bg: #2f2920; --text: #fff8ec; --muted: #c9bfae; --line: rgba(255, 248, 236, .14);
  --primary: #ffc900; --on-primary: #111111; --link: #ffc900; --ring: #ff6fae;
  --pos: #3ddc84; --neg: #ff5a6a; --off: #8a8275;
  --ok-bg: #173f27; --err-bg: #4f1820;
  --ink: #fff8ec; --shadow: #ffc900;
}

body { font-weight: 500; }
a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 0; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; }
h2 { font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; }
h3 { font-weight: 700; }
.num, .kpi-value { font-family: var(--mono); }

/* controls drawn as links keep their own look */
.btn, .chip, .main-nav a, .brand, .coin-link, .copy, .tile, .uname, .subnav a { text-decoration: none; }

/* header: yellow bar, active tab is a white box with a small hard shadow */
.top, .app-top { background: var(--primary); border-bottom: var(--bw) solid var(--ink); }
:root[data-theme=dark] .app-top { background: var(--card); }
.brand-tag { color: #111; background: var(--pink); border: 2px solid #111; border-radius: 0; box-shadow: 2px 2px 0 #111;
  font-family: var(--font); }
:root[data-theme=dark] .brand-tag { border-color: var(--ink); box-shadow: 2px 2px 0 var(--shadow); }
.brand-mascot { border: 2px solid #111; border-radius: 50%; background: #fff; }
.who { color: var(--text); font-weight: 700; font-family: var(--mono); }
.main-nav a, .top nav a { color: #111; font-weight: 700; border: 2px solid transparent; border-radius: var(--r); }
:root[data-theme=dark] .main-nav a, :root[data-theme=dark] .top nav a { color: var(--text); }
.main-nav a:hover, .top nav a:hover { background: rgba(255, 255, 255, .6); border-color: #111; color: #111; text-decoration: none; }
:root[data-theme=dark] .main-nav a:hover { background: var(--muted-bg); border-color: var(--ink); color: var(--text); }
.main-nav a[aria-current=page], .top nav a[aria-current=page] { background: #fff; color: #111; border-color: #111; box-shadow: 2px 2px 0 #111; }
:root[data-theme=dark] .main-nav a[aria-current=page] { background: var(--primary); color: #111; border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink); }
/* wide screens: the menu gets its own row under the brand bar, centred */
@media (min-width: 721px) {
  .app-top .main-nav { order: 9; flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 720px) {
  .main-nav { background: var(--primary); border-top: var(--bw) solid var(--ink); box-shadow: none; }
  :root[data-theme=dark] .main-nav { background: var(--card); }
  .main-nav a[aria-current=page] { background: #fff; color: #111; border-color: #111; box-shadow: 2px 2px 0 #111; }
}

/* surfaces: thick outline + hard shadow on the OUTER box only */
.card, .kpi, .scroll, .tile, .uaccess, .sig-row, .notif-card {
  background: var(--card); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); }
.card .scroll, .card .card, .card .kpi { border: 0; box-shadow: none; border-radius: 0; }
.summary-strip { background: var(--muted-bg); color: var(--text); border: var(--bw) solid var(--ink); border-radius: var(--r);
  box-shadow: var(--sh-sm); }
.kpi:nth-child(4n+1) { background: var(--primary); }
.kpi:nth-child(4n+2) { background: var(--blue); }
.kpi:nth-child(4n+3) { background: var(--pink); }
.kpi:nth-child(4n+4) { background: var(--lime); }
.kpi { color: #111; --text: #111; --muted: #2f2f2f; --pos: #005c2a; --neg: #a30015; }
:root[data-theme=dark] .kpi { border-color: #111; box-shadow: 4px 4px 0 var(--shadow); }
.kpi .kpi-label { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.kpi-value { font-size: 1.7rem; font-weight: 700; }
.tile, .signal { transition: transform var(--ease), box-shadow var(--ease); }
.tile:hover, .signal:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-lg); border-color: var(--ink); }
.panel-title { color: var(--text); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.row-chart { border: 1.5px solid var(--ink); border-radius: 0; }

/* buttons: lift on hover, press down into the shadow */
.btn { border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); font-weight: 700;
  transition: transform var(--ease), box-shadow var(--ease); }
.btn:hover { filter: none; transform: translate(-2px, -2px); box-shadow: var(--sh-lg); }
.btn:active { filter: none; transform: translate(4px, 4px); box-shadow: 0 0 0 var(--shadow); }
.btn.small { box-shadow: var(--sh-sm); }
.btn.small:hover { box-shadow: var(--sh); }
.btn.small:active { transform: translate(2px, 2px); box-shadow: none; }
.btn.ghost { background: var(--card); color: var(--text); border-color: var(--ink); }
.btn.ghost:hover { background: var(--card); }
.btn.danger { background: var(--neg); color: #fff; border-color: var(--ink); }
.btn.danger:hover { background: var(--neg); }
.top .btn.ghost { background: #fff; color: #111; border-color: #111; box-shadow: 2px 2px 0 #111; }
:root[data-theme=dark] .top .btn.ghost { background: var(--card); color: var(--text); border-color: var(--ink); box-shadow: 2px 2px 0 var(--shadow); }

/* forms */
label { font-weight: 700; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border: 2px solid var(--ink); border-radius: var(--r); background: var(--card); color: var(--text); }
label input:not([type=checkbox]):hover, select:hover { border-color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }
fieldset { border: 2px solid var(--ink); border-radius: var(--r); }
legend { color: var(--text); font-weight: 700; }
input[type=checkbox] { accent-color: #111; }

/* chips, tags, pills */
.chip { border: 2px solid var(--ink); border-radius: var(--r); font-weight: 700; background: var(--card); color: var(--text);
  box-shadow: var(--sh-sm); transition: transform var(--ease), box-shadow var(--ease); }
.chip:hover { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow); color: var(--text); }
.chip[aria-pressed=true] { background: var(--primary); color: #111; border-color: var(--ink); }
.chip.static { border: 1.5px solid var(--ink); background: var(--muted-bg); color: var(--text); box-shadow: none; }
.tag, .near-pill { border: 1.5px solid var(--ink); border-radius: 2px; background: var(--muted-bg); color: var(--text); font-weight: 700; }
.tag.ok { background: var(--ok-bg); color: var(--text); }
.side, .side-pill { border: 1.5px solid #111; border-radius: 2px; font-weight: 700; }
.side.long, .side-pill.long { background: var(--lime); color: #111; }
.side.short, .side-pill.short { background: var(--pink); color: #111; }

/* alerts, toast, live badge */
.alert { border: var(--bw) solid var(--ink); border-left-width: 8px; border-radius: var(--r); box-shadow: var(--sh-sm); font-weight: 600; }
.toast { border: var(--bw) solid #111; border-radius: var(--r); background: var(--primary); color: #111; font-weight: 700; box-shadow: 4px 4px 0 #111; }
.live { background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r); padding: .3rem .7rem; color: var(--text); font-weight: 600; }
.dot { border: 1.5px solid #111; box-shadow: none; width: 10px; height: 10px; }

/* tables: black header strip, faint row dividers */
thead th { background: var(--ink); color: var(--card); font-weight: 700; letter-spacing: .08em; border-bottom: 0; }
tbody tr:hover { background: var(--muted-bg); }

/* signal card details (inner lines stay thin) */
.sig-bar { background: var(--muted-bg); border: 1.5px solid var(--ink); height: 10px; border-radius: 0; }
.sig-bar-fill { border-radius: 0; opacity: .6; }
.sig-bar-px { border: 2px solid var(--ink); border-radius: 0; box-shadow: none; }
.sig-move { font-weight: 700; }
.subnav { border-bottom: 2px solid var(--ink); }
.subnav a[aria-current=page] { box-shadow: inset 0 -3px 0 var(--primary); }

/* day / night switch */
.theme-toggle { border: 2px solid #111; border-radius: var(--r); background: #fff; color: #111; box-shadow: 2px 2px 0 #111; font-weight: 700; }
:root[data-theme=dark] .theme-toggle { background: var(--card); color: var(--text); border-color: var(--ink); box-shadow: 2px 2px 0 var(--shadow); }
.theme-toggle:hover { border-color: #111; }
.tt-track { border: 2px solid #111; border-radius: 2px; background: #eee; }
.tt-knob { border: 2px solid #111; border-radius: 0; top: 1px; left: 1px; box-shadow: none; }
.theme-toggle[aria-checked=true] .tt-track { background: var(--primary); }

/* login: dotted canvas, boxy card with a big hard shadow */
body.login-page, :root[data-theme=dark] body.login-page {
  background-color: var(--bg); background-image: radial-gradient(rgba(17, 17, 17, .18) 1.2px, transparent 1.2px); background-size: 22px 22px; }
:root[data-theme=dark] body.login-page { background-image: radial-gradient(rgba(255, 248, 236, .16) 1.2px, transparent 1.2px); }
.login-card, :root[data-theme=dark] .login-card { background: var(--card); border: 3px solid var(--ink); border-radius: var(--r);
  box-shadow: 10px 10px 0 var(--shadow); transform: none !important; }
.login-card::after { display: none; }
.login-badge { background: var(--primary); border: 3px solid var(--ink); border-radius: 50%; box-shadow: none; transform: translate(-50%, -50%); }
.login-card input, :root[data-theme=dark] .login-card input { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: none; }
.login-card input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }
.btn-3d { background: var(--primary); color: #111; border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 5px 5px 0 var(--shadow);
  text-transform: uppercase; letter-spacing: .06em; }
.btn-3d:hover { filter: none; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--shadow); }
.btn-3d:active, .btn-3d.busy { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--shadow); }

@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .tile, .signal, .btn-3d { transition: none; }
  .btn:hover, .chip:hover, .tile:hover, .signal:hover, .btn-3d:hover { transform: none; }
}