:root {
  --ink: #172235;
  --navy: #0b1220;
  --panel: #ffffff;
  --canvas: #f4f6f9;
  --muted: #667085;
  --line: #dde3ea;
  --orange: #f14f21;
  --yellow: #feb800;
  --blue: #00a3ee;
  --green: #7eb900;
  --red: #d92d20;
  --shadow: 0 8px 24px rgba(11, 18, 32, .065);
  --radius: 15px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Inter, "Segoe UI", Arial, sans-serif; line-height: 1.45; }
html:fullscreen, html:fullscreen body { overflow: auto; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.sidebar { background: linear-gradient(180deg,#0b1220 0%,#101b2d 100%); color: #fff; padding: 20px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 24px; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--orange); display: grid; place-items: center; font-weight: 900; letter-spacing: -.04em; box-shadow: 0 8px 22px rgba(241,79,33,.3); }
.brand strong { display: block; font-size: 1rem; }
.brand small { color: #98a2b3; font-size: .72rem; }
.demo-chip { margin-left: auto; background: rgba(254,184,0,.16); color: #ffd868; border: 1px solid rgba(254,184,0,.35); padding: 3px 7px; border-radius: 999px; font-size: .65rem; font-weight: 800; }
.nav-label { color: #667085; text-transform: uppercase; letter-spacing: .13em; font-size: .68rem; font-weight: 800; padding: 0 10px 8px; }
.nav { display: grid; gap: 5px; }
.nav button { border: 1px solid transparent; background: transparent; color: #b7c0cf; padding: 10px 11px; border-radius: 10px; text-align: left; display: flex; gap: 11px; align-items: center; font-weight: 650; }
.nav button:hover, .nav button.active { background: rgba(255,255,255,.065); color: #fff; border-color: rgba(255,255,255,.06); }
.nav button.active { box-shadow: inset 3px 0 var(--orange),0 6px 16px rgba(0,0,0,.12); }
.nav svg { width: 18px; height: 18px; }
.side-foot { margin-top: auto; border-top: 1px solid #243249; padding: 17px 8px 0; color: #98a2b3; font-size: .75rem; }
.side-foot strong { color: #e7ecf3; display: block; margin-bottom: 4px; }
.side-project { margin: 0 0 18px; padding: 15px; border: 1px solid #344157; border-radius: 13px; background: #121d2e; display: grid; gap: 5px; }
.side-project small { color: #64b9f2; font-family: "SFMono-Regular", Consolas, monospace; }
.side-project strong { font-size: .86rem; }.side-project span { color: #aeb8c8; font-size: .72rem; }
.side-project em { justify-self: start; margin-top: 7px; border-radius: 999px; padding: 5px 9px; background: #fff4cb; color: #7a5a00; font-style: normal; font-weight: 800; font-size: .69rem; }
.side-project em i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #9b7210; margin-right: 5px; }

.main { min-width: 0; }
.topbar { height: 66px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 26px; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); box-shadow: 0 3px 14px rgba(11,18,32,.035); }
.mobile-menu { display: none; border: 0; background: #eef1f5; width: 40px; height: 40px; border-radius: 9px; }
.top-title { min-width: 190px; }
.top-title strong { display: block; font-size: .93rem; }
.top-title small { color: var(--muted); }
.search { flex: 1; position: relative; max-width: 430px; margin-left: auto; }
.search input { width: 100%; border: 1px solid var(--line); background: #f8f9fb; border-radius: 10px; padding: 10px 14px 10px 38px; color: var(--ink); }
.search svg { width: 17px; position: absolute; left: 13px; top: 12px; color: var(--muted); }
.role-select { border: 1px solid var(--line); border-radius: 10px; padding: 9px 32px 9px 12px; color: var(--ink); background: #fff; font-weight: 650; max-width: 175px; }
.icon-btn, .primary-btn, .ghost-btn { border-radius: 10px; min-height: 40px; padding: 9px 13px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 750; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.icon-btn:hover, .ghost-btn:hover { background: #f7f8fa; }
.primary-btn { background: var(--orange); border-color: var(--orange); color: #fff; }
.primary-btn:hover { background: #d9431b; }
.icon-btn svg, .primary-btn svg, .ghost-btn svg { width: 17px; height: 17px; }

.content { padding: 24px 26px 54px; max-width: 1700px; margin: 0 auto; }
.presentation-launch { position:fixed; right:20px; bottom:18px; z-index:28; padding:0; }
.presentation-launch>button { border:1px solid rgba(255,255,255,.16); background:rgba(11,18,32,.94); color:#fff; border-radius:9px; padding:8px 11px; display:inline-flex; align-items:center; gap:7px; font-size:.76rem; font-weight:750; box-shadow:0 8px 22px rgba(11,18,32,.22); backdrop-filter:blur(10px); }
.presentation-launch>button:hover { background:#16243a; border-color:rgba(255,255,255,.28); transform:translateY(-1px); }.presentation-launch svg { width:15px;height:15px; }
html:fullscreen .presentation-launch { display:none; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 20px; padding-top:2px; }
.eyebrow { color: var(--orange); text-transform: uppercase; letter-spacing: .14em; font-weight: 850; font-size: .72rem; margin: 0 0 5px; }
h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.1; letter-spacing: -.04em; }
.page-head p { color: var(--muted); margin: 8px 0 0; max-width: 720px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.notice { background: #fff8e1; color: #7a5700; border: 1px solid #f6db86; border-radius: 10px; padding: 9px 12px; font-size: .8rem; margin-bottom: 18px; }

.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: linear-gradient(180deg,#fff 0%,#fbfcfd 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 4px 14px rgba(11,18,32,.035); position: relative; overflow: hidden; }
.kpi:before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent,var(--blue)); opacity:.9; }
.kpi:after { content: ""; position: absolute; width: 64px; height: 64px; border-radius: 50%; right: -25px; top: -25px; background: var(--accent, var(--blue)); opacity: .12; }
.kpi small { color: var(--muted); font-weight: 650; }
.kpi strong { display: block; font-size: 1.8rem; line-height: 1.1; margin: 8px 0 5px; letter-spacing: -.04em; }
.kpi span { font-size: .74rem; color: var(--muted); }
.delta.good { color: #397900; }.delta.warn { color: #a15c00; }.delta.bad { color: var(--red); }

.grid-2 { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: 16px; margin-bottom: 16px; }
.grid-even { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card-head { padding: 17px 18px 13px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid #edf0f3; }
.card-head h2, .card-head h3 { margin: 0; font-size: 1rem; }
.card-head small { color: var(--muted); }
.card-body { padding: 18px; }
.card-tools { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.text-btn { border: 0; background: none; color: #1678a5; font-weight: 750; padding: 3px; }

.lifecycle { display: grid; grid-template-columns: repeat(7,minmax(80px,1fr)); gap: 8px; }
.stage { min-height: 104px; background: #f7f8fa; border: 1px solid #e6eaf0; border-radius: 10px; padding: 11px; position: relative; }
.stage.done { background: #f4f9eb; border-color: #cfe6aa; }
.stage.active { background: #fff4ef; border-color: #ffc6b0; box-shadow: inset 0 -3px var(--orange); }
.stage .num { font-size: .66rem; color: var(--muted); font-weight: 800; }
.stage strong { display: block; font-size: .78rem; margin: 7px 0 12px; }
.stage .bar { height: 5px; border-radius: 5px; background: #dde3ea; overflow: hidden; }
.stage .bar i { display: block; height: 100%; background: var(--blue); }
.stage.done .bar i { background: var(--green); }.stage.active .bar i { background: var(--orange); }
.stage small { display: block; margin-top: 5px; font-size: .67rem; color: var(--muted); }

.zone-bars { display: grid; gap: 14px; }
.zone-row { display: grid; grid-template-columns: 122px 1fr 52px; gap: 10px; align-items: center; font-size: .78rem; }
.zone-row strong { font-size: .78rem; }
.hbar { height: 10px; border-radius: 10px; background: #edf0f4; overflow: hidden; }
.hbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),#66ccff); }
.zone-row:nth-child(2) .hbar i { background: linear-gradient(90deg,var(--orange),#ff9b70); }
.zone-row:nth-child(3) .hbar i { background: linear-gradient(90deg,var(--yellow),#ffd968); }
.zone-row:nth-child(4) .hbar i { background: linear-gradient(90deg,var(--green),#b3d966); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { background: #f6f7f9; color: #475467; text-align: left; padding: 11px 12px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
td { padding: 12px; border-bottom: 1px solid #edf0f3; vertical-align: top; font-size: .875rem; }
tbody tr:hover { background: #fafbfc; }
tr.clickable { cursor: pointer; }
.ref { font-family: "SFMono-Regular", Consolas, monospace; color: #344054; font-size: .74rem; }
.muted { color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 8px; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.status:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.green, .status.approved, .status.closed, .status.satisfactory { background: #eff8e2; color: #4f790e; }
.status.orange, .status.submitted, .status.reviewed, .status.needs-support { background: #fff1e8; color: #b54708; }
.status.red, .status.rejected, .status.unsatisfactory, .status.overdue { background: #feeceb; color: #b42318; }
.status.at-risk { background: #fff0e8; color: #b54708; }
.status.blue, .status.draft, .status.current { background: #e9f7fd; color: #0878a8; }
.status.gray { background: #f0f2f5; color: #5d6673; }
.risk { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.risk.high { background: var(--red); box-shadow: 0 0 0 3px #feeceb; }.risk.medium { background: var(--yellow); }.risk.low { background: var(--green); }

.action-list { display: grid; gap: 9px; }
.action { display: grid; grid-template-columns: 7px 1fr auto; gap: 11px; align-items: start; padding: 10px; border: 1px solid #e8ebef; border-radius: 10px; }
.action > i { height: 100%; min-height: 42px; border-radius: 6px; background: var(--yellow); }
.action.high > i { background: var(--red); }.action.low > i { background: var(--green); }
.action strong { font-size: .8rem; display: block; }.action small { font-size: .72rem; color: var(--muted); }
.date { font-size: .7rem; color: var(--muted); white-space: nowrap; }

.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 13px; }
.filters button, .filters select { border: 1px solid var(--line); background: #fff; color: #475467; padding: 8px 11px; border-radius: 8px; font-size: .78rem; font-weight: 700; }
.filters button.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.project-hero { background: linear-gradient(135deg,#111c2d,#1e314a); color: #fff; border-radius: 16px; padding: 22px; overflow: hidden; position: relative; margin-bottom: 16px; }
.project-hero:after { content:""; position:absolute; width:280px; height:280px; border:55px solid rgba(241,79,33,.12); border-radius:50%; right:-100px; top:-145px; }
.project-hero .hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 20px; position: relative; z-index: 1; }
.project-hero h1 { font-size: 1.9rem; max-width: 760px; }
.project-hero p { color: #bdc7d5; max-width: 760px; }
.project-hero.compact { padding: 18px 22px; margin-bottom: 14px; }
.project-hero.compact h1 { font-size: 1.35rem; }
.project-hero.compact .meta-strip { margin-top: 14px; }
.project-hero.compact .hero-score { width: 92px; height: 92px; border-width: 8px; }
.project-switcher { margin-bottom: 12px; padding: 12px 14px; border: 1px solid #9bcdea; border-left: 5px solid var(--blue); border-radius: 12px; background: #eef8fd; display: grid; grid-template-columns: auto minmax(280px,560px) auto; gap: 16px; align-items: center; }
.project-switcher label { display: grid; }.project-switcher label strong { font-size: .84rem; }.project-switcher label span,.submenu-hint { color: #526173; font-size: .7rem; }
.project-switcher select,.report-selector select { border: 1px solid #aac8da; border-radius: 9px; background: #fff; color: var(--ink); padding: 10px 12px; font-weight: 700; width: 100%; }
.submenu-hint { justify-self: end; padding: 6px 9px; border-radius: 999px; background: #fff; color: #0878a8; font-weight: 800; white-space: nowrap; }
.hero-score { width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; border: 10px solid rgba(255,255,255,.14); border-top-color: var(--yellow); text-align: center; }
.hero-score strong { font-size: 1.7rem; display: block; }.hero-score small { color: #cad2de; }
.meta-strip { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 20px; }
.meta-strip div { min-width: 130px; }.meta-strip small { color: #98a6b9; display: block; }.meta-strip strong { font-size: .86rem; }

.project-workspace { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 14px; align-items: start; }
.project-subnav { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px; position: sticky; top: 88px; box-shadow: var(--shadow); display: grid; gap: 4px; }
.subnav-title { padding: 8px 10px 12px; border-bottom: 1px solid #e9edf2; margin-bottom: 4px; display: grid; gap: 2px; }
.subnav-title small { color: var(--orange); font-size: .62rem; letter-spacing: .13em; font-weight: 850; }.subnav-title strong { font-size: .84rem; }
.project-subnav button { border: 0; background: transparent; color: #5e6978; border-radius: 10px; min-height: 54px; padding: 10px 12px; text-align: left; display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; }
.project-subnav button span { color: #98a2b3; font-size: .7rem; font-family: "SFMono-Regular", Consolas, monospace; }
.project-subnav button strong { font-size: .875rem; }
.project-subnav button:hover { background: #f3f5f7; }
.project-subnav button.active { background: #19202a; color: #fff; box-shadow: inset 3px 0 var(--blue); }
.project-subnav button.active span { color: #5bc1f4; }
.project-panel { min-width: 0; }
.quick-entry { background:#fff; border:1px solid #a8d7ec; border-top:5px solid var(--blue); border-radius:14px; box-shadow:0 10px 24px rgba(0,163,238,.08); margin-bottom:14px; overflow:hidden; }
.quick-entry.open { border-top-color:var(--orange); }
.quick-entry-head { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:16px 18px; }
.quick-entry-head h2 { margin:3px 0 2px; font-size:1.08rem; }.quick-entry-head p { margin:0; color:var(--muted); font-size:.875rem; }
.quick-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#dfe6ed; border-top:1px solid #dfe6ed; }
.quick-steps span { display:flex; align-items:center; gap:9px; background:#f7f9fb; padding:11px 14px; color:#4b5868; font-size:.875rem; font-weight:700; }
.quick-steps b { width:24px; height:24px; border-radius:50%; background:#e8f7fd; color:#0878a8; display:grid; place-items:center; font-size:.72rem; }
.quick-row-form { display:grid; grid-template-columns:repeat(5,minmax(130px,1fr)); gap:10px; align-items:end; padding:16px 18px; background:#f7fafc; border-top:1px solid #e1e8ef; }
.quick-row-form label { display:grid; gap:5px; }.quick-row-form label span { color:#475467; font-size:.875rem; font-weight:800; }.quick-row-form input,.quick-row-form select { width:100%; min-height:40px; border:1px solid #c6d2dd; border-radius:8px; background:#fff; color:var(--ink); padding:8px 9px; font-size:.875rem; }
.quick-row-form .description { grid-column:1/5; }.save-row-btn { min-height:40px; border:0; border-radius:8px; background:var(--orange); color:#fff; font-weight:850; padding:8px 14px; }
.quick-empty { border-top:1px solid #edf0f3; padding:12px 18px; color:var(--muted); font-size:.875rem; }.quick-empty strong { color:var(--ink); margin-right:5px; }
.quick-table-wrap { overflow-x:auto; border-top:1px solid #e4e9ef; }.quick-table { min-width:1080px; }.quick-table th { background:#eef7fb; }.quick-table td { padding:9px 10px; font-size:.875rem; }.quick-table td strong,.quick-table td small { display:block; }.quick-table td small { color:var(--muted); margin-top:2px; }.quick-table select { min-width:112px; border:1px solid #cbd5df; border-radius:7px; background:#fff; padding:6px 7px; font-size:.875rem; }.row-delete { width:28px; height:28px; border:0; border-radius:7px; background:#feeceb; color:#b42318; font-size:1rem; }
.scope-banner { margin-bottom:12px; border-left:5px solid var(--yellow); background:#fffaf0; border-radius:10px; padding:12px 15px; display:flex; gap:12px; align-items:baseline; color:#655222; }
.scope-banner strong { color:#44360f; white-space:nowrap; }.scope-banner span { font-size:.8rem; }
.register-card { margin-bottom:14px; }.register-card .card-head>div { position:relative;padding-left:42px; }.register-number { position:absolute;left:0;top:-3px;width:30px;height:30px;border-radius:9px;background:#e8f7fd;color:#0878a8;display:grid;place-items:center;font-size:.7rem;font-weight:900;font-family:"SFMono-Regular",Consolas,monospace; }
.register-table { min-width:1180px; }.inline-select { min-width:150px;border:1px solid #bfcbd7;border-radius:8px;background:#fff;padding:7px 9px;color:var(--ink);font-weight:700;font-size:.75rem; }.row-note { display:block;max-width:300px;margin-top:6px;color:var(--muted);font-size:.66rem;line-height:1.35; }
.section-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 17px 18px; margin-bottom: 12px; }
.section-title h2 { margin: 3px 0 4px; font-size: 1.2rem; letter-spacing: -.02em; }.section-title p { margin: 0; color: var(--muted); font-size: .78rem; max-width: 740px; }
.section-kicker { text-transform: uppercase; letter-spacing: .12em; color: var(--orange); font-weight: 850; font-size: .65rem; }
.section-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.mini-metric { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 11px; padding: 13px; }
.mini-metric.green { border-left-color: var(--green); }.mini-metric.orange { border-left-color: var(--orange); }.mini-metric.red { border-left-color: var(--red); }
.mini-metric small { color: var(--muted); display: block; font-size: .68rem; }.mini-metric strong { display: block; font-size: 1.15rem; margin: 4px 0 2px; }.mini-metric span { color: var(--muted); font-size: .66rem; }
.section-card { margin-bottom: 14px; }.entry-card { margin-top: 14px; }
.table-action { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 5px 8px; font-size: .68rem; font-weight: 750; margin: 2px; }
.table-action:hover { border-color: var(--blue); color: #0878a8; }
.demo-detail { display: inline-block; margin-left: 6px; padding: 3px 6px; border-radius: 6px; background: #e8f7fd; color: #0878a8; font-size: .58rem; font-weight: 850; vertical-align: middle; }

.package-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.package { border: 1px solid var(--line); border-radius: 11px; padding: 14px; background: #fff; }
.package .top { display: flex; justify-content: space-between; gap: 10px; }
.package h3 { font-size: .9rem; margin: 0; }.package p { font-size: .74rem; color: var(--muted); min-height: 34px; }
.meter { height: 7px; background: #edf0f4; border-radius: 6px; overflow: hidden; margin: 11px 0 7px; }.meter i { height: 100%; display:block; background: var(--blue); }
.package small { font-size: .68rem; color: var(--muted); }

.timeline { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding-bottom: 16px; }
.timeline-item .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); margin: 4px 0 0 6px; position: relative; }
.timeline-item:not(:last-child) .dot:after { content:""; position:absolute; width:2px; height:54px; background:#dce2e9; left:5px; top:12px; }
.timeline-item strong { font-size: .8rem; }.timeline-item p { margin: 3px 0; font-size:.75rem; color: var(--muted); }.timeline-item time { font-size:.68rem; color:#98a2b3; }
.audit-shell { background:#eef1f4;border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:14px; }.audit-head { display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px; }.audit-head h2 { margin:0;font-size:1.05rem; }.audit-head small { color:var(--muted); }.audit-feed { display:grid; }.audit-event { display:grid;grid-template-columns:54px 1fr;gap:14px;position:relative;padding-bottom:18px; }.audit-event:not(:last-child):before { content:"";position:absolute;left:26px;top:46px;bottom:0;width:2px;background:#cbd5df; }.audit-marker { width:46px;height:46px;border-radius:50%;background:#e6f5fc;color:#2185b8;display:grid;place-items:center;z-index:1;border:6px solid #eef1f4; }.audit-marker svg { width:19px;height:19px; }.audit-card { background:#fff;border:1px solid #d3dae2;border-radius:14px;padding:18px 20px;box-shadow:0 5px 15px rgba(17,31,50,.04); }.audit-card>strong { display:block;font-size:1rem;color:#101828; }.audit-card p { margin:7px 0 10px;color:#5d6877; }.audit-card>.ref { display:block;margin-bottom:8px; }.audit-card>small { color:#7b8796; }

.material-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.material-card { border: 1px solid var(--line); background:#fff; border-radius:12px; padding:15px; display:grid; grid-template-columns: 44px 1fr auto; gap:12px; align-items:start; cursor:pointer; }
.material-card:hover { border-color:#9bcdea; box-shadow:0 8px 20px rgba(0,163,238,.08); }
.stone-chip { width:44px; height:44px; border-radius:10px; background: var(--swatch,#d7c8aa); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); position:relative; overflow:hidden; }
.stone-chip:after { content:""; position:absolute; width:58px; height:2px; background:rgba(255,255,255,.65); transform:rotate(-28deg); top:23px; left:-7px; box-shadow:0 8px rgba(92,75,55,.17),0 -8px rgba(92,75,55,.12); }
.material-card h3 { margin:0; font-size:.88rem; }.material-card p { margin:4px 0 0; color:var(--muted); font-size:.72rem; }
.material-card .count { text-align:right; }.material-card .count strong { display:block; font-size:1.1rem; }.material-card .count small { color:var(--muted); font-size:.65rem; }

.partner-card { border: 1px solid var(--line); border-radius: 12px; padding: 15px; background: #fff; display: grid; grid-template-columns: 1fr auto; gap: 13px; }
.partner-card h3 { margin:0; font-size:.92rem; }.partner-card p { margin:4px 0 0; color:var(--muted); font-size:.74rem; }
.score-row { display:flex; gap:5px; margin-top:11px; flex-wrap:wrap; }.score-row span { padding:4px 7px; border-radius:6px; background:#f3f5f7; color:#596273; font-size:.65rem; }
.library-categories { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px; }.library-categories button { min-height:94px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;padding:13px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:start;box-shadow:0 4px 14px rgba(11,18,32,.035); }.library-categories button:hover { border-color:#8dccea;transform:translateY(-1px); }.library-categories button>span { grid-row:1/3;width:28px;height:28px;border-radius:8px;background:#e9f7fd;color:#0878a8;display:grid;place-items:center;font-family:"SFMono-Regular",Consolas,monospace;font-size:.67rem;font-weight:900; }.library-categories strong { font-size:.78rem; }.library-categories small { color:var(--muted);font-size:.68rem; }.library-filters { overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px; }.library-filters button { white-space:nowrap; }.form-help { margin-top:14px;padding:10px 12px;border-radius:8px;background:#eef8fd;color:#28617c;font-size:.75rem; }

.report-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.report-selector { background:linear-gradient(115deg,#122238,#1d344f); color:#fff; border-radius:14px; padding:18px 20px; margin-bottom:14px; display:grid; grid-template-columns:1fr minmax(320px,560px); gap:20px; align-items:center; }
.report-selector h2 { margin:3px 0;font-size:1.08rem; }.report-selector p { margin:3px 0 0;color:#b9c5d5;font-size:.76rem; }.report-selector select { border-color:#47617f; }
.report-tile { text-align:left; border:1px solid var(--line); border-radius:13px; background:#fff; padding:17px; min-height:160px; display:flex; flex-direction:column; align-items:flex-start; }
.report-tile:hover { border-color:var(--blue); box-shadow:0 9px 22px rgba(0,163,238,.1); }
.report-icon { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:#e8f7fd; color:#0878a8; margin-bottom:20px; }
.report-tile:nth-child(2) .report-icon { background:#fff0ea; color:var(--orange); }.report-tile:nth-child(3) .report-icon { background:#fff7d9; color:#946900; }.report-tile:nth-child(4) .report-icon { background:#eef7df; color:#4f790e; }
.report-tile strong { font-size:.88rem; }.report-tile small { color:var(--muted); margin-top:5px; }

.empty { text-align:center; padding:42px 20px; color:var(--muted); }
.empty strong { display:block; color:var(--ink); margin-bottom:5px; }
.permission { background:#fff; border:1px dashed #cbd2dc; border-radius:14px; padding:40px; text-align:center; }
.permission h2 { margin:0 0 8px; }.permission p { color:var(--muted); max-width:520px; margin:0 auto; }

.modal-backdrop { position:fixed; inset:0; background:rgba(3,9,18,.68); z-index:100; display:grid; place-items:center; padding:20px; }
.modal { width:min(720px,100%); max-height:90vh; overflow:auto; background:#fff; border-radius:16px; box-shadow:0 25px 70px rgba(0,0,0,.3); }
.modal.wide { width:min(1020px,100%); }
.modal-head { padding:18px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal-head h2 { margin:0; font-size:1.05rem; }.close-btn { border:0; background:#eef1f4; width:34px; height:34px; border-radius:9px; font-size:1.25rem; }
.modal-body { padding:20px; }.modal-foot { padding:15px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field { display:grid; gap:6px; }.field.full { grid-column:1/-1; }.field label { font-size:.75rem; font-weight:750; color:#475467; }.field input,.field select,.field textarea { width:100%; border:1px solid #cfd6df; border-radius:9px; padding:10px 11px; background:#fff; }.field textarea { min-height:94px; resize:vertical; }
.detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px; }.detail-cell { background:#f6f7f9; border-radius:9px; padding:10px; }.detail-cell small { display:block;color:var(--muted);font-size:.68rem; }.detail-cell strong { font-size:.8rem; }
.callout { border-left:4px solid var(--yellow); background:#fff9e7; padding:12px; color:#6f570d; border-radius:0 9px 9px 0; font-size:.78rem; }

.toast { position:fixed; right:24px; bottom:24px; background:#101828; color:#fff; padding:12px 15px; border-radius:10px; box-shadow:0 16px 40px rgba(0,0,0,.25); z-index:200; font-size:.82rem; animation:toastin .2s ease-out; }
@keyframes toastin { from { transform:translateY(12px); opacity:0; } }

.presentation { position:fixed; inset:0; z-index:300; background:#07101d; color:#fff; display:grid; grid-template-rows:auto 1fr auto; width:100vw; height:100vh; }
.presentation:fullscreen { inset:0; width:100%; height:100%; }
.presentation-head,.presentation-foot { padding:16px 24px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #233046; }
.presentation-foot { border:0; border-top:1px solid #233046; }
.presentation-head button,.presentation-foot button { border:1px solid #34445f; background:#152239; color:#fff; border-radius:9px; padding:9px 13px; }
.slide { padding:clamp(28px,6vw,88px); display:flex; flex-direction:column; justify-content:center; max-width:1400px; margin:auto; width:100%; position:relative; }
.slide .slide-no { color:var(--orange); font-weight:850; letter-spacing:.15em; text-transform:uppercase; font-size:.75rem; }
.slide h2 { font-size:clamp(2rem,5vw,4.5rem); line-height:1; letter-spacing:-.055em; margin:16px 0 25px; max-width:1100px; }
.slide p { color:#b8c3d3; font-size:clamp(1rem,1.8vw,1.35rem); max-width:850px; }
.slide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-top:34px; }.slide-card { background:#111f34; border:1px solid #29384f; border-radius:14px; padding:22px; }.slide-card strong { display:block;font-size:1.4rem;margin-bottom:7px; }.slide-card small { color:#9eabbd; }

/* Refined technical-dashboard typography */
h1, h2, h3, strong, b { font-weight: 600; }
.brand strong { font-size:.9rem; font-weight:600; }
.brand small { font-size:.68rem; }
.demo-chip, .nav-label { font-weight:700; }
.nav button { font-size:.86rem; font-weight:550; }
.side-project strong { font-size:.78rem; font-weight:600; }
.side-project em { font-weight:650; }
.side-foot strong { font-weight:600; }
.top-title strong { font-size:.86rem; font-weight:600; }
.role-select { font-size:.82rem; font-weight:550; }
.icon-btn, .primary-btn, .ghost-btn { font-size:.82rem; font-weight:600; }
.eyebrow, .section-kicker, .subnav-title small { font-weight:700; }
h1 { font-size:clamp(1.4rem,2.2vw,1.95rem); line-height:1.14; letter-spacing:-.025em; font-weight:600; }
.page-head p { font-size:.9rem; }
.kpi small { font-weight:550; }
.kpi strong { font-size:1.5rem; font-weight:600; letter-spacing:-.025em; }
.card-head h2, .card-head h3 { font-size:.92rem; font-weight:600; }
.text-btn { font-size:.78rem; font-weight:600; }
.stage .num { font-weight:650; }
.stage strong { font-size:.74rem; font-weight:600; }
.zone-row strong, td strong { font-weight:600; }
.status { font-size:.7rem; font-weight:650; }
.filters button, .filters select { font-size:.75rem; font-weight:600; }
.project-hero h1 { font-size:1.55rem; font-weight:600; letter-spacing:-.025em; }
.project-hero.compact h1 { font-size:1.16rem; }
.project-switcher label strong { font-size:.79rem; font-weight:600; }
.project-switcher select, .report-selector select { font-size:.82rem; font-weight:550; }
.submenu-hint { font-weight:650; }
.hero-score strong { font-size:1.45rem; font-weight:600; }
.meta-strip strong { font-size:.8rem; font-weight:600; }
.subnav-title strong { font-size:.78rem; font-weight:600; }
.project-subnav button strong { font-size:.8rem; font-weight:550; }
.quick-entry-head h2 { font-size:.98rem; font-weight:600; }
.quick-steps span { font-size:.82rem; font-weight:550; }
.quick-row-form label span { font-size:.8rem; font-weight:600; }
.save-row-btn { font-size:.82rem; font-weight:650; }
.register-number { font-weight:700; }
.inline-select { font-weight:550; }
.section-title h2 { font-size:1.05rem; font-weight:600; letter-spacing:-.01em; }
.mini-metric strong { font-size:1rem; font-weight:600; }
.table-action, .demo-detail { font-weight:650; }
.package h3, .material-card h3, .partner-card h3 { font-size:.82rem; font-weight:600; }
.timeline-item strong { font-size:.76rem; font-weight:600; }
.audit-head h2 { font-size:.96rem; font-weight:600; }
.audit-card>strong { font-size:.9rem; font-weight:600; }
.material-card .count strong { font-size:.98rem; font-weight:600; }
.library-categories button>span { font-weight:700; }
.library-categories strong { font-size:.75rem; font-weight:600; }
.report-selector h2 { font-size:.98rem; font-weight:600; }
.report-tile strong { font-size:.82rem; font-weight:600; }
.modal-head h2 { font-size:.96rem; font-weight:600; }
.field label { font-weight:600; }
.detail-cell strong { font-weight:600; }

#printReport { display:none; }
.print-page { background:#fff; color:#172235; padding:10mm; }
.print-header { display:flex; justify-content:space-between; border-bottom:3px solid var(--orange); padding-bottom:6mm; margin-bottom:6mm; }
.print-header h1 { font-size:21pt; font-weight:600; }.print-header p { margin:3px 0;color:#667085; }
.print-kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:4mm; margin:4mm 0; }.print-kpis div { border:1px solid #dce1e8; padding:4mm; }.print-kpis strong { display:block;font-size:16pt;font-weight:600; }.print-kpis small { color:#667085; }
.print-table { min-width:0;font-size:9pt; }.print-table th,.print-table td { padding:2.5mm; font-size:8pt; }
.print-section { margin-top:6mm; }.print-section h2 { font-size:12pt;font-weight:600;margin:0 0 3mm; }
.print-footer { margin-top:6mm;padding-top:3mm;border-top:1px solid #ccd3dd;color:#667085;font-size:8pt;display:flex;justify-content:space-between; }
.print-page + .print-page { break-before:page; page-break-before:always; }
.print-meta { display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;margin:4mm 0; }.print-meta div { background:#f3f6f9;border-left:2mm solid #00a3ee;padding:3mm; }.print-meta small,.print-meta strong { display:block; }.print-meta small { color:#667085;font-size:7pt; }.print-meta strong { font-size:9pt;margin-top:1mm; }
.print-stage-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:2.5mm; }.print-stage-grid>div { border:1px solid #dce1e8;border-radius:2mm;padding:3mm; }.print-stage-grid span { color:#f14f21;font-size:7pt;font-weight:800; }.print-stage-grid strong { display:block;min-height:10mm;font-size:8pt;margin:1mm 0; }.print-stage-grid b { font-size:13pt; }.print-stage-grid i,.print-graphic-bars i { display:block;height:2mm;border-radius:2mm;background:#e8edf2;overflow:hidden;margin-top:2mm; }.print-stage-grid em,.print-graphic-bars em { display:block;height:100%;background:#00a3ee; }
.print-columns { display:grid;grid-template-columns:1.05fr .95fr;gap:7mm; }.print-graphic-bars { display:grid;gap:2.4mm; }.print-graphic-bars>div { display:grid;grid-template-columns:32mm 1fr 13mm;gap:3mm;align-items:center;font-size:8pt; }.print-graphic-bars i { margin:0;height:3mm; }.print-graphic-bars em.high { background:#d92d20; }.print-graphic-bars em.medium { background:#feb800; }.print-graphic-bars em.low { background:#7eb900; }
.print-decision-list { display:grid;gap:2.5mm; }.print-decision-list>div { display:grid;grid-template-columns:9mm 1fr;column-gap:3mm;border:1px solid #dce1e8;border-left:1.5mm solid #f14f21;border-radius:2mm;padding:3mm; }.print-decision-list b { grid-row:1/3;color:#f14f21; }.print-decision-list strong { font-size:9pt; }.print-decision-list span { color:#667085;font-size:7pt; }.print-callout { background:#fff7df;border-left:2mm solid #feb800;padding:4mm;font-size:9pt; }
.management-onepage { padding:5mm; }.management-onepage .print-header { margin-bottom:3mm;padding-bottom:3mm; }.management-onepage .print-header h1 { font-size:18pt; }.management-onepage .print-section { margin-top:3mm; }.management-onepage .print-section h2 { font-size:10pt;margin-bottom:2mm; }.management-top { display:grid;grid-template-columns:34mm 1.45fr 1fr;gap:5mm;align-items:center; }.management-ring { width:31mm;height:31mm;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at center,#fff 53%,transparent 55%),conic-gradient(#00a3ee var(--p),#e8edf2 0); }.management-ring strong { display:block;font-size:14pt;line-height:1; }.management-ring small { display:block;color:#667085;font-size:6.5pt;max-width:20mm; }.print-kpis.compact { grid-template-columns:repeat(4,1fr);margin:0;gap:2mm; }.print-kpis.compact div { padding:3mm; }.print-kpis.compact strong { font-size:12pt; }.health-legend h3 { margin:0 0 2mm;font-size:8.5pt; }.health-legend>div { height:5mm;display:flex;border-radius:4mm;overflow:hidden; }.health-legend i.green { background:#7eb900; }.health-legend i.amber { background:#feb800; }.health-legend i.red { background:#d92d20; }.health-legend span { display:block;margin-top:2mm;color:#667085;font-size:7pt; }.management-grid { display:grid;grid-template-columns:1.15fr .85fr;gap:7mm; }.zone-summary,.signal-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:2mm; }.zone-summary div,.signal-grid div { background:#f3f6f9;border-radius:2mm;padding:3mm;text-align:center; }.zone-summary strong,.signal-grid strong { display:block;font-size:10.5pt; }.zone-summary span,.signal-grid small { color:#667085;font-size:7pt; }.print-decision-list.compact { gap:1.5mm; }.print-decision-list.compact>div { padding:2mm; }.portfolio-compact th,.portfolio-compact td { padding:1.5mm 2mm;font-size:7pt; }.management-onepage .print-footer { margin-top:3mm;padding-top:2mm; }

@media (max-width: 1200px) { .kpi-grid { grid-template-columns:repeat(3,1fr); }.package-grid,.report-grid { grid-template-columns:repeat(2,1fr); }.lifecycle { grid-template-columns:repeat(4,1fr); }.section-metrics { grid-template-columns:repeat(2,1fr); }.library-categories { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 900px) {
  .shell { grid-template-columns:1fr; }.sidebar { position:fixed; left:-260px; width:236px; z-index:60; transition:left .2s; }.sidebar.open { left:0; box-shadow:20px 0 50px rgba(0,0,0,.35); }.mobile-menu { display:grid;place-items:center; }.topbar { padding:0 15px; }.top-title { display:none; }.content { padding:20px 15px 54px; }.presentation-launch { right:12px;bottom:12px; }.grid-2,.grid-even { grid-template-columns:1fr; }.search { margin-left:0; }.icon-btn .btn-text { display:none; }.role-select { max-width:145px; }.material-grid { grid-template-columns:1fr; }.project-workspace { grid-template-columns:1fr; }.project-subnav { position:static; grid-template-columns:repeat(9,minmax(105px,1fr)); overflow-x:auto; }.subnav-title { grid-column:1/-1;position:sticky;left:0;background:#fff;z-index:1; }.project-subnav button { min-height:52px; }.project-subnav button strong { font-size:.74rem; }.project-switcher,.report-selector { grid-template-columns:1fr;gap:8px; }.submenu-hint { justify-self:start; }.quick-row-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.quick-row-form .description { grid-column:1/-1; }.quick-steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 620px) { .kpi-grid,.section-metrics { grid-template-columns:repeat(2,1fr); }.kpi:last-child { grid-column:1/-1; }.lifecycle { grid-template-columns:repeat(2,1fr); }.package-grid,.report-grid,.library-categories { grid-template-columns:1fr; }.page-head { flex-direction:column; }.head-actions { justify-content:flex-start; }.form-grid,.detail-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.project-hero .hero-grid { grid-template-columns:1fr; }.hero-score { width:92px;height:92px; }.search { display:none; }.project-hero.compact .hero-score { display:none; }.section-title { flex-direction:column; }.quick-entry-head { align-items:flex-start; flex-direction:column; }.quick-row-form,.quick-steps { grid-template-columns:1fr; }.quick-row-form .description { grid-column:auto; }.save-row-btn { width:100%; }.scope-banner { display:grid; }.audit-shell { padding:15px; }.audit-event { grid-template-columns:42px 1fr;gap:8px; }.audit-marker { width:38px;height:38px; }.audit-event:not(:last-child):before { left:20px;top:38px; } }

@media print {
  body * { visibility:hidden !important; }
  body.printing #printReport, body.printing #printReport * { visibility:visible !important; }
  body.printing #printReport { display:block !important; position:absolute; inset:0; width:100%; }
  body.printing { background:#fff; }
  @page { size:A4 landscape; margin:8mm; }
  @page portfolio { size:A3 landscape; margin:8mm; }
  body.print-a3 #printReport { page:portfolio; }
  body.print-a3 .print-page { padding:5mm; }
}