:root {
  --navy:#0b2239;
  --navy-2:#123752;
  --green:#16834f;
  --green-2:#0f6b43;
  --mint:#e9f7f0;
  --bg:#f4f7f9;
  --surface:#ffffff;
  --surface-2:#f7fafb;
  --text:#17212b;
  --muted:#5e6c79;
  --border:#d9e2e8;
  --warning:#9a6700;
  --warning-bg:#fff7db;
  --danger:#b42318;
  --danger-bg:#fff0ee;
  --info:#175cd3;
  --info-bg:#eef4ff;
  --shadow:0 12px 36px rgba(11,34,57,.10);
  --radius:14px;
  --sidebar:310px;
  --header:70px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body {
  margin:0;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
}
body.dark {
  --bg:#101820;
  --surface:#18242e;
  --surface-2:#1d2b36;
  --text:#eef5f8;
  --muted:#b8c5ce;
  --border:#334651;
  --mint:#193a2d;
  --warning-bg:#3c3215;
  --danger-bg:#3c2020;
  --info-bg:#172d4d;
  --shadow:0 14px 40px rgba(0,0,0,.28);
}

a { color:var(--green-2); text-decoration:none; }
a:hover { text-decoration:underline; }
button,input,select { font:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible {
  outline:3px solid rgba(72,187,120,.5);
  outline-offset:2px;
}

.skip-link {
  position:fixed;
  left:12px;
  top:-70px;
  z-index:9999;
  background:var(--navy);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
}
.skip-link:focus { top:12px; }

.topbar {
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header);
  z-index:1000;
  color:#fff;
  background:linear-gradient(110deg,var(--navy),var(--navy-2));
  box-shadow:0 2px 14px rgba(0,0,0,.18);
}
.topbar-inner {
  height:100%;
  max-width:1680px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 24px;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:270px;
  color:#fff;
  text-decoration:none;
}
.brand:hover { text-decoration:none; }
.brand img { width:42px; height:42px; }
.brand strong { display:block; letter-spacing:.04em; }
.brand small { display:block; color:#cfe4ee; font-size:.76rem; }

.search-wrap { flex:1; max-width:680px; position:relative; }
.search-wrap input {
  width:100%;
  padding:11px 44px 11px 42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.11);
  color:#fff;
  outline:none;
}
.search-wrap input::placeholder { color:#d6e4eb; }
.search-wrap input:focus {
  background:#fff;
  color:#17212b;
  border-color:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.18);
}
.search-icon { position:absolute; left:15px; top:10px; }
.search-clear {
  position:absolute;
  right:9px;
  top:7px;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  padding:5px 9px;
  border-radius:50%;
}
.toolbar { display:flex; gap:8px; margin-left:auto; align-items:center; }
.icon-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:8px 11px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
}
.icon-btn:hover { background:rgba(255,255,255,.20); text-decoration:none; }
.language-control {
  display:flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  background:rgba(255,255,255,.10);
  color:#fff;
}
.language-control select {
  border:0;
  outline:0;
  color:#fff;
  background:transparent;
  cursor:pointer;
  font-weight:700;
}
.language-control option { color:#17212b; background:#fff; }
.language-icon { font-size:.86rem; opacity:.9; }

.layout {
  max-width:1680px;
  margin:0 auto;
  padding-top:var(--header);
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
}
.sidebar {
  position:sticky;
  top:var(--header);
  height:calc(100vh - var(--header));
  overflow:auto;
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:24px 18px;
}
.sidebar h2 {
  margin:8px 12px 12px;
  color:var(--muted);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.nav-list { list-style:none; padding:0; margin:0; }
.nav-list li { margin:2px 0; }
.nav-list a {
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--text);
  padding:9px 12px;
  border-radius:9px;
  font-size:.92rem;
}
.nav-list a:hover,.nav-list a.active {
  background:var(--mint);
  color:var(--green-2);
  text-decoration:none;
}
.nav-num {
  flex:0 0 24px;
  width:24px;
  height:24px;
  border-radius:7px;
  border:1px solid var(--border);
  background:var(--surface-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
}
.sidebar-note {
  margin:22px 8px 0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:.82rem;
}

.content { min-width:0; padding:34px clamp(18px,4vw,70px) 80px; }
.content-inner { max-width:1120px; margin:auto; }
.hero {
  position:relative;
  overflow:hidden;
  margin-bottom:28px;
  padding:clamp(28px,5vw,64px);
  border-radius:24px;
  color:#fff;
  background:linear-gradient(120deg,var(--navy),#164f66 58%,var(--green-2));
  box-shadow:var(--shadow);
}
.hero::after {
  content:"";
  position:absolute;
  width:440px;
  height:440px;
  right:-180px;
  top:-190px;
  border:90px solid rgba(255,255,255,.06);
  border-radius:50%;
}
.hero-kicker {
  position:relative;
  z-index:1;
  color:#bfe8d2;
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.hero h1 {
  position:relative;
  z-index:1;
  max-width:850px;
  margin:.35rem 0 1rem;
  font-size:clamp(2rem,5vw,4rem);
  line-height:1.08;
}
.hero p { position:relative; z-index:1; max-width:800px; color:#e3eef3; font-size:1.08rem; }
.hero-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 15px;
  border:1px solid transparent;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.btn-primary { background:var(--green); color:#fff; }
.btn-primary:hover { background:var(--green-2); text-decoration:none; }
.btn-light { background:#fff; color:var(--navy); }
.btn-outline { border-color:var(--border); background:var(--surface); color:var(--text); }

.meta-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:32px; }
.meta-card {
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:0 4px 16px rgba(11,34,57,.04);
}
.meta-card strong {
  display:block;
  color:var(--muted);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.meta-card span { display:block; margin-top:6px; font-weight:700; }

.help-section {
  margin:0 0 24px;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 5px 20px rgba(11,34,57,.05);
}
.section-head {
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:24px 28px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,var(--surface),var(--surface-2));
}
.section-number {
  flex:0 0 46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:var(--navy);
  color:#fff;
  font-weight:800;
}
.section-head h2 { margin:0; font-size:1.65rem; line-height:1.25; }
.section-head p { margin:5px 0 0; color:var(--muted); }
.section-body { padding:26px 28px; }
.section-body h3 { margin:30px 0 12px; color:var(--navy-2); font-size:1.25rem; }
.section-body h3:first-child { margin-top:0; }
.dark .section-body h3 { color:#8fd8b0; }
.section-body h4 { margin:22px 0 8px; }
.section-body p { margin:10px 0 16px; }

.step-list { counter-reset:steps; list-style:none; padding:0; margin:16px 0; display:grid; gap:12px; }
.step-list li {
  counter-increment:steps;
  position:relative;
  padding:14px 16px 14px 58px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
}
.step-list li::before {
  content:counter(steps);
  position:absolute;
  left:14px;
  top:13px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--green);
  color:#fff;
  font-weight:800;
}
.step-list strong { display:block; margin-bottom:2px; }
.check-list { list-style:none; padding:0; margin:12px 0; }
.check-list li { position:relative; padding:6px 0 6px 30px; }
.check-list li::before {
  content:"✓";
  position:absolute;
  left:0;
  top:5px;
  width:21px;
  height:21px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--mint);
  color:var(--green-2);
  font-size:.75rem;
  font-weight:900;
}

.callout { margin:18px 0; padding:16px 18px; border-left:5px solid var(--info); border-radius:12px; background:var(--info-bg); }
.callout strong { display:block; margin-bottom:3px; }
.callout.warning { border-color:#e6a700; background:var(--warning-bg); }
.callout.danger { border-color:var(--danger); background:var(--danger-bg); }
.callout.success { border-color:var(--green); background:var(--mint); }

.table-wrap { overflow:auto; margin:16px 0; border:1px solid var(--border); border-radius:12px; }
table { width:100%; min-width:620px; border-collapse:collapse; background:var(--surface); }
th,td { padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); }
th { color:var(--muted); background:var(--surface-2); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }
tr:last-child td { border-bottom:0; }

.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.field-card { padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.field-card strong { display:block; }
.field-card small { color:var(--muted); }
.status-row { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.status { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:800; }
.status.pending { background:#fff1c2; color:#7a5200; }
.status.approved { background:#dff6e9; color:#0c6b3c; }
.status.rejected { background:#ffe2df; color:#a32118; }

.screen-card {
  margin:22px 0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.screen-card .mock-screen { cursor:zoom-in; background:#eaf0f3; }
.screen-card svg { display:block; width:100%; height:auto; }
.screen-caption { padding:12px 16px; border-top:1px solid var(--border); color:var(--muted); font-size:.88rem; }
.screen-caption strong { color:var(--text); }
.screen-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.screen-grid .screen-card { margin:0; }
.mock-screen-button { width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; text-align:inherit; }

.search-results { display:none; margin:0 0 24px; padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.search-results.open { display:block; }
.search-results h2 { margin:0 0 10px; font-size:1.1rem; }
.search-result { display:block; padding:10px 12px; border-bottom:1px solid var(--border); border-radius:9px; color:var(--text); }
.search-result:last-child { border-bottom:0; }
.search-result:hover { background:var(--mint); text-decoration:none; }
.search-result small { display:block; color:var(--muted); }
.no-results { padding:18px; text-align:center; color:var(--muted); }

.checklist-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.checklist-panel { padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); }
.checklist-panel h3 { margin:0 0 8px; }
.interactive-check { display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-bottom:1px dashed var(--border); }
.interactive-check:last-child { border-bottom:0; }
.interactive-check input { width:20px; height:20px; margin-top:3px; accent-color:var(--green); }
.progress { height:10px; margin:12px 0 4px; overflow:hidden; border-radius:999px; background:var(--border); }
.progress span { display:block; width:0; height:100%; background:var(--green); transition:width .25s; }
.progress-label { color:var(--muted); font-size:.84rem; }

.footer { margin-top:35px; padding:28px 0; border-top:1px solid var(--border); color:var(--muted); font-size:.88rem; }
.kbd { padding:1px 6px; border:1px solid var(--border); border-bottom-width:3px; border-radius:6px; background:var(--surface-2); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }

.lightbox {
  position:fixed;
  inset:0;
  z-index:4000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(3,12,20,.94);
}
.lightbox.open { display:flex; }
.lightbox > button {
  position:absolute;
  right:22px;
  top:18px;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:10px;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
}
.lightbox-content { width:min(1180px,96vw); max-height:92vh; overflow:auto; }
.lightbox-content h2 { color:#fff; text-align:center; }
.lightbox-content .mock-screen { overflow:hidden; border-radius:14px; background:#fff; box-shadow:0 20px 80px #000; }
.lightbox-content svg { display:block; width:100%; height:auto; }

.noscript-message { max-width:720px; margin:120px auto; padding:30px; border:1px solid #ddd; border-radius:14px; background:#fff; }
.mobile-menu { display:none; }

@media (max-width:1180px) {
  :root { --sidebar:270px; }
  .meta-grid { grid-template-columns:repeat(2,1fr); }
  .toolbar .label { display:none; }
}

@media (max-width:900px) {
  .topbar-inner { gap:8px; padding:0 12px; }
  .brand { min-width:0; }
  .brand-text { display:none; }
  .language-control select { width:84px; }
  .layout { display:block; }
  .sidebar {
    position:fixed;
    top:var(--header);
    left:-330px;
    z-index:2000;
    width:310px;
    transition:left .22s;
    box-shadow:var(--shadow);
  }
  .sidebar.open { left:0; }
  .mobile-menu { display:inline-flex; }
  .content { padding:22px 14px 60px; }
  .search-wrap { max-width:none; }
  .screen-grid,.checklist-grid,.field-grid { grid-template-columns:1fr; }
  .section-head,.section-body { padding:20px; }
  .hero { border-radius:18px; }
  .hero h1 { font-size:2.25rem; }
}

@media (max-width:620px) {
  :root { --header:64px; }
  .topbar { height:var(--header); }
  .toolbar .print-btn { display:none; }
  .language-icon { display:none; }
  .language-control { padding:5px; }
  .language-control select { width:72px; font-size:.82rem; }
  .icon-btn { min-height:38px; padding:7px 9px; }
  .search-wrap input { padding-left:36px; font-size:.88rem; }
  .hero { padding:27px 21px; }
  .hero-actions { display:grid; }
  .btn { width:100%; }
  .meta-grid { grid-template-columns:1fr; }
  .section-head h2 { font-size:1.35rem; }
  .section-number { flex-basis:40px; height:40px; }
  .section-body { padding:18px; }
  .step-list li { padding-left:54px; }
}

@media print {
  .topbar,.sidebar,.hero-actions,.search-results,.lightbox,.no-print { display:none!important; }
  .layout { display:block; padding:0; }
  .content { padding:0; }
  .content-inner { max-width:none; }
  .hero { color:#000!important; background:#fff!important; border:1px solid #bbb; box-shadow:none; }
  .hero p { color:#333; }
  .help-section { break-inside:avoid; border-color:#bbb; box-shadow:none; }
  .screen-card { box-shadow:none; }
  .section-body { padding:18px; }
  .meta-grid { grid-template-columns:repeat(4,1fr); }
}

@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}