:root {
  --ink: #17251f;
  --muted: #66726c;
  --line: #dfe5e1;
  --surface: #ffffff;
  --canvas: #f5f6f2;
  --green: #0e5a43;
  --green-strong: #084934;
  --green-soft: #e8f2ed;
  --gold: #b27b2a;
  --gold-soft: #f6eddc;
  --red: #a8443a;
  --red-soft: #f8eae8;
  --yellow: #9a6b0b;
  --yellow-soft: #fff3d5;
  --shadow: 0 12px 30px rgba(24, 46, 36, 0.08);
  --radius: 14px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

.legal-page{max-width:820px;margin:48px auto;padding:40px;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.legal-page h1{margin:24px 0 8px}.legal-page h2{margin:28px 0 8px;font-size:18px}.legal-page p{color:var(--muted);line-height:1.75}.legal-page a{color:var(--primary);font-weight:700}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input, textarea, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 278px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 20px 22px; background: #102a22; color: #fff; overflow-y: auto; }
.brand { display: flex; gap: 12px; align-items: center; color: #fff; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.35); background: #f0c874; color: #173329; font-family: Georgia, serif; font-weight: 700; font-size: 21px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: .01em; }
.brand small { color: #b9cbc3; font-size: 12px; margin-top: 2px; }
.plan-meta { margin: 32px 2px 22px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.plan-meta > * { display: block; }
.plan-meta .eyebrow { color: #93afa3; }
.plan-meta strong { margin: 7px 0 5px; font-size: 14px; line-height: 1.35; }
.plan-meta > span:last-child { color: #b9cbc3; font-size: 12px; }

.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--green); }
.side-nav { display: grid; gap: 4px; }
.nav-item { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 0; border-left: 2px solid transparent; background: transparent; color: #c8d5cf; text-align: left; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { border-left-color: #f0c874; background: rgba(255,255,255,.09); color: #fff; }
.nav-number { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); color: #b9cbc3; font-size: 11px; }
.nav-item.active .nav-number { background: #f0c874; color: #173329; border-color: #f0c874; }
.nav-label { font-size: 13px; line-height: 1.25; }
.nav-code { color: #8da69b; font-size: 10px; font-weight: 700; }
.sidebar-note { margin-top: auto; padding-top: 24px; display: flex; gap: 10px; align-items: flex-start; color: #dbe5e0; }
.sidebar-note strong, .sidebar-note span { display: block; }
.sidebar-note strong { font-size: 12px; }
.sidebar-note span { margin-top: 3px; color: #96aea3; font-size: 11px; line-height: 1.35; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: #5dc693; }

.main-shell { min-width: 0; }
.topbar { height: 70px; display: flex; align-items: center; justify-content: flex-end; padding: 0 36px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); }
.topbar-actions { display: flex; gap: 12px; align-items: center; }
.save-state { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: 12px; }
.mobile-brand, .mobile-progress-wrap { display: none; }
.screen { max-width: 1180px; margin: 0 auto; padding: 42px 42px 80px; }

.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 28px; }
.page-heading h1 { margin: 7px 0 8px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(30px, 4vw, 46px); font-weight: 500; letter-spacing: -.025em; line-height: 1.08; }
.page-heading p { max-width: 680px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.heading-actions { display: flex; gap: 10px; flex: 0 0 auto; padding-top: 10px; }
.button { min-height: 42px; padding: 0 17px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 700; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor:not-allowed; opacity:.48; transform:none; box-shadow:none; }
.button-primary { background: var(--green); color: #fff; box-shadow: 0 8px 18px rgba(14,90,67,.18); }
.button-primary:hover { background: var(--green-strong); }
.button-secondary { background: var(--surface); border-color: #b8c8c0; color: var(--green); }
.button-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.button-danger { background: transparent; border-color: #e6c2bd; color: var(--red); }
.button-small { min-height: 34px; padding: 0 12px; font-size: 12px; }

.hero-panel { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); overflow: hidden; border: 1px solid #cadaD2; background: var(--surface); box-shadow: var(--shadow); }
.hero-copy { padding: 38px; }
.hero-copy h2 { margin: 12px 0 12px; max-width: 670px; font-family: Georgia, serif; font-size: clamp(28px, 3.3vw, 43px); font-weight: 500; line-height: 1.12; }
.hero-copy p { max-width: 650px; color: var(--muted); line-height: 1.65; }
.hero-actions { display: flex; gap: 10px; margin-top: 24px; }
.hero-aside { padding: 34px; display: flex; flex-direction: column; justify-content: space-between; background: #153d31; color: #fff; }
.hero-aside .eyebrow { color: #f0c874; }
.progress-big { margin: 13px 0 4px; font-family: Georgia, serif; font-size: 54px; line-height: 1; }
.progress-track { height: 7px; overflow: hidden; background: rgba(255,255,255,.14); }
.progress-fill { height: 100%; background: #f0c874; transition: width .3s ease; }
.page-progress { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:24px; padding:14px 16px; border:1px solid #cbd9d2; border-left:4px solid var(--green); background:#fff; }
.page-progress > div { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:7px 10px; }
.page-progress strong { font-size:13px; }
.page-progress p { grid-column:1/-1; margin:0; color:var(--muted); font-size:11px; }
.form-status-list { display:grid; border:1px solid var(--line); background:#fff; }
.form-status-row { display:grid; grid-template-columns:minmax(170px,1fr) minmax(130px,.8fr) 110px minmax(220px,1.4fr) auto; gap:16px; align-items:center; padding:15px 17px; border-bottom:1px solid var(--line); }
.form-status-row:last-child { border-bottom:0; }
.form-status-row h3 { display:inline; margin:0 0 0 8px; font-size:13px; }
.form-code { color:var(--gold); font-size:10px; font-weight:700; }
.form-status-progress .progress-track { background:#e6ebe8; }
.form-status-progress small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.form-state { display:inline-flex; width:max-content; align-items:center; padding:5px 8px; border-radius:12px; font-size:10px; font-weight:700; }
.form-state.lengkap { background:var(--green-soft); color:var(--green); }
.form-state.sedang { background:var(--yellow-soft); color:var(--yellow); }
.form-state.belum { background:#eef1ef; color:var(--muted); }
.missing-summary { color:var(--muted); font-size:11px; line-height:1.4; }
.hero-aside p { color: #c5d6cf; font-size: 12px; line-height: 1.5; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 30px; }
.stat { padding: 20px; border: 1px solid var(--line); background: var(--surface); }
.stat span, .stat strong { display: block; }
.stat span { color: var(--muted); font-size: 12px; }
.stat strong { margin-top: 8px; font-family: Georgia, serif; font-size: 29px; font-weight: 500; }

.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 34px 0 14px; }
.section-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.text-link { border: 0; padding: 0; background: transparent; color: var(--green); font-size: 12px; font-weight: 700; }

.rubric-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--surface); }
.rubric-item { min-height: 128px; padding: 19px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rubric-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rubric-item h3 { margin: 0; font-size: 14px; line-height: 1.35; }
.rubric-item p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.score { color: var(--green); font-family: Georgia, serif; font-size: 20px; white-space: nowrap; }
.status-label { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; font-size: 11px; font-weight: 700; color: var(--yellow); }
.status-label.done { color: var(--green); }
.status-label .status-dot { background: currentColor; }

.flow-list { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--surface); }
.flow-step { position: relative; min-height: 150px; padding: 21px; border-right: 1px solid var(--line); }
.flow-step:nth-child(4n) { border-right: 0; }
.flow-step:nth-child(n+5) { border-top: 1px solid var(--line); }
.flow-step .step-no { color: var(--gold); font-size: 11px; font-weight: 700; }
.flow-step h3 { margin: 22px 0 7px; font-size: 14px; }
.flow-step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.flow-step button { position: absolute; inset: 0; border: 0; background: transparent; }
.flow-step:hover { background: #fbfcfa; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.panel { border: 1px solid var(--line); background: var(--surface); }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-header h2, .panel-header h3 { margin: 0; font-size: 15px; }
.panel-body { padding: 22px; }
.panel + .panel { margin-top: 16px; }
.helper-panel { padding: 20px; border-left: 3px solid var(--gold); background: var(--gold-soft); }
.helper-panel h3 { margin: 0 0 9px; font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.helper-panel p, .helper-panel li { color: #665638; font-size: 12px; line-height: 1.55; }
.helper-panel ul { margin: 11px 0 0; padding-left: 18px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; }
.field small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.input, .textarea, .select { width: 100%; border: 1px solid #cbd5d0; border-radius: 7px; background: #fff; color: var(--ink); outline: none; }
.input, .select { height: 43px; padding: 0 12px; }
.textarea { min-height: 110px; padding: 11px 12px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(14,90,67,.09); }
.form-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.form-footer small { color: var(--muted); }
.form-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-chip { min-height: 36px; padding: 0 13px; border: 1px solid #cbd5d0; border-radius: 18px; background: #fff; color: var(--ink); font-size: 12px; }
.choice-chip.active { border-color: var(--green); background: var(--green-soft); color: var(--green); font-weight: 700; }
.risk-list { display: grid; gap: 10px; }
.risk-card { display: grid; grid-template-columns: 42px 1fr auto; gap: 13px; align-items: start; padding: 16px; border: 1px solid var(--line); background: #fff; }
.risk-index { width: 36px; height: 36px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700; }
.risk-card h3 { margin: 1px 0 7px; font-size: 13px; line-height: 1.45; }
.risk-meta { display: flex; flex-wrap: wrap; gap: 8px 13px; color: var(--muted); font-size: 11px; }
.tag { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border: 1px solid var(--line); background: #fafbf9; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.empty-state { padding: 40px 24px; border: 1px dashed #bdcac4; background: #fbfcfa; text-align: center; }
.empty-state .empty-icon { width: 50px; height: 50px; display: grid; place-items: center; margin: 0 auto 15px; border: 1px solid #b9c9c1; color: var(--green); font-family: Georgia, serif; font-size: 24px; }
.empty-state h3 { margin: 0 0 7px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.empty-state p { max-width: 500px; margin: 0 auto 18px; color: var(--muted); font-size: 12px; line-height: 1.55; }

.question-block { padding: 22px 0; border-bottom: 1px solid var(--line); }
.question-block:first-child { padding-top: 0; }
.question-block:last-child { border-bottom: 0; }
.question-number { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 700; }
.question-block h3 { margin: 0 0 8px; font-size: 14px; }
.question-block p { margin: 0 0 12px 38px; color: var(--muted); font-size: 12px; }

.matrix-layout { display: grid; grid-template-columns: minmax(420px, 1fr) 270px; gap: 24px; align-items: start; }
.risk-matrix { display: grid; grid-template-columns: 44px repeat(5, 1fr); grid-template-rows: repeat(5, 68px) 32px; gap: 3px; }
.matrix-cell { position: relative; display: grid; place-items: center; min-width: 0; font-size: 10px; font-weight: 700; color: rgba(23,37,31,.65); }
.matrix-label { background: transparent; color: var(--muted); font-size: 10px; text-align: center; }
.matrix-low { background: #bfdda0; }
.matrix-medium { background: #f1df6e; }
.matrix-high { background: #efb64e; }
.matrix-critical { background: #df6f60; }
.risk-bubble { width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #173d32; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.risk-bubble.target { background:#fff; color:#173d32; border-color:#173d32; box-shadow:inset 0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.18); }
.movement-row { grid-template-columns:42px 1fr auto; align-items:center; }
.mapped-initiative { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--line); }
.mapped-initiative span { color:var(--muted); font-size:12px; }
.mapped-initiative .button { grid-column:2; grid-row:1 / span 2; align-self:center; }
.legend { display: grid; gap: 9px; }
.legend-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 9px; align-items: center; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 11px; }
.legend-swatch { width: 14px; height: 14px; }
.legend-row span:last-child { color: var(--muted); }

.doc-preview { min-height: 660px; padding: 56px 64px; border: 1px solid #d4d8d5; background: #fff; box-shadow: var(--shadow); }
.doc-cover { min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid #d5ddd9; }
.doc-seal { width: 68px; height: 68px; display: grid; place-items: center; border: 2px solid var(--green); border-radius: 50%; color: var(--green); font-family: Georgia, serif; font-size: 28px; }
.doc-cover h2 { max-width: 600px; margin: 34px 24px 14px; font-family: Georgia, serif; font-size: 28px; font-weight: 500; text-transform: uppercase; line-height: 1.35; }
.doc-cover p { color: var(--muted); line-height: 1.55; }
.doc-outline { margin-top: 24px; border-top: 1px solid var(--line); }
.outline-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; align-items: center; min-height: 50px; border-bottom: 1px solid var(--line); font-size: 12px; }
.outline-row span:last-child { color: var(--muted); }
.compliance-list { display: grid; gap: 9px; }
.compliance-item { display: grid; grid-template-columns: 20px 1fr; gap: 9px; font-size: 12px; line-height: 1.45; }
.check { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #aac2b7; background: var(--green-soft); color: var(--green); font-size: 10px; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; padding: 12px 16px; border-radius: 7px; background: #132c24; color: #fff; box-shadow: var(--shadow); font-size: 12px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 225px minmax(0,1fr); }
  .sidebar { padding-inline: 14px; }
  .screen { padding-inline: 26px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .rubric-grid { grid-template-columns: repeat(2,1fr); }
  .flow-list { grid-template-columns: repeat(2,1fr); }
  .flow-step:nth-child(2n) { border-right: 0; }
  .flow-step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero-panel { grid-template-columns: 1fr; }
  .content-grid, .matrix-layout { grid-template-columns: 1fr; }
  .form-status-row { grid-template-columns:1fr 1fr auto; }
  .missing-summary { grid-column:1/3; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .topbar { height: 62px; justify-content: space-between; padding: 0 17px; }
  .mobile-brand { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: var(--ink); }
  .mobile-brand .brand-mark { width: 31px; height: 31px; font-size: 17px; background: var(--green); color: #fff; }
  .save-state { display: none; }
  .topbar-actions { gap: 6px; min-width: 0; }
  .account-email { display: none; }
  .button-ghost { min-height: 36px; padding-inline: 11px; font-size: 11px; }
  .mobile-progress-wrap { display: grid; gap: 5px; padding: 12px 17px; border-bottom: 1px solid var(--line); background: #fff; }
  .mobile-progress-wrap label { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
  .mobile-progress-wrap select { width: 100%; height: 35px; border: 0; background: #fff; color: var(--ink); font-weight: 700; }
  .screen { padding: 27px 17px 65px; }
  .page-progress { align-items:flex-start; }
  .page-progress .button { display:none; }
  .form-status-row { grid-template-columns:1fr auto; }
  .form-status-progress, .missing-summary { grid-column:1/-1; }
  .form-footer { align-items:stretch; flex-direction:column; }
  .form-actions { display:grid; grid-template-columns:1fr; }
  .form-actions .button { width:100%; }
  .page-heading { display: block; }
  .heading-actions { padding-top: 18px; }
  .heading-actions .button { flex: 1; }
  .hero-copy, .hero-aside { padding: 27px 22px; }
  .hero-actions, .form-footer { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 15px; }
  .stat strong { font-size: 24px; }
  .rubric-grid, .flow-list { grid-template-columns: 1fr; }
  .rubric-item, .flow-step { border-right: 0; }
  .flow-step:nth-child(n+2) { border-top: 1px solid var(--line); }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .risk-card { grid-template-columns: 38px 1fr; }
  .risk-card > .button { grid-column: 2; justify-self: start; }
  .matrix-layout { overflow-x: auto; }
  .risk-matrix { min-width: 590px; }
  .doc-preview { padding: 24px 16px; }
  .doc-cover h2 { font-size: 22px; }
}
/* Authentication sits outside the editor so a private draft never flashes before session recovery. */
[hidden] { display: none !important; }
.auth-gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #eff4f1; }
.auth-card { width: min(100%, 480px); padding: 44px; background: #fff; border: 1px solid #dce6df; border-radius: 20px; box-shadow: 0 20px 70px #14332214; }
.auth-card .brand-mark { display: inline-grid; place-items: center; margin-bottom: 28px; }
.auth-card h1 { margin: 12px 0; font-size: clamp(26px, 5vw, 38px); line-height: 1.14; }
.auth-card p { line-height: 1.6; }
.auth-card .button { margin-top: 20px; }
.auth-note { color: #66756b; font-size: 12px; margin-top: 24px; }
.account-email { color: #66756b; font-size: 12px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Visual layer v2 (26 Sep 2026): Apple-style polish blended with the original
   Rangka OACP look. Keeps the dark sidebar, serif headlines and accent bars of
   the first design; adds soft rounded cards, frosted top bar and Inter body
   text. Palette: light blue canvas with a blue accent. Overrides only — layout
   and behaviour are unchanged.
   ========================================================================== */
:root {
  --ink: #0f1f33;
  --muted: #5b6b80;
  --line: rgba(15, 31, 51, .09);
  --surface: #ffffff;
  --canvas: #f2f7fd;
  --green: #1f6fd1;
  --green-strong: #1558ad;
  --green-soft: #e4effc;
  --sky: #8cc8ff;
  --navy: #0c2340;
  --gold: #1f6fd1;
  --gold-soft: #eef5fe;
  --red: #c2352b;
  --red-soft: #fdeceb;
  --yellow: #a15c00;
  --yellow-soft: #fff4e2;
  --ok: #1a7f4b;
  --ok-soft: #e5f5ec;
  --shadow: 0 1px 2px rgba(15,31,51,.05), 0 10px 30px rgba(31,111,209,.08);
  --radius: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { background: var(--canvas); color: var(--ink); }
button, input, textarea, select { font-family: inherit; }

/* Headlines keep the original serif character */
.page-heading h1, .hero-copy h2, .section-heading h2, .auth-card h1, .progress-big, .stat strong, .score {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
}
.page-heading h1 { font-weight: 500; letter-spacing: -.02em; }
.page-heading p, .hero-copy p { color: var(--muted); }
.eyebrow { color: var(--green); }
.score { color: var(--green); }

/* Sidebar: original dark panel, now deep navy with blue accents */
.sidebar { background: linear-gradient(180deg, #0c2340 0%, #102d52 100%); color: #fff; }
.brand-mark { border: 0; border-radius: 10px; background: var(--sky); color: var(--navy); }
.plan-meta { border-color: rgba(255,255,255,.12); }
.nav-item { border-left: 0; border-radius: 10px; color: #c9d8ea; margin-bottom: 2px; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: rgba(140,200,255,.16); color: #fff; box-shadow: inset 3px 0 0 var(--sky); }
.nav-number { border: 0; border-radius: 7px; background: rgba(255,255,255,.08); color: #b7c9df; }
.nav-item.active .nav-number { background: var(--sky); color: var(--navy); }
.status-dot { background: #4cc38a; }

/* Top bar: frosted */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(242, 247, 253, .78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}

/* Buttons: rounded, not full pills */
.button { border-radius: 12px; font-weight: 600; }
.button-primary { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(31,111,209,.22); }
.button-primary:hover { background: var(--green-strong); }
.button-secondary { background: var(--green-soft); border-color: transparent; color: var(--green-strong); }
.button-secondary:hover { background: #d6e7fb; }
.button-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.button-ghost:hover { border-color: rgba(31,111,209,.35); color: var(--green); }
.text-link { color: var(--green); }

/* Cards: soft radius, hairline border and light shadow */
.panel, .stat, .hero-panel, .page-progress, .form-status-list, .rubric-grid, .flow-list,
.risk-card, .doc-preview, .empty-state, .mapped-initiative {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.panel, .hero-panel, .rubric-grid, .flow-list, .form-status-list { overflow: hidden; }
.panel + .panel { margin-top: 18px; }
.panel-header { border-bottom: 1px solid var(--line); }
.hero-aside { background: linear-gradient(155deg, #0c2340 0%, #1f6fd1 100%); color: #fff; }
.progress-track { border-radius: 980px; background: rgba(15,31,51,.08); }
.hero-aside .progress-track { background: rgba(255,255,255,.2); }
.progress-fill { border-radius: 980px; background: var(--green); }
.hero-aside .progress-fill { background: var(--sky); }
.hero-aside .progress-big { color: #fff; }
.hero-aside .eyebrow { color: var(--sky); }
.hero-aside p { color: rgba(255,255,255,.78); }
.stats-grid { gap: 14px; }
.page-progress { border-left: 4px solid var(--green); }
.helper-panel { border: 0; border-left: 3px solid var(--sky); border-radius: 0 var(--radius) var(--radius) 0; background: var(--gold-soft); }
.tag { border: 0; border-radius: 980px; background: var(--green-soft); color: var(--green-strong); }
.form-state { border-radius: 980px; }
.form-state.lengkap { background: var(--ok-soft); color: var(--ok); }
.status-label.done { color: var(--ok); }
.risk-index, .question-number { border-radius: 10px; background: var(--green-soft); color: var(--green); }
.risk-bubble, .choice-chip { border-radius: 980px; }
.choice-chip.active { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.doc-cover { border-radius: 12px; border-color: var(--line); }

/* Inputs */
.input, .textarea, .select { border: 1px solid #cfdcec; border-radius: 12px; background: #fff; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(31,111,209,.15); }

/* Sign-in */
.auth-gate { background: radial-gradient(900px 500px at 50% -10%, #dcecff 0%, var(--canvas) 65%); }
.auth-card { border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 60px rgba(12,35,64,.12); }
.auth-card .brand-mark { border-radius: 12px; }

.toast { border-radius: 12px; background: rgba(12,35,64,.94); bottom: 84px; }

/* Feedback: floating button + dialog */
.feedback-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 30;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 980px; background: var(--navy); color: #fff;
  box-shadow: 0 10px 24px rgba(12,35,64,.28); font-size: 14px; font-weight: 600; cursor: pointer;
}
.feedback-fab:hover { background: var(--green); }
.feedback-backdrop {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: rgba(12,35,64,.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.feedback-dialog {
  width: min(100%, 480px); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 26px; border-radius: 20px; background: #fff; box-shadow: 0 24px 80px rgba(12,35,64,.25);
}
.feedback-dialog h2 { margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 500; }
.feedback-dialog > p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.feedback-dialog .field { margin-bottom: 14px; }
.rating-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rating-row button {
  width: 44px; height: 44px; border: 1px solid #cfdcec; border-radius: 12px; background: #fff;
  font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.rating-row button.active { border-color: var(--green); background: var(--green); color: #fff; }
.feedback-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Phone */
@media (max-width: 760px) {
  .topbar { padding: 0 14px; }
  .topbar-actions .button { min-height: 34px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
  .mobile-brand strong { font-size: 15px; white-space: nowrap; }
  #preview-button { display: none; }
  .mobile-progress-wrap { background: var(--surface); border-bottom: 1px solid var(--line); }
  .mobile-progress-wrap select { border: 1px solid #cfdcec; border-radius: 12px; background: var(--canvas); }
  .screen { padding: 22px 16px 96px; }
  .page-heading h1 { font-size: 30px; }
  .panel-body { padding: 18px; }
  .feedback-fab { right: 14px; bottom: 14px; min-height: 42px; padding: 0 14px; font-size: 13px; }
}