:root {
  --ink: #14233a;
  --muted: #6c7c91;
  --border: #e5eaf1;
  --soft: #f5f7ff;
  --panel: #ffffff;
  --sidebar: linear-gradient(180deg, #08111f 0%, #112748 100%);
  --sidebar-muted: #90a3ba;
  --blue: #246bfe;
  --teal: #00a3a3;
  --mint: #17a673;
  --amber: #ed9a18;
  --purple: #8167e8;
  --danger: #d94b58;
  --shadow: 0 16px 38px rgba(25, 47, 81, 0.08);
  --brand: #0f5cff;
  --brand-2: #2ec7c0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top left, rgba(46, 199, 192, 0.16), transparent 28%), linear-gradient(135deg, #f9fbff 0%, var(--soft) 100%); color: var(--ink); }
button, input, select, textarea { font: inherit; }
a, button { cursor: pointer; }
textarea { min-height: 92px; resize: vertical; }
a { text-decoration: none; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { background: var(--sidebar); color: #fff; display: flex; flex: 0 0 256px; flex-direction: column; min-height: 100vh; padding: 26px 14px 18px; position: sticky; top: 0; height: 100vh; box-shadow: 20px 0 50px rgba(7, 18, 36, 0.14); }
.brand { align-items: center; color: #fff; display: flex; gap: 10px; padding: 0 12px 24px; text-decoration: none; }
.brand strong { display: block; font-size: 1.08rem; letter-spacing: -0.04em; }
.brand small { color: #81a9d8; display: block; font-size: 0.57rem; font-weight: 700; letter-spacing: 0.12em; margin-top: 1px; }
.brand-logo { width: 44px; height: 44px; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.2); }
.auth-logo { width: 56px; height: 56px; margin-bottom: 8px; }
.brand-mark, .auth-mark { align-items: center; display: inline-flex; justify-content: center; height: 34px; }

.workspace-switcher, .account-card { align-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; color: #fff; display: flex; gap: 9px; padding: 10px; text-align: left; width: 100%; }
.workspace-switcher:hover, .account-card:hover { background: rgba(255,255,255,0.1); }
.workspace-switcher strong, .account-card strong { display: block; font-size: 0.73rem; }
.workspace-switcher small, .account-card small { color: var(--sidebar-muted); display: block; font-size: 0.65rem; margin-top: 2px; }
.workspace-initials, .avatar { align-items: center; background: #25466f; border-radius: 8px; color: #bde7ff; display: inline-flex; flex: 0 0 31px; font-size: 0.67rem; font-weight: 800; height: 31px; justify-content: center; }
.chevron, .more { color: #a8bad0; margin-left: auto; }
.nav-links { display: grid; gap: 3px; margin-top: 28px; }
.nav-link { align-items: center; border-radius: 9px; color: #b2c1d4; display: flex; font-size: 0.83rem; font-weight: 600; gap: 12px; padding: 11px 12px; text-decoration: none; }
.nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-link.active { background: rgba(66,214,209,0.13); color: #8ff1ed; }
.nav-link > span { font-size: 1rem; width: 14px; text-align: center; }
.sidebar-foot { border-top: 1px solid rgba(255,255,255,0.09); display: grid; gap: 10px; margin-top: auto; padding-top: 14px; }

.main-content { min-width: 0; flex: 1; }
.topbar { align-items: center; background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--border); display: flex; height: 72px; justify-content: space-between; padding: 0 clamp(24px, 4vw, 52px); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(14px); }
.breadcrumb { color: var(--muted); display: flex; font-size: 0.78rem; gap: 9px; }
.breadcrumb strong { color: #bbc4d0; }
.topbar-actions { align-items: center; display: flex; gap: 12px; }
.secure-status { align-items: center; color: #4f6d64; display: inline-flex; font-size: 0.71rem; font-weight: 700; gap: 6px; }
.secure-status i { background: var(--mint); border-radius: 999px; display: inline-block; height: 7px; width: 7px; }
.icon-button { background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--muted); font-size: 1.05rem; height: 34px; width: 34px; }
.icon-button:hover { background: var(--soft); border-color: var(--border); color: var(--ink); }
.icon-button.compact { font-size: 0.9rem; }
.user-chip { align-items: center; background: #eaf1ff; border: 0; border-radius: 999px; color: #285db2; display: inline-flex; font-size: 0.73rem; font-weight: 800; gap: 5px; height: 34px; justify-content: center; min-width: 48px; }
.mobile-menu { display: none; }

.content-wrap { margin: 0 auto; max-width: 1480px; padding: 38px clamp(24px, 4vw, 52px) 56px; }
.hero-row, .section-title-row { align-items: end; display: flex; gap: 20px; justify-content: space-between; background: linear-gradient(135deg, rgba(14, 92, 255, 0.06), rgba(46, 199, 192, 0.1)); border: 1px solid rgba(36,107,254,0.12); border-radius: 22px; box-shadow: 0 18px 45px rgba(19, 44, 92, 0.06); padding: 24px 26px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.eyebrow, .section-kicker { color: var(--blue); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; margin: 0 0 7px; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -0.055em; line-height: 1.06; margin-bottom: 9px; }
h2 { font-size: 1.06rem; letter-spacing: -0.03em; margin-bottom: 0; }
.lead { color: var(--muted); font-size: 0.92rem; margin-bottom: 0; }
.primary-button, .secondary-button, .upload-button, .google-button { align-items: center; border-radius: 9px; display: inline-flex; font-weight: 800; gap: 8px; justify-content: center; min-height: 40px; padding: 0 15px; }
.primary-button { background: var(--blue); border: 1px solid var(--blue); color: #fff; box-shadow: 0 7px 16px rgba(36,107,254,0.2); }
.primary-button:hover { background: #1559e8; }
.primary-button span { font-size: 1.22rem; font-weight: 400; line-height: 0; }
.secondary-button { background: #fff; border: 1px solid var(--border); color: var(--ink); }
.secondary-button:hover { border-color: #b4c4d9; }
.text-button { background: transparent; border: 0; color: var(--blue); font-size: 0.76rem; font-weight: 800; padding: 4px 0; }
.text-button span { font-size: 1rem; margin-left: 2px; }

.metrics-grid { display: grid; gap: 15px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 33px 0 20px; }
.metric-card { align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 13px; display: flex; gap: 13px; min-height: 120px; padding: 19px; box-shadow: 0 4px 12px rgba(24,46,78,0.025); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.metric-card:hover, .panel:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(16, 43, 87, 0.08); }
.metric-icon { align-items: center; border-radius: 10px; display: inline-flex; flex: 0 0 37px; font-size: 1.05rem; font-weight: 800; height: 37px; justify-content: center; }
.metric-icon.blue { background: #e9f0ff; color: var(--blue); }.metric-icon.amber { background: #fff3dd; color: var(--amber); }.metric-icon.mint { background: #e4f8f0; color: var(--mint); }.metric-icon.purple { background: #eeeaff; color: var(--purple); }
.metric-card p { color: var(--muted); font-size: 0.73rem; margin-bottom: 3px; }.metric-card strong { display: block; font-size: 1.37rem; letter-spacing: -0.04em; line-height: 1.15; }.metric-card small { color: var(--muted); font-size: 0.66rem; }.metric-card small b { color: var(--mint); }.metric-card .warning-text { color: var(--amber); }

.dashboard-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.8fr) minmax(275px, 0.8fr); }
.panel, .risk-section { background: var(--panel); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 4px 12px rgba(24,46,78,0.025); padding: 22px; }
.panel-heading { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 19px; }.panel-heading .section-kicker { margin-bottom: 5px; }
.assessment-list { display: grid; gap: 10px; }.assessment-item { align-items: center; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 14px; grid-template-columns: 36px minmax(0, 1fr) 140px auto; padding: 12px; }.assessment-icon { align-items: center; background: #eff5ff; border-radius: 9px; color: var(--blue); display: flex; font-size: 0.9rem; font-weight: 800; height: 36px; justify-content: center; width: 36px; }.assessment-item strong { display: block; font-size: 0.8rem; }.assessment-item small { color: var(--muted); display: block; font-size: 0.68rem; margin-top: 3px; }.progress-track { background: #edf1f6; border-radius: 999px; height: 7px; overflow: hidden; }.progress-track i { background: linear-gradient(90deg, #246bfe, #37a5ff); border-radius: inherit; display: block; height: 100%; }.assessment-progress small { display: flex; justify-content: space-between; margin-top: 6px; }.assessment-progress b { color: var(--ink); }.tag { border-radius: 999px; font-size: 0.63rem; font-weight: 800; padding: 5px 8px; white-space: nowrap; }.tag-blue { background: #eaf0ff; color: var(--blue); }.tag-mint { background: #e6f8ef; color: #198b61; }.tag-amber { background: #fff2d9; color: #b66d00; }.tag-slate { background: #eff2f6; color: #65758b; }
.posture-panel { text-align: left; }.coverage-ring { align-items: center; background: conic-gradient(var(--teal) 0 68%, #e8eff1 68% 100%); border-radius: 50%; display: flex; flex-direction: column; height: 128px; justify-content: center; margin: 14px auto 20px; position: relative; width: 128px; }.coverage-ring::before { background: #fff; border-radius: 50%; content: ""; inset: 11px; position: absolute; }.coverage-ring strong, .coverage-ring span { position: relative; z-index: 1; }.coverage-ring strong { font-size: 1.55rem; letter-spacing: -0.06em; }.coverage-ring span { color: var(--muted); font-size: 0.65rem; }.legend-row { border-top: 1px solid var(--border); display: flex; font-size: 0.72rem; justify-content: space-between; padding: 10px 0; }.legend-row span { color: var(--muted); }.legend-dot { border-radius: 999px; display: inline-block; height: 8px; margin-right: 6px; width: 8px; }.completed { background: var(--teal); }.progress { background: var(--amber); }.missing { background: #d2dbe6; }.full-width { width: 100%; }

.risk-section { margin-top: 20px; padding: 22px; }.filter-bar { display: flex; gap: 6px; }.filter { background: #fff; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); font-size: 0.7rem; font-weight: 800; padding: 7px 10px; }.filter.active, .filter:hover { background: #eef3ff; border-color: #cbd9ff; color: var(--blue); }.risk-table-wrap { margin: 18px -4px -3px; overflow-x: auto; }.risk-table { border-collapse: collapse; min-width: 650px; width: 100%; }.risk-table th { border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.63rem; letter-spacing: 0.05em; padding: 0 8px 10px; text-align: left; text-transform: uppercase; }.risk-table td { border-bottom: 1px solid var(--border); font-size: 0.75rem; padding: 13px 8px; }.risk-table tr:last-child td { border-bottom: 0; }.risk-name { font-weight: 800; }.risk-name small { color: var(--muted); display: block; font-size: 0.65rem; font-weight: 500; margin-top: 3px; }.score { align-items: center; border-radius: 7px; display: inline-flex; font-size: 0.7rem; font-weight: 900; justify-content: center; min-width: 31px; padding: 5px; }.score.high { background: #fff0ef; color: var(--danger); }.score.medium { background: #fff6e8; color: #bd7400; }.owner { align-items: center; display: inline-flex; font-weight: 700; gap: 7px; }.owner-avatar { align-items: center; background: #edf1f7; border-radius: 999px; color: #4d627b; display: inline-flex; font-size: 0.6rem; height: 24px; justify-content: center; width: 24px; }.row-menu { background: transparent; border: 0; color: #9aa7b8; font-weight: 900; }

.lower-grid { display: grid; gap: 20px; grid-template-columns: 1.16fr 0.84fr; margin-top: 20px; }.check-list { border-top: 1px solid var(--border); margin: 2px 0 12px; }.check-row { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--border); display: grid; gap: 10px; grid-template-columns: 30px minmax(0, 1fr) 18px; padding: 12px 0; text-align: left; width: 100%; }.check-row:hover strong { color: var(--blue); }.check-icon { align-items: center; border-radius: 999px; display: inline-flex; font-size: 0.75rem; font-weight: 900; height: 24px; justify-content: center; width: 24px; }.check-icon.pending { background: #fff1dc; color: var(--amber); }.check-icon.progress { background: #eaf0ff; color: var(--blue); }.check-row strong { display: block; font-size: 0.73rem; }.check-row small { color: var(--muted); display: block; font-size: 0.65rem; margin-top: 3px; }.row-arrow { color: #9dacbd; }.upload-button { background: #eef3ff; border: 0; color: var(--blue); font-size: 0.7rem; min-height: 31px; padding: 0 10px; }.evidence-list { display: grid; gap: 10px; }.evidence-item { align-items: center; border: 1px solid var(--border); border-radius: 9px; display: grid; gap: 9px; grid-template-columns: 31px 1fr auto; padding: 10px; }.file-icon { align-items: center; background: #edf3fb; border-radius: 7px; color: #496eaa; display: flex; font-size: 0.56rem; font-weight: 900; height: 31px; justify-content: center; }.evidence-item strong { display: block; font-size: 0.71rem; }.evidence-item small { color: var(--muted); display: block; font-size: 0.63rem; margin-top: 3px; }.evidence-item button { background: transparent; border: 0; color: var(--blue); font-size: 0.67rem; font-weight: 800; }
.review-banner { align-items: center; background: linear-gradient(120deg, #eaf6ff, #f1fbf9); border: 1px solid #d6ebea; border-radius: 13px; display: flex; gap: 15px; margin-top: 20px; padding: 20px 22px; }.review-banner-icon { align-items: center; background: #d5f3ef; border-radius: 10px; color: var(--teal); display: flex; flex: 0 0 40px; font-size: 1.35rem; height: 40px; justify-content: center; }.review-banner h2 { font-size: 0.9rem; line-height: 1.35; }.review-banner .section-kicker { color: var(--teal); margin-bottom: 3px; }.review-banner .secondary-button { margin-left: auto; white-space: nowrap; }

.modal { background: #fff; border: 0; border-radius: 16px; box-shadow: 0 24px 70px rgba(10,28,54,0.24); color: var(--ink); max-width: 480px; padding: 0; width: calc(100% - 32px); }.modal::backdrop { background: rgba(11,27,47,0.58); backdrop-filter: blur(3px); }.modal form { padding: 30px; position: relative; }.modal h2 { font-size: 1.45rem; margin-bottom: 10px; }.modal-copy { color: var(--muted); font-size: 0.82rem; line-height: 1.55; margin-bottom: 20px; }.modal label { color: #52647a; display: grid; font-size: 0.71rem; font-weight: 800; gap: 6px; margin: 14px 0; }.modal input, .modal select { background: #fff; border: 1px solid #d9e0ea; border-radius: 8px; color: var(--ink); min-height: 42px; outline: 0; padding: 0 11px; }.modal input:focus, .modal select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,107,254,0.12); }.close-modal { align-items: center; background: #f2f5f8; border: 0; border-radius: 999px; color: var(--muted); display: flex; font-size: 1.25rem; height: 30px; justify-content: center; position: absolute; right: 16px; top: 16px; width: 30px; }.modal-actions { display: flex; gap: 10px; justify-content: end; margin-top: 21px; }.auth-modal { max-width: 455px; }.auth-mark { margin-bottom: 16px; }.google-button { background: #fff; border: 1px solid #d5dce6; color: #25344b; width: 100%; }.google-button:hover { background: #f7f9fc; }.google-button span { align-items: center; background: #fff2ed; border-radius: 999px; color: #ea4335; display: inline-flex; font-family: Arial, sans-serif; font-weight: 900; height: 19px; justify-content: center; width: 19px; }.or-divider { align-items: center; color: #8795a7; display: flex; font-size: 0.68rem; gap: 9px; margin: 17px 0; text-transform: uppercase; }.or-divider span { background: var(--border); height: 1px; flex: 1; }.terms { color: #7d8b9d; font-size: 0.63rem; line-height: 1.45; margin: 14px 0 0; }.toast { background: #17304d; border: 1px solid rgba(255,255,255,0.15); border-radius: 9px; bottom: 22px; box-shadow: 0 15px 35px rgba(10,25,43,0.2); color: #fff; font-size: 0.76rem; left: 50%; max-width: calc(100% - 40px); opacity: 0; padding: 12px 15px; pointer-events: none; position: fixed; transform: translate(-50%, 20px); transition: opacity .22s ease, transform .22s ease; z-index: 10; }.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1120px) { .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.lower-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .sidebar { box-shadow: 18px 0 44px rgba(10,25,43,0.23); left: -270px; position: fixed; transition: left .24s ease; width: 256px; z-index: 20; }.sidebar.open { left: 0; }.mobile-menu { background: transparent; border: 0; color: var(--ink); display: block; font-size: 1.1rem; margin-right: 12px; }.topbar { justify-content: flex-start; }.breadcrumb { flex: 1; }.dashboard-grid { grid-template-columns: 1fr; }.posture-panel { min-height: 0; }.topbar-actions { gap: 6px; }.secure-status { display: none; } }
@media (max-width: 610px) { .content-wrap { padding: 28px 17px 45px; }.topbar { height: 62px; padding: 0 17px; }.breadcrumb span:first-child, .breadcrumb strong { display: none; }.hero-row, .section-title-row { align-items: flex-start; flex-direction: column; }.hero-actions { width: 100%; }.hero-actions button { width: 100%; }.metrics-grid { grid-template-columns: 1fr; margin-top: 25px; }.metric-card { min-height: 96px; }.assessment-item { align-items: start; grid-template-columns: 36px 1fr auto; }.assessment-progress { grid-column: 2 / -1; }.panel, .risk-section { padding: 17px; }.review-banner { align-items: flex-start; flex-wrap: wrap; }.review-banner .secondary-button { margin-left: 0; width: 100%; }.user-chip { min-width: 36px; }.user-chip span { display: none; }.modal form { padding: 24px 20px; }.modal-actions { flex-direction: column-reverse; }.modal-actions button { width: 100%; } }

/* Risk Form Styling */
.risk-input-panel { background: linear-gradient(135deg, #ffffff 0%, #f9fbfd 100%); border: 1px solid #e8ecf4; }
.risk-form { display: grid; gap: 20px; padding: 8px 0; }
.form-section { display: grid; gap: 16px; padding: 18px 20px; background: rgba(255, 255, 255, 0.7); border-radius: 12px; border: 1px solid rgba(36, 107, 254, 0.08); transition: all 0.2s ease; }
.form-section:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(36, 107, 254, 0.12); box-shadow: 0 2px 8px rgba(36, 107, 254, 0.05); }
.form-section:first-child { background: linear-gradient(135deg, rgba(36, 107, 254, 0.06) 0%, rgba(77, 212, 208, 0.03) 100%); border-color: rgba(36, 107, 254, 0.15); }
.form-section:first-child:hover { background: linear-gradient(135deg, rgba(36, 107, 254, 0.08) 0%, rgba(77, 212, 208, 0.04) 100%); }
.form-section:nth-child(2), .form-section:nth-child(3) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: grid; gap: 8px; }
.form-group.full-width { grid-column: span 2; }
.form-label { color: #52647a; display: flex; align-items: center; font-size: 0.72rem; font-weight: 800; gap: 8px; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 2px; transition: color 0.2s ease; }
.form-label:hover { color: var(--blue); }
.form-icon { font-size: 1.1rem; opacity: 0.8; transition: transform 0.2s ease; }
.form-group:focus-within .form-icon { transform: scale(1.2); opacity: 1; }
.required { color: var(--danger); font-weight: 900; }
.form-input { background: #fff; border: 1.5px solid #d9e0ea; border-radius: 10px; color: var(--ink); font-size: 0.9rem; line-height: 1.5; padding: 11px 14px; outline: 0; transition: all 0.2s ease; font-weight: 500; }
.form-input::placeholder { color: #9aacbd; font-weight: 400; }
.form-input:hover { border-color: #cbd9ff; background: #fafbfc; }
.form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36, 107, 254, 0.1), 0 4px 12px rgba(36, 107, 254, 0.15); background: #fff; }
.form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23246bfe' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; padding-right: 36px; }
.form-select option { color: var(--ink); background: #fff; padding: 8px; }
.form-textarea { resize: vertical; min-height: 110px; line-height: 1.6; font-weight: 500; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; padding: 12px 0 0 0; }
.form-actions .primary-button { box-shadow: 0 8px 20px rgba(36, 107, 254, 0.25); transition: all 0.2s ease; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.form-actions .primary-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(36, 107, 254, 0.32); background: #1559e8; }
.form-actions .primary-button:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(36, 107, 254, 0.2); }

@media (max-width: 1120px) { .form-section:nth-child(2), .form-section:nth-child(3) { grid-template-columns: 1fr; } }
@media (max-width: 610px) { .form-section:nth-child(2), .form-section:nth-child(3) { grid-template-columns: 1fr; } .form-group.full-width { grid-column: span 1; } .form-actions { flex-direction: column-reverse; } .form-actions .primary-button { width: 100%; } }