:root{
  --ink:#1d1d1f;
  --muted:#6e6e73;
  --hairline:rgba(0,0,0,.08);
  --glass:rgba(255,255,255,.64);
  --glass-strong:rgba(255,255,255,.82);
  --glass-dark:rgba(23,23,23,.72);
  --teal:#0f747d;
  --teal-soft:rgba(15,116,125,.10);
  --out:#2aa65a;
  --out-soft:#eaf7ef;
  --acc:#c99700;
  --acc-soft:#fff7d9;
  --inc:#d84a4a;
  --inc-soft:#fff0f0;
  --shadow:0 18px 50px rgba(0,0,0,.08);
  --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 12% 12%, rgba(128,216,224,.24), transparent 26%),
    radial-gradient(circle at 88% 4%, rgba(170,201,255,.22), transparent 24%),
    linear-gradient(180deg,#f8fbfd 0%,#f2f5f7 52%,#eef1f3 100%);
  min-height:100vh;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 42%);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

.app-header{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 24px;
  background:rgba(247,249,250,.58);
  border-bottom:1px solid rgba(255,255,255,.75);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 22px rgba(0,0,0,.07);
  color:var(--teal);font-weight:750;letter-spacing:-.02em;
  backdrop-filter:blur(16px);
}
.brand-title{font-weight:700;letter-spacing:-.02em;font-size:15px}
.brand-subtitle{font-size:11px;color:var(--muted);margin-top:1px}
.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.save-state{font-size:11px;color:var(--muted);margin-right:6px}
.btn{
  border:1px solid rgba(255,255,255,.72);
  border-radius:14px;
  padding:9px 14px;
  font-weight:650;
  transition:.16s ease;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:rgba(15,116,125,.92);color:#fff;box-shadow:0 8px 20px rgba(15,116,125,.18)}
.btn-secondary{background:rgba(255,255,255,.68);color:#243136}
.btn-ghost{background:rgba(255,255,255,.34);color:#62666a}

.shell{width:min(1380px,calc(100% - 28px));margin:0 auto;padding:30px 0 72px}
.hero{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin:6px 2px 22px;
}
.kicker{
  margin:0 0 7px;
  color:var(--muted);
  font-size:12px;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero h1{
  margin:0;
  font-size:clamp(34px,4.5vw,54px);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:720;
}
.hero-copy{display:none}
.hero-badge{
  min-width:170px;
  padding:14px 17px;
  border-radius:20px;
  background:var(--glass);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:var(--shadow);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}
.hero-badge-label{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:var(--muted);
  margin-bottom:4px;
}
.hero-badge strong{font-size:20px;letter-spacing:-.02em}

.panel{
  position:relative;
  background:var(--glass);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 14px 44px rgba(0,0,0,.055), inset 0 1px 0 rgba(255,255,255,.75);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:16px;
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}
.identity-panel{background:rgba(255,255,255,.72)}
.panel-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:18px;
}
.panel-heading>div{display:flex;align-items:center;gap:10px}
.panel-heading h2{margin:0;font-size:20px;letter-spacing:-.025em;font-weight:700}
.panel-heading p{margin:2px 0 0;color:var(--muted);font-size:12px;text-align:right}
.step{
  width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.85);
  color:var(--teal);
  font-size:10px;
  font-weight:750;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}

.field-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:11px;font-weight:650;color:#4d5559}
input,select,textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.07);
  background:rgba(255,255,255,.70);
  color:var(--ink);
  border-radius:13px;
  padding:11px 12px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  transition:.14s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(15,116,125,.38);
  box-shadow:0 0 0 4px rgba(15,116,125,.08), inset 0 1px 0 rgba(255,255,255,.85);
  background:rgba(255,255,255,.88);
}
textarea{resize:vertical;min-height:80px;line-height:1.45}

.appraisal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.appraisal-card{
  background:rgba(255,255,255,.48);
  border:1px solid rgba(255,255,255,.78);
  border-radius:18px;
  padding:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
}
.appraisal-card>span{display:block;font-size:11px;font-weight:700;margin-bottom:9px;min-height:28px}
.segmented{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
}
.segmented label{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  min-width:0;
  border-radius:10px;
  padding:8px 6px;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
  border:1px solid transparent;
}
.segmented input{display:none}
.segmented .outstanding{background:var(--out-soft);color:var(--out)}
.segmented .acceptable{background:var(--acc-soft);color:#856b00}
.segmented .incomplete{background:var(--inc-soft);color:var(--inc)}
.segmented label:has(input:checked){
  box-shadow:inset 0 0 0 1.5px currentColor,0 3px 10px rgba(0,0,0,.04);
}

.overall-card,
.final-overall{
  margin-top:14px;
  padding:16px 18px;
  border-radius:19px;
  background:rgba(25,25,25,.78);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.mini-label,
.final-overall>div>span{
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.09em;
  opacity:.67;
  margin-bottom:4px;
}
.overall-card strong{font-size:22px}
.final-overall strong{font-size:24px}
.field.compact{min-width:200px}
.overall-card .field span,.final-overall .field span{color:rgba(255,255,255,.70)}
.overall-card select,.final-overall select{background:rgba(255,255,255,.92);color:var(--ink)}

.criteria-stack{display:flex;flex-direction:column;gap:8px}
.criterion-row{
  display:grid;
  grid-template-columns:minmax(260px,1.25fr) 330px minmax(240px,1fr);
  gap:10px;
  align-items:center;
  padding:11px;
  border:1px solid rgba(0,0,0,.055);
  border-radius:16px;
  background:rgba(255,255,255,.42);
}
.criterion-question{font-size:12px;line-height:1.38;font-weight:600}
.rating-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.rate-choice{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  padding:8px 6px;
  border-radius:10px;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}
.rate-choice input{display:none}
.rate-choice.outstanding{background:var(--out-soft);color:var(--out)}
.rate-choice.acceptable{background:var(--acc-soft);color:#856b00}
.rate-choice.incomplete{background:var(--inc-soft);color:var(--inc)}
.rate-choice:has(input:checked){box-shadow:inset 0 0 0 1.5px currentColor}
.evidence-input textarea{min-height:50px;padding:9px 10px;font-size:11px}
.notes-field{margin-top:12px}

.statement-grid{display:grid;gap:8px}
.attainment-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.progress-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.statement-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:176px;
  border:1px solid rgba(0,0,0,.055);
  border-radius:17px;
  overflow:hidden;
  background:rgba(255,255,255,.46);
  cursor:pointer;
  transition:.14s ease;
}
.statement-card:hover{transform:translateY(-1px);background:rgba(255,255,255,.62)}
.statement-card input{position:absolute;opacity:0;pointer-events:none}
.statement-copy{
  padding:13px 11px;
  font-size:11px;
  line-height:1.42;
  text-align:left;
  flex:1;
}
.statement-select{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:8px 10px 6px;
}
.statement-select .check{
  width:18px;
  height:18px;
  border-radius:5px;
  background:#fff;
  border:1.5px solid #6f767a;
  position:relative;
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.statement-card:has(input:checked) .check{
  background:var(--teal);
  border-color:var(--teal);
}
.statement-card:has(input:checked) .check:after{
  content:"✓";
  position:static;
  font-size:12px;
  line-height:1;
  font-weight:800;
  color:#fff;
  transform:none;
}
.statement-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 10px;
  border-top:1px solid rgba(0,0,0,.05);
  font-size:10px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.statement-card.green .statement-footer{background:rgba(42,166,90,.16);color:var(--out)}
.statement-card.yellow .statement-footer{background:rgba(236,205,73,.22);color:#806700}
.statement-card.red .statement-footer{background:rgba(216,74,74,.14);color:var(--inc)}
.statement-card:has(input:checked){
  box-shadow:0 0 0 2px rgba(15,116,125,.52),0 10px 22px rgba(0,0,0,.06);
}

.summary-panel{background:rgba(255,255,255,.58)}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.summary-box{
  border:1px solid rgba(0,0,0,.055);
  border-radius:16px;
  background:rgba(255,255,255,.46);
  padding:13px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.summary-box>span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.summary-box strong{font-size:16px}
.summary-box select{font-size:11px;padding:8px 9px}

.feedback-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.feedback-card{
  display:flex;
  flex-direction:column;
  gap:9px;
  border:1px solid rgba(0,0,0,.055);
  border-radius:17px;
  padding:14px;
  background:rgba(255,255,255,.46);
}
.feedback-title{font-size:12px;font-weight:700}
.feedback-card textarea{min-height:165px}
.feedback-card.strengths{box-shadow:inset 0 3px 0 rgba(42,166,90,.78)}
.feedback-card.improvements{box-shadow:inset 0 3px 0 rgba(201,151,0,.70)}
.feedback-card.next-steps{box-shadow:inset 0 3px 0 rgba(15,116,125,.70)}

.rubric-panel summary{cursor:pointer;font-weight:700;color:#394348}
.rubric-wrap{overflow:auto;margin-top:14px}
.rubric-table{width:100%;border-collapse:collapse;font-size:11px;line-height:1.38}
.rubric-table th,.rubric-table td{border:1px solid rgba(0,0,0,.07);padding:9px;vertical-align:top}
.rubric-table th{background:rgba(255,255,255,.58)}
.rubric-table th.out{color:var(--out)}
.rubric-table th.acc{color:#8b7200}
.rubric-table th.inc{color:var(--inc)}
.rating-outstanding{color:var(--out)!important}
.rating-acceptable{color:#9b7c00!important}
.rating-incomplete{color:var(--inc)!important}
.mobile-actions{display:none}

@media(max-width:1180px){
  .field-grid{grid-template-columns:repeat(3,1fr)}
  .attainment-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .appraisal-grid{grid-template-columns:repeat(2,1fr)}
  .criterion-row{grid-template-columns:1fr}
  .progress-grid{grid-template-columns:repeat(2,1fr)}
  .feedback-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .app-header{padding:11px 14px}
  .header-actions .save-state,.header-actions .btn{display:none}
  .shell{width:min(100% - 16px,1380px);padding-top:22px}
  .hero{display:block}
  .hero-badge{margin-top:14px;width:100%}
  .panel{padding:17px;border-radius:20px}
  .panel-heading{display:block}
  .panel-heading>div{margin-bottom:6px}
  .panel-heading p{text-align:left}
  .field-grid,.appraisal-grid,.summary-grid,.attainment-grid,.progress-grid{grid-template-columns:1fr}
  .segmented{grid-template-columns:1fr}
  .overall-card,.final-overall{align-items:stretch;flex-direction:column}
  .rating-buttons{grid-template-columns:1fr}
  .statement-card{min-height:140px}
  .mobile-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    position:sticky;
    bottom:8px;
    z-index:20;
    padding:8px;
    border-radius:18px;
    background:rgba(255,255,255,.64);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
}

@media print{
  @page{size:A4;margin:10mm}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{background:#fff;font-size:9pt}
  body:before{display:none}
  .no-print,.mobile-actions{display:none!important}
  .shell{width:100%;margin:0;padding:0}
  .panel{
    box-shadow:none!important;
    backdrop-filter:none!important;
    border:0!important;
    border-radius:0!important;
    padding:0;
    margin:0 0 6mm;
    background:#fff!important;
  }
  .print-card{break-inside:auto}
  .panel-heading{margin-bottom:2.5mm;border-bottom:1px solid #d8dde0;padding-bottom:2mm}
  .panel-heading h2{font-size:12pt}
  .panel-heading p{font-size:7.5pt}
  .step{width:20px;height:20px;border-radius:5px;font-size:7.5pt;box-shadow:none}
  .field-grid{grid-template-columns:repeat(6,1fr);gap:2mm}
  .field>span{font-size:7.2pt}
  input,select,textarea{
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    padding:0!important;
    border-radius:0!important;
    color:#111!important;
  }
  select{appearance:none;-webkit-appearance:none}
  textarea{
    resize:none;
    overflow:visible!important;
    min-height:0;
    white-space:pre-wrap;
    line-height:1.45!important;
    padding-bottom:2.2mm!important;
  }
  .appraisal-grid{grid-template-columns:repeat(4,1fr);gap:1.5mm}
  .appraisal-card{padding:2mm;border-radius:0;border:1px solid #d9dde0;break-inside:avoid;background:#fff}
  .appraisal-card>span{font-size:7.4pt;min-height:auto}
  .segmented{grid-template-columns:repeat(3,1fr);gap:1mm}
  .segmented label{padding:1.1mm .7mm;border-radius:1.5mm;font-size:6.5pt}
  .overall-card,.final-overall{
    border-radius:0;
    padding:2.5mm 3mm;
    margin-top:2.5mm;
    break-inside:avoid;
    background:#242424!important;
  }
  .overall-card strong,.final-overall strong{font-size:12pt}
  .criterion-row{
    grid-template-columns:38% 29% 33%;
    gap:1.5mm;
    padding:1.8mm;
    border-radius:0;
    border:1px solid #d9dde0;
    break-inside:avoid;
    background:#fff;
  }
  .criterion-question{font-size:7.4pt}
  .rating-buttons{gap:.8mm}
  .rate-choice{padding:1.3mm .8mm;border-radius:1.5mm;font-size:6.4pt}
  .evidence-input textarea{font-size:7pt;min-height:7mm}
  .notes-field{margin-top:2.5mm;break-inside:avoid}
  .statement-grid{gap:1mm}
  .attainment-grid{grid-template-columns:repeat(6,1fr)}
  .progress-grid{grid-template-columns:repeat(5,1fr)}
  .statement-card{min-height:34mm;border-radius:0;break-inside:avoid;transform:none!important;box-shadow:none!important;background:#fff}
  .statement-copy{padding:2mm 1.6mm;font-size:6.6pt;line-height:1.25}
  .statement-select{padding:1.5mm 0 1mm}
  .statement-select .check{
    width:12px;
    height:12px;
    border-radius:2px;
    border:1px solid #555;
    background:#fff;
    box-shadow:none;
  }
  .statement-card:has(input:checked) .check{
    background:#111;
    border-color:#111;
  }
  .statement-card:has(input:checked) .check:after{
    content:"✓";
    font-size:8px;
    line-height:1;
    color:#fff;
    font-weight:800;
  }
  .statement-footer{
    justify-content:center;
    padding:1.2mm 1.5mm;
    font-size:6.3pt;
    text-align:center;
  }
  .statement-card:has(input:checked){outline:1.5px solid #111;outline-offset:-1.5px}
  .summary-grid{grid-template-columns:repeat(4,1fr);gap:1.5mm}
  .summary-box{border-radius:0;padding:2mm;gap:1mm;break-inside:avoid;background:#fff}
  .summary-box>span{font-size:6.7pt}
  .summary-box strong{font-size:9pt}
  .summary-box select{font-size:7pt}
  .feedback-grid{grid-template-columns:1fr}
  .feedback-card{border-radius:0;padding:2.5mm;break-inside:avoid;background:#fff}
  .feedback-card textarea{min-height:17mm;height:auto}
  .rubric-panel{break-before:page}
  .rubric-panel details{display:block}
  .rubric-panel summary{list-style:none;font-size:11pt}
  .rubric-panel summary::-webkit-details-marker{display:none}
  .rubric-panel details:not([open])>.rubric-wrap{display:block!important}
  .rubric-table{font-size:6.7pt}
  .rubric-table th,.rubric-table td{padding:1.6mm}
}

/* Observer access gate */
.access-locked{display:none!important}
.access-gate{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 12% 12%,rgba(128,216,224,.24),transparent 26%),
    radial-gradient(circle at 88% 4%,rgba(170,201,255,.22),transparent 24%),
    linear-gradient(180deg,#f8fbfd 0%,#eef2f4 100%);
}
.access-gate.is-hidden{display:none}
.access-card{
  width:min(480px,100%);
  padding:30px;
  border-radius:28px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.84);
  box-shadow:0 24px 70px rgba(0,0,0,.10);
  backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%);
}
.access-brand{display:flex;align-items:center;gap:11px;margin-bottom:28px}
.access-kicker{
  margin:0 0 8px;
  font-size:11px;
  font-weight:750;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--teal);
}
.access-card h1{
  margin:0 0 10px;
  font-size:34px;
  letter-spacing:-.04em;
  line-height:1.05;
}
.access-copy{margin:0 0 22px;color:var(--muted);line-height:1.5;font-size:14px}
.access-button{width:100%;margin-top:12px;padding:12px 16px}
.access-message{min-height:20px;margin:12px 2px 0;font-size:12px;color:var(--muted)}
.access-message.error{color:var(--inc)}
.active-observer{
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:var(--muted);
}
@media(max-width:700px){
  .active-observer{display:none}
  .access-card{padding:22px;border-radius:22px}
  .access-card h1{font-size:29px}
}