/* ===== Base Theme & Resets ===== */
:root{
  --bg: #070a13;               /* page background below the fold */
  --bg-top: radial-gradient(1200px 400px at 50% -160px, rgba(96,142,255,.20), rgba(96,142,255,0) 70%),
           radial-gradient(900px 360px at 15% -120px, rgba(150,64,200,.18), rgba(150,64,200,0) 70%),
           linear-gradient(180deg, #0b1322 0%, #0a1320 10%, #0a111b 20%, #0a111a 28%, #0a1018 48%, #0a0f16 60%, #0a0f15 72%, #090f15 84%, #090e14 100%);
  --panel: linear-gradient(180deg, rgba(12,18,28,.96), rgba(7,10,19,.96));
  --panel-border: rgba(255,255,255,.12);
  --border: rgba(255,255,255,.18);
  --ink: #cfe3ff;
  --muted: rgba(207,227,255,.72);
  --shadow: rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; padding:0; background:#000; }
body{
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    var(--bg-top),             /* gradient “sky” only near top */
    linear-gradient(#000,#000);/* solid black everywhere else */
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 560px, 100% 100%;
}

/* Cards, inputs, buttons (shared look) */
.card{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  box-shadow: 0 20px 60px var(--shadow);
  padding: 14px;
}

input,textarea,select,button{
  font: inherit;
  color: var(--ink);
}
input,textarea,select{
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
}
input::placeholder, textarea::placeholder{ color: var(--muted); }

button{
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
button:hover{ background: rgba(255,255,255,.08); }
button.cta{
  background: linear-gradient(135deg, #62b0ff, #7a63ff);
  color: #0a0f16;
  border: none;
  box-shadow: 0 8px 24px rgba(98,176,255,.25);
}
button.tiny{
  padding: 8px 14px;
  border-radius: 999px;
}

/* Layout helpers */
.wrap{ max-width: 1220px; margin: 0 auto; padding: 16px; }
.page-h2{ margin: 6px 0 12px; font-size: 28px; font-weight: 800; letter-spacing:.02em; }
.muted{ color: var(--muted); }

/* Terminal bits */
.terminal{ padding: 0; }
.term-header{ display:flex; align-items:center; gap:10px; padding: 12px 14px; border-bottom:1px solid var(--border); }
.term-header .dots span{ display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); margin-right:6px; }
.term-header .title{ font-weight:700; color:var(--ink); opacity:.9; }
.term-body{ display:flex; align-items:center; gap:10px; padding: 12px 14px; }
.term-body .prompt{ opacity:.9; }
#term-input{ flex:1; }
.term-suggestions{ padding: 0 14px 12px; color:var(--muted); font-size: 13px; opacity:.95; }
.term-help{ display:flex; align-items:center; justify-content:space-between; padding: 0 14px 12px; }

/* Terminal config panel */
.terminal-config{ margin-top: 12px; }
.terminal-config.collapsed{ display: block; } /* allow JS to control with [hidden] */

/* Code grid inside config */
.code-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-top: 8px;
}
.code-grid label{
  display:flex; flex-direction:column; gap:6px;
}
.code-grid input{
  width:100%;
}

/* Toast */
.toast{
  position: fixed; bottom: 16px; right: 16px;
  background: rgba(10,15,24,.9);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 10px 28px var(--shadow);
  display: none;
  z-index: 9999;
}

/* Nav/header bits */
header{
  position: relative;          /* NEW: ensure header is above main content */
  z-index: 40;                 /* NEW: so buttons aren’t covered by any card/panel */
}
header .nav{
  display:flex; align-items:center; justify-content:space-between;
}
/* Back button must always be clickable */
.back{
  pointer-events: auto;        /* NEW */
  cursor: pointer;             /* NEW */
  user-select: none;           /* NEW */
}
.back.hidden{ display:none; }

/* Status bar */
.status-bar{
  border-top:1px solid var(--border);
  background: rgba(10,15,24,.8);
  padding: 8px 16px;
}

/* Forms */
.stack{ display:flex; flex-direction:column; gap:6px; }

/* Small screens */
@media (max-width: 720px){
  .wrap{ padding: 12px; }
  .code-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Access-codes panel — compact action buttons
   ========================================================= */

/* Keep the top-right 'Hide' pill compact */
#terminal-config .config-head #hide-config.tiny{
  padding: 6px 12px !important;
  font-size: 14px;
  line-height: 1.1;
  border-radius: 999px;
  min-width: auto !important;
}

/* Make Save/Reset the same compact size as Hide */
#terminal-config .code-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
#terminal-config .code-actions .tiny{
  padding: 6px 12px !important;
  font-size: 14px;
  line-height: 1.1;
  border-radius: 999px;
  min-width: auto !important;   /* override any global tiny min-width */
}
#terminal-config .code-actions .tiny:hover{
  background: rgba(255,255,255,.08);
}

/* =========================================================
   FIXES for terminal input & config toggle layering
   ========================================================= */
#term-input{
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.terminal .term-body{
  position: relative;
  pointer-events: auto;
}
#toggle-config{
  position: relative;
  z-index: 3;
}
#terminal-config{
  position: relative;
  z-index: 2;
}