:root {
  --ink: #0d0d0d;
  --paper: #f0ead6;
  --paper2: #e8e0c8;
  --paper3: #ddd5be;
  --red: #c8281e;
  --red2: #a01e15;
  --muted: rgba(13,13,13,0.45);
  --muted2: rgba(13,13,13,0.25);
  --border: rgba(13,13,13,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Courier Prime', monospace;
  background: var(--ink);
  color: var(--paper);
  min-height: 100vh;
}

/* SPLASH */
#splash {
  position:fixed; inset:0;
  background: var(--ink);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:1000; gap:16px;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 28px,
    rgba(255,255,255,0.018) 28px, rgba(255,255,255,0.018) 29px
  );
}

.splash-label {
  font-family:'Courier Prime',monospace;
  font-size:11px; letter-spacing:4px; text-transform:uppercase;
  color: rgba(240,234,214,0.4);
  opacity:0; animation: fadeUp .5s .1s forwards;
}

.splash-h {
  font-family:'Oswald',sans-serif;
  font-size:clamp(64px,14vw,120px);
  font-weight:900; text-transform:uppercase;
  line-height:.88; letter-spacing:-.03em;
  text-align:center;
  opacity:0; animation: fadeUp .5s .25s forwards;
}
.splash-h em { color:var(--red); font-style:normal; }

.splash-rule {
  width:60px; height:2px; background:var(--red);
  opacity:0; animation: fadeUp .5s .4s forwards;
}

.splash-sub {
  font-size:14px; color:rgba(240,234,214,0.55);
  text-align:center; max-width:320px; line-height:1.7;
  opacity:0; animation: fadeUp .5s .5s forwards;
}

.splash-btn {
  margin-top:8px;
  font-family:'Oswald',sans-serif;
  font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:2px;
  background: var(--red); color: var(--paper);
  border:none; cursor:pointer;
  padding:16px 48px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background .15s, transform .15s;
  opacity:0; animation: fadeUp .5s .65s forwards;
}
.splash-btn:hover { background:var(--red2); transform:scale(1.02); }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* APP */
#app { display:none; flex-direction:row; min-height:100vh; }

/* SIDEBAR */
.sidebar {
  position:fixed; left:0; top:0; bottom:0; width:268px;
  background: #111;
  border-right: 1px solid rgba(255,255,255,0.06);
  display:flex; flex-direction:column;
  overflow-y:auto; z-index:100;
}

.sidebar-top {
  padding:24px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.sidebar-logo {
  font-family:'Oswald',sans-serif;
  font-size:26px; font-weight:900;
  text-transform:uppercase; letter-spacing:-.02em;
  color:var(--paper); line-height:1;
}
.sidebar-logo em { color:var(--red); font-style:normal; }
.sidebar-tagline {
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(240,234,214,0.3); margin-top:6px;
}

.nav-section {
  padding:20px 20px 6px;
  font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:rgba(240,234,214,0.2);
  border-bottom:none;
}

.nav-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 20px; cursor:pointer;
  font-size:13px; color:rgba(240,234,214,0.45);
  transition:color .15s, background .15s;
  border-left:2px solid transparent;
  font-family:'Courier Prime',monospace;
}
.nav-item:hover { color:var(--paper); background:rgba(255,255,255,0.04); }
.nav-item.active {
  color:var(--paper);
  border-left-color:var(--red);
  background:rgba(200,40,30,0.08);
}

.nav-code {
  font-family:'Oswald',sans-serif;
  font-size:11px; font-weight:700;
  color:rgba(240,234,214,0.2); min-width:24px;
  letter-spacing:.5px;
}
.nav-item.active .nav-code { color:var(--red); }

.nav-tag {
  font-size:9px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase;
  background:var(--red); color:var(--paper);
  padding:2px 7px;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}
.new-tag {
  background: rgba(30,200,90,0.85);
}

.sidebar-progress {
  margin:auto 16px 20px;
  padding:14px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
}
.progress-row {
  display:flex; justify-content:space-between;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(240,234,214,0.3); margin-bottom:8px;
}
.progress-bar {
  height:3px; background:rgba(255,255,255,0.08);
}
.progress-fill {
  height:100%; background:var(--red);
  transition:width .4s ease;
}

/* MAIN */
.main { margin-left:268px; min-height:100vh; }

.page { display:none; }
.page.active { display:block; }

/* PAGE HEADER */
.page-header {
  padding:52px 56px 40px;
  border-bottom:2px solid rgba(240,234,214,0.08);
  position:relative;
  overflow:hidden;
}
.page-header::after {
  content:'';
  position:absolute; right:-40px; top:-40px;
  width:260px; height:260px;
  border:40px solid rgba(200,40,30,0.05);
  border-radius:50%;
  pointer-events:none;
}

.page-tag {
  font-family:'Courier Prime',monospace;
  font-size:10px; letter-spacing:4px; text-transform:uppercase;
  color:var(--red); margin-bottom:14px;
  display:block;
}

.page-title {
  font-family:'Oswald',sans-serif;
  font-size:clamp(32px,4vw,52px);
  font-weight:900; text-transform:uppercase;
  line-height:.92; letter-spacing:-.02em;
  color:var(--paper);
}
.page-title em { color:var(--red); font-style:normal; }

.page-subtitle {
  font-size:14px; color:rgba(240,234,214,0.5);
  margin-top:14px; max-width:560px; line-height:1.75;
}

/* PAGE CONTENT */
.page-content { padding:40px 56px 80px; }

/* CARDS */
.card {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(240,234,214,0.08);
  padding:24px 28px;
  margin-bottom:16px;
  position:relative;
}

.card-accent {
  border-left:3px solid var(--red);
}

.card-title {
  font-family:'Oswald',sans-serif;
  font-size:16px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
  color:var(--paper); margin-bottom:10px;
}

.card-body {
  font-size:14px; color:rgba(240,234,214,0.65);
  line-height:1.8;
}

.hl { color:var(--paper); font-weight:700; }
.hl-red { color:var(--red); }

/* DIVIDER */
.divider {
  display:flex; align-items:center; gap:16px;
  margin:36px 0;
  font-size:9px; letter-spacing:4px; text-transform:uppercase;
  color:rgba(240,234,214,0.2);
}
.divider::before, .divider::after {
  content:''; flex:1; height:1px;
  background:rgba(240,234,214,0.08);
}

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

/* CHAT */
.chat-wrap {
  border:1px solid rgba(240,234,214,0.1);
  overflow:hidden;
  margin:24px 0;
}
.chat-bar {
  background:rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(240,234,214,0.08);
  padding:10px 16px;
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(240,234,214,0.3);
}
.dot { width:7px; height:7px; border-radius:50%; }
.dot.r { background:#c8281e; }
.dot.y { background:#c8941e; }
.dot.g { background:#1ec85a; }

.chat-body { padding:20px; }

.msg { display:flex; gap:10px; margin-bottom:14px; align-items:flex-end; }
.msg.sent { flex-direction:row-reverse; }

.avatar {
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; flex-shrink:0;
  color:rgba(240,234,214,0.4);
  font-family:'Oswald',sans-serif; letter-spacing:.5px;
}
.msg.sent .avatar {
  background:rgba(200,40,30,0.15);
  border-color:rgba(200,40,30,0.3);
  color:var(--red);
}

.bubble {
  max-width:68%; padding:10px 14px;
  font-size:14px; line-height:1.55;
}
.msg.received .bubble {
  background:rgba(255,255,255,0.07);
  color:var(--paper);
  border-radius:0 12px 12px 0;
}
.msg.sent .bubble {
  background:rgba(200,40,30,0.15);
  border:1px solid rgba(200,40,30,0.25);
  color:var(--paper);
  border-radius:12px 0 0 12px;
}

.annotation {
  border-left:2px solid var(--red);
  background:rgba(200,40,30,0.07);
  padding:10px 14px;
  margin: -6px 0 14px 36px;
  font-size:12px; color:rgba(240,234,214,0.6);
  line-height:1.6; font-style:italic;
}
.annotation.bad {
  border-left-color:rgba(240,234,214,0.25);
  background:rgba(255,255,255,0.03);
  color:rgba(240,234,214,0.35);
}
.annotation strong { color:var(--paper); font-style:normal; }

/* SIGNAL GRID */
.signal-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px; margin:20px 0;
}
.signal-card {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(240,234,214,0.07);
  padding:16px 18px;
}
.signal-card.bad { border-color:rgba(200,40,30,0.2); background:rgba(200,40,30,0.05); }
.signal-icon { font-size:20px; margin-bottom:8px; }
.signal-label {
  font-family:'Oswald',sans-serif;
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--paper); margin-bottom:4px;
}
.signal-desc { font-size:12px; color:rgba(240,234,214,0.45); line-height:1.55; }

/* FASE BADGE */
.fase {
  display:inline-block;
  font-family:'Courier Prime',monospace;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--red); margin-bottom:10px;
  border-bottom:1px solid var(--red); padding-bottom:2px;
}

/* TIP */
.tip {
  background:rgba(200,40,30,0.07);
  border-left:3px solid var(--red);
  padding:16px 20px; margin:24px 0;
  font-size:13px; color:rgba(240,234,214,0.65); line-height:1.7;
}
.tip strong { color:var(--paper); }

/* WARN */
.warn {
  background:rgba(200,40,30,0.06);
  border:1px solid rgba(200,40,30,0.2);
  padding:18px 22px; margin-bottom:14px;
}
.warn-title {
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
  color:#e88; margin-bottom:6px;
}
.warn-body { font-size:13px; color:rgba(200,140,140,0.7); line-height:1.65; }

/* GOOD */
.good {
  background:rgba(30,200,90,0.05);
  border:1px solid rgba(30,200,90,0.15);
  padding:18px 22px; margin-bottom:14px;
}
.good-title {
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
  color:#7ecf9a; margin-bottom:6px;
}
.good-body { font-size:13px; color:rgba(140,200,160,0.7); line-height:1.65; }

/* CHECK LIST */
.check-list { list-style:none; }
.check-list li {
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0; font-size:14px;
  color:rgba(240,234,214,0.65);
  border-bottom:1px solid rgba(240,234,214,0.06);
}
.check-list li:last-child { border-bottom:none; }
.check-list li::before {
  content:'→'; color:var(--red); font-weight:700;
  flex-shrink:0; margin-top:1px;
}

/* R-BLOCKS */
.r-blocks { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0; }
.r-block {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(240,234,214,0.08);
  padding:24px 20px;
  position:relative; overflow:hidden;
}
.r-num {
  font-family:'Oswald',sans-serif;
  font-size:60px; font-weight:900;
  color:rgba(200,40,30,0.12);
  position:absolute; right:-6px; top:-8px;
  line-height:1; letter-spacing:-.04em;
  pointer-events:none;
}
.r-tag {
  font-family:'Courier Prime',monospace;
  font-size:10px; color:rgba(240,234,214,0.3);
  letter-spacing:2px; display:block; margin-bottom:8px;
}
.r-name {
  font-family:'Oswald',sans-serif;
  font-size:22px; font-weight:900; text-transform:uppercase;
  color:var(--paper); margin-bottom:10px; letter-spacing:-.01em;
}
.r-desc { font-size:13px; color:rgba(240,234,214,0.5); line-height:1.7; }

/* QUIZ */
.quiz-pips { display:flex; gap:6px; margin-bottom:28px; }
.pip {
  height:3px; flex:1;
  background:rgba(255,255,255,0.07);
  transition:background .3s;
}
.pip.done { background:var(--red); }

.quiz-q {
  font-family:'Oswald',sans-serif;
  font-size:22px; font-weight:700; text-transform:uppercase;
  line-height:1.2; letter-spacing:-.01em;
  margin-bottom:20px; color:var(--paper);
}

.q-step { display:none; }
.q-step.active { display:block; }

.opt {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 18px; border:1px solid rgba(240,234,214,0.08);
  margin-bottom:8px; cursor:pointer;
  font-size:14px; color:rgba(240,234,214,0.6);
  transition:border-color .15s, background .15s, color .15s;
}
.opt:hover {
  background:rgba(255,255,255,0.04);
  border-color:rgba(240,234,214,0.18);
  color:var(--paper);
}
.opt.selected {
  background:rgba(200,40,30,0.1);
  border-color:var(--red);
  color:var(--paper);
}

.opt-radio {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(240,234,214,0.2);
  flex-shrink:0; margin-top:2px;
  position:relative; transition:border-color .15s;
}
.opt.selected .opt-radio { border-color:var(--red); background:var(--red); }
.opt.selected .opt-radio::after {
  content:''; position:absolute; inset:3px;
  background:#111; border-radius:50%;
}

/* BTN */
.btn-main {
  font-family:'Oswald',sans-serif;
  font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:2px;
  background:var(--red); color:var(--paper);
  border:none; cursor:pointer; padding:14px 32px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition:background .15s, transform .15s;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-main:hover { background:var(--red2); transform:scale(1.02); }
.btn-main:disabled { opacity:.35; cursor:not-allowed; transform:none; }

.btn-ghost {
  font-family:'Oswald',sans-serif;
  font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:2px;
  background:transparent; color:rgba(240,234,214,0.4);
  border:1px solid rgba(240,234,214,0.12); cursor:pointer; padding:13px 24px;
  transition:color .15s, border-color .15s;
}
.btn-ghost:hover { color:var(--paper); border-color:rgba(240,234,214,0.3); }

/* RESULT */
.result-wrap { display:none; }
.result-type {
  font-family:'Courier Prime',monospace;
  font-size:10px; letter-spacing:4px; text-transform:uppercase;
  color:var(--red); margin-bottom:12px;
}
.result-title {
  font-family:'Oswald',sans-serif;
  font-size:clamp(24px,3vw,34px); font-weight:900;
  text-transform:uppercase; letter-spacing:-.02em;
  line-height:.95; margin-bottom:16px; color:var(--paper);
}
.result-body {
  font-size:14px; color:rgba(240,234,214,0.6);
  line-height:1.8; max-width:540px; margin-bottom:28px;
}
.result-path {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(240,234,214,0.08);
  padding:20px 24px; margin-top:24px;
}
.result-path-title {
  font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:rgba(240,234,214,0.25); margin-bottom:14px;
}
.r-step {
  display:flex; align-items:center; gap:14px;
  padding:9px 0; font-size:13px;
  color:rgba(240,234,214,0.6);
  border-bottom:1px solid rgba(240,234,214,0.06);
}
.r-step:last-child { border-bottom:none; }
.r-step-n {
  width:22px; height:22px;
  background:rgba(200,40,30,0.2); color:var(--red);
  font-family:'Oswald',sans-serif; font-weight:700; font-size:12px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* COMPLETE */
.complete-wrap {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(240,234,214,0.08);
  padding:40px; text-align:center;
}
.complete-title {
  font-family:'Oswald',sans-serif;
  font-size:clamp(28px,4vw,44px); font-weight:900;
  text-transform:uppercase; letter-spacing:-.02em;
  line-height:.95; margin-bottom:14px;
}
.complete-title em { color:var(--red); font-style:normal; }
.complete-body {
  font-size:14px; color:rgba(240,234,214,0.5);
  max-width:420px; margin:0 auto 28px; line-height:1.75;
}
.badge-done {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Courier Prime',monospace;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:#7ecf9a;
  border:1px solid rgba(30,200,90,0.2);
  padding:6px 16px;
}

/* SCROLLBAR */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:#0d0d0d; }
::-webkit-scrollbar-thumb { background:#2a2a2a; }

/* MOBILE */
@media(max-width:768px){
  .sidebar { display:none; }
  .main { margin-left:0; }
  .page-header { padding:32px 24px 24px; }
  .page-content { padding:28px 24px 60px; }
  .grid-2,.grid-3,.grid-4,.r-blocks { grid-template-columns:1fr; }
  .mob-nav {
    display:flex; overflow-x:auto; gap:0;
    background:#111; border-bottom:1px solid rgba(255,255,255,0.06);
    position:sticky; top:0; z-index:50;
  }
}