*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F5F3FF;
  --surface:#FFFFFF;
  --card:#F0EBFF;
  --card2:#E9E2FF;
  --border:#DDD6FE;
  --border2:#C4B5FD;
  --purple:#7C3AED;
  --purple2:#6D28D9;
  --purple-light:#6D28D9;
  --purple-faint:#EDE9FE;
  --magenta:#C026D3;
  --magenta2:#A21CAF;
  --magenta-light:#A21CAF;
  --blue:#2563EB;
  --blue-light:#3B82F6;
  --grey:#6B7280;
  --grey2:#9CA3AF;
  --white:#FFFFFF;
  --text:#1E1035;
  --text2:#5B21B6;
  --text3:#6B7280;
  --red:#DC2626;
  --red-bg:#FEE2E2;
  --amber:#B45309;
  --amber-bg:#FEF3C7;
  --green:#16A34A;
  --green-bg:#DCFCE7;
  --success:#059669;
  --radius:10px;--radius-sm:6px;--radius-lg:14px;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body{background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;min-height:100vh}

/* ── GATE SCREEN ── */
#gate-screen{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
#gate-screen.hidden{display:none}
.gate-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:40px 44px;width:100%;max-width:460px;box-shadow:0 0 80px rgba(124,58,237,0.1),0 4px 24px rgba(124,58,237,0.08),0 0 0 1px rgba(192,38,211,0.07)}
.gate-logo{display:flex;align-items:center;gap:14px;margin-bottom:32px}

.gate-logo-text .t1{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-0.02em}
.gate-logo-text .t2{font-size:11.5px;color:var(--purple-light);font-style:italic;margin-top:1px}
.gate-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}
.gate-sub{font-size:12.5px;color:var(--text3);margin-bottom:26px;line-height:1.5}
.audit-id-badge{background:linear-gradient(135deg,var(--purple-faint),rgba(192,38,211,0.06));border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between}
.audit-id-label{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px}
.audit-id-value{font-family:monospace;font-size:18px;font-weight:700;color:var(--purple-light);letter-spacing:0.1em}
.btn-regen{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px;color:var(--text3);font-size:11px;cursor:pointer;font-family:inherit;transition:all .15s}
.btn-regen:hover{border-color:var(--purple);color:var(--purple-light)}
.step-indicator{display:flex;gap:6px;margin-bottom:22px}
.step-dot{width:28px;height:3px;border-radius:2px;background:var(--border);transition:background .3s}
.step-dot.active{background:var(--purple)}
.step-dot.done{background:var(--magenta)}
.step-label{font-size:11.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:12px}
/* Captcha */
.captcha-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.captcha-q{font-size:16px;font-weight:600;color:var(--text);font-family:monospace;letter-spacing:0.05em}
.captcha-input{background:var(--card2);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:8px 12px;color:var(--text);font-size:15px;font-family:monospace;width:80px;text-align:center;outline:none;transition:border .15s}
.captcha-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,0.12)}
.captcha-refresh{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:4px;transition:color .15s}
.captcha-refresh:hover{color:var(--purple-light)}
/* OTP */
.otp-dest{font-size:12px;color:var(--text3);background:var(--card);border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:12px;border:1px solid var(--border)}
.otp-dest span{color:var(--purple-light);font-weight:500}
.otp-inputs{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.otp-digit{width:44px;height:52px;text-align:center;background:var(--card);border:1.5px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);font-size:22px;font-family:monospace;font-weight:700;outline:none;transition:border .15s}
.otp-digit:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,0.12)}
/* Gate buttons */
.btn-gate{width:100%;padding:12px;border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;letter-spacing:0.02em}
.btn-gate-primary{background:linear-gradient(135deg,var(--purple),var(--magenta));color:#fff;box-shadow:0 4px 24px rgba(124,58,237,0.35)}
.btn-gate-primary:hover{box-shadow:0 6px 32px rgba(124,58,237,0.55);transform:translateY(-1px)}
.btn-gate-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-gate-secondary{background:var(--card);color:var(--text2);border:1px solid var(--border);margin-top:8px}
.btn-gate-secondary:hover{background:var(--card2)}
.gate-error{background:var(--red-bg);border:1px solid var(--red);border-radius:var(--radius-sm);padding:10px 14px;font-size:12.5px;color:var(--red);margin-bottom:12px;display:none}
.gate-error.show{display:block}
.gate-success{background:var(--green-bg);border:1px solid var(--green);border-radius:var(--radius-sm);padding:10px 14px;font-size:12.5px;color:var(--green);margin-bottom:12px;display:none}
.gate-success.show{display:block}
.timer-bar{height:2px;background:var(--border);border-radius:1px;overflow:hidden;margin-top:10px}
.timer-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--magenta));border-radius:1px;transition:width 1s linear}
.timer-label{font-size:11px;color:var(--text3);text-align:right;margin-top:4px}
/* Spinner */
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
/* Divider */
.gate-divider{display:flex;align-items:center;gap:12px;margin:18px 0}
.gate-divider span{font-size:11px;color:var(--grey2)}
.gate-divider::before,.gate-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── MAIN APP ── */
.app{display:flex;min-height:100vh}
.sidebar{width:270px;background:var(--surface);border-right:1px solid var(--border);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:100;flex-shrink:0}
.main{margin-left:270px;flex:1;padding:0 0 80px}

/* Sidebar header */
.sidebar-header{padding:18px 20px 14px;border-bottom:1px solid var(--border)}
.sidebar-brand{display:flex;align-items:center;gap:12px;margin-bottom:10px}

.brand-name{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.01em}
.brand-tag{font-size:10px;color:var(--purple-light);font-style:italic}
.audit-id-mini{background:var(--card);border-radius:var(--radius-sm);padding:7px 12px;display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.audit-id-mini-label{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em}
.audit-id-mini-val{font-family:monospace;font-size:12.5px;font-weight:700;color:var(--purple-light);letter-spacing:0.06em}

/* Progress */
.progress-wrap{padding:12px 20px;border-bottom:1px solid var(--border)}
.progress-label{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text3);margin-bottom:5px}
.progress-label span:last-child{color:var(--purple-light);font-weight:600}
.progress-track{height:3px;background:var(--card2);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--magenta));border-radius:2px;transition:width .4s ease;width:0%}
.progress-count{font-size:10px;color:var(--text3);margin-top:4px;text-align:right}

/* Nav */
.nav-section{padding:5px 0}
.nav-group-label{font-size:9px;font-weight:600;color:var(--grey2);letter-spacing:0.1em;text-transform:uppercase;padding:7px 20px 3px}
.nav-item{display:flex;align-items:center;gap:8px;padding:6px 20px;cursor:pointer;transition:all .15s;border:none;background:transparent;width:100%;text-align:left;color:rgba(91,33,182,0.5);font-size:11.5px;font-family:inherit;border-left:2px solid transparent}
.nav-item:hover{background:rgba(124,58,237,0.07);color:var(--purple-light)}
.nav-item.active{background:rgba(124,58,237,0.1);color:var(--purple-light);border-left-color:var(--purple)}
.nav-item.complete::after{content:"✓";margin-left:auto;color:var(--green);font-size:10px;font-weight:700}
.nav-item.partial::after{content:"◐";margin-left:auto;color:var(--amber);font-size:10px}
.nav-num{font-family:monospace;font-size:9px;color:var(--grey2);width:18px;flex-shrink:0}
.nav-check{width:5px;height:5px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:background .2s}
.nav-item.complete .nav-check{background:var(--green)}
.nav-item.partial .nav-check{background:var(--amber)}
.new-sec-badge{display:inline-flex;background:rgba(192,38,211,0.1);color:var(--magenta-light);font-size:8.5px;font-weight:700;padding:1px 5px;border-radius:8px;letter-spacing:.04em;margin-left:5px;vertical-align:middle}

/* Sidebar footer */
.sidebar-footer{padding:14px 20px;border-top:1px solid var(--border);margin-top:auto}
.btn-sidebar{width:100%;padding:9px;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s;margin-bottom:7px}
.btn-save{background:linear-gradient(135deg,var(--purple),var(--magenta));color:#fff}
.btn-save:hover{box-shadow:0 4px 20px rgba(124,58,237,0.4)}
.btn-print{background:var(--card);color:var(--text2);border:1px solid var(--border)}
.btn-print:hover{background:var(--card2)}
.btn-reset{background:transparent;color:var(--red);border:1px solid var(--red-bg);font-size:11.5px;padding:7px}
.btn-reset:hover{background:var(--red-bg)}
.save-status{font-size:10px;color:var(--text3);text-align:center;margin-top:6px;min-height:14px}

/* Topbar */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:50}
.topbar-left{display:flex;align-items:center;gap:14px}

.topbar-section{font-size:13px;font-weight:600;color:var(--text)}
.topbar-meta{font-size:11px;color:var(--text3)}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-audit-id{font-family:monospace;font-size:11.5px;color:var(--purple-light);background:var(--card);padding:5px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);white-space:nowrap}
.section-nav{display:flex;gap:7px}
.btn-prev,.btn-next{padding:6px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s;border:1px solid var(--border)}
.btn-prev{background:var(--card);color:var(--text2)}.btn-prev:hover{background:var(--card2)}
.btn-next{background:linear-gradient(135deg,var(--purple),var(--magenta));color:#fff;border:none}
.btn-next:hover{box-shadow:0 4px 16px rgba(124,58,237,0.4)}
.btn-prev:disabled,.btn-next:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}

/* Content */
.content{padding:24px 28px}

/* Client info */
.client-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.client-grid.three{grid-template-columns:1fr 1fr 1fr}
.field-group{display:flex;flex-direction:column;gap:4px}
.field-group label{font-size:11px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em}
.field-group input,.field-group select,.field-group textarea{padding:9px 12px;border:1px solid var(--border2);border-radius:var(--radius-sm);font-size:13px;font-family:inherit;color:var(--text);background:var(--surface);transition:border .15s;width:100%}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(124,58,237,0.1)}
.field-group select option{background:var(--surface);color:var(--text)}
.field-group textarea{resize:vertical;min-height:68px;line-height:1.5}

/* Section wrap */
.section-wrap{display:none}.section-wrap.active{display:block}
.section-header{background:linear-gradient(135deg,var(--purple-faint),var(--card));border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:18px;display:flex;gap:16px;align-items:flex-start;position:relative;overflow:hidden}
.section-header::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(124,58,237,0.1),transparent 70%);border-radius:50%}
.section-header::after{content:'';position:absolute;bottom:-20px;right:60px;width:80px;height:80px;background:radial-gradient(circle,rgba(192,38,211,0.07),transparent 70%);border-radius:50%}
.section-icon{width:42px;height:42px;background:linear-gradient(135deg,rgba(124,58,237,0.15),rgba(192,38,211,0.1));border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;position:relative;z-index:1}
.section-title{font-size:17px;font-weight:600;color:var(--text);margin-bottom:3px;position:relative;z-index:1}
.section-desc{font-size:12px;color:var(--text3);line-height:1.5;position:relative;z-index:1}
.section-num{font-family:monospace;font-size:10px;color:var(--purple-light);margin-bottom:5px;position:relative;z-index:1}
.section-stats{margin-left:auto;text-align:right;flex-shrink:0;position:relative;z-index:1}
.section-stats .n{font-size:21px;font-weight:700;color:var(--purple-light)}
.section-stats .l{font-size:10px;color:var(--text3)}

/* Question cards */
.question-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;overflow:hidden;transition:border-color .15s}
.question-card:hover{border-color:var(--border2)}
.question-card.answered{border-left:3px solid var(--success)}
.question-card.answered-no{border-left:3px solid var(--red)}
.question-card.answered-na{border-left:3px solid var(--grey2)}
.question-card.answered-partial{border-left:3px solid var(--amber)}
.q-top{padding:12px 14px;display:flex;gap:11px;align-items:flex-start}
.q-id{font-family:monospace;font-size:9px;color:var(--grey);background:var(--card);padding:2px 6px;border-radius:3px;flex-shrink:0;margin-top:2px;white-space:nowrap;border:1px solid var(--border)}
.q-text{font-size:13px;color:var(--text);line-height:1.55;flex:1}
.q-bottom{padding:0 14px 12px;display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.radio-group{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap}
.radio-opt{display:flex;align-items:center;gap:4px;cursor:pointer}
.radio-opt input[type=radio]{width:13px;height:13px;accent-color:var(--purple);cursor:pointer;flex-shrink:0}
.radio-opt span{font-size:12px;color:var(--text3);white-space:nowrap;user-select:none}
.radio-opt:has(input:checked) span{color:var(--purple-light);font-weight:500}
.notes-toggle{font-size:11px;color:var(--purple-light);cursor:pointer;background:none;border:none;font-family:inherit;padding:2px 0;display:flex;align-items:center;gap:4px;margin-left:auto;opacity:.8}
.notes-toggle:hover{opacity:1;text-decoration:underline}
.q-notes{padding:0 14px 10px;display:none}
.q-notes.open{display:block}
.q-notes textarea{width:100%;padding:7px 10px;border:1px solid var(--border2);border-radius:var(--radius-sm);font-size:12px;font-family:inherit;color:var(--text);resize:vertical;min-height:55px;background:var(--card);line-height:1.5}
.q-notes textarea:focus{outline:none;border-color:var(--purple)}
.q-notes label{font-size:10px;color:var(--text3);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em}
.q-input{padding:6px 10px;border:1px solid var(--border2);border-radius:var(--radius-sm);font-size:12px;font-family:inherit;color:var(--text);background:var(--card)}
.q-input:focus{outline:none;border-color:var(--purple)}
.q-input.short{width:90px}.q-input.medium{width:180px}
.tag-risk{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:500;flex-shrink:0;margin-top:2px}
.risk-critical{background:rgba(220,38,38,0.08);color:#B91C1C;border:1px solid rgba(220,38,38,0.22)}
.risk-high{background:rgba(180,83,9,0.08);color:#92400E;border:1px solid rgba(180,83,9,0.2)}
.risk-medium{background:rgba(124,58,237,0.08);color:#6D28D9;border:1px solid rgba(124,58,237,0.2)}
.q-section-label{font-size:10px;font-weight:600;color:var(--purple-light);text-transform:uppercase;letter-spacing:0.1em;padding:14px 0 6px;border-bottom:1px solid var(--border);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.q-section-label::before{content:'';width:16px;height:2px;background:linear-gradient(90deg,var(--purple),var(--magenta));border-radius:1px;flex-shrink:0}
.info-box{background:rgba(124,58,237,0.06);border:1px solid rgba(124,58,237,0.18);border-radius:var(--radius-sm);padding:11px 14px;font-size:12px;color:var(--purple-light);margin-bottom:14px;line-height:1.5}
.branch-note{background:rgba(22,163,74,0.07);border:1px solid rgba(22,163,74,0.2);border-radius:var(--radius-sm);padding:9px 13px;font-size:11.5px;color:var(--green);margin-bottom:10px}
.q-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.divider{border:none;border-top:1px solid var(--border);margin:18px 0}

/* Summary */
.summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:22px}
.summary-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.summary-card .area{font-size:11.5px;font-weight:600;color:var(--text2);margin-bottom:9px}
.summary-bar-wrap{height:4px;background:var(--card2);border-radius:2px;overflow:hidden;margin-bottom:5px}
.summary-bar{height:100%;border-radius:2px;transition:width .5s}
.summary-pct{font-size:10.5px;color:var(--text3)}
.summary-overall{background:linear-gradient(135deg,var(--purple-faint),var(--card));border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:18px;display:flex;align-items:center;gap:22px}
.overall-score{font-size:40px;font-weight:700;color:var(--purple-light);font-family:monospace}
.overall-label{font-size:13px;color:var(--text2)}
.overall-sub{font-size:11.5px;color:var(--text3);margin-top:3px}
.btn-primary{padding:10px 20px;background:linear-gradient(135deg,var(--purple),var(--magenta));color:#fff;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.btn-primary:hover{box-shadow:0 4px 20px rgba(124,58,237,0.4)}

/* Print */
@media print{
  #gate-screen,.sidebar,.topbar,.sidebar-footer,.btn-save,.btn-print,.btn-reset,.notes-toggle,.btn-prev,.btn-next{display:none!important}
  .main{margin-left:0!important;background:#fff!important;color:#000!important}
  .content{padding:12px!important}
  .section-wrap{display:block!important}.q-notes{display:block!important}
  .question-card{break-inside:avoid;page-break-inside:avoid;background:#fff!important;border-color:#ddd!important;color:#000!important}
  .section-header{background:#f0f0f0!important;color:#000!important}
  .section-wrap{page-break-before:always}.section-wrap:first-child{page-break-before:auto}
  @page{margin:14mm 12mm;size:A4}
}
.sidebar::-webkit-scrollbar{width:3px}.sidebar::-webkit-scrollbar-thumb{background:rgba(124,58,237,0.25);border-radius:2px}