/* Skins: optional looks that sit on top of styles.css. Classic (no data-skin) is the base dark/light theme.
   A skin works by swapping the colour variables, then adding the few shapes a palette can't do (bevels, frames).
   The light/dark switch is hidden while a skin is on, because each skin has its own palette. */

/* ---------- Picker on the Settings page ---------- */
.looks { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.look { display: grid; gap: 0.2rem; justify-items: start; padding: 0.7rem; border: 2px solid var(--line-2); border-radius: 0.8rem; background: var(--panel-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.look[aria-pressed="true"] { border-color: var(--blue-text); box-shadow: 0 0 0 2px var(--blue-text); }
.look__swatch { display: block; width: 100%; height: 3rem; margin-bottom: 0.35rem; border-radius: 0.5rem; }
.look__name { font-weight: 600; }
.look__sub { color: var(--muted); font-size: var(--fs-sm); }
.look--classic .look__swatch { background: linear-gradient(90deg, #040404 0 50%, #f3f5f9 50% 100%); border: 1px solid var(--line-2); }
.look--win98 .look__swatch { background: linear-gradient(#000080 0 28%, #c0c0c0 28% 100%), #008080; border: 2px solid; border-color: #fff #404040 #404040 #fff; border-radius: 0; }

.look--cyberpunk .look__swatch { background: linear-gradient(135deg, #07040f 0 45%, #ff2bd6 45% 55%, #00e5ff 55% 100%); border: 1px solid #00e5ff; box-shadow: 0 0 8px rgb(0 229 255 / 0.6); }
.look--yeahbuddy .look__swatch { background: linear-gradient(135deg, #0b0b0c 0 40%, #e10600 40% 70%, #ffc400 70% 100%); border: 2px solid #fff; }
.look--trainer .look__swatch { background: linear-gradient(#2f55b8, #2a48a0); border: 3px solid #e8eefc; box-shadow: 0 0 0 2px #0b1230; }

html[data-skin] .themebtn { display: none !important; }
html[data-skin] * { backdrop-filter: none !important; }

/* =====================================================================
   RETRO 98: grey windows, teal desktop, raised and sunken edges
   ===================================================================== */
html[data-skin="win98"] {
  color-scheme: light;
  --bg: #008080;
  --panel: #c0c0c0;
  --panel-2: #d4d0c8;
  --line: #808080;
  --line-2: #808080;
  --line-3: #404040;
  --text: #000000;
  --muted: #3a3a3a;
  --faint: #595959;
  --blue: #000080;
  --blue-deep: #000060;
  --navy: #dcdcf5;
  --blue-text: #000080;
  --ember: #a82d00;
  --amber: #805300;
  --good: #006400;
  --good-bg: #d6efd6;
  --warn: #7a5200;
  --warn-bg: #fff3c4;
  --bad: #a00000;
  --bad-bg: #f7d6d6;
  --c-kcal: #0000c8; --c-protein: #800080; --c-carbs: #007800; --c-fat: #b06800;
  --hover: #dfdfdf;
  --track: #ffffff;
  --track-2: #ffffff;
  --track-3: #ffffff;
  --tick: #000000;
  --glass: #c0c0c0;
  --glass-top: #000080;
  --glass-card: #c0c0c0;
  --glass-card-2: #d4d0c8;
  --blue-line: #000080;
  --good-line: #006400;
  --warn-line: #7a5200;
  --bad-line: #a00000;
  --news-bg: #ffffe1;
  --news-line: #000000;
  --verify-bg: #ffffe1;
  --verify-line: #000000;
  --on-good: #ffffff;
  --shadow: rgb(0 0 0 / 0.45);
  --pill-kcal-bg: #d6d6ff; --pill-kcal: #0000a0;
  --pill-p-bg: #f0d6f0; --pill-p: #600060;
  --pill-c-bg: #d6efd6; --pill-c: #005000;
  --pill-f-bg: #f6e3c0; --pill-f: #7a4800;
  --sess-bg: #c0c0c0; --sess-card: #d4d0c8; --sess-line: #808080; --sess-field: #ffffff; --sess-tile: #ffffff;
  --body: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  --radius: 0;
  --edge-raised: #ffffff #404040 #404040 #ffffff;
  --edge-sunken: #808080 #ffffff #ffffff #808080;
}
html[data-skin="win98"] body { font-family: var(--body); background: #008080; }
html[data-skin="win98"] h1, html[data-skin="win98"] h2, html[data-skin="win98"] h3, html[data-skin="win98"] .brand, html[data-skin="win98"] .wn__head h2, html[data-skin="win98"] .inssec__head h2 { font-family: var(--body); letter-spacing: 0; }
html[data-skin="win98"] *, html[data-skin="win98"] *::before, html[data-skin="win98"] *::after { border-radius: 0 !important; }
html[data-skin="win98"] .avatar, html[data-skin="win98"] .dn__gauge circle { border-radius: 50% !important; }

/* windows: raised grey with a blue title bar on the main area */
html[data-skin="win98"] #main { position: relative; margin: 1rem auto; padding-top: 2.6rem; background: #c0c0c0; border: 2px solid; border-color: var(--edge-raised); box-shadow: 1px 1px 0 #000; max-width: 74rem; width: calc(100% - 1.5rem); }
html[data-skin="win98"] #main::before { content: "Apex Lane"; position: absolute; inset: 2px 2px auto 2px; height: 1.6rem; padding: 0 0.5rem; display: flex; align-items: center; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700; font-size: 0.85rem; }
html[data-skin="win98"] .site-footer { background: transparent; color: #fff; border-top: 0; }
html[data-skin="win98"] .site-footer a { color: #ffff80; }

html[data-skin="win98"] .sidebar { background: #c0c0c0; border: 0; border-right: 2px solid #404040; box-shadow: inset -1px 0 #808080, inset 1px 0 #fff; }
html[data-skin="win98"] .brand { color: #000; }
html[data-skin="win98"] .brand__mark { background: #000080; }
html[data-skin="win98"] .nav a { color: #000; font-weight: 400; }
html[data-skin="win98"] .nav a:hover { background: #000080; color: #fff; }
html[data-skin="win98"] .nav a:hover svg { color: #fff; }
html[data-skin="win98"] .nav a[aria-current="page"] { background: #c0c0c0; color: #000; font-weight: 700; border: 2px solid; border-color: var(--edge-sunken); box-shadow: none; }
html[data-skin="win98"] .nav a[aria-current="page"] svg { color: #000080; }
html[data-skin="win98"] .nav__label, html[data-skin="win98"] .label { color: #3a3a3a; letter-spacing: 0.04em; }
html[data-skin="win98"] .usercard { background: #c0c0c0; border: 2px solid; border-color: var(--edge-sunken); }
html[data-skin="win98"] .topbar { background: linear-gradient(90deg, #000080, #1084d0); border-bottom: 2px solid #404040; color: #fff; }
html[data-skin="win98"] .topbar .brand, html[data-skin="win98"] .topbar__sync { color: #fff; }

/* panels, tiles and cards: raised */
html[data-skin="win98"] .panel, html[data-skin="win98"] .ins, html[data-skin="win98"] .chcard, html[data-skin="win98"] .rbcard, html[data-skin="win98"] .stat, html[data-skin="win98"] .asave, html[data-skin="win98"] .adminrow, html[data-skin="win98"] .wkcard, html[data-skin="win98"] .reviewbar, html[data-skin="win98"] .invite, html[data-skin="win98"] .look {
  background: #c0c0c0; color: #000; border: 2px solid; border-color: var(--edge-raised); box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
}
html[data-skin="win98"] .ins:hover, html[data-skin="win98"] .rbcard:hover { background: #d4d0c8; border-color: var(--edge-raised); }
html[data-skin="win98"] .look[aria-pressed="true"] { border-color: var(--edge-sunken); box-shadow: none; outline: 1px dotted #000; outline-offset: -5px; }
html[data-skin="win98"] .panel__head h2, html[data-skin="win98"] .wn__head h2 { font-weight: 700; }

/* buttons */
html[data-skin="win98"] .button, html[data-skin="win98"] .icon-button, html[data-skin="win98"] .chipbtn, html[data-skin="win98"] .menuitem, html[data-skin="win98"] .seg button, html[data-skin="win98"] .wn__toggle button {
  background: #c0c0c0; color: #000; border: 2px solid; border-color: var(--edge-raised); box-shadow: inset -1px -1px #808080; font-weight: 400; transition: none;
}
html[data-skin="win98"] .button:hover, html[data-skin="win98"] .icon-button:hover { background: #d4d0c8; border-color: var(--edge-raised); }
html[data-skin="win98"] .button:active, html[data-skin="win98"] .icon-button:active { border-color: var(--edge-sunken); box-shadow: none; padding-top: calc(0.6rem + 1px); }
html[data-skin="win98"] .button--primary { background: #c0c0c0; color: #000; font-weight: 700; outline: 2px solid #000; outline-offset: -2px; }
html[data-skin="win98"] .button--primary:hover { background: #d4d0c8; }
html[data-skin="win98"] .button--danger { color: #a00000; }
html[data-skin="win98"] .seg button[aria-selected="true"], html[data-skin="win98"] .wn__toggle button[aria-selected="true"], html[data-skin="win98"] .chipbtn.is-on { background: #dfdfdf; border-color: var(--edge-sunken); box-shadow: none; font-weight: 700; color: #000; }
html[data-skin="win98"] .seg, html[data-skin="win98"] .wn__toggle { background: #c0c0c0; border: 2px solid; border-color: var(--edge-sunken); padding: 0.15rem; }
html[data-skin="win98"] .text-button, html[data-skin="win98"] a { color: #0000ee; }
html[data-skin="win98"] .nav a, html[data-skin="win98"] .brand, html[data-skin="win98"] .button, html[data-skin="win98"] .wn__log { color: inherit; }
html[data-skin="win98"] .wn__log { color: #0000ee; }

/* fields: sunken and white */
html[data-skin="win98"] input, html[data-skin="win98"] select, html[data-skin="win98"] textarea { background: #fff; color: #000; border: 2px solid; border-color: var(--edge-sunken); box-shadow: inset 1px 1px #404040; }
html[data-skin="win98"] input:focus, html[data-skin="win98"] select:focus, html[data-skin="win98"] textarea:focus { outline: 1px dotted #000; outline-offset: 1px; box-shadow: inset 1px 1px #404040; border-color: var(--edge-sunken); }
html[data-skin="win98"] input::placeholder { color: #707070; }

/* bars: sunken trough, blocky fill */
html[data-skin="win98"] .meter, html[data-skin="win98"] .dn__bar, html[data-skin="win98"] .ins__meter { background: #fff; border: 2px solid; border-color: var(--edge-sunken); height: 0.9rem; }
html[data-skin="win98"] .meter > span, html[data-skin="win98"] .dn__bar i, html[data-skin="win98"] .ins__meter > span { background-image: repeating-linear-gradient(90deg, var(--c, #000080) 0 8px, transparent 8px 10px); background-color: transparent; }
html[data-skin="win98"] .dn__track { stroke: #fff; }
html[data-skin="win98"] .dn__dial { background: transparent; }

/* chips and pills */
html[data-skin="win98"] .chip { background: #ffffe1; color: #000; border: 1px solid #000; letter-spacing: 0.02em; text-transform: none; font-weight: 400; }
html[data-skin="win98"] .chip--blue { background: #dcdcf5; color: #000080; border-color: #000080; }
html[data-skin="win98"] .pill { border: 1px solid #000; }

/* dialogs get a title-bar look, toasts and banners are note-yellow */
html[data-skin="win98"] dialog { background: #c0c0c0; color: #000; border: 2px solid; border-color: var(--edge-raised); box-shadow: 2px 2px 0 #000; padding-top: 1.6rem; }
html[data-skin="win98"] dialog h2 { margin: -1.6rem -1.4rem 1rem; padding: 0.3rem 0.5rem; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-size: 0.9rem; }
html[data-skin="win98"] dialog::backdrop { background: rgb(0 128 128 / 0.6); }
html[data-skin="win98"] .toast { background: #ffffe1; color: #000; border: 1px solid #000; }
html[data-skin="win98"] .newsbar, html[data-skin="win98"] .verifybar { color: #000; border: 1px solid #000; }
html[data-skin="win98"] .newsbar strong { color: #000080; }
html[data-skin="win98"] .landing { background: #008080; }
html[data-skin="win98"] .dn__centre, html[data-skin="win98"] .dn__side strong, html[data-skin="win98"] .dn__big { color: #000; }
html[data-skin="win98"] :focus-visible { outline: 1px dotted #000; outline-offset: 2px; }

@media (max-width: 56em) {
  html[data-skin="win98"] .sidebar { background: #c0c0c0; border: 0; border-top: 2px solid #fff; box-shadow: 0 -1px #808080; }
  html[data-skin="win98"] .nav a { color: #000; }
  html[data-skin="win98"] .nav a[aria-current="page"] { border-color: var(--edge-sunken); }
  html[data-skin="win98"] #main { margin: 0.5rem auto 0; width: calc(100% - 0.75rem); padding-top: clamp(1.25rem, 3vw, 2.25rem); }
  html[data-skin="win98"] #main::before { display: none; }
}
/* =====================================================================
   TRAINER: dark night backdrop, royal-blue pixel windows with a pale frame, gold accents.
   Uses the "Pixelify Sans" font if /fonts/pixelify-sans.woff is present (free, OFL licence); otherwise a system font.
   ===================================================================== */
@font-face { font-family: "Pixelify Sans"; src: url("/fonts/pixelify-sans.woff") format("woff"); font-weight: 400 700; font-display: swap; }
html[data-skin="trainer"] {
  color-scheme: dark;
  --bg: #0a1030;
  --panel: #2c4aa6;
  --panel-2: #213b88;
  --line: #4b6bd0;
  --line-2: #7f9bec;
  --line-3: #e8eefc;
  --text: #ffffff;
  --muted: #c3d0fa;
  --faint: #93a7e6;
  --blue: #3f63d2;
  --blue-deep: #2a48a0;
  --navy: #1a2f78;
  --blue-text: #ffd34d;
  --ember: #ff9a62;
  --amber: #ffd34d;
  --good: #8dffb4;
  --good-bg: #134a37;
  --warn: #ffd34d;
  --warn-bg: #4b3a0a;
  --bad: #ff9a9a;
  --bad-bg: #4b1830;
  --c-kcal: #8cc8ff; --c-protein: #d4aaff; --c-carbs: #8dffb4; --c-fat: #ffd34d;
  --hover: #3556bd;
  --track: #14265f; --track-2: #14265f; --track-3: #14265f;
  --tick: #e8eefc;
  --glass: #101c4e; --glass-top: #101c4e; --glass-card: #2c4aa6; --glass-card-2: #213b88;
  --blue-line: #7f9bec; --good-line: #4fc78a; --warn-line: #d8a93a; --bad-line: #d05a78;
  --news-bg: #213b88; --news-line: #ffd34d; --verify-bg: #4b3a0a; --verify-line: #ffd34d;
  --on-good: #06241a;
  --shadow: rgb(0 0 20 / 0.55);
  --pill-kcal-bg: #1d3d86; --pill-kcal: #b3dcff;
  --pill-p-bg: #3b2480; --pill-p: #e6ccff;
  --pill-c-bg: #115a40; --pill-c: #b8ffd2;
  --pill-f-bg: #6a4d08; --pill-f: #ffe596;
  --sess-bg: #213b88; --sess-card: #2c4aa6; --sess-line: #7f9bec; --sess-field: #14265f; --sess-tile: #ffffff;
  --body: "Pixelify Sans", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --radius: 0.5rem;
}
html[data-skin="trainer"] body {
  font-family: var(--body);
  background:
    linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px) 0 0 / 100% 4px,
    radial-gradient(120% 90% at 50% 0%, #14215a 0%, #0a1030 60%, #060a22 100%) fixed;
  text-shadow: 1px 1px 0 rgb(0 0 20 / 0.6);
}
html[data-skin="trainer"] h1, html[data-skin="trainer"] h2, html[data-skin="trainer"] h3, html[data-skin="trainer"] .brand { font-family: var(--body); letter-spacing: 0.03em; }
html[data-skin="trainer"] h1, html[data-skin="trainer"] .page-head h1 { color: #fff; text-shadow: 2px 2px 0 #0a1030; }

/* the window frame: pale outer edge, dark line, royal blue inside */
html[data-skin="trainer"] .panel, html[data-skin="trainer"] .chcard, html[data-skin="trainer"] .rbcard, html[data-skin="trainer"] .stat, html[data-skin="trainer"] .asave, html[data-skin="trainer"] .adminrow, html[data-skin="trainer"] .wkcard, html[data-skin="trainer"] .reviewbar, html[data-skin="trainer"] .invite, html[data-skin="trainer"] dialog {
  background: #2c4aa6; color: #fff; border: 3px solid #e8eefc; border-radius: 0.5rem; box-shadow: 0 0 0 2px #0a1030, 0 6px 0 2px #0a1030;
}
/* tiles inside windows: darker blue with a lighter edge, like the upgrade tiles */
html[data-skin="trainer"] .ins, html[data-skin="trainer"] .look, html[data-skin="trainer"] .petpick, html[data-skin="trainer"] .petview__stage, html[data-skin="trainer"] .petcard, html[data-skin="trainer"] .menuitem {
  background: #213b88; color: #fff; border: 2px solid #4b6bd0; border-radius: 0.5rem; box-shadow: inset 0 0 0 2px #1a2f78;
}
html[data-skin="trainer"] .petcard { border-width: 3px; border-color: #e8eefc; box-shadow: 0 0 0 2px #0a1030, 0 6px 0 2px #0a1030; background: #2c4aa6; }
html[data-skin="trainer"] .ins:hover, html[data-skin="trainer"] .rbcard:hover, html[data-skin="trainer"] .petcard:hover, html[data-skin="trainer"] .petpick:hover { background: #2a4799; border-color: #ffd34d; }
html[data-skin="trainer"] .look[aria-pressed="true"], html[data-skin="trainer"] .petpick.is-on { border-color: #ffd34d; box-shadow: inset 0 0 0 2px #1a2f78, 0 0 0 2px #ffd34d; }
html[data-skin="trainer"] .panel__head h2, html[data-skin="trainer"] .inssec__head h2, html[data-skin="trainer"] dialog h2, html[data-skin="trainer"] .wn__head h2 { color: #fff; }
html[data-skin="trainer"] dialog::backdrop { background: rgb(4 8 30 / 0.82); }

/* side menu: dim entries, the open one lit with a gold arrow */
html[data-skin="trainer"] .sidebar { background: rgb(10 16 48 / 0.92); border-right: 3px solid #e8eefc; box-shadow: 3px 0 0 #0a1030; }
html[data-skin="trainer"] .brand { color: #fff; }
html[data-skin="trainer"] .brand__mark { background: #ffd34d; border: 2px solid #0a1030; }
html[data-skin="trainer"] .brand__mark svg { stroke: #0a1030; }
html[data-skin="trainer"] .nav a { color: #5d6fae; }
html[data-skin="trainer"] .nav a:hover { color: #c3d0fa; background: rgb(255 255 255 / 0.06); }
html[data-skin="trainer"] .nav a[aria-current="page"] { color: #fff; background: rgb(255 255 255 / 0.1); box-shadow: none; }
html[data-skin="trainer"] .nav a[aria-current="page"] svg { color: #ffd34d; }
html[data-skin="trainer"] .nav a[aria-current="page"]::before { content: "\25B6"; color: #ffd34d; font-size: 0.7em; margin-right: -0.25rem; }
html[data-skin="trainer"] .nav__label, html[data-skin="trainer"] .label { color: #7a8dd0; }
html[data-skin="trainer"] .usercard { background: #101c4e; border: 2px solid #4b6bd0; border-radius: 0.5rem; }
html[data-skin="trainer"] .topbar { background: #101c4e; border-bottom: 3px solid #e8eefc; box-shadow: 0 3px 0 #0a1030; }
html[data-skin="trainer"] .site-footer { color: #7a8dd0; border-top-color: #213b88; }
html[data-skin="trainer"] .site-footer a { color: #ffd34d; }

/* buttons: dark tiles with a pale edge; the main action is gold */
html[data-skin="trainer"] .button, html[data-skin="trainer"] .icon-button, html[data-skin="trainer"] .chipbtn {
  background: #14265f; color: #fff; border: 2px solid #e8eefc; border-radius: 0.5rem; box-shadow: 0 3px 0 #0a1030; font-weight: 600; text-shadow: 1px 1px 0 #0a1030;
}
html[data-skin="trainer"] .button:hover, html[data-skin="trainer"] .icon-button:hover { background: #1d3580; border-color: #ffd34d; }
html[data-skin="trainer"] .button:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a1030; }
html[data-skin="trainer"] .button--primary { background: #ffd34d; color: #3a2700; border-color: #8a5a00; text-shadow: none; box-shadow: 0 3px 0 #8a5a00; }
html[data-skin="trainer"] .button--primary:hover { background: #ffe07a; border-color: #8a5a00; }
html[data-skin="trainer"] .button[disabled] { background: #8a8f9e; color: #2b2f3a; border-color: #5b6070; box-shadow: 0 3px 0 #3c4150; text-shadow: none; }
html[data-skin="trainer"] .seg, html[data-skin="trainer"] .wn__toggle { background: #14265f; border: 2px solid #e8eefc; border-radius: 0.5rem; }
html[data-skin="trainer"] .seg button, html[data-skin="trainer"] .wn__toggle button { color: #c3d0fa; border-radius: 0.35rem; }
html[data-skin="trainer"] .seg button[aria-selected="true"], html[data-skin="trainer"] .wn__toggle button[aria-selected="true"], html[data-skin="trainer"] .chipbtn.is-on { background: #ffd34d; color: #3a2700; text-shadow: none; box-shadow: none; border-color: #8a5a00; }
html[data-skin="trainer"] input, html[data-skin="trainer"] select, html[data-skin="trainer"] textarea { background: #14265f; color: #fff; border: 2px solid #e8eefc; border-radius: 0.5rem; }
html[data-skin="trainer"] input:focus, html[data-skin="trainer"] select:focus, html[data-skin="trainer"] textarea:focus { border-color: #ffd34d; box-shadow: 0 0 0 3px rgb(255 211 77 / 0.35); }
html[data-skin="trainer"] input::placeholder { color: #7a8dd0; }

/* bars: dark trough with a pale edge, segmented fill */
html[data-skin="trainer"] .meter, html[data-skin="trainer"] .dn__bar, html[data-skin="trainer"] .ins__meter, html[data-skin="trainer"] .petxp { background: #0a1030; border: 2px solid #e8eefc; height: 0.8rem; border-radius: 0.3rem; }
html[data-skin="trainer"] .meter > span, html[data-skin="trainer"] .dn__bar i, html[data-skin="trainer"] .petxp i { background-color: var(--c, #ffd34d); background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgb(10 16 48 / 0.55) 9px 11px); border-radius: 0; }
html[data-skin="trainer"] .petxp i { --c: #ffd34d; }
html[data-skin="trainer"] .dn__track { stroke: #0a1030; }
html[data-skin="trainer"] .dn__fill { stroke-linecap: butt; }
html[data-skin="trainer"] .chip { background: #0e1a45; color: #fff; border: 2px solid #e8eefc; border-radius: 99px; text-transform: none; letter-spacing: 0.02em; }
html[data-skin="trainer"] .chip--blue { color: #ffd34d; border-color: #ffd34d; background: #0e1a45; }
html[data-skin="trainer"] .text-button, html[data-skin="trainer"] a, html[data-skin="trainer"] .wn__log { color: #ffd34d; }
html[data-skin="trainer"] .nav a, html[data-skin="trainer"] .brand, html[data-skin="trainer"] .button, html[data-skin="trainer"] .petcard, html[data-skin="trainer"] .ins { color: inherit; }
html[data-skin="trainer"] .nav a { color: #5d6fae; }
html[data-skin="trainer"] .nav a:hover { color: #c3d0fa; }
html[data-skin="trainer"] .nav a[aria-current="page"] { color: #fff; }
html[data-skin="trainer"] .button--primary { color: #3a2700; }
html[data-skin="trainer"] .petcard, html[data-skin="trainer"] .ins { color: #fff; }
html[data-skin="trainer"] .toast { background: #14265f; color: #fff; border: 2px solid #ffd34d; border-radius: 0.5rem; }
html[data-skin="trainer"] .newsbar, html[data-skin="trainer"] .verifybar { color: #fff; border: 2px solid #ffd34d; border-radius: 0.5rem; }
html[data-skin="trainer"] .newsbar strong { color: #ffd34d; }
html[data-skin="trainer"] .landing { background: radial-gradient(120% 90% at 50% 0%, #14215a 0%, #0a1030 60%, #060a22 100%); }
html[data-skin="trainer"] .petview__stage { background: #14265f; }
@media (max-width: 56em) {
  html[data-skin="trainer"] .sidebar { background: #101c4e; border: 0; border-top: 3px solid #e8eefc; box-shadow: 0 -3px 0 #0a1030; }
  html[data-skin="trainer"] .nav a[aria-current="page"]::before { display: none; }
  html[data-skin="trainer"] .nav a { color: #7a8dd0; }
  html[data-skin="trainer"] .nav a[aria-current="page"] { color: #ffd34d; background: rgb(255 255 255 / 0.1); }
}

/* =====================================================================
   CYBERPUNK: near-black violet, neon cyan and magenta, yellow warnings, cut corners and glow.
   Original style: system monospace type, no third-party art or fonts.
   ===================================================================== */
html[data-skin="cyberpunk"] {
  color-scheme: dark;
  --bg: #07040f;
  --panel: #120a24;
  --panel-2: #0d0719;
  --line: #3a1f6b;
  --line-2: #00e5ff;
  --line-3: #ff2bd6;
  --text: #f1ecff;
  --muted: #b3a6d9;
  --faint: #8070b4;
  --blue: #00e5ff;
  --blue-deep: #0097aa;
  --navy: #1a0f33;
  --blue-text: #00e5ff;
  --ember: #ff2bd6;
  --amber: #fcee0a;
  --good: #39ff88;
  --good-bg: #06301c;
  --warn: #fcee0a;
  --warn-bg: #2e2a02;
  --bad: #ff4d6d;
  --bad-bg: #38081a;
  --c-kcal: #00e5ff; --c-protein: #ff2bd6; --c-carbs: #39ff88; --c-fat: #fcee0a;
  --hover: #1d1038;
  --track: #1a0f33; --track-2: #1a0f33; --track-3: #1a0f33;
  --tick: #00e5ff;
  --glass: #0d0719; --glass-top: #0d0719; --glass-card: #120a24; --glass-card-2: #0d0719;
  --blue-line: #00e5ff; --good-line: #39ff88; --warn-line: #fcee0a; --bad-line: #ff4d6d;
  --news-bg: #1a0f33; --news-line: #fcee0a; --verify-bg: #2e2a02; --verify-line: #fcee0a;
  --on-good: #021a0d;
  --shadow: rgb(0 0 0 / 0.6);
  --pill-kcal-bg: #06303a; --pill-kcal: #7df3ff;
  --pill-p-bg: #3a0b33; --pill-p: #ff9bec;
  --pill-c-bg: #06301c; --pill-c: #9bffc4;
  --pill-f-bg: #2e2a02; --pill-f: #fff58a;
  --sess-bg: #0d0719; --sess-card: #120a24; --sess-line: #3a1f6b; --sess-field: #07040f; --sess-tile: #1a0f33;
  --body: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --radius: 0.2rem;
}
html[data-skin="cyberpunk"] body {
  font-family: var(--body);
  background:
    linear-gradient(rgb(0 229 255 / 0.03) 1px, transparent 1px) 0 0 / 100% 3px,
    radial-gradient(90% 60% at 100% 0%, rgb(255 43 214 / 0.18), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgb(0 229 255 / 0.14), transparent 60%),
    #07040f fixed;
}
html[data-skin="cyberpunk"] h1, html[data-skin="cyberpunk"] h2, html[data-skin="cyberpunk"] h3, html[data-skin="cyberpunk"] .brand { font-family: var(--body); text-transform: uppercase; letter-spacing: 0.06em; }
html[data-skin="cyberpunk"] h1, html[data-skin="cyberpunk"] .page-head h1 { color: #fff; text-shadow: 0 0 10px rgb(0 229 255 / 0.7), 2px 0 0 rgb(255 43 214 / 0.8); }

/* panels: dark glass, neon edge, a cut top-right corner */
html[data-skin="cyberpunk"] .panel,
html[data-skin="cyberpunk"] .chcard,
html[data-skin="cyberpunk"] .rbcard,
html[data-skin="cyberpunk"] .stat,
html[data-skin="cyberpunk"] .asave,
html[data-skin="cyberpunk"] .adminrow,
html[data-skin="cyberpunk"] .wkcard,
html[data-skin="cyberpunk"] .reviewbar,
html[data-skin="cyberpunk"] .invite,
html[data-skin="cyberpunk"] dialog {
  background: linear-gradient(160deg, #150b2b, #0d0719); color: var(--text);
  border: 1px solid #00e5ff; border-radius: 0; box-shadow: 0 0 14px rgb(0 229 255 / 0.25), inset 0 0 18px rgb(255 43 214 / 0.06);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
html[data-skin="cyberpunk"] .ins,
html[data-skin="cyberpunk"] .look,
html[data-skin="cyberpunk"] .petpick,
html[data-skin="cyberpunk"] .petview__stage,
html[data-skin="cyberpunk"] .petcard,
html[data-skin="cyberpunk"] .menuitem {
  background: #0d0719; color: var(--text); border: 1px solid #3a1f6b; border-left: 3px solid #ff2bd6; border-radius: 0; box-shadow: none;
}
html[data-skin="cyberpunk"] .ins:hover, html[data-skin="cyberpunk"] .rbcard:hover { background: #1d1038; border-color: #00e5ff; }
html[data-skin="cyberpunk"] .look[aria-pressed="true"] { border-color: #fcee0a; box-shadow: 0 0 10px rgb(252 238 10 / 0.5); }
html[data-skin="cyberpunk"] .panel__head h2, html[data-skin="cyberpunk"] dialog h2, html[data-skin="cyberpunk"] .wn__head h2 { color: #00e5ff; }
html[data-skin="cyberpunk"] dialog { background: #0d0719; color: var(--text); border: 1px solid #ff2bd6; border-radius: 0; box-shadow: 0 0 24px rgb(255 43 214 / 0.4); }
html[data-skin="cyberpunk"] dialog::backdrop { background: rgb(4 2 12 / 0.85); }

html[data-skin="cyberpunk"] .sidebar { background: rgb(7 4 15 / 0.95); border-right: 1px solid #ff2bd6; box-shadow: 0 0 18px rgb(255 43 214 / 0.25); }
html[data-skin="cyberpunk"] .brand { color: #fff; }
html[data-skin="cyberpunk"] .brand__mark { background: #fcee0a; border-radius: 0; }
html[data-skin="cyberpunk"] .brand__mark svg { stroke: #07040f; }
html[data-skin="cyberpunk"] .nav a { color: #8070b4; text-transform: uppercase; letter-spacing: 0.05em; }
html[data-skin="cyberpunk"] .nav a:hover { color: #00e5ff; background: rgb(0 229 255 / 0.08); }
html[data-skin="cyberpunk"] .nav a[aria-current="page"] { color: #00e5ff; background: rgb(0 229 255 / 0.1); box-shadow: inset 3px 0 0 #ff2bd6; text-shadow: 0 0 8px rgb(0 229 255 / 0.8); }
html[data-skin="cyberpunk"] .nav a[aria-current="page"] svg { color: #ff2bd6; }
html[data-skin="cyberpunk"] .nav__label, html[data-skin="cyberpunk"] .label { color: #8070b4; }
html[data-skin="cyberpunk"] .usercard { background: #0d0719; border: 1px solid #3a1f6b; border-radius: 0; }
html[data-skin="cyberpunk"] .topbar { background: #0d0719; border-bottom: 1px solid #00e5ff; box-shadow: 0 0 14px rgb(0 229 255 / 0.3); }
html[data-skin="cyberpunk"] .site-footer { color: #8070b4; border-top-color: #3a1f6b; }
html[data-skin="cyberpunk"] .site-footer a, html[data-skin="cyberpunk"] .text-button, html[data-skin="cyberpunk"] a { color: #00e5ff; }

html[data-skin="cyberpunk"] .button, html[data-skin="cyberpunk"] .icon-button, html[data-skin="cyberpunk"] .chipbtn {
  background: transparent; color: #00e5ff; border: 1px solid #00e5ff; border-radius: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
html[data-skin="cyberpunk"] .button:hover, html[data-skin="cyberpunk"] .icon-button:hover, html[data-skin="cyberpunk"] .chipbtn:hover { background: rgb(0 229 255 / 0.15); box-shadow: 0 0 12px rgb(0 229 255 / 0.5); }
html[data-skin="cyberpunk"] .button--primary { background: #fcee0a; color: #07040f; border-color: #fcee0a; box-shadow: 0 0 14px rgb(252 238 10 / 0.45); }
html[data-skin="cyberpunk"] .button--primary:hover { background: #fff35c; box-shadow: 0 0 20px rgb(252 238 10 / 0.7); }
html[data-skin="cyberpunk"] .seg, html[data-skin="cyberpunk"] .wn__toggle { background: #07040f; border: 1px solid #3a1f6b; border-radius: 0; }
html[data-skin="cyberpunk"] .seg button, html[data-skin="cyberpunk"] .wn__toggle button { color: #b3a6d9; border-radius: 0; }
html[data-skin="cyberpunk"] .seg button[aria-selected="true"], html[data-skin="cyberpunk"] .wn__toggle button[aria-selected="true"] { background: #ff2bd6; color: #07040f; }
html[data-skin="cyberpunk"] input, html[data-skin="cyberpunk"] select, html[data-skin="cyberpunk"] textarea { background: #07040f; color: var(--text); border: 1px solid #3a1f6b; border-radius: 0; }
html[data-skin="cyberpunk"] input:focus, html[data-skin="cyberpunk"] select:focus, html[data-skin="cyberpunk"] textarea:focus { border-color: #00e5ff; box-shadow: 0 0 10px rgb(0 229 255 / 0.5); outline: none; }

/* meters: neon bars */
html[data-skin="cyberpunk"] .meter, html[data-skin="cyberpunk"] .dn__bar, html[data-skin="cyberpunk"] .ins__meter, html[data-skin="cyberpunk"] .wbar { background: #1a0f33; border: 1px solid #3a1f6b; border-radius: 0; }
html[data-skin="cyberpunk"] .meter > span, html[data-skin="cyberpunk"] .dn__bar i, html[data-skin="cyberpunk"] .wbar span { border-radius: 0; box-shadow: 0 0 8px currentColor; }
html[data-skin="cyberpunk"] .wbar span { background: #00e5ff; color: #00e5ff; }
html[data-skin="cyberpunk"] .dn__track { stroke: #1a0f33; }
html[data-skin="cyberpunk"] .dn__fill { filter: drop-shadow(0 0 4px rgb(0 229 255 / 0.9)); }
html[data-skin="cyberpunk"] .chip { background: #0d0719; border-color: #3a1f6b; color: #b3a6d9; border-radius: 0; }
html[data-skin="cyberpunk"] .chip--blue { color: #00e5ff; border-color: #00e5ff; }
html[data-skin="cyberpunk"] .toast { background: #0d0719; border: 1px solid #ff2bd6; color: #fff; border-radius: 0; box-shadow: 0 0 16px rgb(255 43 214 / 0.5); }
html[data-skin="cyberpunk"] .landing { background: radial-gradient(90% 60% at 100% 0%, rgb(255 43 214 / 0.2), transparent 60%), #07040f; }
html[data-skin="cyberpunk"] .wcup__lvl { fill: #00e5ff; }
html[data-skin="cyberpunk"] .wcup__glass { stroke: #ff2bd6; }
html[data-skin="cyberpunk"] .wcup__bg { fill: rgb(0 229 255 / 0.08); }
@media (max-width: 56em) {
  html[data-skin="cyberpunk"] .sidebar { background: #0d0719; border: 0; border-top: 1px solid #ff2bd6; }
}

/* =====================================================================
   YEAH BUDDY: gym-floor black, iron red and gold plate, heavy condensed type, slanted edges.
   Original style: no real person's name, photo or logo. Uses Big Shoulders Display (OFL) from /fonts.
   ===================================================================== */
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/big-shoulders-display.woff") format("woff"); font-weight: 100 900; font-display: swap; }
html[data-skin="yeahbuddy"] {
  color-scheme: dark;
  --bg: #0b0b0c;
  --panel: #171718;
  --panel-2: #111112;
  --line: #3a2a2a;
  --line-2: #e10600;
  --line-3: #ffc400;
  --text: #f6f1e7;
  --muted: #c9bfae;
  --faint: #948a7a;
  --blue: #e10600;
  --blue-deep: #a30400;
  --navy: #241a1a;
  --blue-text: #e10600;
  --ember: #ffc400;
  --amber: #ffc400;
  --good: #7dff9a;
  --good-bg: #0c3a1a;
  --warn: #ffc400;
  --warn-bg: #3a2d05;
  --bad: #ff6b6b;
  --bad-bg: #3a0a0f;
  --c-kcal: #e10600; --c-protein: #ffc400; --c-carbs: #7dff9a; --c-fat: #ffc400;
  --hover: #2a1b1b;
  --track: #241a1a; --track-2: #241a1a; --track-3: #241a1a;
  --tick: #e10600;
  --glass: #111112; --glass-top: #111112; --glass-card: #171718; --glass-card-2: #111112;
  --blue-line: #e10600; --good-line: #7dff9a; --warn-line: #ffc400; --bad-line: #ff6b6b;
  --news-bg: #241a1a; --news-line: #ffc400; --verify-bg: #3a2d05; --verify-line: #ffc400;
  --on-good: #021a0d;
  --shadow: rgb(0 0 0 / 0.6);
  --pill-kcal-bg: #3a0907; --pill-kcal: #ff8a85;
  --pill-p-bg: #3a2d05; --pill-p: #ffe08a;
  --pill-c-bg: #0c3a1a; --pill-c: #b8ffc9;
  --pill-f-bg: #3a2d05; --pill-f: #ffe9a0;
  --sess-bg: #111112; --sess-card: #171718; --sess-line: #3a2a2a; --sess-field: #0b0b0c; --sess-tile: #241a1a;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Big Shoulders Display", Impact, "Arial Narrow Bold", sans-serif;
  --radius: 0.2rem;
}
html[data-skin="yeahbuddy"] body {
  font-family: var(--body);
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.018) 0 2px, transparent 2px 14px),
    radial-gradient(90% 60% at 50% 0%, rgb(225 6 0 / 0.22), transparent 65%),
    #0b0b0c fixed;
}
html[data-skin="yeahbuddy"] h1, html[data-skin="yeahbuddy"] h2, html[data-skin="yeahbuddy"] h3, html[data-skin="yeahbuddy"] .brand { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 0.03em; }
html[data-skin="yeahbuddy"] h1, html[data-skin="yeahbuddy"] .page-head h1 { color: #fff; font-size: clamp(2.2rem, 6vw, 3.2rem); text-shadow: 3px 3px 0 #e10600; }

/* panels: dark glass, neon edge, a cut top-right corner */
html[data-skin="yeahbuddy"] .panel,
html[data-skin="yeahbuddy"] .chcard,
html[data-skin="yeahbuddy"] .rbcard,
html[data-skin="yeahbuddy"] .stat,
html[data-skin="yeahbuddy"] .asave,
html[data-skin="yeahbuddy"] .adminrow,
html[data-skin="yeahbuddy"] .wkcard,
html[data-skin="yeahbuddy"] .reviewbar,
html[data-skin="yeahbuddy"] .invite,
html[data-skin="yeahbuddy"] dialog {
  background: linear-gradient(160deg, #1c1c1e, #111112); color: var(--text);
  border: 1px solid #3a2a2a; border-left: 6px solid #e10600; border-radius: 0; box-shadow: 4px 4px 0 #000;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
html[data-skin="yeahbuddy"] .ins,
html[data-skin="yeahbuddy"] .look,
html[data-skin="yeahbuddy"] .petpick,
html[data-skin="yeahbuddy"] .petview__stage,
html[data-skin="yeahbuddy"] .petcard,
html[data-skin="yeahbuddy"] .menuitem {
  background: #111112; color: var(--text); border: 1px solid #3a2a2a; border-left: 4px solid #ffc400; border-radius: 0; box-shadow: none;
}
html[data-skin="yeahbuddy"] .ins:hover, html[data-skin="yeahbuddy"] .rbcard:hover { background: #2a1b1b; border-color: #e10600; }
html[data-skin="yeahbuddy"] .look[aria-pressed="true"] { border-color: #ffc400; box-shadow: 0 0 10px rgb(255 196 0 / 0.5); }
html[data-skin="yeahbuddy"] .panel__head h2, html[data-skin="yeahbuddy"] dialog h2, html[data-skin="yeahbuddy"] .wn__head h2 { color: #ffc400; }
html[data-skin="yeahbuddy"] dialog { background: #111112; color: var(--text); border: 2px solid #e10600; border-radius: 0; box-shadow: 6px 6px 0 #000; }
html[data-skin="yeahbuddy"] dialog::backdrop { background: rgb(4 2 12 / 0.85); }

html[data-skin="yeahbuddy"] .sidebar { background: rgb(7 4 15 / 0.95); border-right: 1px solid #ffc400; box-shadow: 0 0 18px rgb(255 196 0 / 0.25); }
html[data-skin="yeahbuddy"] .brand { color: #fff; }
html[data-skin="yeahbuddy"] .brand__mark { background: #ffc400; border-radius: 0; }
html[data-skin="yeahbuddy"] .brand__mark svg { stroke: #0b0b0c; }
html[data-skin="yeahbuddy"] .nav a { color: #948a7a; font-family: var(--display); font-weight: 700; font-size: 1.1em; text-transform: uppercase; letter-spacing: 0.06em; }
html[data-skin="yeahbuddy"] .nav a:hover { color: #ffc400; background: rgb(225 6 0 / 0.08); }
html[data-skin="yeahbuddy"] .nav a[aria-current="page"] { color: #fff; background: rgb(225 6 0 / 0.25); box-shadow: inset 4px 0 0 #ffc400; }
html[data-skin="yeahbuddy"] .nav a[aria-current="page"] svg { color: #ffc400; }
html[data-skin="yeahbuddy"] .nav__label, html[data-skin="yeahbuddy"] .label { color: #948a7a; }
html[data-skin="yeahbuddy"] .usercard { background: #111112; border: 1px solid #3a2a2a; border-radius: 0; }
html[data-skin="yeahbuddy"] .topbar { background: #111112; border-bottom: 4px solid #e10600; }
html[data-skin="yeahbuddy"] .site-footer { color: #948a7a; border-top-color: #3a2a2a; }
html[data-skin="yeahbuddy"] .site-footer a, html[data-skin="yeahbuddy"] .text-button, html[data-skin="yeahbuddy"] a { color: #ffc400; }

html[data-skin="yeahbuddy"] .button, html[data-skin="yeahbuddy"] .icon-button, html[data-skin="yeahbuddy"] .chipbtn {
  background: #1c1c1e; color: #fff; border: 1px solid #e10600; border-radius: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; font-family: var(--display); font-size: 1.05em;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding-inline: 1.3rem;
}
html[data-skin="yeahbuddy"] .button:hover, html[data-skin="yeahbuddy"] .icon-button:hover, html[data-skin="yeahbuddy"] .chipbtn:hover { background: rgb(225 6 0 / 0.15); box-shadow: 0 0 12px rgb(225 6 0 / 0.5); }
html[data-skin="yeahbuddy"] .button--primary { background: #ffc400; color: #0b0b0c; border-color: #ffc400; }
html[data-skin="yeahbuddy"] .button--primary:hover { background: #ffd84d; box-shadow: 0 0 20px rgb(255 196 0 / 0.7); }
html[data-skin="yeahbuddy"] .seg, html[data-skin="yeahbuddy"] .wn__toggle { background: #0b0b0c; border: 1px solid #3a2a2a; border-radius: 0; }
html[data-skin="yeahbuddy"] .seg button, html[data-skin="yeahbuddy"] .wn__toggle button { color: #c9bfae; border-radius: 0; }
html[data-skin="yeahbuddy"] .seg button[aria-selected="true"], html[data-skin="yeahbuddy"] .wn__toggle button[aria-selected="true"] { background: #ffc400; color: #0b0b0c; }
html[data-skin="yeahbuddy"] input, html[data-skin="yeahbuddy"] select, html[data-skin="yeahbuddy"] textarea { background: #0b0b0c; color: var(--text); border: 1px solid #3a2a2a; border-radius: 0; }
html[data-skin="yeahbuddy"] input:focus, html[data-skin="yeahbuddy"] select:focus, html[data-skin="yeahbuddy"] textarea:focus { border-color: #ffc400; box-shadow: 0 0 0 2px rgb(255 196 0 / 0.4); outline: none; }

/* meters: neon bars */
html[data-skin="yeahbuddy"] .meter, html[data-skin="yeahbuddy"] .dn__bar, html[data-skin="yeahbuddy"] .ins__meter, html[data-skin="yeahbuddy"] .wbar { background: #241a1a; border: 1px solid #3a2a2a; border-radius: 0; }
html[data-skin="yeahbuddy"] .meter > span, html[data-skin="yeahbuddy"] .dn__bar i, html[data-skin="yeahbuddy"] .wbar span { border-radius: 0; }
html[data-skin="yeahbuddy"] .wbar span { background: linear-gradient(90deg, #e10600, #ffc400); }
html[data-skin="yeahbuddy"] .dn__track { stroke: #241a1a; }
html[data-skin="yeahbuddy"] .dn__fill { filter: none; }
html[data-skin="yeahbuddy"] .chip { background: #111112; border-color: #3a2a2a; color: #c9bfae; border-radius: 0; }
html[data-skin="yeahbuddy"] .chip--blue { color: #e10600; border-color: #e10600; }
html[data-skin="yeahbuddy"] .toast { background: #111112; border: 2px solid #ffc400; color: #fff; border-radius: 0; box-shadow: 4px 4px 0 #000; font-weight: 700; }
html[data-skin="yeahbuddy"] .landing { background: radial-gradient(90% 60% at 50% 0%, rgb(225 6 0 / 0.25), transparent 65%), #0b0b0c; }
html[data-skin="yeahbuddy"] .wcup__lvl { fill: #e10600; }
html[data-skin="yeahbuddy"] .wcup__glass { stroke: #ffc400; }
html[data-skin="yeahbuddy"] .wcup__bg { fill: rgb(225 6 0 / 0.08); }
@media (max-width: 56em) {
  html[data-skin="yeahbuddy"] .sidebar { background: #111112; border: 0; border-top: 1px solid #ffc400; }
}