:root{--ht-blue:#363e99;--ht-green:#2fb457;--ht-peri:#677ff9;--ink:#202536;--muted:#667085;--bg:#f3f5fa;--border:#d9dee8;--danger:#b42318;--warn:#b54708;--ok:#067647;--hard-shadow:2px 2px 0 rgba(54,62,153,.055)}
*{box-sizing:border-box}
body{margin:0;font-family:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background-color:var(--bg);background-image:linear-gradient(rgba(54,62,153,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(54,62,153,.022) 1px,transparent 1px);background-size:32px 32px;color:var(--ink);line-height:1.45}
a{color:var(--ht-blue);text-decoration:none;font-weight:650}a:hover{text-decoration:underline}
.topbar{background:#fff;border-bottom:4px solid var(--ht-green);padding:14px 24px;display:flex;align-items:center;gap:24px;position:sticky;top:0;z-index:10;box-shadow:0 1px 0 rgba(54,62,153,.06)}
.topbar:before{content:"";position:absolute;left:0;bottom:-4px;width:72px;height:4px;background:var(--ht-blue)}
.topbar img{height:42px}.topbar nav{display:flex;gap:18px;margin-left:auto;align-items:center}
.container{max-width:1180px;margin:32px auto;padding:0 20px}.narrow{max-width:860px}
.card{position:relative;background:#fff;border:1px solid var(--border);border-left:5px solid var(--ht-blue);border-radius:0;padding:24px;box-shadow:var(--hard-shadow);margin-bottom:24px}
.card:before{content:"";position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-top:2px solid var(--ht-green);border-right:2px solid var(--ht-green);background:transparent}
.hero{overflow:hidden;background:linear-gradient(120deg,var(--ht-blue) 0%,#4651ad 72%,var(--ht-peri) 100%);color:#fff;border:0;border-left:7px solid var(--ht-green);box-shadow:2px 2px 0 rgba(47,180,87,.08);padding:30px}
.hero:before{content:"";position:absolute;top:0;right:0;width:160px;height:100%;background:rgba(255,255,255,.045);clip-path:polygon(58% 0,100% 0,100% 100%,22% 100%)}
.hero:after{content:"";position:absolute;right:34px;bottom:0;width:5px;height:48%;background:rgba(47,180,87,.86);transform:skewX(-18deg);transform-origin:bottom}
.hero>*{position:relative;z-index:1}.hero h1{margin:0 0 8px;font-size:clamp(30px,5vw,48px);line-height:1.04;letter-spacing:-.025em}.muted{color:var(--muted)}.hero .muted{color:#e6e8ff}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:0;padding:11px 17px;border:2px solid transparent;font-weight:800;cursor:pointer;font-size:14px;letter-spacing:.01em;transition:transform .12s ease,box-shadow .12s ease}.btn:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:2px 2px 0 rgba(32,37,54,.11)}
.btn-primary{background:var(--ht-blue);color:#fff}.btn-green{background:var(--ht-green);color:#fff}.btn-secondary{background:#fff;border-color:var(--border);color:var(--ink)}.btn-danger{background:#fff1f0;border-color:#ffb4ad;color:#a8071a}
.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{border-top:1px solid var(--border);border-left-color:var(--ht-green)}.kpi .value{font-size:32px;font-weight:900;color:var(--ht-blue);letter-spacing:-.03em}.kpi .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.form-group{margin-bottom:17px}label{display:block;font-weight:750;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{width:100%;padding:11px 12px;border:1px solid #bfc7d4;border-left:3px solid #bfc7d4;border-radius:0;background:#fff;font:inherit;outline:none}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=date]:focus,select:focus,textarea:focus{border-color:var(--ht-blue);border-left-color:var(--ht-green);box-shadow:0 0 0 2px rgba(103,127,249,.09)}
textarea{min-height:110px;resize:vertical}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}
.flash{padding:12px 15px;border-radius:0;margin-bottom:16px;background:#ecfdf3;color:#067647;border:1px solid #abefc6;border-left:5px solid var(--ht-green);box-shadow:2px 2px 0 rgba(47,180,87,.06)}.flash.error{background:#fef3f2;color:#b42318;border-color:#fecdca;border-left-color:#b42318}
.badge{display:inline-block;padding:5px 10px;border-radius:0;background:#eef2ff;color:var(--ht-blue);border-left:3px solid var(--ht-blue);font-size:11px;font-weight:900;letter-spacing:.035em;text-transform:uppercase}.badge.overdue{background:#fff7ed;color:var(--warn);border-left-color:var(--warn)}.badge.closed{background:#f2f4f7;color:#475467;border-left-color:#667085}.badge.open{background:#ecfdf3;color:var(--ok);border-left-color:var(--ht-green)}
table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left}th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#667085;background:#f2f4f8;border-bottom:2px solid #cfd5df}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:0;box-shadow:2px 2px 0 rgba(54,62,153,.045)}
.progress{height:10px;background:#e4e8f0;border-radius:0;overflow:hidden;border-left:3px solid var(--ht-blue)}.progress>span{display:block;height:100%;background:var(--ht-green)}
.question{padding:24px 0;border-bottom:1px solid var(--border)}.question:last-child{border:0}.question-title{font-weight:800;margin-bottom:13px}.rating-row{display:flex;flex-wrap:wrap;gap:8px}.rating-option input{display:none}.rating-option span{display:block;border:1px solid #c5ccd8;border-left:3px solid #c5ccd8;border-radius:0;padding:10px 12px;background:#fff;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}.rating-option span:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 rgba(54,62,153,.06)}.rating-option input:checked+span{border-color:var(--ht-blue);border-left:5px solid var(--ht-green);background:#eef0ff;color:var(--ht-blue);font-weight:900;box-shadow:2px 2px 0 rgba(47,180,87,.08)}
.section-heading{display:flex;justify-content:space-between;gap:15px;align-items:start}.section-number{color:var(--ht-green);font-size:11px;text-transform:uppercase;font-weight:950;letter-spacing:.12em}.score-big{font-size:52px;font-weight:950;color:var(--ht-blue);line-height:1;letter-spacing:-.045em}
.bar-row{display:grid;grid-template-columns:230px 1fr 65px;gap:14px;align-items:center;margin:14px 0}.bar{height:14px;background:#e8ebf1;border-radius:0;overflow:hidden;border-left:3px solid var(--ht-blue)}.bar span{height:100%;display:block;background:var(--ht-green)}
.saved-indicator{position:fixed;right:20px;bottom:20px;background:#101828;color:#fff;padding:9px 13px;border-radius:0;border-left:4px solid var(--ht-green);box-shadow:2px 2px 0 rgba(54,62,153,.12);font-size:12px;font-weight:800;opacity:0;transition:opacity .2s}.saved-indicator.show{opacity:1}
.login-wrap{max-width:470px;margin:70px auto;padding:0 18px}.logo-center{text-align:center;margin-bottom:25px}.logo-center img{max-width:330px;width:90%}.small{font-size:12px}.danger{color:var(--danger)}.nowrap{white-space:nowrap}
.completion-shell{margin-top:8px}.completion-hero{min-height:220px;display:flex;flex-direction:column;justify-content:center;padding-right:160px}.completion-mark{position:absolute;right:38px;top:50%;transform:translateY(-50%) rotate(45deg);width:88px;height:88px;background:var(--ht-green);display:grid;place-items:center;font-size:48px;font-weight:950;color:#fff;box-shadow:3px 3px 0 rgba(0,0,0,.10)}.completion-mark::first-letter{transform:rotate(-45deg)}
.completion-mark{line-height:1}.completion-mark::after{content:"✓";transform:rotate(-45deg);display:block}.completion-mark{font-size:0}
.completion-grid{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start}.completion-grid h2{font-size:30px;margin:5px 0 10px}.completion-status{min-width:160px;text-align:right}.status-block{display:inline-block;background:var(--ht-green);color:#fff;padding:12px 16px;border-left:6px solid var(--ht-blue);font-size:13px;font-weight:950;letter-spacing:.1em}.completion-note{margin-top:24px;padding:18px;background:#f6f8fc;border-left:5px solid var(--ht-blue);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.card h1,.card h2,.card h3{letter-spacing:-.02em}
.section-heading{padding-bottom:12px;border-bottom:1px solid #eef1f5}
.btn-primary,.btn-green{position:relative}
.btn-primary:after,.btn-green:after{content:"";position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.28}
@media(max-width:800px){.grid-4,.grid-2{grid-template-columns:1fr}.topbar{padding:12px 15px;flex-wrap:wrap}.topbar nav{width:100%;margin-left:0;overflow:auto}.bar-row{grid-template-columns:1fr}.rating-row{display:grid;grid-template-columns:repeat(2,1fr)}.container{margin-top:22px}.card{padding:19px;box-shadow:2px 2px 0 rgba(54,62,153,.045)}.hero{padding:24px}.completion-hero{padding-right:24px;padding-bottom:125px}.completion-mark{right:24px;top:auto;bottom:24px;transform:rotate(45deg);width:72px;height:72px}.completion-grid{grid-template-columns:1fr}.completion-status{text-align:left}.form-actions{justify-content:stretch;flex-direction:column}.form-actions .btn{width:100%}}

/* HT typography - Poppins */
h1,h2,h3,h4,h5,h6,.score-big,.kpi .value{font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;font-weight:700}
body{font-weight:400}
.topbar nav a,.btn,label,.question-title,.section-number,.badge,th,.kpi .label,.status-block,.saved-indicator{font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;font-weight:600}
.hero h1{font-weight:700}
.kpi .value,.score-big{font-weight:700}
.muted,.small,small{font-weight:400}

/* Required-question validation */
.question-missing {
  margin: 14px -16px;
  padding: 22px 16px;
  border: 2px solid #d92d20 !important;
  border-left: 6px solid #d92d20 !important;
  background: #fff7f6;
}
.question-missing .question-title {
  color: #9b1c13;
}
.question-required-message {
  display: inline-block;
  margin: -5px 0 12px;
  padding: 4px 8px;
  background: #d92d20;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.question-missing .rating-option span,
.question-missing textarea {
  border-color: #f3a7a1;
}
.validation-summary {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid #f3a7a1;
  border-left: 6px solid #d92d20;
  background: #fff1f0;
  color: #9b1c13;
  font-size: 14px;
}
.validation-summary[hidden] {
  display: none;
}