/* Central theme: One Click's dark grey + neon red, with a stronger red accent and Inter everywhere.
   Every page links this file; page-specific CSS goes in the page. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap");

:root {
  --bg: #161618; --panel: #1f1f22; --raised: #26262a; --field: #2a2a2e; --line: rgba(255, 255, 255, .07);
  --text: #f5f5f7; --muted: #a1a1a6; --faint: #6e6e73;
  --neon: #ff2d55; --neon-deep: #d70f3c; --neon-soft: rgba(255, 45, 85, .14); --neon-line: rgba(255, 45, 85, .3);
  --glow: 0 0 0 1px rgba(255, 45, 85, .5), 0 0 18px rgba(255, 45, 85, .35);
  --green: #30d158; --amber: #ffd60a; --red: #ff453a; --blue: #64d2ff;
  --radius: 14px;
  /* Inter for Latin + numbers; Thai glyphs fall back to IBM Plex Sans Thai. No monospace anywhere. */
  --font: "Inter", "IBM Plex Sans Thai", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0; color: var(--text); font: 14px/1.55 var(--font);
  background: radial-gradient(1200px 500px at 50% -200px, rgba(255, 45, 85, .14), transparent 70%), var(--bg);
  background-attachment: fixed; text-shadow: 0 0 10px rgba(255, 255, 255, .18);
}
main { max-width: 1200px; margin: 0 auto; padding: 32px 20px 72px; }
@media (max-width: 600px) { main { padding: 20px 16px 56px; } }

header { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 45, 85, .35); box-shadow: 0 12px 24px -16px rgba(255, 45, 85, .4); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 22px rgba(255, 45, 85, .35); }
h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.02em; color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .35), 0 0 28px rgba(255, 45, 85, .35); }
.tagline { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--neon); text-shadow: 0 0 10px rgba(255, 45, 85, .6); }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 14px; display: flex; gap: 8px; align-items: center; }
h2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon), 0 0 16px var(--neon); }
h3 { font-size: 12px; margin: 22px 0 8px; color: var(--neon); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; text-shadow: none; }

.panel { background: var(--panel); border: 1px solid var(--neon-line); border-left: 3px solid var(--neon); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; box-shadow: 0 0 28px rgba(255, 45, 85, .12), 0 12px 32px rgba(0, 0, 0, .25); transition: border-color .2s, box-shadow .2s; }
.panel:hover { border-color: rgba(255, 45, 85, .55); box-shadow: 0 0 32px rgba(255, 45, 85, .18), 0 12px 32px rgba(0, 0, 0, .25); }

.badge { display: inline-flex; align-items: center; gap: 6px; background: var(--raised); border: 1px solid rgba(255, 45, 85, .22); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--muted); white-space: nowrap; text-shadow: none; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.badge.on::before { background: var(--green); box-shadow: 0 0 6px var(--green); }
.badge.warn::before { background: var(--amber); }
.badge.bad::before { background: var(--red); box-shadow: 0 0 6px var(--red); }

button { border: 1px solid rgba(255, 45, 85, .28); border-radius: 10px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; background: var(--raised); color: var(--text); transition: background .15s, box-shadow .15s, border-color .15s; text-shadow: none; }
button:hover { background: #313136; border-color: var(--neon); box-shadow: 0 0 14px rgba(255, 45, 85, .3); }
button.primary { border-color: transparent; background: linear-gradient(180deg, #ff4468, var(--neon-deep)); color: #fff; box-shadow: 0 0 20px rgba(255, 45, 85, .45); }
button.small { padding: 6px 12px; font-size: 12px; border-radius: 8px; }

input, select, textarea { width: 100%; background: var(--field); color: var(--text); border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; font: inherit; color-scheme: dark; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon-soft); }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; text-shadow: none; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: rgba(255, 45, 85, .85); font-weight: 600; font-size: 12px; border-bottom-color: rgba(255, 45, 85, .25); text-shadow: none; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

.muted { color: var(--muted); font-size: 12px; text-shadow: none; }
.ok { color: var(--green); } .warn { color: var(--amber); } .bad { color: var(--red); }
::selection { background: rgba(255, 45, 85, .35); }