/* Local VT323 self-host */
@font-face{
  font-family: 'VT323';
  src: url('/assets/fonts/vt323.woff2') format('woff2'),
       url('/assets/fonts/vt323.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Force VT323 everywhere */
html, body{
  font-family: "VT323","MS Sans Serif",Tahoma,Geneva,Verdana,sans-serif !important;
}

/* === Mono Dark Theme (COMPACT + CRISP) === */
:root{
  /* palette (your darker set) */
  --bg:        #152238;
  --panel:     #192841;
  --panel-hi:  #1c2e4a;
  --text:      #e6eef8;
  --muted:     #9aaac1;
  --accent:    #23395d;
  --border:    #203354;
  --shadow:    #00000080;

  /* type */
  --fs-base: 16.5px;   /* was 18 */
  --fs-small: 13.5px;  /* was 15 */
  --line: 1.45;       /* was 1.7 */

  /* spacing (back down) */
  --pad-sm: 12px;    /* was 14 */
  --pad-md: 12px;    /* was 16 */
  --pad-lg: 14px;    /* was 20 */
  --gap: 10px;       /* was 16 */

  /* widths */
  --card-min: 280px; /* was 300 */
}

/* Base */
*{ box-sizing:border-box }
html, body{
  margin:0; padding:0; height:100%;
  font-size: var(--fs-base);
  line-height: var(--line);
  /* Try antialiased first; VT323 looks cleaner on most screens */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;
  background: radial-gradient(1400px 900px at 20% 10%, #23395d 0%, #192841 50%, #152238 100%);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

/* Optional: if you want “harder” pixel edges, flip these two lines on: */
/* html, body{ -webkit-font-smoothing:none; text-rendering: optimizeSpeed; } */

/* Window */
.win98-window{
  background: var(--panel);
  border: 2px solid var(--border);
  box-shadow: 0 0 0 1px #000, 6px 6px 0 var(--shadow);
  border-radius: 4px;
}

/* Titlebar */
.win98-titlebar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; /* tighter */
  background: linear-gradient(#203354, #192841);
  color:#e9f1ff;
  border-bottom: 1px solid #0e1728;
}
.win98-titlebar .title{ font-weight:700; font-size: 1.1em }

.win98-btns{ display:flex; gap:8px }
.win98-btn{
  width:22px; height:22px; display:grid; place-items:center;
  background:#0f1727; border:1px solid #22354f; border-radius:3px;
  color:#b9c6d8; cursor:pointer; line-height:1; font-weight:700;
}
.win98-btn:hover{ background:#121c31 }

/* Body */
.win98-body{ padding: var(--pad-lg); }

/* Inputs / Selects */
.input, .select{
  width:100%;
  padding:12px 14px;
  border-radius:4px;
  border:1px solid var(--border);
  background:#111a2d;
  color:var(--text);
  outline:none;
  font-size:1rem;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.input:focus, .select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35,57,93,0.35);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 16px; border-radius:4px;
  border:1px solid var(--border);
  background:#111a2d;
  color: var(--text);
  cursor:pointer; font-size:1rem; font-weight:700;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.btn:hover{ background:var(--panel-hi) }
.btn.primary{
  background: var(--accent);
  border-color: #1c2e4a;
  color: #e6eef8;
}
.btn.primary:hover{ background:#203354 }

/* Tabs */
.nav{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--gap) }
.nav .tab{
  padding:10px 14px; border:1px solid var(--border);
  background:#111a2d; border-radius:4px; cursor:pointer; font-weight:700;
  font-family:"VT323","MS Sans Serif",Tahoma,Geneva,Verdana,sans-serif !important;
}
.nav .tab:hover{ background:#16233b }
.nav .tab.active{ background:#1a2a46; border-color:#23395d }
.nav .tab, .btn { letter-spacing: 0.01em; font-weight: 700; }

/* Cards / grid */
.grid{ display:grid; gap: var(--gap) }
.grid.cards{ grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)) }

.card{
  background:#17243b;
  border:1px solid var(--border);
  border-radius:6px;
  padding: var(--pad-md);
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-1px); background:#1b2a45; border-color:#284066 }

/* Small text */
.small{ font-size: var(--fs-small); color:var(--muted) }

/* Key-value rows */
.kv{ display:flex; align-items:center; gap:10px; color:var(--muted) }
.kv .k{ min-width:130px; color:#c4cfdf }

/* Table */
.table{
  width:100%; border-collapse:collapse; border:1px solid var(--border);
  font-size:1rem;
}
.table th{
  background:#1b2a45; color:#e9f1ff; border-bottom:1px solid var(--border);
  text-align:left;
}
.table td{ background:#14233a; color:var(--text) }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--border) }

/* Center + containers */
.center{ display:grid; place-items:center; min-height:100vh; padding:16px }
.max-420{ max-width:520px; width:100% }
.max-1080{ max-width:1200px; width:100%; margin:0 auto }

/* Enforce VT323 on interactives */
.nav .tab, .btn, .input, .select, label, .table th, .table td{
  font-family:"VT323","MS Sans Serif",Tahoma,Geneva,Verdana,sans-serif !important;
}

/* Make anchor tabs look identical to div tabs */
.nav a.tab{
  display:inline-block;
  color: var(--text);
  text-decoration: none;
}

.nav a.tab:link,
.nav a.tab:visited,
.nav a.tab:hover,
.nav a.tab:active{
  color: var(--text);
  text-decoration: none;
}

/* (Optional) ensure base tab also sets color explicitly */
.nav .tab{
  color: var(--text);
}

/* Active state stays consistent */
.nav .tab.active{
  background:#1a2a46;
  border-color:#23395d;
}

/* Toggle: HARD aliasing (optional) */
/*
html.hardtext, body.hardtext{
  -webkit-font-smoothing:none !important;
  -moz-osx-font-smoothing:auto !important;
  text-rendering: optimizeSpeed !important;
  letter-spacing: 0 !important;
}
*/