:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface-alt: #222633;
  --border: #2e3345;
  --text: #e4e6ef;
  --text-dim: #8b8fa3;
  --accent: #4f8cff;
  --accent-hover: #6ba0ff;
  --green: #34d399;
  --orange: #f59e0b;
  --red: #ef4444;
  --radius: 8px;
  --max-width: 960px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  padding-top: 60px;
}

/* Navigation */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
}

nav .nav-brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  text-decoration: none;
}

nav .nav-links {
  display: flex;
  gap: 4px;
}

nav .nav-links a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

nav .nav-links a:hover,
nav .nav-links a.active {
  color: var(--text);
  background: var(--surface-alt);
}

nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Main container */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* Page header */
.page-header {
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.page-header .subtitle {
  color: var(--text-dim);
  font-size: 15px;
}

/* Sections */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 24px;
}

.section h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--accent);
}

.section h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 10px;
}

.section p {
  margin-bottom: 12px;
  color: var(--text);
}

.section ul, .section ol {
  padding-left: 24px;
  margin-bottom: 12px;
}

.section li {
  margin-bottom: 6px;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}

th, td {
  padding: 10px 14px;
  text-align: left;
  border: 1px solid var(--border);
}

th {
  background: var(--surface-alt);
  font-weight: 600;
  color: var(--text);
}

td {
  color: var(--text-dim);
}

/* Questionnaire */
.question-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 24px;
}

.question-section h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--accent);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.question-group {
  margin-bottom: 20px;
}

.question-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text);
}

.question-group textarea,
.question-group input[type="text"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s;
}

.question-group textarea:focus,
.question-group input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

.question-group textarea {
  min-height: 60px;
}

/* Resource cards */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.resource-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.2s;
}

.resource-card:hover {
  border-color: var(--accent);
}

.resource-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.resource-card p {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.resource-card a {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.resource-card a:hover {
  text-decoration: underline;
}

/* Spec list */
.spec-list {
  list-style: none;
  padding: 0;
}

.spec-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.spec-list li:last-child {
  border-bottom: none;
}

.spec-list .label {
  color: var(--text-dim);
}

.spec-list .value {
  font-weight: 600;
  color: var(--text);
}

/* Architecture diagrams (ASCII-style boxes) */
.diagram {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin: 16px 0;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  color: var(--text-dim);
}

/* Flow steps */
.flow-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  align-items: center;
}

.flow-step {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
}

.flow-arrow {
  color: var(--accent);
  font-size: 18px;
}

/* Schema table */
.schema-table th {
  font-size: 13px;
}

.schema-table td {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
}

/* Checklist */
.checklist {
  list-style: none;
  padding: 0;
}

.checklist li {
  padding: 8px 0;
  padding-left: 28px;
  position: relative;
  font-size: 14px;
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

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

/* Save indicator */
.save-status {
  font-size: 13px;
  color: var(--text-dim);
  transition: opacity 0.3s;
}

.save-status.saving { color: var(--orange); }
.save-status.saved { color: var(--green); }
.save-status.error { color: var(--red); }

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

/* Badge */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}

.badge-green { background: rgba(52,211,153,0.15); color: var(--green); }
.badge-orange { background: rgba(245,158,11,0.15); color: var(--orange); }
.badge-red { background: rgba(239,68,68,0.15); color: var(--red); }
.badge-blue { background: rgba(79,140,255,0.15); color: var(--accent); }

/* Risk items */
.risk-item {
  padding: 16px;
  background: var(--surface-alt);
  border-radius: var(--radius);
  margin-bottom: 12px;
  border-left: 3px solid var(--orange);
}

.risk-item h4 {
  font-size: 14px;
  margin-bottom: 4px;
}

.risk-item p {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
  nav { padding: 0 12px; }
  nav .nav-links a { padding: 8px 10px; font-size: 13px; }
  .container { padding: 20px 16px 60px; }
  .page-header h1 { font-size: 22px; }
  .section { padding: 20px; }
  .resource-grid { grid-template-columns: 1fr; }
  .flow-steps { flex-direction: column; align-items: stretch; }
  .flow-arrow { text-align: center; transform: rotate(90deg); }
}

/* Print / PDF styles */
@media print, .printing {
  body { background: #fff; color: #111; padding-top: 0; }
  nav, .btn, .save-status, .no-print { display: none !important; }
  .container { max-width: 100%; padding: 0; }
  .section, .question-section, .resource-card, .risk-item {
    background: #fff;
    border-color: #ddd;
    box-shadow: none;
    break-inside: avoid;
  }
  .diagram { background: #f5f5f5; border-color: #ddd; color: #333; }
  h1, h2, h3, h4 { color: #111; }
  p, li, td, .spec-list .label { color: #333; }
  .spec-list .value { color: #111; }
  th { background: #f0f0f0; color: #111; border-color: #ddd; }
  td { border-color: #ddd; color: #333; }
  .question-group textarea,
  .question-group input[type="text"] {
    border-color: #ddd;
    background: #fafafa;
    color: #111;
  }
  .resource-card { border-color: #ddd; background: #fafafa; }
  .resource-card a { color: #2563eb; }
  .badge-green { background: #e6f9f0; color: #047857; }
  .badge-orange { background: #fef3c7; color: #b45309; }
  .badge-red { background: #fee2e2; color: #b91c1c; }
  .badge-blue { background: #dbeafe; color: #1d4ed8; }
  .risk-item { background: #fffbeb; border-left-color: #d97706; }
  a { color: #2563eb; }
}

body.printing {
  background: #fff !important;
  color: #111 !important;
  padding-top: 0 !important;
}

body.printing nav,
body.printing .btn,
body.printing .save-status,
body.printing .no-print {
  display: none !important;
}

body.printing .container {
  max-width: 100% !important;
  padding: 20px !important;
}

body.printing .section,
body.printing .question-section,
body.printing .resource-card,
body.printing .risk-item {
  background: #fff !important;
  border-color: #ddd !important;
  box-shadow: none !important;
  break-inside: avoid;
}

body.printing .diagram {
  background: #f5f5f5 !important;
  border-color: #ddd !important;
  color: #333 !important;
}

body.printing h1, body.printing h2,
body.printing h3, body.printing h4 {
  color: #111 !important;
}

body.printing p, body.printing li,
body.printing td, body.printing .spec-list .label {
  color: #333 !important;
}

body.printing .spec-list .value { color: #111 !important; }

body.printing th {
  background: #f0f0f0 !important;
  color: #111 !important;
  border-color: #ddd !important;
}

body.printing td {
  border-color: #ddd !important;
  color: #333 !important;
}

body.printing .question-group textarea,
body.printing .question-group input[type="text"] {
  border-color: #ddd !important;
  background: #fafafa !important;
  color: #111 !important;
}

body.printing .resource-card {
  border-color: #ddd !important;
  background: #fafafa !important;
}

body.printing a { color: #2563eb !important; }