:root {
  color-scheme: light;
  --ink: #17233c;
  --muted: #5e6b7f;
  --line: #dbe4ee;
  --canvas: #eff5f8;
  --brand: #0f766e;
  --brand-dark: #115e59;
  --brand-soft: #e7f7f4;
  --warning: #9a3412;
  --warning-bg: #fff7ed;
  --safe: #067647;
  --safe-bg: #ecfdf3;
  --danger: #b42318;
  --danger-bg: #fef3f2;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: linear-gradient(155deg, #eaf6f3 0%, var(--canvas) 38%, #edf2f8 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.62;
}

.manual {
  width: min(900px, calc(100% - 32px));
  margin: 36px auto;
  overflow: hidden;
  border: 1px solid rgba(219, 228, 238, .96);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 85px rgba(31, 50, 81, .12);
}

.cover, section, .summary, footer { padding: 34px 52px; }
.cover { padding-top: 46px; background: linear-gradient(135deg, #f7fffd 0%, #edf7f5 100%); }

.brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }

.brand-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 15px;
  background: var(--brand);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.04em;
  box-shadow: 0 10px 24px rgba(15, 118, 110, .23);
}

.eyebrow, .step {
  color: var(--brand);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.step { display: block; }
.section-heading { break-inside: avoid; }
.print-page-break { display: none; }

.revision { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 720px; margin-bottom: 15px; font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: -.045em; line-height: 1.07; }
h2 { margin: 6px 0 18px; font-size: clamp(1.45rem, 4vw, 2rem); letter-spacing: -.025em; line-height: 1.2; }
h3 { margin-bottom: 8px; font-size: 1rem; }
p { color: var(--muted); }
.lead { max-width: 720px; font-size: 1.14rem; }

a { color: var(--brand-dark); text-underline-offset: 3px; }
.cover-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; border-radius: 11px; background: var(--brand); color: #fff; font-weight: 800; padding: 11px 18px; text-decoration: none; }
.button-secondary { border: 1px solid #b6d9d4; background: #fff; color: var(--brand-dark); }

.important, .warning, .success, .note {
  padding: 14px 16px;
  border: 1px solid;
  border-radius: 12px;
  color: var(--ink);
}

.important, .warning { border-color: #fed7aa; background: var(--warning-bg); }
.success { border-color: #abefc6; background: var(--safe-bg); color: var(--safe); }
.note { border-color: #bae6fd; background: #f0f9ff; }

.summary { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfdff; }
.summary ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 14px 0 0; padding: 0; counter-reset: summary; list-style: none; }
.summary li { color: var(--muted); font-size: .81rem; line-height: 1.4; }
.summary li::before { display: block; margin-bottom: 5px; color: var(--brand); font-size: 1.15rem; font-weight: 900; counter-increment: summary; content: counter(summary, decimal-leading-zero); }

section { border-bottom: 1px solid var(--line); }
section > :last-child { margin-bottom: 0; }
ol, ul { color: #344054; padding-left: 23px; }
li { margin: 8px 0; padding-left: 3px; }
.check-list { padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 29px; }
.check-list li::before { position: absolute; left: 0; color: var(--safe); font-weight: 900; content: "✓"; }

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { color: #344054; font-size: .9em; }
pre { overflow-x: auto; margin: 18px 0; padding: 17px 19px; border-radius: 11px; background: #17233c; color: #e6fffa; font-size: .86rem; line-height: 1.65; white-space: pre-wrap; }

.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.permission { display: grid; gap: 7px; padding: 16px; border: 1px solid; border-radius: 12px; }
.permission span { color: var(--muted); font-size: .88rem; }
.permission.allowed { border-color: #abefc6; background: var(--safe-bg); }
.permission.allowed strong { color: var(--safe); }
.permission.denied { grid-column: 1 / -1; border-color: #fecdca; background: var(--danger-bg); }
.permission.denied strong { color: var(--danger); }

.file-list { display: grid; gap: 12px; margin: 18px 0; }
.file-list article { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; }
.file-list h3, .file-list p { margin-bottom: 0; }
.file-number { display: grid; flex: 0 0 32px; height: 32px; place-items: center; border-radius: 9px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 900; }

.final-files { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.final-files div { padding: 14px; border: 1px solid #abefc6; border-radius: 11px; background: var(--safe-bg); }
.final-files span { margin-right: 7px; color: var(--safe); font-weight: 900; }

.security-section { background: #fbfdff; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.two-columns > div { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.two-columns ul { margin-bottom: 0; }

.troubleshooting { display: grid; gap: 10px; }
.troubleshooting div { padding: 14px 16px; border-left: 4px solid #94a3b8; border-radius: 7px; background: #f8fafc; }
.troubleshooting dt { font-weight: 850; }
.troubleshooting dd { margin: 3px 0 0; color: var(--muted); }

footer { background: #17233c; color: #d7e0eb; font-size: .82rem; text-align: center; }
footer p { color: #d7e0eb; }
footer a { color: #99f6e4; }

@media (max-width: 700px) {
  .manual { width: min(100% - 18px, 900px); margin: 9px auto; border-radius: 16px; }
  .cover, section, .summary, footer { padding: 25px 22px; }
  .summary ol, .permission-grid, .final-files, .two-columns { grid-template-columns: 1fr; }
  .permission.denied { grid-column: auto; }
  .summary ol { gap: 6px; }
  .summary li::before { display: inline; margin-right: 8px; }
  .cover-actions .button { width: 100%; }
}

@page {
  size: A4;
  margin: 14mm 13mm 16mm;
  @bottom-right { content: "CobreFlow · " counter(page) "/" counter(pages); color: #667085; font-size: 8pt; }
}

@media print {
  body { background: #fff; font-size: 10.1pt; line-height: 1.48; }
  .manual { width: auto; margin: 0; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  .cover, section, .summary, footer { padding: 0; }
  .cover { min-height: 247mm; padding: 22mm 10mm 0; background: #fff; page-break-after: always; }
  .brand-row { margin-bottom: 31mm; }
  h1 { max-width: 160mm; font-size: 31pt; }
  h2 { font-size: 17pt; }
  h3 { font-size: 10pt; }
  .lead { max-width: 158mm; font-size: 13pt; }
  .important { margin-top: 30mm; }
  .no-print { display: none !important; }
  section { padding: 3mm 3mm 5mm; border: 0; }
  section + section { padding-top: 6mm; }
  article, .permission, .troubleshooting div, .two-columns > div { break-inside: avoid; }
  .security-section { break-inside: avoid; }
  .step, h2, h3 { break-after: avoid; }
  .page-break-before { page-break-before: always; }
  .print-page-break { display: block; height: 0; page-break-after: always; }
  .permission-grid, .final-files, .two-columns { gap: 7px; }
  .file-list { gap: 7px; }
  .file-list article, .permission, .two-columns > div, .troubleshooting div { padding: 10px 12px; }
  .file-number { display: inline-block; margin-right: 9px; text-align: center; line-height: 32px; }
  .important, .warning, .success, .note { padding: 10px 12px; }
  pre { padding: 12px 14px; }
  footer { margin-top: 7mm; padding: 7mm 3mm; background: #f2f4f7; color: var(--ink); }
  footer p { color: var(--muted); }
  footer a { color: var(--brand-dark); }
  a { text-decoration: none; }
}