/* ============================================================
   CTRL Mental — Design System
   Interface système classifiée UNITÉ L7
   ============================================================ */

/* === VARIABLES === */
:root {
  --bg:         #050508;
  --surface:    #0a0a0f;
  --surface2:   #0f0f18;
  --border:     #1a1a2e;
  --border2:    #252540;
  --accent:     #00d4ff;
  --accent-dim: #007a99;
  --red:        #ff0033;
  --red-dim:    #880022;
  --text:       #e0e0f0;
  --text2:      #666688;
  --text3:      #2d2d4a;
  --green:      #00ff88;
  --yellow:     #ffcc00;
  --purple:     #aa66ff;
  --orange:     #ff8800;
  --font:       'Inter', system-ui, -apple-system, sans-serif;
  --mono:       'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; scroll-behavior: smooth; }

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font);
  min-height:  100vh;
  display:     flex;
  overflow-x:  hidden;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ============================================================
   LAYOUT
   ============================================================ */

.layout { display: flex; min-height: 100vh; width: 100%; }

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
  width:          240px;
  min-height:     100vh;
  background:     var(--surface);
  border-right:   1px solid var(--border);
  display:        flex;
  flex-direction: column;
  position:       fixed;
  top:            0;
  left:           0;
  bottom:         0;
  z-index:        100;
  overflow-y:     auto;
}

.sidebar-logo {
  padding:       20px 16px;
  border-bottom: 1px solid var(--border);
  display:       flex;
  flex-direction: column;
  gap:           4px;
}

.logo-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.logo-dot {
  width:         8px;
  height:        8px;
  background:    var(--red);
  border-radius: 50%;
  animation:     pulse-red 2s ease-in-out infinite;
  flex-shrink:   0;
}

@keyframes pulse-red {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--red); }
  50%       { opacity: 0.3; box-shadow: none; }
}

.logo-text {
  font-family:    var(--mono);
  font-size:      14px;
  font-weight:    700;
  color:          var(--text);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.logo-sub {
  font-size:      9px;
  color:          var(--text2);
  letter-spacing: 3px;
  font-family:    var(--mono);
  text-transform: uppercase;
  margin-left:    18px;
}

.sidebar-stats {
  padding:        12px 16px;
  border-bottom:  1px solid var(--border);
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.stat-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.stat-label {
  font-size:      9px;
  color:          var(--text2);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family:    var(--mono);
}

.stat-value {
  font-size:   12px;
  font-family: var(--mono);
  color:       var(--accent);
  font-weight: 700;
}

.stat-value.arc {
  color:     var(--yellow);
  font-size: 10px;
  max-width: 120px;
  overflow:  hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.sidebar-nav { flex: 1; padding: 8px 0; }

.nav-section {
  padding:        10px 16px 4px;
  font-size:      9px;
  color:          var(--text3);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family:    var(--mono);
}

.nav-item {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         9px 16px;
  color:           var(--text2);
  text-decoration: none;
  font-size:       11px;
  font-family:     var(--mono);
  transition:      all 0.12s;
  border-left:     2px solid transparent;
  letter-spacing:  0.5px;
}

.nav-item:hover {
  color:            var(--text);
  background:       var(--surface2);
  border-left-color: var(--border2);
  text-decoration:  none;
}

.nav-item.active {
  color:            var(--accent);
  background:       rgba(0, 212, 255, 0.05);
  border-left-color: var(--accent);
}

.nav-icon { width: 16px; text-align: center; font-style: normal; opacity: 0.8; }

.sidebar-footer {
  padding:    12px 16px;
  border-top: 1px solid var(--border);
}

.sidebar-version {
  font-size:      9px;
  font-family:    var(--mono);
  color:          var(--text3);
  margin-bottom:  8px;
  letter-spacing: 1px;
}

.btn-logout {
  display:         block;
  text-align:      center;
  padding:         7px;
  background:      transparent;
  border:          1px solid var(--border);
  color:           var(--text2);
  font-size:       9px;
  font-family:     var(--mono);
  text-decoration: none;
  letter-spacing:  2px;
  text-transform:  uppercase;
  cursor:          pointer;
  transition:      all 0.12s;
  width:           100%;
}

.btn-logout:hover {
  border-color:    var(--red);
  color:           var(--red);
  text-decoration: none;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content {
  margin-left:    240px;
  flex:           1;
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}

.page-header {
  padding:       20px 28px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}

.page-header-left {}

.page-title {
  font-size:      16px;
  font-weight:    700;
  color:          var(--text);
  font-family:    var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.page-subtitle {
  font-size:   10px;
  color:       var(--text2);
  margin-top:  3px;
  font-family: var(--mono);
}

.page-body { padding: 0 28px 40px; }

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  padding:       20px;
  margin-bottom: 16px;
}

.card-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   16px;
  padding-bottom:  12px;
  border-bottom:   1px solid var(--border);
}

.card-title {
  font-size:      10px;
  font-family:    var(--mono);
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--text2);
}

.card-body {}

/* ============================================================
   STAT CARDS
   ============================================================ */

.stat-card {
  background: var(--surface);
  border:     1px solid var(--border);
  padding:    16px 20px;
}

.stat-card-label {
  font-size:      9px;
  font-family:    var(--mono);
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--text2);
  margin-bottom:  6px;
}

.stat-card-value {
  font-size:   32px;
  font-family: var(--mono);
  font-weight: 700;
  color:       var(--accent);
  line-height: 1;
}

.stat-card-sub {
  font-size:  10px;
  color:      var(--text2);
  font-family: var(--mono);
  margin-top: 4px;
}

/* ============================================================
   GRID
   ============================================================ */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr;             gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr;         gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr);      gap: 16px; }

/* ============================================================
   FORMS
   ============================================================ */

.form-group { margin-bottom: 14px; }

.form-label {
  display:        block;
  font-size:      10px;
  font-family:    var(--mono);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--text2);
  margin-bottom:  6px;
}

.form-input,
.form-select,
.form-textarea {
  width:       100%;
  background:  var(--bg);
  border:      1px solid var(--border);
  color:       var(--text);
  font-family: var(--mono);
  font-size:   13px;
  padding:     8px 12px;
  outline:     none;
  transition:  border-color 0.12s;
  appearance:  none;
  -webkit-appearance: none;
  border-radius: 0;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--accent); }

.form-input::placeholder,
.form-textarea::placeholder { color: var(--text3); }

.form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.form-select {
  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='%23666688'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 12px center;
  padding-right:       32px;
  cursor:              pointer;
}

.form-hint {
  font-size:  10px;
  color:      var(--text2);
  margin-top: 4px;
  font-family: var(--mono);
}

.form-row { display: grid; gap: 12px; }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* === Range input === */
input[type="range"] {
  width:        100%;
  accent-color: var(--accent);
  cursor:       pointer;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         8px 16px;
  font-family:     var(--mono);
  font-size:       11px;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  1px;
  cursor:          pointer;
  border:          1px solid;
  text-decoration: none;
  transition:      all 0.12s;
  white-space:     nowrap;
  background:      transparent;
  border-radius:   0;
}

.btn-primary { border-color: var(--accent); color: var(--accent); }
.btn-primary:hover { background: var(--accent); color: var(--bg); text-decoration: none; }

.btn-danger { border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); color: var(--bg); text-decoration: none; }

.btn-ghost { border-color: var(--border); color: var(--text2); }
.btn-ghost:hover { border-color: var(--border2); color: var(--text); text-decoration: none; }

.btn-success { border-color: var(--green); color: var(--green); }
.btn-success:hover { background: var(--green); color: var(--bg); text-decoration: none; }

.btn-warning { border-color: var(--yellow); color: var(--yellow); }
.btn-warning:hover { background: var(--yellow); color: var(--bg); text-decoration: none; }

.btn-sm { padding: 5px 10px; font-size: 9px; }
.btn-lg { padding: 12px 28px; font-size: 13px; }
.btn:disabled, .btn[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ============================================================
   TABLES
   ============================================================ */

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }

thead tr { border-bottom: 1px solid var(--border); }

th {
  text-align:     left;
  padding:        10px 12px;
  font-size:      9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--text2);
  font-weight:    700;
  white-space:    nowrap;
}

td {
  padding:        10px 12px;
  border-bottom:  1px solid var(--border);
  vertical-align: middle;
}

tbody tr:hover { background: var(--surface2); }
tbody tr:last-child td { border-bottom: none; }

.td-actions { display: flex; gap: 6px; align-items: center; }

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  display:        inline-block;
  padding:        2px 8px;
  font-size:      9px;
  font-family:    var(--mono);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border:         1px solid;
  white-space:    nowrap;
}

/* Statuts */
.badge-script   { border-color: var(--text2);  color: var(--text2); }
.badge-voix     { border-color: var(--yellow);  color: var(--yellow); }
.badge-images   { border-color: var(--purple);  color: var(--purple); }
.badge-montage  { border-color: var(--orange);  color: var(--orange); }
.badge-publie   { border-color: var(--green);   color: var(--green); }
.badge-archive  { border-color: var(--text3);   color: var(--text3); }

/* Types */
.badge-signal    { border-color: var(--accent);  color: var(--accent); }
.badge-appel     { border-color: var(--red);     color: var(--red); }
.badge-protocole { border-color: var(--yellow);  color: var(--yellow); }
.badge-operateur { border-color: var(--purple);  color: var(--purple); }
.badge-anomalie  { border-color: var(--orange);  color: var(--orange); }
.badge-eveil     { border-color: var(--green);   color: var(--green); }
.badge-document  { border-color: var(--text2);   color: var(--text2); }

/* Lore catégories */
.badge-personnage { border-color: #ff88aa; color: #ff88aa; }
.badge-lieu       { border-color: #88aaff; color: #88aaff; }
.badge-objet      { border-color: var(--yellow); color: var(--yellow); }
.badge-phrase     { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   ALERTS
   ============================================================ */

.alert {
  padding:       12px 16px;
  border:        1px solid;
  font-size:     12px;
  font-family:   var(--mono);
  margin-bottom: 16px;
  line-height:   1.5;
}

.alert-error   { border-color: var(--red);    color: var(--red);    background: rgba(255,0,51,0.05); }
.alert-success { border-color: var(--green);  color: var(--green);  background: rgba(0,255,136,0.05); }
.alert-info    { border-color: var(--accent); color: var(--accent); background: rgba(0,212,255,0.05); }
.alert-warning { border-color: var(--yellow); color: var(--yellow); background: rgba(255,204,0,0.05); }

/* ============================================================
   CODE BLOCKS
   ============================================================ */

.code-block {
  background:   var(--bg);
  border:       1px solid var(--border);
  padding:      16px;
  font-family:  var(--mono);
  font-size:    11px;
  color:        var(--text);
  overflow-x:   auto;
  white-space:  pre-wrap;
  word-break:   break-word;
  line-height:  1.7;
  max-height:   400px;
  overflow-y:   auto;
}

/* ============================================================
   SCORE BAR
   ============================================================ */

.score-bar { display: flex; align-items: center; gap: 8px; }

.score-track { flex: 1; height: 3px; background: var(--border); }

.score-fill { height: 100%; background: var(--accent); transition: width 0.4s ease; }

.score-value { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 700; min-width: 36px; text-align: right; }

/* ============================================================
   TABS
   ============================================================ */

.tabs {
  display:       flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  gap:           0;
  overflow-x:    auto;
}

.tab-btn {
  padding:        10px 18px;
  background:     none;
  border:         none;
  color:          var(--text2);
  font-family:    var(--mono);
  font-size:      10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor:         pointer;
  border-bottom:  2px solid transparent;
  transition:     all 0.12s;
  white-space:    nowrap;
}

.tab-btn:hover { color: var(--text); }

.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ============================================================
   LOADER
   ============================================================ */

.loader {
  display:       inline-block;
  width:         18px;
  height:        18px;
  border:        2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation:     spin 0.7s linear infinite;
  flex-shrink:   0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(5, 5, 8, 0.92);
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  z-index:         1000;
}

.loading-overlay.visible { display: flex; }

.loading-spinner {
  width:         36px;
  height:        36px;
  border:        2px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation:     spin 0.8s linear infinite;
}

.loading-text {
  font-family:    var(--mono);
  font-size:      11px;
  color:          var(--accent);
  margin-top:     16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation:      blink 1.5s step-end infinite;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ============================================================
   MODAL
   ============================================================ */

.modal-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(5,5,8,0.88);
  z-index:         500;
  align-items:     center;
  justify-content: center;
  padding:         20px;
}

.modal-overlay.open { display: flex; }

.modal {
  background:  var(--surface);
  border:      1px solid var(--border);
  padding:     24px;
  width:       100%;
  max-width:   600px;
  max-height:  90vh;
  overflow-y:  auto;
}

.modal-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   20px;
  padding-bottom:  12px;
  border-bottom:   1px solid var(--border);
}

.modal-title {
  font-size:      12px;
  font-family:    var(--mono);
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--accent);
}

.modal-close {
  background:  none;
  border:      none;
  color:       var(--text2);
  cursor:      pointer;
  font-size:   18px;
  line-height: 1;
  padding:     0;
  transition:  color 0.12s;
}

.modal-close:hover { color: var(--red); }

/* ============================================================
   PRODUCTION PAGE
   ============================================================ */

.gen-panel { display: none; }
.gen-panel.visible { display: block; }

.prompt-card {
  background:    var(--bg);
  border:        1px solid var(--border);
  padding:       12px 14px;
  margin-bottom: 8px;
  position:      relative;
}

.prompt-card-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   8px;
}

.prompt-id {
  font-size:      9px;
  font-family:    var(--mono);
  color:          var(--accent);
  letter-spacing: 1px;
  font-weight:    700;
}

.prompt-desc { font-size: 11px; color: var(--text2); margin-bottom: 8px; }

.prompt-text {
  font-family:  var(--mono);
  font-size:    11px;
  color:        var(--text);
  background:   transparent;
  border:       none;
  width:        100%;
  resize:       none;
  outline:      none;
  min-height:   52px;
  line-height:  1.6;
}

.copy-btn {
  font-size:      9px;
  font-family:    var(--mono);
  padding:        3px 8px;
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--text2);
  cursor:         pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition:     all 0.12s;
  white-space:    nowrap;
}

.copy-btn:hover    { border-color: var(--accent); color: var(--accent); }
.copy-btn.copied   { border-color: var(--green);  color: var(--green); }

.section-divider {
  border:        none;
  border-top:    1px solid var(--border);
  margin:        20px 0;
}

/* Audio section */
.audio-section { background: var(--bg); border: 1px solid var(--border); padding: 20px; margin-top: 12px; }

.audio-player { width: 100%; margin-top: 10px; }

audio { width: 100%; accent-color: var(--accent); }

/* ============================================================
   LORE PAGE
   ============================================================ */

.lore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.lore-card {
  background:    var(--bg);
  border:        1px solid var(--border);
  padding:       14px;
  transition:    border-color 0.12s;
}

.lore-card:hover { border-color: var(--border2); }

.lore-card-name { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--mono); margin-bottom: 4px; }
.lore-card-desc { font-size: 11px; color: var(--text2); line-height: 1.5; margin-bottom: 8px; }

.lore-card-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding-top:     8px;
  border-top:      1px solid var(--border);
}

.lore-inactive { opacity: 0.4; }

/* Arc progress */
.arc-card { background: var(--bg); border: 1px solid var(--border); padding: 16px; margin-bottom: 10px; }
.arc-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.arc-name { font-size: 13px; font-weight: 700; font-family: var(--mono); color: var(--text); }
.arc-desc { font-size: 11px; color: var(--text2); margin-bottom: 10px; }
.arc-progress { height: 3px; background: var(--border); }
.arc-progress-fill { height: 100%; background: var(--yellow); transition: width 0.4s; }
.arc-meta { font-size: 10px; color: var(--text2); font-family: var(--mono); margin-top: 6px; }

/* ============================================================
   VOIX PAGE
   ============================================================ */

.voice-card {
  background: var(--bg);
  border:     1px solid var(--border);
  padding:    16px;
  margin-bottom: 10px;
  transition: border-color 0.12s;
}

.voice-card:hover { border-color: var(--border2); }

.voice-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.voice-name { font-size: 13px; font-weight: 700; font-family: var(--mono); color: var(--text); }
.voice-id-display { font-size: 10px; font-family: var(--mono); color: var(--accent); background: rgba(0,212,255,0.08); padding: 2px 8px; border: 1px solid rgba(0,212,255,0.2); }
.voice-id-empty { font-size: 10px; font-family: var(--mono); color: var(--text3); }

.stars { color: var(--yellow); font-size: 12px; letter-spacing: 1px; }

/* ============================================================
   ANALYTICS PAGE
   ============================================================ */

.chart-wrap { background: var(--bg); border: 1px solid var(--border); padding: 16px; margin-bottom: 16px; }
.chart-title { font-size: 10px; font-family: var(--mono); color: var(--text2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }

.bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; }

.bar {
  flex:        1;
  background:  rgba(0,212,255,0.3);
  min-height:  2px;
  transition:  background 0.12s;
  position:    relative;
  cursor:      pointer;
}

.bar:hover { background: var(--accent); }

.bar-tooltip {
  display:    none;
  position:   absolute;
  bottom:     calc(100% + 6px);
  left:       50%;
  transform:  translateX(-50%);
  background: var(--surface);
  border:     1px solid var(--border);
  padding:    4px 8px;
  font-size:  10px;
  font-family: var(--mono);
  color:      var(--text);
  white-space: nowrap;
  z-index:    10;
}

.bar:hover .bar-tooltip { display: block; }

/* ============================================================
   SETTINGS PAGE
   ============================================================ */

.settings-section { margin-bottom: 24px; }

.settings-section-title {
  font-size:      10px;
  font-family:    var(--mono);
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--accent);
  padding-bottom: 10px;
  border-bottom:  1px solid var(--border);
  margin-bottom:  16px;
}

.api-test-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.api-status {
  font-size:   10px;
  font-family: var(--mono);
  padding:     4px 10px;
  border:      1px solid var(--border);
  color:       var(--text2);
  min-width:   80px;
  text-align:  center;
}

.api-status.ok  { border-color: var(--green);  color: var(--green); }
.api-status.err { border-color: var(--red);    color: var(--red); }

/* ============================================================
   LOGS PAGE
   ============================================================ */

.log-row-info    td { color: var(--text); }
.log-row-error   td { color: var(--red); }
.log-row-warning td { color: var(--yellow); }
.log-row-api     td { color: var(--accent); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-page {
  min-height:      100vh;
  background:      var(--bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.login-box {
  width:      360px;
  background: var(--surface);
  border:     1px solid var(--border);
  padding:    36px;
}

.login-logo {
  text-align:    center;
  margin-bottom: 28px;
}

.login-logo-dot {
  width:         10px;
  height:        10px;
  background:    var(--red);
  border-radius: 50%;
  display:       inline-block;
  margin-right:  8px;
  animation:     pulse-red 2s ease-in-out infinite;
}

.login-title {
  font-family:    var(--mono);
  font-size:      18px;
  font-weight:    700;
  letter-spacing: 4px;
  color:          var(--text);
}

.login-sub {
  display:        block;
  font-size:      10px;
  color:          var(--text2);
  letter-spacing: 3px;
  font-family:    var(--mono);
  margin-top:     6px;
}

.login-warning {
  text-align:    center;
  font-size:     10px;
  font-family:   var(--mono);
  color:         var(--red);
  letter-spacing: 1px;
  margin-bottom: 24px;
  padding:       8px;
  border:        1px solid rgba(255,0,51,0.3);
  background:    rgba(255,0,51,0.05);
}

/* ============================================================
   UTILITIES
   ============================================================ */

.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-1           { gap: 4px; }
.gap-2           { gap: 8px; }
.gap-3           { gap: 12px; }
.gap-4           { gap: 16px; }
.gap-6           { gap: 24px; }
.mt-2            { margin-top: 8px; }
.mt-3            { margin-top: 12px; }
.mt-4            { margin-top: 16px; }
.mt-6            { margin-top: 24px; }
.mb-1            { margin-bottom: 4px; }
.mb-2            { margin-bottom: 8px; }
.mb-3            { margin-bottom: 12px; }
.mb-4            { margin-bottom: 16px; }
.w-full          { width: 100%; }
.text-accent     { color: var(--accent); }
.text-red        { color: var(--red); }
.text-muted      { color: var(--text2); }
.text-green      { color: var(--green); }
.text-yellow     { color: var(--yellow); }
.mono            { font-family: var(--mono); }
.text-xs         { font-size: 10px; }
.text-sm         { font-size: 12px; }
.text-right      { text-align: right; }
.text-center     { text-align: center; }
.truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden          { display: none; }

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
  display:     flex;
  gap:         4px;
  align-items: center;
  margin-top:  16px;
  font-family: var(--mono);
  font-size:   11px;
}

.page-link {
  padding:         5px 10px;
  border:          1px solid var(--border);
  color:           var(--text2);
  text-decoration: none;
  transition:      all 0.12s;
}

.page-link:hover    { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.page-link.current  { border-color: var(--accent); color: var(--accent); }
.page-link.disabled { opacity: 0.3; pointer-events: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .sidebar       { width: 200px; }
  .main-content  { margin-left: 200px; }
  .grid-4        { grid-template-columns: 1fr 1fr; }
  .lore-grid     { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sidebar      { width: 0; overflow: hidden; }
  .main-content { margin-left: 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .page-header  { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-body    { padding: 0 16px 28px; }
}