:root{
  --bg:#f8f7fb;
  --card:#ffffff;
  --ink:#253143;
  --muted:#667085;
  --line:#e7e8ef;
  --pastel-blue:#e6f2ff;
  --pastel-mint:#e9f8f0;
  --pastel-peach:#fff1e7;
  --pastel-lav:#f0eaff;
  --accent:#6d5dfc;
  --accent-2:#ff6b4a;
  --success:#0f9f6e;
  --warn:#d98b00;
  --danger:#d92d20;
  --shadow:0 16px 40px rgba(31,41,55,.08);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(135deg,#fbf7ff 0%,#f7fbff 48%,#fffaf4 100%);
  color:var(--ink);
}
a{color:inherit}
.app-shell{min-height:100vh;display:grid;grid-template-columns:290px 1fr}
.sidebar{
  position:sticky;top:0;height:100vh;overflow:auto;background:rgba(255,255,255,.78);
  border-right:1px solid var(--line);backdrop-filter:blur(18px);padding:20px 16px;z-index:10;
}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.logo{width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,var(--accent),#9ce3d1);display:grid;place-items:center;color:#fff;font-weight:900}
.brand h1{font-size:15px;line-height:1.2;margin:0}.brand p{margin:2px 0 0;color:var(--muted);font-size:12px}
.menu{display:flex;flex-direction:column;gap:6px}
.menu a{
  text-decoration:none;padding:11px 12px;border-radius:14px;color:#384254;font-size:14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.menu a:hover,.menu a.active{background:var(--pastel-blue);color:#1d3a70}
.menu .pill{font-size:11px;background:#fff;border:1px solid var(--line);padding:2px 7px;border-radius:99px;color:var(--muted)}
.sidebar-actions{margin-top:18px;display:grid;gap:10px}
.main{padding:26px;overflow:hidden}
.topbar{display:none;position:sticky;top:0;z-index:12;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:12px 16px}
.hamburger{border:0;background:var(--accent);color:#fff;border-radius:12px;padding:10px 12px;font-weight:800}
.hero{
  min-height:calc(100vh - 52px);display:grid;align-items:center;padding:38px;
  border-radius:32px;background:
  radial-gradient(circle at 15% 10%,#e9ddff 0 16%,transparent 17%),
  radial-gradient(circle at 82% 20%,#dff8ee 0 18%,transparent 19%),
  linear-gradient(135deg,#fff,#f7f8ff);
  box-shadow:var(--shadow);position:relative;overflow:hidden
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--pastel-mint);padding:8px 12px;border-radius:99px;font-size:13px;font-weight:700;color:#106349}
.hero h2{font-size:clamp(34px,5vw,68px);line-height:1.02;margin:18px 0 16px;letter-spacing:-.05em}
.hero p{font-size:18px;color:var(--muted);max-width:720px;line-height:1.65}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{
  border:0;border-radius:16px;padding:13px 18px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;
  align-items:center;justify-content:center;gap:9px;box-shadow:0 10px 22px rgba(109,93,252,.18)
}
.btn.primary{background:var(--accent);color:#fff}.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.danger{background:var(--accent-2);color:#fff}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:22px;box-shadow:var(--shadow)}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.stat{padding:16px;border-radius:18px;background:var(--pastel-lav)}.stat:nth-child(2){background:var(--pastel-mint)}.stat:nth-child(3){background:var(--pastel-peach)}.stat:nth-child(4){background:var(--pastel-blue)}
.stat b{font-size:28px;display:block}.stat span{color:var(--muted);font-size:13px}
.page{display:none}.page.active{display:block}
.section-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:22px}
.section-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.section-head h2{margin:0;font-size:28px;letter-spacing:-.03em}.section-head p{margin:7px 0 0;color:var(--muted)}
.help{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--pastel-blue);color:#175cd3;font-size:13px;font-weight:900;cursor:help;position:relative}
.help:hover::after{content:attr(data-tip);position:absolute;right:0;top:28px;width:260px;background:#111827;color:#fff;padding:10px;border-radius:12px;font-weight:500;font-size:12px;z-index:20;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}
label{font-size:13px;font-weight:800;color:#344054}
input,select,textarea{
  width:100%;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;color:var(--ink);font:inherit
}
textarea{min-height:90px;resize:vertical}
.wizard-controls{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.progress-wrap{background:#eef0f6;border-radius:99px;height:10px;overflow:hidden;margin:12px 0 22px}.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#12b76a);width:0%}
.question{border:1px solid var(--line);border-radius:18px;padding:16px;margin:12px 0;background:#fff}
.question-top{display:grid;grid-template-columns:80px 1fr auto;gap:12px;align-items:start}.qno{font-weight:900;color:var(--accent)}
.qtext{font-weight:800}.unit{color:var(--muted);font-size:13px;margin-top:5px}
.rating-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rating-row label{display:flex;align-items:center;gap:6px;background:#f7f8fb;border:1px solid var(--line);padding:8px 10px;border-radius:12px;cursor:pointer}
.rating-row input{width:auto}
.attachments{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.file-control{border:1px dashed #c8ccd8;border-radius:14px;padding:11px;background:#fbfcff;font-size:13px}
.camera-btn{background:var(--pastel-peach);border:1px solid #ffd6c7;border-radius:14px;padding:11px;cursor:pointer;font-weight:800;color:#9b2c16}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden}
th,td{padding:13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f3f5ff;color:#344054;font-size:13px}
.badge{display:inline-flex;padding:5px 9px;border-radius:99px;font-weight:800;font-size:12px}.ready{background:#dcfae6;color:#067647}.cond{background:#fef0c7;color:#b54708}.notready{background:#fee4e2;color:#b42318}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.mini-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.score-ring{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) var(--p), #eef0f6 0);margin:auto}
.score-ring span{background:#fff;border-radius:50%;width:88px;height:88px;display:grid;place-items:center;font-size:24px;font-weight:900}
.report-summary{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center}
.alert{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:16px;padding:14px;margin:12px 0}
.footer-note{font-size:12px;color:var(--muted);margin-top:16px}
@media(max-width:1100px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-310px;transition:.25s;width:290px}.sidebar.open{left:0}.topbar{display:flex;justify-content:space-between;align-items:center}.main{padding:18px}.hero-grid,.report-summary{grid-template-columns:1fr}.form-grid,.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.main{padding:14px}.hero{padding:24px;border-radius:24px}.form-grid,.cards,.attachments,.stat-grid{grid-template-columns:1fr}.question-top{grid-template-columns:1fr}.section-head{display:block}.wizard-controls{position:sticky;bottom:0;background:#fff;padding:10px;border-radius:18px;box-shadow:var(--shadow)}table{font-size:13px}th,td{padding:10px}}
@media print{.sidebar,.topbar,.wizard-controls,.btn,.attachments,.camera-btn{display:none!important}.app-shell{display:block}.page{display:block}.section-card{break-inside:avoid;box-shadow:none}.main{padding:0}}

.records-toolbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:end;
  margin:0 0 18px;
}
.btn.small{
  padding:9px 11px;
  border-radius:12px;
  font-size:12px;
  box-shadow:none;
  white-space:nowrap;
}
.action-cell{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.record-detail{
  background:linear-gradient(135deg,#ffffff,#f8fbff);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:14px;
}
.detail-grid>div{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
@media(max-width:900px){
  .records-toolbar,.detail-grid{grid-template-columns:1fr}
  .action-cell{display:grid}
}

.rating-options{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.rating-option{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:start;
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:12px;
  cursor:pointer;
  min-height:66px;
}
.rating-option:hover{
  border-color:#b8c0ff;
  box-shadow:0 8px 20px rgba(109,93,252,.10);
}
.rating-option input{width:auto;margin-top:4px}
.rating-code{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:10px;
  font-weight:900;
  background:#f1f3f8;
}
.rating-copy{
  font-size:13px;
  line-height:1.35;
  color:#344054;
}
.rating-option:has(input:checked){
  border-color:var(--accent);
  background:#f7f5ff;
}
.rating-option:has(input:checked) .rating-code{
  background:var(--accent);
  color:#fff;
}
.icon-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  display:inline-grid;
  place-items:center;
  font-size:18px;
  box-shadow:0 8px 18px rgba(31,41,55,.08);
}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.icon-btn.danger{
  background:var(--accent-2);
  color:#fff;
  border-color:var(--accent-2);
}
.record-modal{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(17,24,39,.54);
  display:none;
  padding:22px;
}
.record-modal.show{
  display:grid;
  place-items:center;
}
.record-modal-panel{
  width:min(1180px, 96vw);
  max-height:92vh;
  overflow:auto;
  background:#fff;
  border-radius:26px;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  padding:22px;
}
.modal-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  position:sticky;
  top:-22px;
  background:#fff;
  z-index:2;
  padding:6px 0 16px;
  border-bottom:1px solid var(--line);
}
.modal-head h2{margin:0}
.modal-head p{margin:6px 0 0;color:var(--muted)}
.modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0;
}
.record-section{
  border:1px solid var(--line);
  border-radius:18px;
  margin:12px 0;
  overflow:hidden;
  background:#fff;
}
.record-section summary{
  cursor:pointer;
  padding:14px 16px;
  background:#f8f9ff;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.record-section table{
  border-radius:0;
}
@media(max-width:720px){
  .rating-options{grid-template-columns:1fr}
  .record-modal{padding:8px}
  .record-modal-panel{padding:14px;border-radius:20px}
  .modal-head{top:-14px}
}
@media print{
  .record-modal{position:static;display:block;background:#fff;padding:0}
  .record-modal-panel{max-height:none;box-shadow:none;width:100%;padding:0}
  .icon-btn,.modal-actions{display:none!important}
}

/* Compact Expert Evaluator rating chips */
.rating-options.compact{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.rating-option.compact-chip{
  display:inline-flex;
  grid-template-columns:none;
  align-items:center;
  gap:8px;
  min-height:auto;
  padding:9px 11px;
  border-radius:999px;
  width:auto;
  max-width:100%;
  line-height:1.25;
}
.rating-option.compact-chip input{
  width:auto;
  margin:0;
  flex:0 0 auto;
}
.rating-inline{
  font-size:13px;
  color:#344054;
  white-space:normal;
}
.rating-option.compact-chip.rating-a{
  background:#f0fdf4;
  border-color:#bbf7d0;
}
.rating-option.compact-chip.rating-b{
  background:#eff6ff;
  border-color:#bfdbfe;
}
.rating-option.compact-chip.rating-c{
  background:#fffbeb;
  border-color:#fde68a;
}
.rating-option.compact-chip.rating-d{
  background:#fef2f2;
  border-color:#fecaca;
}
.rating-option.compact-chip.rating-na{
  background:#f8fafc;
  border-color:#e2e8f0;
}
.rating-option.compact-chip:has(input:checked){
  border-color:var(--accent);
  background:#f7f5ff;
  box-shadow:0 8px 18px rgba(109,93,252,.14);
}
.rating-option.compact-chip:has(input:checked) .rating-inline{
  color:var(--accent);
}
@media(max-width:720px){
  .rating-options.compact{
    display:grid;
    grid-template-columns:1fr;
  }
  .rating-option.compact-chip{
    border-radius:14px;
  }
}