/*
 * static/css/site-theme.css — OBIXConfig Doctor v5 Pro
 * Master design system — single source of truth
 * Design: Precision Dark — military-grade instrument panel
 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;900&family=Sarabun:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

:root {
  --bg:#050a0d; --bg2:#070f14; --surface:#0b1520; --surface2:#0f1c2a; --surface3:#142130;
  --glass:rgba(11,21,32,0.92);
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.04); --border-hi:rgba(16,196,122,0.25);
  --text:#d2e4ee; --text2:#8aabb8; --muted:#3d5566; --muted2:#5a7a8a;
  --green:#10c47a; --green-lite:#2dd896; --green-dim:rgba(16,196,122,0.10); --green-glow:0 0 20px rgba(16,196,122,0.30);
  --blue:#4a9eff; --blue-dim:rgba(74,158,255,0.10);
  --amber:#f59e0b; --amber-dim:rgba(245,158,11,0.10);
  --red:#f87171; --red-dim:rgba(248,113,113,0.10);
  --purple:#a78bfa; --purple-dim:rgba(167,139,250,0.10);
  --cyan:#22d3ee; --cyan-dim:rgba(34,211,238,0.10);
  --orange:#fb923c; --orange-dim:rgba(251,146,60,0.10);
  --font-body:'Sarabun',system-ui,sans-serif;
  --font-head:'Orbitron',monospace;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  --text-2xs:10px; --text-xs:11px; --text-sm:13px; --text-base:15px;
  --text-md:17px; --text-lg:20px; --text-xl:26px; --text-2xl:34px; --text-3xl:48px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:18px;
  --ease:cubic-bezier(0.4,0,0.2,1); --dur:200ms;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); font-size:var(--text-base);
  background:var(--bg); color:var(--text); line-height:1.6;
  min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img,svg { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; }
input,select,textarea { font-family:inherit; }

/* Subtle grid texture */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(16,196,122,0.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,196,122,0.018) 1px,transparent 1px);
  background-size:44px 44px;
}

/* Layout */
.page-wrap { position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 var(--sp-4) var(--sp-12); }
.page-wrap--wide { max-width:1280px; }
.page-wrap--narrow { max-width:760px; }

/* Top bar */
.v5-topbar {
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; gap:var(--sp-3);
  padding:0 var(--sp-5); height:54px;
  background:rgba(5,10,13,0.96); backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.v5-topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--green) 30%,var(--cyan) 60%,transparent);
  opacity:0.35;
}
.v5-topbar-logo { display:flex; align-items:center; gap:var(--sp-2); text-decoration:none; flex-shrink:0; }
.v5-topbar-logo img { height:26px; }
.v5-topbar-divider { width:1px; height:18px; background:var(--border); flex-shrink:0; }
.v5-topbar-crumb {
  font-family:var(--font-head); font-size:var(--text-2xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--green);
  padding:3px 10px; border:1px solid rgba(16,196,122,0.22); border-radius:100px;
  background:var(--green-dim);
}
.v5-topbar-right { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); }
.v5-topbar-back {
  display:flex; align-items:center; gap:6px; padding:6px 14px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:var(--text-sm); color:var(--text2); transition:all var(--dur) var(--ease);
}
.v5-topbar-back:hover { border-color:var(--border-hi); color:var(--text); background:var(--green-dim); }

/* Page hero */
.v5-hero { padding:var(--sp-10) 0 var(--sp-8); }
.v5-hero-eyebrow {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-head); font-size:var(--text-2xs); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--green);
  margin-bottom:var(--sp-3);
}
.v5-hero-eyebrow::before,.v5-hero-eyebrow::after { content:''; width:24px; height:1px; background:currentColor; opacity:.4; }
.v5-hero-title { font-family:var(--font-head); font-size:clamp(22px,4vw,38px); font-weight:900; line-height:1.1; color:var(--text); }
.v5-hero-title em { color:var(--green); font-style:normal; }
.v5-hero-sub { margin-top:var(--sp-3); font-size:var(--text-base); color:var(--text2); max-width:560px; line-height:1.7; }
.v5-hero-meta { display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-4); flex-wrap:wrap; }
.v5-hero-meta-item { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted2); display:flex; align-items:center; gap:6px; }
.v5-hero-meta-dot { width:4px; height:4px; border-radius:50%; background:var(--muted); }

/* Cards */
.v5-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.v5-card:hover { border-color:rgba(16,196,122,0.18); box-shadow:0 8px 32px rgba(0,0,0,0.4); }
.v5-card--accent { border-top:2px solid var(--green); }
.v5-card--blue   { border-top:2px solid var(--blue); }
.v5-card--amber  { border-top:2px solid var(--amber); }
.v5-card--red    { border-top:2px solid var(--red); }
.v5-card--purple { border-top:2px solid var(--purple); }
.v5-card-head {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border2);
  background:rgba(255,255,255,0.015);
}
.v5-card-head-icon {
  width:32px; height:32px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
  background:var(--green-dim); border:1px solid rgba(16,196,122,0.2);
}
.v5-card-title { font-family:var(--font-head); font-size:var(--text-sm); font-weight:700; letter-spacing:.06em; color:var(--text); }
.v5-card-sub { font-size:var(--text-xs); color:var(--muted2); margin-top:2px; }
.v5-card-body { padding:var(--sp-4); }

/* Stat tiles */
.v5-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-3); }
.v5-stat {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:var(--sp-4) var(--sp-4) var(--sp-3); position:relative; overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.v5-stat::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.v5-stat.g::before { background:var(--green); }
.v5-stat.b::before { background:var(--blue); }
.v5-stat.a::before { background:var(--amber); }
.v5-stat.r::before { background:var(--red); }
.v5-stat.p::before { background:var(--purple); }
.v5-stat-val { font-family:var(--font-head); font-size:28px; font-weight:900; line-height:1; margin-bottom:var(--sp-1); }
.v5-stat.g .v5-stat-val { color:var(--green); }
.v5-stat.b .v5-stat-val { color:var(--blue); }
.v5-stat.a .v5-stat-val { color:var(--amber); }
.v5-stat.r .v5-stat-val { color:var(--red); }
.v5-stat.p .v5-stat-val { color:var(--purple); }
.v5-stat-lbl { font-family:var(--font-head); font-size:var(--text-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); }

/* Pills */
.v5-pill {
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:100px; font-family:var(--font-head); font-size:var(--text-2xs);
  font-weight:700; letter-spacing:.08em; border:1px solid;
}
.v5-pill.g { color:var(--green);  border-color:rgba(16,196,122,0.3);  background:var(--green-dim); }
.v5-pill.b { color:var(--blue);   border-color:rgba(74,158,255,0.3);  background:var(--blue-dim); }
.v5-pill.a { color:var(--amber);  border-color:rgba(245,158,11,0.3);  background:var(--amber-dim); }
.v5-pill.r { color:var(--red);    border-color:rgba(248,113,113,0.3); background:var(--red-dim); }
.v5-pill.p { color:var(--purple); border-color:rgba(167,139,250,0.3); background:var(--purple-dim); }
.v5-pill.c { color:var(--cyan);   border-color:rgba(34,211,238,0.3);  background:var(--cyan-dim); }
.v5-pill.neu { color:var(--text2); border-color:var(--border); background:rgba(255,255,255,0.04); }
.v5-pill-dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.v5-pill-dot.pulse { animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Buttons */
.v5-btn {
  display:inline-flex; align-items:center; gap:var(--sp-2); padding:9px 20px;
  border-radius:var(--r); font-family:var(--font-head); font-size:var(--text-xs);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; border:1.5px solid;
  transition:all var(--dur) var(--ease); white-space:nowrap; cursor:pointer; text-decoration:none;
}
.v5-btn-primary { background:var(--green-dim); border-color:rgba(16,196,122,0.4); color:var(--green); }
.v5-btn-primary:hover { background:rgba(16,196,122,0.18); border-color:var(--green); box-shadow:var(--green-glow); transform:translateY(-1px); }
.v5-btn-secondary { background:transparent; border-color:var(--border); color:var(--text2); }
.v5-btn-secondary:hover { border-color:rgba(16,196,122,0.3); color:var(--text); background:var(--green-dim); }
.v5-btn-ghost { background:transparent; border-color:transparent; color:var(--text2); padding-left:var(--sp-2); padding-right:var(--sp-2); }
.v5-btn-ghost:hover { color:var(--green); }
.v5-btn-sm { padding:6px 14px; font-size:var(--text-2xs); }
.v5-btn-lg { padding:12px 28px; font-size:var(--text-sm); }

/* Section head */
.v5-section-head { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.v5-section-head-label { font-family:var(--font-head); font-size:var(--text-2xs); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted2); white-space:nowrap; }
.v5-section-head-line { flex:1; height:1px; background:var(--border2); }

/* Code block */
.v5-code {
  font-family:var(--font-mono); font-size:var(--text-sm); line-height:1.75; color:var(--text);
  background:rgba(0,0,0,0.3); border:1px solid var(--border); border-radius:var(--r);
  padding:var(--sp-4); white-space:pre-wrap; word-break:break-all; overflow-x:auto;
}
.v5-code .hl-key     { color:var(--green); }
.v5-code .hl-val     { color:var(--cyan); }
.v5-code .hl-comment { color:var(--muted2); font-style:italic; }
.v5-code .hl-section { color:var(--amber); font-weight:700; }

/* Alerts */
.v5-alert { display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--r); border:1px solid; font-size:var(--text-sm); line-height:1.65; }
.v5-alert-ico { font-size:16px; flex-shrink:0; margin-top:1px; }
.v5-alert.info    { background:var(--blue-dim);   border-color:rgba(74,158,255,0.25); }
.v5-alert.success { background:var(--green-dim);  border-color:rgba(16,196,122,0.25); }
.v5-alert.warning { background:var(--amber-dim);  border-color:rgba(245,158,11,0.25); }
.v5-alert.danger  { background:var(--red-dim);    border-color:rgba(248,113,113,0.25); }

/* Table */
.v5-table-wrap { overflow-x:auto; }
.v5-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.v5-table th { font-family:var(--font-head); font-size:var(--text-2xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; background:rgba(255,255,255,0.015); }
.v5-table td { padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--border2); vertical-align:middle; }
.v5-table tr:last-child td { border-bottom:none; }
.v5-table tr:hover td { background:rgba(255,255,255,0.02); }

/* Form elements */
.v5-label { display:block; font-family:var(--font-head); font-size:var(--text-2xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text2); margin-bottom:var(--sp-1); }
.v5-input { width:100%; padding:9px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); font-family:var(--font-mono); font-size:var(--text-sm); transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); outline:none; }
.v5-input:focus { border-color:rgba(16,196,122,0.45); box-shadow:0 0 0 3px rgba(16,196,122,0.08); }
.v5-select { width:100%; padding:9px 32px 9px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); font-family:var(--font-body); font-size:var(--text-sm); outline:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a7a8a'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; cursor:pointer; transition:border-color var(--dur) var(--ease); }
.v5-select:focus { border-color:rgba(16,196,122,0.45); outline:none; }

/* Progress bars */
.v5-bar { height:6px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.v5-bar-fill { height:100%; border-radius:3px; transition:width 0.8s var(--ease); }
.v5-bar.g .v5-bar-fill { background:var(--green); }
.v5-bar.b .v5-bar-fill { background:var(--blue); }
.v5-bar.a .v5-bar-fill { background:var(--amber); }
.v5-bar.r .v5-bar-fill { background:var(--red); }

/* Empty state */
.v5-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--sp-12) var(--sp-8); text-align:center; gap:var(--sp-3); }
.v5-empty-icon { font-size:48px; animation:floatIcon 4s ease-in-out infinite; }
@keyframes floatIcon { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.v5-empty-title { font-family:var(--font-head); font-size:var(--text-lg); font-weight:700; color:var(--text2); }
.v5-empty-sub { font-size:var(--text-sm); color:var(--muted2); max-width:320px; line-height:1.7; }

/* Toast */
.v5-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px); background:rgba(16,196,122,0.12); border:1px solid rgba(16,196,122,0.3); color:var(--green); font-family:var(--font-head); font-size:var(--text-xs); letter-spacing:.1em; padding:9px 20px; border-radius:100px; backdrop-filter:blur(12px); z-index:9999; opacity:0; pointer-events:none; transition:all 0.3s var(--ease); }
.v5-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Scrollbars */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(16,196,122,0.25); }
* { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent; }

/* Utilities */
.v5-mono { font-family:var(--font-mono); }
.v5-head { font-family:var(--font-head); }
.v5-green  { color:var(--green); }
.v5-blue   { color:var(--blue); }
.v5-amber  { color:var(--amber); }
.v5-red    { color:var(--red); }
.v5-purple { color:var(--purple); }
.v5-muted  { color:var(--muted2); }
.v5-flex   { display:flex; align-items:center; gap:var(--sp-3); }
.v5-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.v5-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.v5-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
@media(max-width:700px){.v5-grid-2,.v5-grid-3,.v5-grid-4{grid-template-columns:1fr}}
.v5-divider { height:1px; background:var(--border2); margin:var(--sp-5) 0; }
.v5-spacer-sm { height:var(--sp-4); }
.v5-spacer    { height:var(--sp-6); }
.v5-spacer-lg { height:var(--sp-10); }

/* Page load animation */
@keyframes v5FadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.v5-fade-in   { animation:v5FadeUp 0.4s var(--ease) both; }
.v5-fade-in-1 { animation:v5FadeUp 0.4s var(--ease) 0.05s both; }
.v5-fade-in-2 { animation:v5FadeUp 0.4s var(--ease) 0.10s both; }
.v5-fade-in-3 { animation:v5FadeUp 0.4s var(--ease) 0.15s both; }
.v5-fade-in-4 { animation:v5FadeUp 0.4s var(--ease) 0.20s both; }

/* Responsive */
@media(max-width:900px){
  .v5-topbar{padding:0 var(--sp-4)}
  .page-wrap{padding:0 var(--sp-3) var(--sp-8)}
  .v5-hero{padding:var(--sp-8) 0 var(--sp-6)}
}
@media(max-width:600px){
  .v5-topbar-crumb{display:none}
  .v5-hero-title{font-size:22px}
  .v5-stats{grid-template-columns:1fr 1fr}
}