:root { --ink:#14221d; --muted:#607068; --paper:#f4f1e8; --card:#fffdf7; --green:#174f3a; --lime:#d7e96d; --line:#d8d8cd; --amber:#f5c451; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
main { width:min(1180px,calc(100% - 32px)); margin:auto; padding:24px 0 80px; }
.hero { display:grid; grid-template-columns:1.4fr .7fr; align-items:end; gap:30px; margin:40px 0 56px; }
.hero .eyebrow { grid-column:1/-1; }
.eyebrow { margin:0 0 10px; color:#8a5d14; font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { margin:0; font-family:Georgia,serif; font-size:clamp(3rem,7vw,6.6rem); font-weight:500; line-height:.86; letter-spacing:-.055em; }
h1 em { color:var(--green); font-weight:500; } .hero-copy { color:var(--muted); font-size:1.05rem; line-height:1.7; }
.workspace { overflow:hidden; border:1px solid var(--line); border-radius:26px; background:var(--card); box-shadow:0 28px 70px rgba(33,49,42,.11); }
.workspace-head { display:flex; align-items:center; justify-content:space-between; padding:26px 30px; border-bottom:1px solid var(--line); } .workspace-head h2 { margin:0; font:500 2rem Georgia,serif; }
.local-badge { padding:8px 12px; border-radius:99px; color:var(--green); background:#e5f0dc; font-size:.78rem; font-weight:800; }
.tool-grid { display:grid; grid-template-columns:1.1fr .85fr .85fr; }
.tool-grid>section,.tool-grid>form { min-width:0; padding:28px; } .tool-grid>*+* { border-left:1px solid var(--line); }
.step { display:flex; gap:12px; align-items:flex-start; margin-bottom:24px; } .step>span { display:grid; place-items:center; width:33px; height:33px; flex:none; border-radius:50%; color:white; background:var(--green); font-size:.72rem; font-weight:800; }
.step h3 { margin:0 0 4px; font-size:1rem; } .step p { margin:0; color:var(--muted); font-size:.8rem; }
.upload { display:grid; place-items:center; min-height:280px; border:1.5px dashed #96a39d; border-radius:18px; cursor:pointer; text-align:center; background:#f7f8f1; }
.upload input { position:absolute; width:1px; height:1px; opacity:0; } .upload>span { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; color:white; background:var(--green); font-size:2rem; }
.upload small { color:var(--muted); } .crop-wrap { margin-top:16px; } #crop-canvas { display:block; width:100%; height:auto; max-height:360px; border-radius:14px; background:#dfe2dc; touch-action:none; cursor:crosshair; }
.crop-wrap p,.source-note { color:var(--muted); font-size:.76rem; line-height:1.45; } .text-button { width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; color:#8a342c; background:white; cursor:pointer; font-weight:750; }
.settings-panel label { display:block; margin:17px 0 7px; font-size:.78rem; font-weight:800; } label span { float:right; color:var(--muted); font-weight:500; }
select,input { width:100%; margin-top:7px; padding:12px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:white; font:inherit; }
.two-up { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.notice { padding:14px; border-left:4px solid var(--amber); background:#fff6d9; }.notice strong { font-size:.82rem; }.notice p { margin:5px 0 0; color:#67552a; font-size:.73rem; line-height:1.45; }
.primary,.download { display:flex; justify-content:space-between; width:100%; margin-top:20px; padding:15px 17px; border:0; border-radius:11px; color:white; background:var(--green); text-decoration:none; font-weight:800; cursor:pointer; }.primary:disabled { opacity:.45; cursor:not-allowed; }
.empty-result { display:grid; place-items:center; min-height:285px; padding:30px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); text-align:center; }.empty-result span { font-size:2.6rem; color:#9baa9f; }
#output-preview { width:100%; max-height:270px; object-fit:contain; border-radius:14px; background:#e7e7de; } dl { margin:14px 0; } dl div { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); } dt { color:var(--muted); } dd { margin:0; font-weight:800; }.status { margin-top:14px; padding:12px; border-radius:10px; color:#8b2c26; background:#fbe8e5; font-size:.8rem; line-height:1.4; }
@media (max-width:850px) { .hero { grid-template-columns:1fr; }.hero .eyebrow { grid-column:auto; }.tool-grid { grid-template-columns:1fr; }.tool-grid>*+* { border-left:0; border-top:1px solid var(--line); } }
@media (max-width:480px) { main { width:min(100% - 20px,1180px); padding-top:24px; } h1 { font-size:clamp(2.2rem,8vw,3.4rem); line-height:1.02; } .workspace-head { flex-wrap:wrap; align-items:flex-start; gap:12px; padding:18px; }.tool-grid>section,.tool-grid>form { padding:18px; }.local-badge { white-space:nowrap; }.two-up { grid-template-columns:1fr; } }

/* Exam Quick Presets & Enhancers */
.exam-quick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.quick-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 0.78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #ffffff; color: var(--ink); cursor: pointer; transition: all 0.15s ease; font-family: inherit; touch-action: manipulation; }
.quick-chip:hover { border-color: var(--green); color: var(--green); background: #f0fdf4; }
.quick-chip.active { background: var(--green); color: #ffffff; border-color: var(--green); }

.sig-enhancer-group { margin: 10px 0; padding: 10px 12px; background: #f8fbf9; border: 1px solid #d4e7dc; border-radius: 8px; }
.sig-enhancer-group label { display: flex !important; align-items: center; gap: 8px; cursor: pointer; font-size: 0.82rem !important; font-weight: 700; margin: 0 !important; color: var(--green); }
.sig-enhancer-group input[type="checkbox"] { width: auto !important; min-height: 0 !important; margin: 0 !important; }

/* Portal Compliance Validator Card */
.compliance-card { margin-top: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #ffffff; }
.compliance-title { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 8px; }
.compliance-list { list-style: none; padding: 0; margin: 0; }
.compliance-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f2f2eb; font-size: 0.75rem; }
.compliance-item:last-child { border-bottom: none; }
.compliance-label { font-weight: 600; color: var(--ink); }
.compliance-detail { font-size: 0.72rem; color: var(--muted); margin-left: 6px; }
.pass-badge { color: #059669; font-weight: 800; font-size: 0.78rem; display: inline-flex; align-items: center; gap: 3px; }
.fail-badge { color: #dc2626; font-weight: 800; font-size: 0.78rem; display: inline-flex; align-items: center; gap: 3px; }
.compliance-status-banner { margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; text-align: center; }
.compliance-status-banner.pass { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.compliance-status-banner.fail { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* Age Calculator Grid Spacing */
.age-calc-section { margin-top: 2.5rem; }
.age-calc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr); gap: 1.5rem; padding: 26px 30px 30px; }
@media (max-width: 850px) {
  .age-calc-grid { grid-template-columns: 1fr; padding: 20px; }
}


/* Disabled download button state (Remediation Task 5) */
.download.is-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #94a3b8 !important;
  box-shadow: none !important;
}