/* ==========================================================================
   AUTOCHAT PIXEL OS v2.6 — 8-BIT RETRO ARCADE & PIXEL ART UI SYSTEM
   - Font chữ Pixel 100% hỗ trợ đầy đủ dấu Tiếng Việt & Tiếng Anh (Tiny5, VT323, Handjet)
   - Cửa sổ hệ điều hành 8-bit vuông vức (border-radius: 0), viền 3px, đổ bóng cứng 5px
   - Hỗ trợ chuyển đổi ngôn ngữ tức thì [VI / EN] & 3 bảng màu Pixel (Arcade / Cyber / GameBoy)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Handjet:wght@400;500;600;700;800&family=Tiny5&family=VT323&display=swap');

:root,
html[data-theme="arcade"],
html[data-theme="paper"] {
  --bg: #E8E4D5;
  --bg2: #D8D2BE;
  --grid-dot: #C9C2AC;
  --card: #FFFDF5;
  --card-h: #FFF8DC;
  --surface-sub: #F2EFE4;
  --win-bar: #181425;
  --win-bar-txt: #FFFDF5;
  --txt: #181425;
  --mut: #4B465C;
  --dim: #7A748E;
  --pri: #FF004D;
  --pri-h: #D90040;
  --ink: #181425;
  --ink-txt: #FFFDF5;
  --coin: #FFEC27;
  --acc: #FFA300;
  --ok: #00A83E;
  --ok-bg: #D6F8E3;
  --warn: #D96B00;
  --warn-bg: #FFF0C2;
  --err: #E5122E;
  --err-bg: #FFD6DC;
  --info: #1D6AE5;
  --info-bg: #D6E8FF;
  --line: #181425;
  --line2: #181425;
  --line-strong: #181425;
  --shadow-col: #181425;
  --r: 0px;
  --r-lg: 0px;
  --border-w: 3px;
  --sh: 5px 5px 0px var(--shadow-col);
  --sh-card: 5px 5px 0px var(--shadow-col);
  --sh-btn: 4px 4px 0px var(--shadow-col);
  --font: 'Handjet', 'VT323', monospace;
  --font-8bit: 'Tiny5', 'VT323', monospace;
  --mono: 'VT323', 'Handjet', monospace;
}

/* Bảng màu 2: Cyber Night Arcade (Đêm điện tử 8-Bit PICO-8) */
html[data-theme="cyber"],
html[data-theme="carbon"] {
  --bg: #121324;
  --bg2: #1B1D36;
  --grid-dot: #25284A;
  --card: #1F223D;
  --card-h: #282C4E;
  --surface-sub: #16182E;
  --win-bar: #FF004D;
  --win-bar-txt: #FFFDF5;
  --txt: #FFFDF5;
  --mut: #B8BCE0;
  --dim: #7C81AD;
  --pri: #FF004D;
  --pri-h: #FF3370;
  --ink: #00E436;
  --ink-txt: #121324;
  --coin: #FFEC27;
  --acc: #FFA300;
  --ok: #00E436;
  --ok-bg: rgba(0, 228, 54, 0.18);
  --warn: #FFEC27;
  --warn-bg: rgba(255, 236, 39, 0.18);
  --err: #FF004D;
  --err-bg: rgba(255, 0, 77, 0.22);
  --info: #29ADFF;
  --info-bg: rgba(41, 173, 255, 0.2);
  --line: #FFFDF5;
  --line2: #83769C;
  --line-strong: #FFFDF5;
  --shadow-col: #05050B;
}

/* Bảng màu 3: GameBoy Mint (Máy cầm tay cổ điển) */
html[data-theme="gameboy"],
html[data-theme="brutal"] {
  --bg: #C4CFA1;
  --bg2: #B2BF8B;
  --grid-dot: #9EAD75;
  --card: #E6F0C9;
  --card-h: #EFF7D7;
  --surface-sub: #D6E2B5;
  --win-bar: #0F380F;
  --win-bar-txt: #E6F0C9;
  --txt: #0F380F;
  --mut: #306230;
  --dim: #4E7A4E;
  --pri: #D92B4B;
  --pri-h: #B51E3B;
  --ink: #0F380F;
  --ink-txt: #E6F0C9;
  --coin: #F2C94C;
  --acc: #D96B00;
  --ok: #1E6F2B;
  --ok-bg: #BBE3C0;
  --warn: #8B5700;
  --warn-bg: #F5E0A3;
  --err: #B51E3B;
  --err-bg: #F7C6CF;
  --info: #1B5299;
  --info-bg: #C5DCF5;
  --line: #0F380F;
  --line2: #0F380F;
  --line-strong: #0F380F;
  --shadow-col: #0F380F;
}

* {
  box-sizing: border-box;
  border-radius: 0px !important;
  image-rendering: pixelated;
}
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--grid-dot) 2px, transparent 2px);
  background-size: 16px 16px;
  color: var(--txt);
  font-family: var(--font);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

h1, h2, h3, .pixel-title {
  font-family: var(--font-8bit);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.22;
}

a { color: inherit; }
button, input, select, textarea {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  color: inherit;
  letter-spacing: 0.02em;
}
code, pre {
  font-family: var(--mono);
  font-size: 18px;
}
svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
  shape-rendering: crispEdges;
}
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg2); border-left: 3px solid var(--line); }
::-webkit-scrollbar-thumb { background: var(--pri); border: 2px solid var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--acc); }

.hide { display: none !important; }
.muted { color: var(--mut); }
.aurora-bg, .orb, .grid-mask { display: none !important; }

/* ==========================================================================
   1. NÚT BẤM ĐIỆN TỬ THÙNG 8-BIT (PIXEL ARCADE BUTTONS)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border: 3px solid var(--line-strong);
  background: var(--ink);
  color: var(--ink-txt);
  font-family: var(--font-8bit);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 4px 4px 0px var(--shadow-col);
  transition: transform 0.06s steps(2), box-shadow 0.06s steps(2), background-color 0.08s;
  position: relative;
}
.btn:hover:not(:disabled) {
  background: var(--pri);
  color: #FFFFFF;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--shadow-col);
}
.btn:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0px var(--shadow-col);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; shape-rendering: crispEdges; }

.btn.pri-red {
  background: var(--pri);
  color: #FFFFFF;
}
.btn.pri-red:hover:not(:disabled) {
  background: var(--coin);
  color: #181425;
}

.btn.ghost {
  background: var(--card);
  color: var(--txt);
  border: 3px solid var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.btn.ghost:hover:not(:disabled) {
  background: var(--coin);
  color: #181425;
}

.btn.ok {
  background: var(--ok);
  color: #FFFFFF;
}
.btn.danger {
  background: var(--err-bg);
  color: var(--err);
  border: 3px solid var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.btn.danger:hover:not(:disabled) {
  background: var(--err);
  color: #FFFFFF;
}
.btn.sm { padding: 6px 12px; font-size: 14px; box-shadow: 3px 3px 0px var(--shadow-col); }
.btn.lg { padding: 12px 24px; font-size: 18px; box-shadow: 5px 5px 0px var(--shadow-col); }
.btn.link { background: none; border: none; color: var(--pri); padding: 4px 6px; box-shadow: none; }

/* Bộ chuyển đổi Ngôn ngữ [VI / EN] & Bảng màu Pixel */
.pixel-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.theme-switch, .lang-switch {
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 3px solid var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
  padding: 2px;
  gap: 2px;
}
.theme-btn, .lang-btn {
  border: 2px solid transparent;
  background: transparent;
  color: var(--mut);
  font-family: var(--font-8bit);
  font-size: 13px;
  padding: 4px 9px;
  cursor: pointer;
  text-transform: uppercase;
}
.theme-btn:hover, .lang-btn:hover {
  color: var(--txt);
  background: var(--bg2);
}
.theme-btn.on, .lang-btn.on {
  background: var(--pri);
  color: #FFFFFF;
  border-color: var(--line-strong);
}

/* ==========================================================================
   2. CỬA SỔ PIXEL OS (CARDS, WINDOWS, INPUTS, BADGES)
   ========================================================================== */
.card {
  background: var(--card);
  border: 3px solid var(--line-strong);
  padding: 20px;
  box-shadow: var(--sh-card);
  position: relative;
}
/* Thanh tiêu đề cửa sổ 8-bit */
.card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -20px -20px 18px -20px;
  padding: 10px 16px;
  background: var(--win-bar);
  color: var(--win-bar-txt);
  border-bottom: 3px solid var(--line-strong);
  flex-wrap: wrap;
}
.card-h h3 {
  margin: 0;
  font-family: var(--font-8bit);
  font-size: 16px;
  color: var(--win-bar-txt);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-h h3::before {
  content: '■';
  color: var(--coin);
  font-size: 14px;
}

.sub-surface {
  background: var(--surface-sub);
  border: 3px solid var(--line-strong);
  padding: 16px;
  box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.08);
}

.input, .select, .textarea {
  width: 100%;
  background: var(--card);
  border: 3px solid var(--line-strong);
  color: var(--txt);
  padding: 9px 12px;
  outline: none;
  box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.1);
  font-size: 19px;
}
.input::placeholder, .textarea::placeholder { color: var(--dim); }
.input:focus, .select:focus, .textarea:focus {
  background: var(--card-h);
  border-color: var(--pri);
}
.textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-family: var(--font-8bit);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--txt);
  margin-bottom: 6px;
}
.hint { font-size: 17px; color: var(--mut); margin-top: 6px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-family: var(--font-8bit);
  font-size: 12.5px;
  text-transform: uppercase;
  border: 2px solid var(--line-strong);
  box-shadow: 2px 2px 0px var(--shadow-col);
}
.b-ok { background: #00E436; color: #181425; }
.b-warn { background: #FFEC27; color: #181425; }
.b-err { background: #FF004D; color: #FFFFFF; }
.b-vio { background: var(--bg2); color: var(--txt); }
.b-info { background: #29ADFF; color: #181425; }

/* Logo Thương hiệu Pixel 8-bit */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-8bit);
  font-size: 20px;
  text-decoration: none;
  color: var(--txt);
  text-transform: uppercase;
}
.logo-mark {
  width: 36px;
  height: 36px;
  background: var(--pri);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  border: 3px solid var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.logo-mark svg { width: 20px; height: 20px; }
.logo-badge {
  font-family: var(--font-8bit);
  font-size: 12px;
  padding: 2px 6px;
  background: var(--coin);
  color: #181425;
  border: 2px solid var(--line-strong);
  box-shadow: 2px 2px 0px var(--shadow-col);
}

/* Thanh máu / Streak 8-bit (Pixel Progress Bar) */
.pixel-hp-bar {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: #181425;
  border: 2px solid var(--line-strong);
}
.pixel-hp-bar i {
  width: 10px;
  height: 14px;
  background: #00E436;
  display: block;
}
.pixel-hp-bar i.off { background: #3A3A50; }

/* ==========================================================================
   3. TRANG CHỦ PIXEL ARCADE OS (LANDING PAGE)
   ========================================================================== */
.studio-shell {
  max-width: 1320px;
  margin: 18px auto;
  border: 4px solid var(--line-strong);
  background: var(--bg);
  box-shadow: 8px 8px 0px var(--shadow-col);
}

.studio-DiagnosticBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-bottom: 4px solid var(--line-strong);
  background: var(--win-bar);
  color: var(--win-bar-txt);
  font-family: var(--font-8bit);
  font-size: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.studio-DiagnosticBar .status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #00E436;
  border: 2px solid #FFFFFF;
  margin-right: 8px;
}

.studio-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--card);
  border-bottom: 4px solid var(--line-strong);
  gap: 16px;
  flex-wrap: wrap;
}
.studio-nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
}
.studio-nav-links a {
  text-decoration: none;
  font-family: var(--font-8bit);
  font-size: 14px;
  color: var(--txt);
  padding: 6px 10px;
  border: 2px solid transparent;
}
.studio-nav-links a span {
  color: var(--pri);
  margin-right: 4px;
}
.studio-nav-links a:hover {
  background: var(--coin);
  color: #181425;
  border-color: var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.studio-nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.studio-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  border-bottom: 4px solid var(--line-strong);
}
.studio-hero-left {
  padding: 40px 36px;
  border-right: 4px solid var(--line-strong);
  background: var(--card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.studio-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-8bit);
  font-size: 14px;
  padding: 5px 12px;
  background: var(--coin);
  color: #181425;
  border: 3px solid var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
  margin-bottom: 18px;
  width: fit-content;
}
.studio-hero h1 {
  font-family: var(--font-8bit);
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.18;
  margin: 0 0 18px;
  color: var(--txt);
  text-shadow: 3px 3px 0px rgba(255, 0, 77, 0.22);
}
.studio-hero h1 em {
  font-style: normal;
  background: var(--pri);
  color: #FFFFFF;
  padding: 2px 10px;
  display: inline-block;
  border: 3px solid var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.studio-hero-lead {
  font-size: 21px;
  line-height: 1.45;
  color: var(--mut);
  margin: 0 0 24px;
  max-width: 560px;
}
.studio-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.studio-spec-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 3px dashed var(--line-strong);
  padding-top: 18px;
  gap: 14px;
}
.studio-spec-item {
  background: var(--surface-sub);
  border: 2px solid var(--line-strong);
  padding: 10px 12px;
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.studio-spec-item small {
  display: block;
  font-family: var(--font-8bit);
  font-size: 11.5px;
  color: var(--pri);
  margin-bottom: 4px;
}
.studio-spec-item b {
  font-family: var(--font-8bit);
  font-size: 15px;
}

.studio-hero-right {
  padding: 32px;
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.workbench-frame {
  background: var(--card);
  border: 4px solid var(--line-strong);
  box-shadow: 6px 6px 0px var(--shadow-col);
}
.workbench-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--win-bar);
  color: var(--win-bar-txt);
  font-family: var(--font-8bit);
  font-size: 13px;
  border-bottom: 3px solid var(--line-strong);
}
.workbench-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 3px solid var(--line-strong);
  background: var(--surface-sub);
}
.wb-tab {
  padding: 10px 8px;
  border: none;
  border-right: 3px solid var(--line-strong);
  background: transparent;
  font-family: var(--font-8bit);
  font-size: 13px;
  color: var(--mut);
  cursor: pointer;
  text-align: center;
}
.wb-tab:last-child { border-right: none; }
.wb-tab.on {
  background: var(--coin);
  color: #181425;
}
.workbench-body { padding: 18px; }

.sim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 3px solid var(--line-strong);
  margin-bottom: 10px;
  background: var(--surface-sub);
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.sim-log {
  margin-top: 14px;
  padding: 12px;
  background: #181425;
  color: #00E436;
  border: 3px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1.45;
}

.studio-section-head {
  display: grid;
  grid-template-columns: 270px 1fr;
  border-bottom: 4px solid var(--line-strong);
}
.studio-sec-index {
  padding: 28px 24px;
  border-right: 4px solid var(--line-strong);
  font-family: var(--font-8bit);
  font-size: 14px;
  color: var(--txt);
  background: var(--coin);
  color: #181425;
}
.studio-sec-title {
  padding: 28px 36px;
  background: var(--card);
}
.studio-sec-title h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.6vw, 32px);
}
.studio-sec-title p {
  margin: 0;
  color: var(--mut);
  font-size: 20px;
}

.studio-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 4px solid var(--line-strong);
}
.matrix-cell {
  padding: 28px;
  border-right: 3px solid var(--line-strong);
  border-bottom: 3px solid var(--line-strong);
  background: var(--card);
}
.matrix-cell:nth-child(3n) { border-right: none; }
.matrix-cell:nth-last-child(-n+3) { border-bottom: none; }
.matrix-cell:hover { background: var(--card-h); }
.matrix-num {
  display: inline-block;
  font-family: var(--font-8bit);
  font-size: 13px;
  padding: 4px 10px;
  background: var(--pri);
  color: #FFFFFF;
  border: 2px solid var(--line-strong);
  box-shadow: 2px 2px 0px var(--shadow-col);
  margin-bottom: 14px;
}
.matrix-cell h3 {
  font-size: 19px;
  margin: 0 0 10px;
}
.matrix-cell p {
  margin: 0 0 14px;
  color: var(--mut);
  font-size: 19px;
}
.matrix-meta {
  font-family: var(--font-8bit);
  font-size: 13px;
  color: var(--ok);
}

.studio-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 4px solid var(--line-strong);
}
.step-col {
  padding: 30px;
  border-right: 3px solid var(--line-strong);
  background: var(--surface-sub);
}
.step-col:last-child { border-right: none; }
.step-badge {
  font-family: var(--font-8bit);
  font-size: 13px;
  color: #181425;
  background: #00E436;
  border: 2px solid var(--line-strong);
  box-shadow: 2px 2px 0px var(--shadow-col);
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 14px;
}
.step-col h3 { margin: 0 0 8px; font-size: 19px; }
.step-col p { margin: 0; color: var(--mut); font-size: 19px; }

.studio-split-sec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 4px solid var(--line-strong);
}
.studio-split-left {
  padding: 34px;
  border-right: 4px solid var(--line-strong);
  background: var(--card);
}
.studio-split-right {
  padding: 34px;
  background: var(--bg2);
}
.code-terminal {
  background: #181425;
  color: #00E436;
  padding: 18px;
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: auto;
  border: 3px solid var(--line-strong);
  box-shadow: 4px 4px 0px var(--shadow-col);
}

.faq-list { border-bottom: 4px solid var(--line-strong); }
.faq-row {
  border-bottom: 3px solid var(--line-strong);
  background: var(--card);
}
.faq-row:last-child { border-bottom: none; }
.faq-row summary {
  padding: 18px 30px;
  font-family: var(--font-8bit);
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after {
  content: '[+]';
  font-family: var(--font-8bit);
  color: var(--pri);
}
.faq-row[open] summary::after { content: '[-]'; }
.faq-row p {
  margin: 0;
  padding: 0 30px 20px;
  color: var(--mut);
  font-size: 19px;
}

.studio-footer {
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--win-bar);
  color: var(--win-bar-txt);
  font-family: var(--font-8bit);
  font-size: 14px;
}

/* ==========================================================================
   4. TRANG ĐĂNG NHẬP / ĐĂNG KÝ PIXEL (AUTH)
   ========================================================================== */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--bg);
}
.auth-side {
  padding: 42px 48px;
  border-right: 4px solid var(--line-strong);
  background: var(--surface-sub);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth-side h2 {
  font-size: clamp(28px, 3vw, 40px);
  margin: 14px 0 16px;
}
.auth-side h2 em {
  font-style: normal;
  background: var(--pri);
  color: #FFFFFF;
  padding: 2px 8px;
  border: 3px solid var(--line-strong);
}
.auth-side ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 12px;
}
.auth-side li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  background: var(--card);
  border: 3px solid var(--line-strong);
  box-shadow: 4px 4px 0px var(--shadow-col);
}
.auth-side li i {
  width: 28px;
  height: 28px;
  background: var(--coin);
  color: #181425;
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-style: normal;
  font-family: var(--font-8bit);
  font-size: 13px;
  flex-shrink: 0;
}
.auth-main {
  display: grid;
  place-items: center;
  padding: 32px 20px;
}
.auth-box {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 4px solid var(--line-strong);
  padding: 30px 26px;
  box-shadow: 7px 7px 0px var(--shadow-col);
}
.auth-box h1 { margin: 0 0 6px; font-size: 24px; }
.auth-box .sub { color: var(--mut); margin: 0 0 20px; font-size: 18px; }
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg2);
  padding: 4px;
  margin-bottom: 18px;
  border: 3px solid var(--line-strong);
}
.tabs button {
  padding: 8px;
  border: none;
  background: none;
  color: var(--mut);
  font-family: var(--font-8bit);
  font-size: 14px;
  cursor: pointer;
}
.tabs button.on {
  background: var(--pri);
  color: #FFFFFF;
}
.pw-wrap { position: relative; }
.pw-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--mut);
  cursor: pointer;
  padding: 6px;
}
.pw-meter { height: 8px; background: var(--bg2); border: 2px solid var(--line-strong); margin-top: 8px; }
.pw-meter i { display: block; height: 100%; width: 0; }
.err-box {
  background: var(--err-bg);
  border: 3px solid var(--err);
  color: var(--err);
  padding: 10px 12px;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* ==========================================================================
   5. BẢNG ĐIỀU KHIỂN PIXEL OS (/app/*)
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: 274px 1fr;
  min-height: 100vh;
}
.side {
  background: var(--card);
  border-right: 4px solid var(--line-strong);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.side .logo {
  padding: 6px 8px 16px;
  border-bottom: 3px solid var(--line-strong);
  margin-bottom: 6px;
}
.nav-i {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--txt);
  text-decoration: none;
  font-family: var(--font-8bit);
  font-size: 14px;
  cursor: pointer;
  border: 3px solid transparent;
}
.nav-i svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-i:hover {
  background: var(--coin);
  color: #181425;
  border-color: var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.nav-i.on {
  color: #FFFFFF;
  background: var(--pri);
  border-color: var(--line-strong);
  box-shadow: 4px 4px 0px var(--shadow-col);
}
.side-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 3px solid var(--line-strong);
  display: grid;
  gap: 10px;
}
.me {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--surface-sub);
  border: 3px solid var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.me .av {
  width: 36px;
  height: 36px;
  background: var(--pri);
  color: #FFFFFF;
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-family: var(--font-8bit);
  font-size: 16px;
  flex-shrink: 0;
}
.me b { display: block; font-family: var(--font-8bit); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me small { color: var(--mut); font-size: 15px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 4px solid var(--line-strong);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 20;
}
.burger {
  background: var(--coin);
  border: 3px solid var(--line-strong);
  color: #181425;
  padding: 6px 10px;
  font-family: var(--font-8bit);
  cursor: pointer;
  box-shadow: 2px 2px 0px var(--shadow-col);
}
.view { padding: 26px 32px; max-width: 1360px; width: 100%; margin: 0 auto; }
.page-h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: var(--card);
  border: 3px solid var(--line-strong);
  box-shadow: var(--sh-card);
  flex-wrap: wrap;
}
.page-h h1 { margin: 0; font-size: 24px; }
.page-h p { margin: 4px 0 0; color: var(--mut); font-size: 18px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
.stat {
  background: var(--card);
  border: 3px solid var(--line-strong);
  padding: 16px 18px;
  box-shadow: var(--sh-card);
}
.stat small {
  color: var(--mut);
  font-family: var(--font-8bit);
  font-size: 12.5px;
  text-transform: uppercase;
}
.stat b { display: block; font-family: var(--font-8bit); font-size: 30px; margin-top: 6px; }
.stat.v b { color: var(--txt); }
.stat.g b { color: var(--ok); }
.stat.w b { color: var(--acc); }
.stat.p b { color: var(--pri); }

.chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  align-items: end;
  height: 136px;
  padding: 18px 8px 4px;
}
.chart .bar { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.chart .bar i {
  display: block;
  width: 100%;
  max-width: 40px;
  background: var(--pri);
  border: 2px solid var(--line-strong);
  box-shadow: 2px 2px 0px var(--shadow-col);
  min-height: 6px;
}
.chart .bar:hover i { background: #00E436; }
.chart .bar .bv { font-size: 14px; font-family: var(--font-8bit); color: var(--txt); }
.chart .bar small { font-size: 13px; font-family: var(--font-8bit); color: var(--mut); }

.two-col { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; }
.check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border: 3px solid var(--line-strong);
  margin-bottom: 12px;
  background: var(--surface-sub);
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.check .n {
  width: 30px;
  height: 30px;
  background: var(--coin);
  border: 2px solid var(--line-strong);
  color: #181425;
  display: grid;
  place-items: center;
  font-family: var(--font-8bit);
  font-size: 14px;
  flex-shrink: 0;
}
.check.done .n { background: #00E436; color: #181425; }
.check h4 { margin: 0 0 2px; font-family: var(--font-8bit); font-size: 15px; }
.check p { margin: 0; color: var(--mut); font-size: 17px; }
.check .btn { margin-left: auto; align-self: center; }

.avatar { width: 46px; height: 46px; object-fit: cover; background: var(--bg2); border: 3px solid var(--line-strong); box-shadow: 2px 2px 0px var(--shadow-col); flex-shrink: 0; }

/* Chat & Hội thoại 8-bit (/app/messages) */
.msg-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  height: calc(100vh - 155px);
  min-height: 580px;
}
.pane {
  background: var(--card);
  border: 3px solid var(--line-strong);
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.pane-h {
  padding: 12px 14px;
  border-bottom: 3px solid var(--line-strong);
  background: var(--surface-sub);
  display: grid;
  gap: 10px;
  flex-shrink: 0;
}
.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mini-stats > div {
  background: var(--card);
  border: 2px solid var(--line-strong);
  box-shadow: 2px 2px 0px var(--shadow-col);
  padding: 6px 8px;
  text-align: center;
}
.mini-stats small {
  display: block;
  font-family: var(--font-8bit);
  font-size: 11.5px;
  color: var(--mut);
  text-transform: uppercase;
}
.mini-stats b {
  display: block;
  font-family: var(--font-8bit);
  font-size: 20px;
  margin-top: 2px;
}
.tools {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tools .input, .tools .select {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 16px;
}
.list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conv {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  cursor: pointer;
  border: 2px solid var(--line);
  background: var(--card);
  transition: transform 0.05s steps(2);
}
.conv:hover {
  background: var(--surface-sub);
  border-color: var(--line-strong);
  box-shadow: 2px 2px 0px var(--shadow-col);
}
.conv.on {
  background: var(--coin);
  color: #181425;
  border: 3px solid var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.conv.on small, .conv.on span {
  color: #181425;
}
.conv .t {
  flex: 1;
  min-width: 0;
}
.conv .l1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.conv .l1 b {
  font-family: var(--font-8bit);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv small {
  display: block;
  color: var(--mut);
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2px 0 4px;
}
.conv .bd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Cột phải: Khung chat */
.pane.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-h {
  padding: 12px 16px;
  border-bottom: 3px solid var(--line-strong);
  background: var(--win-bar);
  color: var(--win-bar-txt);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  flex-shrink: 0;
}
.chat-h b {
  font-family: var(--font-8bit);
  font-size: 16px;
  color: var(--win-bar-txt);
}
.banner {
  padding: 8px 16px;
  border-bottom: 3px solid var(--line-strong);
  background: var(--surface-sub);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 16px;
  flex-shrink: 0;
}
.thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  min-height: 0;
}
.sep {
  align-self: center;
  font-family: var(--font-8bit);
  font-size: 12px;
  padding: 3px 10px;
  background: var(--surface-sub);
  border: 2px solid var(--line-strong);
  color: var(--mut);
  margin: 6px 0;
}
.bub {
  max-width: 74%;
  padding: 10px 14px;
  background: var(--card);
  color: var(--txt);
  border: 3px solid var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
  align-self: flex-start;
  word-wrap: break-word;
  font-size: 19px;
  line-height: 1.4;
}
.bub.me {
  align-self: flex-end;
  background: var(--pri);
  color: #FFFFFF;
}
.bub.st {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px;
}
.bub.st img {
  max-width: 132px;
  max-height: 132px;
  display: block;
  object-fit: contain;
}
.bub.vid {
  padding: 8px;
  max-width: 320px;
  background: var(--card);
  color: var(--txt);
}

/* Video Card trong tin nhắn */
.vcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 260px;
  max-width: 100%;
}
.vcover {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 14;
  max-height: 310px;
  background: #181425;
  border: 3px solid var(--line-strong);
  overflow: hidden;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.vcover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vplay {
  position: absolute;
  width: 48px;
  height: 48px;
  background: var(--pri);
  color: #FFFFFF;
  border: 3px solid #FFFFFF;
  box-shadow: 3px 3px 0px #181425;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.vframe {
  width: 100%;
  height: 380px;
  border: 3px solid var(--line-strong);
  background: #000;
}
.vinfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vinfo b {
  font-family: var(--font-8bit);
  font-size: 13.5px;
  color: var(--txt);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vinfo small {
  color: var(--mut);
  font-size: 15px;
}
.vbtns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Khay Sticker (Tray) */
.tray {
  display: none;
  border-top: 3px solid var(--line-strong);
  background: var(--surface-sub);
  padding: 10px 14px;
  max-height: 240px;
  overflow-y: auto;
  flex-shrink: 0;
}
.tray.open {
  display: block;
}
.tray-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tray-h b {
  font-family: var(--font-8bit);
  font-size: 13.5px;
}
.tray-h .input {
  flex: 1;
  min-width: 150px;
  padding: 5px 10px;
}
.sgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  overflow-y: auto;
}
.sti {
  background: var(--card);
  border: 2px solid var(--line-strong);
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.sti:hover, .sti.sel {
  background: var(--coin);
  color: #181425;
  border-color: var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.sti img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
}
.sti small {
  font-size: 13px;
  color: var(--mut);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sti.sel small { color: #181425; font-weight: 700; }

/* Thanh nhập tin nhắn (Composer) */
.composer {
  padding: 12px 14px;
  border-top: 3px solid var(--line-strong);
  background: var(--card);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.composer .input {
  flex: 1;
}

/* ==========================================================================
   6. QUY TẮC TỰ ĐỘNG (/app/auto), SẢN PHẨM, API KEYS, CÀI ĐẶT
   ========================================================================== */
#rules {
  display: grid;
  gap: 16px;
}
.rule {
  background: var(--card);
  border: 3px solid var(--line-strong);
  padding: 18px 20px;
  display: grid;
  gap: 12px;
  box-shadow: var(--sh-card);
}
.rule.off { opacity: 0.68; }
.rule-t {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rule-t h3 {
  margin: 0;
  font-family: var(--font-8bit);
  font-size: 17px;
  flex: 1;
}
.time-pill {
  font-family: var(--font-8bit);
  font-size: 13px;
  padding: 4px 10px;
  background: var(--coin);
  color: #181425;
  border: 2px solid var(--line-strong);
  box-shadow: 2px 2px 0px var(--shadow-col);
}
.switch, .sw {
  width: 48px;
  height: 26px;
  background: var(--bg2);
  border: 3px solid var(--line-strong);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.switch::after, .sw::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--txt);
  top: 2px;
  left: 2px;
}
.switch.on, .sw.on { background: #00E436; }
.switch.on::after, .sw.on::after { left: 24px; background: #181425; }

.days {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.day {
  font-family: var(--font-8bit);
  font-size: 12px;
  padding: 3px 8px;
  border: 2px solid var(--line-strong);
  background: var(--surface-sub);
  color: var(--mut);
}
.day.on {
  background: var(--pri);
  color: #FFFFFF;
}
.tgs {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface-sub);
  border: 2px solid var(--line-strong);
}
.tg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--card);
  border: 2px solid var(--line);
}
.tg .avatar { width: 32px; height: 32px; }
.tg .n { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule .meta {
  color: var(--mut);
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
}
.rule .acts {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 2px dashed var(--line);
}
.logs {
  display: grid;
  gap: 8px;
  max-height: 540px;
  overflow-y: auto;
}

/* Modal & Trình soạn quy tắc */
.modal-bg, .mbg { position: fixed; inset: 0; background: rgba(24, 20, 37, 0.72); z-index: 60; display: grid; place-items: center; padding: 18px; overflow-y: auto; }
.modal { background: var(--card); border: 4px solid var(--line-strong); width: 100%; max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 8px 8px 0px var(--shadow-col); }
.modal-h { padding: 14px 20px; border-bottom: 3px solid var(--line-strong); display: flex; justify-content: space-between; align-items: center; background: var(--win-bar); color: var(--win-bar-txt); }
.modal-h h3 { margin: 0; font-family: var(--font-8bit); font-size: 16px; color: var(--win-bar-txt); }
.modal-h .x { background: var(--pri); border: 2px solid #fff; color: #fff; width: 30px; height: 30px; cursor: pointer; font-family: var(--font-8bit); }
.modal-b, .modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.modal-f { padding: 14px 22px; border-top: 3px solid var(--line-strong); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-sub); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 11px; background: var(--surface-sub); border: 2px solid var(--line-strong); font-family: var(--font-8bit); font-size: 13px; cursor: pointer; user-select: none; box-shadow: 2px 2px 0px var(--shadow-col); }
.chip.on { background: var(--pri); color: #FFFFFF; }

.sel-t {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin: 0 6px 6px 0;
  background: var(--surface-sub);
  border: 2px solid var(--line-strong);
  font-size: 16px;
}
.sel-t .avatar { width: 22px; height: 22px; }
.sel-t .rm { cursor: pointer; color: var(--err); font-weight: 700; margin-left: 4px; }

.seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.seg-i {
  padding: 10px 8px;
  border: 2px solid var(--line-strong);
  background: var(--surface-sub);
  text-align: center;
  cursor: pointer;
  font-family: var(--font-8bit);
  font-size: 13px;
}
.seg-i b { display: block; font-size: 18px; margin-bottom: 4px; }
.seg-i.on {
  background: var(--coin);
  color: #181425;
  box-shadow: 3px 3px 0px var(--shadow-col);
}
.tpl-list {
  display: grid;
  gap: 6px;
  max-height: 170px;
  overflow-y: auto;
  padding: 6px;
  border: 2px solid var(--line-strong);
  background: var(--surface-sub);
}
.tpl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--card);
  border: 2px solid var(--line);
  cursor: pointer;
  font-size: 17px;
}
.tpl:hover { background: var(--coin); color: #181425; }
.tpl em { font-style: normal; font-family: var(--font-8bit); color: var(--pri); }

.pick {
  max-height: 320px;
  overflow-y: auto;
  border: 3px solid var(--line-strong);
  margin-top: 10px;
  padding: 6px;
  display: grid;
  gap: 6px;
  background: var(--surface-sub);
}
.pk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--card);
  border: 2px solid var(--line);
  cursor: pointer;
}
.pk:hover { border-color: var(--line-strong); }
.pk.on {
  background: var(--coin);
  color: #181425;
  border-color: var(--line-strong);
  box-shadow: 2px 2px 0px var(--shadow-col);
}
.pk .avatar { width: 36px; height: 36px; }
.pk .n { flex: 1; min-width: 0; }
.pk .n small { display: block; color: var(--mut); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sản phẩm video (.prod), API key (.keyrow, .code), Cài đặt (.kv) */
.prod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin-top: 10px;
  background: var(--surface-sub);
  border: 2px solid var(--line-strong);
}
.prod img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 2px solid var(--line-strong);
}
.keyrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface-sub);
  border: 2px solid var(--line-strong);
}
.code {
  background: #181425;
  color: #00E436;
  padding: 12px 14px;
  border: 3px solid var(--line-strong);
  box-shadow: 3px 3px 0px var(--shadow-col);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.45;
}
.kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 2px dashed var(--line);
  font-size: 18px;
}
.kv span { color: var(--mut); }

.lg { padding: 10px 14px; background: var(--surface-sub); border: 2px solid var(--line-strong); font-size: 17px; box-shadow: 2px 2px 0px var(--shadow-col); }
.lg .h { display: flex; justify-content: space-between; color: var(--mut); margin-bottom: 3px; font-family: var(--font-8bit); font-size: 12.5px; }
.lg .d { color: var(--txt); }
.token-box { display: flex; gap: 8px; align-items: center; background: var(--surface-sub); border: 3px solid var(--line-strong); padding: 10px 14px; box-shadow: 3px 3px 0px var(--shadow-col); }
.token-box code { flex: 1; font-size: 18px; color: var(--txt); font-weight: 700; word-break: break-all; }
.ol { padding-left: 20px; color: var(--mut); line-height: 1.6; margin: 10px 0 0; font-size: 19px; }
.ol code { background: var(--coin); color: #181425; padding: 1px 6px; border: 2px solid var(--line-strong); font-size: 17px; }

/* Docs */
.docs-shell { max-width: 1180px; margin: 0 auto; padding: 32px 24px 72px; }
.docs-grid { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start; }
.docs-nav { position: sticky; top: 84px; background: var(--card); border: 3px solid var(--line-strong); box-shadow: var(--sh-card); padding: 14px; display: grid; gap: 6px; }
.docs-nav a { padding: 8px 10px; color: var(--txt); text-decoration: none; font-family: var(--font-8bit); font-size: 13px; display: flex; justify-content: space-between; align-items: center; border: 2px solid transparent; }
.docs-nav a:hover { background: var(--coin); color: #181425; border-color: var(--line-strong); }
.ep { background: var(--card); border: 3px solid var(--line-strong); box-shadow: var(--sh-card); padding: 22px; margin-bottom: 18px; }
.ep-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.m-tag { font-family: var(--font-8bit); font-size: 12px; padding: 4px 8px; border: 2px solid var(--line-strong); }
.m-get { background: #00E436; color: #181425; }
.m-post { background: #29ADFF; color: #181425; }
.ep-path { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--txt); }
.pre { background: #181425; border: 3px solid var(--line-strong); box-shadow: 4px 4px 0px var(--shadow-col); padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: 18px; line-height: 1.5; color: #00E436; margin: 10px 0 0; position: relative; }
.pre .cp-btn { position: absolute; top: 8px; right: 8px; font-size: 12px; padding: 4px 9px; }

/* Toast & Empty */
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 90; display: grid; gap: 10px; max-width: 390px; }
.toast { background: var(--win-bar); color: var(--win-bar-txt); border: 3px solid var(--line-strong); padding: 12px 16px; box-shadow: 5px 5px 0px var(--shadow-col); font-family: var(--font-8bit); font-size: 14px; }
.toast.ok { border-left: 8px solid #00E436; }
.toast.err { border-left: 8px solid #FF004D; }
.empty { text-align: center; padding: 36px 18px; color: var(--mut); font-family: var(--font-8bit); font-size: 15px; }
.empty .big { font-size: 36px; margin-bottom: 8px; }
.spin { width: 16px; height: 16px; border: 3px solid currentColor; border-top-color: transparent; display: inline-block; animation: sp 0.6s steps(4) infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

@media (max-width: 1024px) {
  .studio-shell { margin: 0; border-left: none; border-right: none; }
  .studio-hero, .studio-split-sec, .two-col, .docs-grid { grid-template-columns: 1fr; }
  .studio-hero-left, .studio-split-left { border-right: none; border-bottom: 4px solid var(--line-strong); }
  .studio-matrix, .studio-steps { grid-template-columns: 1fr; }
  .matrix-cell, .step-col { border-right: none; border-bottom: 3px solid var(--line-strong); }
  .studio-section-head { grid-template-columns: 1fr; }
  .studio-sec-index { border-right: none; border-bottom: 3px solid var(--line-strong); padding: 14px 20px; }
  .msg-layout { grid-template-columns: 1fr; height: auto; }
  .pane { max-height: 520px; }
  .pane.chat { min-height: 560px; max-height: 680px; }
}
@media (max-width: 860px) {
  .studio-nav-links { display: none; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: -290px; z-index: 50; width: 274px; transition: left 0.15s steps(4); }
  .side.open { left: 0; }
  .topbar { display: flex; }
  .view { padding: 18px 14px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .seg { grid-template-columns: 1fr 1fr; }
}