/* ===== Tokens ===== */
:root{
  --ink-deep: #16231A;      /* near-black pine, page background */
  --ink-mid: #223321;
  --paper: #F6F1E4;         /* warm paper */
  --paper-dim: #EDE6D3;
  --text-dark: #1E2A1B;
  --text-soft: #5B6B54;
  --highlight: #E4B73B;     /* mustard highlighter */
  --highlight-dim: #F0D98A;
  --ink-blue: #3C5A8A;
  --coral: #B85450;
  --moss: #5C7A5E;
  --sage: #8B9A82;
  --radius: 3px;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family: var(--sans);
  background: var(--ink-deep);
  color: var(--text-dark);
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important;}
textarea, input, button{font-family:inherit;}
hr{border:none;border-top:1px solid var(--paper-dim);margin:18px 0;}

/* ===== Gate ===== */
.gate{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(228,183,59,0.06), transparent 40%),
    var(--ink-deep);
}
.gate-card{
  background:var(--paper);
  padding:48px 44px;
  width:360px;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  position:relative;
}
.gate-card::before{
  content:"";
  position:absolute; left:0; top:24px; bottom:24px; width:3px;
  background: var(--highlight);
}
.gate-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--moss); margin:0 0 12px;
}
.gate-title{
  font-family:var(--serif); font-weight:600; font-size:28px; line-height:1.2;
  margin:0 0 28px; color:var(--text-dark);
}
#gate-input{
  width:100%; padding:12px 14px; border:1.5px solid var(--paper-dim); border-radius:var(--radius);
  background:#fff; font-size:15px; margin-bottom:14px;
}
#gate-input:focus{outline:2px solid var(--ink-blue); outline-offset:1px; border-color:var(--ink-blue);}
.gate-error{color:var(--coral); font-size:13px; min-height:18px; margin:10px 0 0;}

/* ===== Buttons ===== */
.btn{
  border:none; cursor:pointer; border-radius:var(--radius);
  padding:11px 18px; font-size:14px; font-weight:600;
  transition: transform .1s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--ink-blue); outline-offset:2px;}
.btn-primary{ background:var(--highlight); color:#241D0A; width:100%; }
.btn-primary:hover{ background:var(--highlight-dim); }
.btn-secondary{ background:var(--ink-blue); color:#fff; }
.btn-secondary:hover{ box-shadow:0 4px 14px rgba(60,90,138,0.35); }
.btn-ghost{ background:transparent; color:var(--text-soft); border:1.5px solid var(--paper-dim); }
.btn-ghost:hover{ border-color:var(--sage); color:var(--text-dark); }
.btn-tab{ background:var(--ink-mid); color:var(--paper); font-size:13px; padding:8px 12px; }
.btn-tab:hover{ background:#2C4029; }

/* ===== App shell ===== */
.app{ display:flex; min-height:100vh; }

/* Spine sidebar */
.spine{
  width:250px; flex-shrink:0;
  background: var(--ink-deep);
  border-right: 6px double #0E1811;
  display:flex; flex-direction:column;
  padding:22px 14px;
}
.spine-head{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.spine-eyebrow{
  font-family:var(--serif); font-weight:700; font-style:italic; font-size:20px;
  color:var(--paper); margin:0 0 4px;
}
.note-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.note-tab{
  display:flex; align-items:center; gap:8px;
  padding:10px 10px; border-radius:2px;
  background:var(--ink-mid); color:var(--paper-dim);
  cursor:pointer; font-size:13.5px; position:relative;
  border-left:4px solid var(--tab-color, var(--sage));
  transition: background .12s ease;
}
.note-tab:hover{ background:#2C4029; }
.note-tab.active{ background:var(--paper); color:var(--text-dark); }
.note-tab .tab-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note-tab .tab-del{ opacity:0; background:none; border:none; color:var(--coral); cursor:pointer; font-size:14px; }
.note-tab:hover .tab-del{ opacity:1; }
.spine-settings{
  background:none; border:none; color:var(--sage); font-size:12.5px; text-align:left;
  padding:10px 4px 2px; cursor:pointer; font-family:var(--mono);
}
.spine-settings:hover{ color:var(--paper); }

/* Main page (paper) */
.page{
  flex:1; background:var(--paper);
  background-image: repeating-linear-gradient(transparent, transparent 39px, rgba(91,107,84,0.08) 40px);
  padding:40px 56px; overflow-y:auto;
}

.empty-state{ max-width:560px; margin:10vh auto; text-align:center; }
.empty-kicker{ font-family:var(--mono); color:var(--moss); letter-spacing:.1em; text-transform:uppercase; font-size:12px; }
.empty-state h2{ font-family:var(--serif); font-size:30px; line-height:1.35; font-weight:600; margin:10px 0 28px; }
.empty-state .btn{ width:auto; padding:12px 26px; }

.page-header{ margin-bottom:22px; }
.note-title-input{
  font-family:var(--serif); font-size:32px; font-weight:600; border:none; background:none;
  width:100%; color:var(--text-dark); padding:2px 0; margin-bottom:14px;
}
.note-title-input:focus{ outline:none; border-bottom:2px solid var(--highlight); }
.page-tabs{ display:flex; gap:4px; border-bottom:1.5px solid var(--paper-dim); }
.page-tab{
  background:none; border:none; cursor:pointer; padding:10px 18px; font-weight:600; font-size:14px;
  color:var(--text-soft); border-bottom:3px solid transparent; margin-bottom:-1.5px;
}
.page-tab.active{ color:var(--text-dark); border-bottom-color:var(--highlight); }

.tab-pane{ display:none; padding-top:26px; }
.tab-pane.active{ display:block; }

.dropzone{
  border:2px dashed var(--sage); border-radius:var(--radius); padding:22px;
  text-align:center; margin-bottom:16px; color:var(--text-soft); background:rgba(255,255,255,0.35);
}
.dropzone.drag{ border-color:var(--highlight); background:rgba(228,183,59,0.08); }
.dropzone p{ margin:0 0 12px; font-size:14px; }

#source-text{
  width:100%; min-height:320px; padding:20px; border:1.5px solid var(--paper-dim);
  border-radius:var(--radius); background:#fff; font-size:15px; line-height:1.7;
  color:var(--text-dark); resize:vertical;
}
#source-text:focus{ outline:none; border-color:var(--ink-blue); }

.action-row{ display:flex; gap:12px; margin-top:18px; justify-content:flex-end; }
.action-row .btn{ width:auto; }

.pane-empty, .pane-loading{ color:var(--text-soft); font-size:15px; max-width:500px; padding:20px 0; }
.pane-loading{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.spinner{
  width:26px; height:26px; border-radius:50%;
  border:3px solid var(--paper-dim); border-top-color:var(--highlight);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.summary-content{
  font-family:var(--serif); font-size:16.5px; line-height:1.75; max-width:760px;
}
.summary-content h1,.summary-content h2,.summary-content h3{
  font-family:var(--serif); color:var(--text-dark); margin-top:1.4em;
}
.summary-content h2{
  border-bottom:2px solid var(--highlight); display:inline-block; padding-bottom:2px;
}
.summary-content strong{ background:linear-gradient(transparent 60%, var(--highlight-dim) 60%); }
.summary-content code{ background:var(--paper-dim); padding:1px 5px; border-radius:2px; font-family:var(--mono); font-size:14px; }
.summary-content ul,.summary-content ol{ padding-left:22px; }
.summary-content li{ margin-bottom:6px; }

/* Quiz */
.quiz-setup{ display:flex; align-items:center; gap:14px; max-width:460px; }
.quiz-setup label{ font-size:14px; font-weight:600; color:var(--text-soft); }
#quiz-count{ flex:1; accent-color:var(--highlight); }
#quiz-count-val{ font-family:var(--mono); font-weight:600; width:24px; }

.quiz-content{ max-width:720px; }
.quiz-q{
  background:#fff; border:1.5px solid var(--paper-dim); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:16px;
}
.quiz-q-num{ font-family:var(--mono); color:var(--moss); font-size:12.5px; letter-spacing:.06em; }
.quiz-q-text{ font-family:var(--serif); font-size:17px; font-weight:600; margin:6px 0 14px; }
.quiz-opt{
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:2px;
  cursor:pointer; margin-bottom:6px; border:1.5px solid transparent;
}
.quiz-opt:hover{ background:var(--paper-dim); }
.quiz-opt.selected{ border-color:var(--ink-blue); background:rgba(60,90,138,0.06); }
.quiz-opt.correct{ border-color:var(--moss); background:rgba(92,122,94,0.12); }
.quiz-opt.incorrect{ border-color:var(--coral); background:rgba(184,84,80,0.1); }
.quiz-opt input{ margin-top:3px; }
.quiz-explain{ font-size:13.5px; color:var(--text-soft); margin-top:10px; padding-top:10px; border-top:1px dashed var(--paper-dim); display:none; }
.quiz-q.answered .quiz-explain{ display:block; }

.quiz-result{ text-align:center; padding:40px 0; position:relative; }
.stamp{
  display:inline-block; border:4px solid var(--coral); color:var(--coral);
  font-family:var(--mono); font-weight:700; font-size:22px; text-transform:uppercase;
  padding:14px 30px; transform:rotate(-6deg); letter-spacing:.05em; border-radius:6px;
  margin-bottom:18px;
}
.stamp.good{ border-color:var(--moss); color:var(--moss); }

/* Modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal-card{
  background:var(--paper); width:480px; max-width:92vw; max-height:88vh; overflow-y:auto;
  padding:32px 34px; border-radius:var(--radius);
}
.modal-card h2{ font-family:var(--serif); margin-top:0; }
.modal-sub{ color:var(--text-soft); font-size:13.5px; margin-top:-8px; }
.modal-card label{ display:block; font-weight:600; font-size:13.5px; margin:14px 0 6px; }
.modal-card .hint{ font-weight:400; color:var(--text-soft); font-size:12px; }
.modal-card input, .modal-card textarea{
  width:100%; padding:10px 12px; border:1.5px solid var(--paper-dim); border-radius:var(--radius);
  font-size:14px; background:#fff;
}
.modal-card textarea{ min-height:90px; font-family:var(--mono); font-size:12.5px; }

/* Toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--ink-deep); color:var(--paper); padding:12px 22px; border-radius:var(--radius);
  font-size:14px; box-shadow:0 10px 30px rgba(0,0,0,0.3); z-index:100;
}
.toast.error{ background:var(--coral); }

/* Responsive */
@media (max-width: 860px){
  .app{ flex-direction:column; }
  .spine{ width:100%; flex-direction:row; align-items:center; overflow-x:auto; border-right:none; border-bottom:6px double #0E1811; }
  .spine-head{ flex-direction:row; margin-bottom:0; }
  .note-list{ flex-direction:row; }
  .page{ padding:26px 20px; }
  .empty-state{ margin:6vh auto; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}