/* Tema Shenergy Fit Studio — mengikuti design system Shenergy (tokens.json):
   pink-500 #FF1495, lime-500 #D7FC00, black-900 #0A0A0A; Gloock (judul) + Montserrat (isi);
   tanpa gradasi; tombol pill; lime hanya untuk aksi utama; teks di atas pink/lime selalu hitam.
   Dimuat SETELAH app.css; menimpa variabel, font, dan komponen. */
@import url("https://fonts.googleapis.com/css2?family=Gloock&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  --pink-500: #FF1495; --pink-400: #FF4DAE; --lime-500: #D7FC00; --lime-600: #B9D900;
  --black-900: #0A0A0A; --black-800: #161616; --black-700: #2A2A2A;
  --ink: #FFFFFF; --ink-muted: #C9C9C9; --border-strong: #8A8A8A;
  --radius-lg: 28px; --radius-pill: 999px; --glow-lime: 0 0 0 4px rgba(215,252,0,.25);
  /* pemetaan ke variabel app.css */
  --pink: var(--pink-500); --pink-deep: var(--pink-400); --pink-soft: #2a0a1c;
  --teal: var(--lime-500); --teal-deep: var(--lime-600); --teal-soft: #22280a;
  --black: var(--black-900); --muted: var(--ink-muted); --line: var(--black-700);
  --surface: var(--black-800); --surface-2: var(--black-900);
  --grad-brand: var(--lime-500); --grad-pink: var(--pink-500);
  --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Gloock", Georgia, "Times New Roman", serif;
}
body { background: var(--black-900); color: var(--ink); font-family: var(--font-body); }

/* ---------- header (Navbar) */
.top { background: var(--black-900); border-bottom: 1px solid var(--black-700); box-shadow: none; gap: 10px; }
.avatar { border: 2px solid var(--lime-500); background: var(--black-800); }
.status-dot { background: var(--lime-500); border-color: var(--black-900); }
.name { font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: -.01em; white-space: nowrap; }
.sub { color: var(--lime-500); opacity: 1; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.logo { display: none; }
.wordmark { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; margin-right: 2px; }
.wordmark .wm { font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em; }
.wordmark .wm b { color: var(--pink-500); font-weight: 400; } .wordmark .wm i { color: var(--lime-500); font-style: normal; }
.wordmark small { font-size: 7px; font-weight: 600; letter-spacing: .5em; text-transform: uppercase; color: #fff; margin-top: 3px; }
.icon-btn { background: transparent; border: 2px solid var(--border-strong); color: var(--ink); border-radius: var(--radius-pill); width: 40px; height: 40px; }

/* ---------- pesan */
.msg.bot { background: var(--black-800); color: var(--ink); border: 1px solid var(--black-700); border-radius: 20px 20px 20px 6px; box-shadow: none; }
.msg.bot b { color: #fff; }
.msg.bot a { color: var(--pink-500); }
.msg.bot code { background: var(--black-900); color: var(--lime-500); }
.msg.me { background: var(--pink-500); color: var(--black-900); border-radius: 20px 20px 6px 20px; box-shadow: none; font-weight: 500; }
.msg.sys { color: var(--ink-muted); }
.tool { color: var(--lime-500); }
.tool::before { background: var(--lime-500); }

/* ---------- chip (Badge outline) & composer */
.chip { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-weight: 600; letter-spacing: .02em; min-height: 40px; }
.chip:active { background: var(--pink-500); color: var(--black-900); border-color: var(--pink-500); }
.composer { background: var(--black-900); border-top: 1px solid var(--black-700); backdrop-filter: none; }
textarea { background: var(--black-800); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 24px; box-shadow: none; }
textarea::placeholder { color: #8A8A8A; }
textarea:focus { border-color: var(--lime-500); box-shadow: none; outline: 2px solid var(--lime-500); outline-offset: 2px; }
#send { background: var(--lime-500); color: var(--black-900); border: 0; border-radius: var(--radius-pill); box-shadow: none; }
#send:hover { background: var(--lime-600); }

/* ---------- modal & kartu (surface-raised, radius-lg) */
.gate { background: rgba(10,10,10,.78); backdrop-filter: none; }
.card { background: var(--black-800); color: var(--ink); border: 1px solid var(--black-700); border-radius: var(--radius-lg); box-shadow: none; font-family: var(--font-body); }
.card .eyebrow { margin: 0 0 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--lime-500); }
.card h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 34px; text-transform: none; letter-spacing: -.01em; }
.card h2 em { font-style: normal; color: var(--pink-500); }
.card h2::first-letter { color: inherit; }
.card p { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.card-avatar { display: none; }
.card input { background: var(--black-900); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 8px; font-family: var(--font-body); }
.card input:focus { outline: 2px solid var(--lime-500); outline-offset: 2px; border-color: var(--lime-500); }
.card button { background: var(--lime-500); color: var(--black-900); border-radius: var(--radius-pill); text-transform: none; letter-spacing: .02em; font: 600 15px var(--font-body); min-height: 48px; box-shadow: none; }
.card button:hover { background: var(--lime-600); }
.icon-btn.dark { background: transparent; border-color: var(--border-strong); color: var(--ink); }
.pick-label { color: var(--lime-500); letter-spacing: .28em; font-size: 12px; }

/* ---------- CoachCard */
.tcard { background: var(--black-900); border: 2px solid var(--black-900); border-radius: var(--radius-lg); }
.tcard img { border: 4px solid var(--lime-500); }
.tcard .tn { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 30px; }
.tcard .ts { color: var(--lime-500); letter-spacing: .24em; font-size: 11px; }
.tcard .tq { font-family: var(--font-display); color: var(--pink-500); font-size: 17px; line-height: 24px; font-weight: 400; }
.tcard .td { color: var(--ink-muted); }
.tcard .ai { background: var(--black-800); color: var(--ink-muted); border: 1px solid var(--black-700); }
.tcard.on { border-color: var(--pink-500); background: var(--black-900); box-shadow: var(--glow-lime); }
.tcard .tick { border-color: var(--border-strong); }
.tcard.on .tick { background: var(--pink-500); border-color: var(--pink-500); color: var(--black-900); }

/* ---------- panel progres */
.stat { background: var(--black-900); border-color: var(--black-700); }
.stat .v.down { color: var(--lime-500); } .stat .v.up { color: var(--pink-500); }
.chart { background: var(--black-900); }
.chart .lbl { fill: var(--ink-muted); } .chart .val { fill: #fff; }
.hist td { border-bottom-color: var(--black-700); }
.sheet-card h4 { color: var(--lime-500); letter-spacing: .24em; }
.sheet-head h2 { font-family: var(--font-display); font-weight: 400; }

.card-foot { background: var(--black-800); border-top-color: var(--black-700); }
@media (orientation: landscape) and (max-height: 520px) { .tcard .tn { font-size: 17px; line-height: 20px; } .tcard .tq { font-size: 13px; line-height: 17px; } }

.btn-paket { background: var(--lime-500); color: var(--black-900) !important; }
.kuota .k { color: var(--lime-500); }