:root {
    --bg: #07101d;
    --surface: #0d1929;
    --surface-2: #111f32;
    --line: rgba(143, 170, 205, .18);
    --text: #f4f8ff;
    --muted: #a8b8cc;
    --blue: #52a8ff;
    --cyan: #38d9e6;
    --green: #35db9a;
    --yellow: #ffcc66;
    --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, sans-serif;
    line-height: 1.65;
}
a { color: #7fc2ff; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }

.manual-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(7, 16, 29, .9);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
}
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; text-decoration: none; }
.brand img { width: 38px; height: 38px; }
.manual-header nav { display: flex; align-items: center; gap: 18px; }
.language-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); }
.language-switch a { display: grid; min-width: 30px; height: 27px; padding: 0; place-items: center; border-radius: 999px; color: var(--muted); font-size: .66rem; font-weight: 800; text-decoration: none; }
.language-switch a.active { color: #06121f; background: var(--cyan); }
.header-link { color: #c5d2e3; font-weight: 600; text-decoration: none; }
.header-button, .primary-button, .secondary-button, .pdf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 19px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
}
.header-button, .primary-button { color: #06121f; background: linear-gradient(135deg, var(--cyan), #72b8ff); }
.secondary-button { color: #dcecff; border: 1px solid rgba(110, 185, 255, .38); background: rgba(82, 168, 255, .08); }
.pdf-button { color: #ffe5a6; border: 1px solid rgba(255, 196, 72, .4); background: rgba(255, 196, 72, .09); }
.pdf-button::before { content: "PDF"; display: grid; height: 22px; padding: 0 5px; place-items: center; border-radius: 5px; color: #241700; background: #ffc448; font-size: .58rem; font-weight: 900; letter-spacing: .04em; }

.manual-hero {
    padding: 78px 0 68px;
    background:
        radial-gradient(circle at 75% 20%, rgba(56, 217, 230, .13), transparent 30%),
        radial-gradient(circle at 15% 20%, rgba(82, 168, 255, .12), transparent 30%);
    border-bottom: 1px solid var(--line);
}
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 70px; }
.eyebrow, .section-kicker, .step-badge {
    color: #74dce7;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
h1 { max-width: 740px; margin: 10px 0 12px; font-size: clamp(3rem, 7vw, 5.6rem); line-height: .96; letter-spacing: -.055em; }
.hero-lead { max-width: 720px; margin: 0; color: #c1cede; font-size: clamp(1.05rem, 2vw, 1.27rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.goal-card { padding: 28px; border: 1px solid rgba(82, 168, 255, .24); border-radius: 20px; background: linear-gradient(145deg, rgba(17, 34, 55, .96), rgba(9, 21, 36, .96)); box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
.goal-label { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.goal-card ol { display: grid; gap: 15px; margin: 20px 0 0; padding: 0; list-style: none; }
.goal-card li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.goal-card i { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border-radius: 50%; color: #06131e; background: var(--green); font-style: normal; font-size: .85rem; }

.manual-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: 54px; padding-block: 64px 96px; }
.manual-nav { position: sticky; top: 100px; display: grid; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(13, 25, 41, .76); }
.manual-nav strong { margin: 0 10px 10px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.manual-nav a { padding: 8px 10px; border-radius: 7px; color: var(--muted); font-size: .86rem; font-weight: 600; text-decoration: none; }
.manual-nav a:hover { color: #fff; background: rgba(82, 168, 255, .1); }
.manual-content { min-width: 0; }
.content-section { padding: 0 0 58px; margin: 0 0 58px; border-bottom: 1px solid var(--line); }
.content-section h2, .help-card h2 { margin: 7px 0 10px; font-size: clamp(1.8rem, 4vw, 2.55rem); line-height: 1.15; letter-spacing: -.035em; }
.content-section > p, .lead-in { color: var(--muted); }

.quick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 27px; }
.quick-grid article { min-height: 175px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.quick-grid span { color: var(--cyan); font-size: .72rem; font-weight: 800; }
.quick-grid h3 { margin: 18px 0 5px; font-size: 1rem; }
.quick-grid p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.note, .warning, .success-box, .risk-box { margin-top: 24px; padding: 18px 20px; border-radius: 11px; }
.note { color: #cfe1f8; border-left: 3px solid var(--blue); background: rgba(82, 168, 255, .09); }
.warning { color: #ffe3a2; border-left: 3px solid var(--yellow); background: rgba(255, 204, 102, .08); }
.success-box { border: 1px solid rgba(53, 219, 154, .25); background: rgba(53, 219, 154, .07); }
.success-box p { margin: 4px 0 0; color: #bcd8ca; }
.risk-box { color: #ffd2d2; border-left: 3px solid #ff6b72; background: rgba(255, 107, 114, .08); }

.instruction-list { display: grid; gap: 12px; margin-top: 25px; }
.instruction-list > div { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.instruction-list b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #06121c; background: var(--cyan); }
.instruction-list p { margin: 3px 0 0; color: #c3d0e0; }
code { padding: 2px 6px; border: 1px solid rgba(111, 184, 255, .16); border-radius: 5px; color: #88ceff; background: rgba(0, 0, 0, .2); overflow-wrap: anywhere; }
.inline-download { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 16px; border: 1px solid rgba(53, 219, 154, .28); border-radius: 9px; color: #8ff0c6; background: rgba(53, 219, 154, .07); font-weight: 800; text-decoration: none; }

.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 25px; }
.two-column article { padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.two-column h3 { margin: 0 0 14px; }
.check-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 25px; color: var(--muted); }
.check-list li::before { position: absolute; left: 0; content: "✓"; color: var(--green); font-weight: 800; }
.feature-list { display: grid; gap: 12px; margin-top: 26px; }
.feature-list article { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 21px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.feature-list > article > span { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 12px; color: #80e6ef; background: rgba(56, 217, 230, .09); font-size: .8rem; font-weight: 800; }
.feature-list h3 { margin: 0; }
.feature-list p { margin: 3px 0 5px; color: var(--muted); }
.feature-list a { font-size: .87rem; font-weight: 800; }

.input-priority { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 25px 0 38px; }
.input-priority article { padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.input-priority h3 { margin: 12px 0 5px; font-size: 1rem; }
.input-priority p { margin: 0; color: var(--muted); font-size: .9rem; }
.priority { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.priority.required { color: #8eeef5; background: rgba(56, 217, 230, .1); }
.priority.risk { color: #ffd98c; background: rgba(255, 204, 102, .1); }
.priority.switch { color: #93efc9; background: rgba(53, 219, 154, .1); }
.subheading { margin: 34px 0 12px; font-size: 1.14rem; }
.settings-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
.settings-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .88rem; }
.settings-table th, .settings-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.settings-table tr:last-child td { border-bottom: 0; }
.settings-table th { color: #8fdfe8; background: rgba(56, 217, 230, .045); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.settings-table td:first-child { width: 29%; color: #e8f2ff; }
.settings-table td:nth-child(2) { width: 16%; white-space: nowrap; }
.settings-table td:last-child { color: var(--muted); }

.panel-tutorial { display: grid; grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr); align-items: start; gap: 26px; margin-top: 28px; }
.ea-panel-demo { padding: 12px 11px 14px; border: 2px solid #273c4d; background: #0d1a24; color: #f5f8fb; font: 12px/1.43 Consolas, "Courier New", monospace; box-shadow: 0 20px 55px rgba(0, 0, 0, .34); }
.panel-head, .panel-row, .panel-cols { display: flex; justify-content: space-between; gap: 12px; }
.panel-head { color: #83d7ff; }
.panel-head b, .ea-panel-demo .good { color: #23f46e; }
.ea-panel-demo hr { margin: 7px 0; border: 0; border-top: 1px dashed #607384; }
.ea-panel-demo em { display: block; color: #82d9ff; font-style: normal; }
.ea-panel-demo mark, .ea-panel-demo .warn { color: #ffc000; background: none; }
.ea-panel-demo .bad { color: #ff4a4a; }
.ea-panel-demo i { color: #dce8f2; font-style: normal; }
.panel-indent { padding-left: 63px; }
.panel-callouts { display: grid; gap: 9px; }
.panel-callouts article { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.panel-callouts article > b { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #06121c; background: var(--cyan); font-size: .78rem; }
.panel-callouts h3 { margin: 1px 0 2px; font-size: .92rem; }
.panel-callouts p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.color-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: rgba(13, 25, 41, .7); color: var(--muted); font-size: .85rem; }
.color-legend span { display: flex; align-items: center; gap: 8px; }
.color-legend i { width: 10px; height: 10px; border-radius: 50%; }
.legend-green { background: #23f46e; }.legend-yellow { background: #ffc000; }.legend-red { background: #ff4a4a; }.legend-white { background: #f5f8fb; }

details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { position: relative; padding: 18px 36px 18px 0; cursor: pointer; color: #eaf3ff; font-weight: 750; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { position: absolute; right: 5px; content: "+"; color: var(--cyan); font-size: 1.4rem; }
details[open] summary::after { content: "−"; }
details p { margin: -4px 0 18px; color: var(--muted); }
.safety-card { display: grid; gap: 12px; margin-top: 23px; padding: 23px; border: 1px solid rgba(53, 219, 154, .24); border-radius: 14px; background: rgba(53, 219, 154, .055); }
.safety-card label { display: flex; align-items: flex-start; gap: 11px; color: #d5e5dd; font-weight: 600; cursor: pointer; }
.safety-card input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--green); }
.help-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px; border: 1px solid rgba(82, 168, 255, .26); border-radius: 18px; background: linear-gradient(135deg, rgba(82, 168, 255, .12), rgba(56, 217, 230, .05)); }
.help-card p { max-width: 650px; margin: 0; color: var(--muted); }
.help-card .primary-button { flex: 0 0 auto; }
.manual-footer { padding: 24px 0; border-top: 1px solid var(--line); color: #8699b0; font-size: .85rem; }
.manual-footer .shell { display: flex; justify-content: space-between; gap: 16px; }

@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 35px; }
    .goal-card { max-width: 620px; }
    .manual-layout { grid-template-columns: 1fr; }
    .manual-nav { position: static; grid-template-columns: repeat(2, 1fr); }
    .manual-nav strong { grid-column: 1 / -1; }
    .quick-grid { grid-template-columns: repeat(3, 1fr); }
    .panel-tutorial { grid-template-columns: 1fr; }
    .ea-panel-demo { max-width: 520px; }
}

@media (max-width: 650px) {
    .shell { width: min(calc(100% - 28px), var(--shell)); }
    .manual-header nav { gap: 9px; }
    .manual-header .header-link { display: none; }
    .header-button { min-height: 39px; padding-inline: 12px; font-size: .78rem; }
    .brand span { display: none; }
    .manual-hero { padding: 50px 0; }
    .manual-layout { gap: 34px; padding-block: 34px 64px; }
    .manual-nav { display: flex; overflow-x: auto; padding: 11px; }
    .manual-nav strong { display: none; }
    .manual-nav a { flex: 0 0 auto; }
    .quick-grid, .two-column, .input-priority, .color-legend { grid-template-columns: 1fr; }
    .quick-grid article { min-height: 0; }
    .content-section { margin-bottom: 40px; padding-bottom: 40px; }
    .instruction-list > div { grid-template-columns: 36px 1fr; padding: 14px; }
    .feature-list article { grid-template-columns: 42px 1fr; padding: 16px; }
    .feature-list > article > span { width: 40px; height: 40px; }
    .help-card, .manual-footer .shell { align-items: flex-start; flex-direction: column; }
}

@media print {
    @page { size: A4; margin: 12mm; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    html, body { background: #07101d !important; }
    .manual-header, .manual-nav, .hero-actions, .help-card, .manual-footer { display: none !important; }
    .manual-hero { padding: 28px 0; }
    .hero-grid, .manual-layout { display: block; }
    .goal-card { margin-top: 22px; box-shadow: none; }
    .manual-layout { width: 100%; padding: 28px 0 0; }
    .content-section { break-before: page; margin: 0; padding: 0; border: 0; }
    .content-section:first-child { break-before: auto; }
    .quick-grid { grid-template-columns: repeat(3, 1fr); }
    .quick-grid article, .instruction-list > div, .two-column article,
    .input-priority article, .feature-list article, .panel-callouts article,
    .settings-table-wrap, .note, .warning, .success-box, .risk-box,
    .safety-card, details { break-inside: avoid; }
    .panel-tutorial { grid-template-columns: 1fr; }
    .ea-panel-demo { max-width: 520px; }
    details[open] summary::after { display: none; }
    a { color: #7fc2ff !important; text-decoration: none; }
}