:root { color-scheme:light; --bg:#f5f7f4; --surface:#fff; --raised:#f9fbf8; --ink:#15332d; --muted:#64746f; --line:#d6dfdb; --accent:#368b73; --accent-strong:#26705d; --accent-soft:#e4f1ec; --danger:#a94442; --warning:#a66319; font-family:Inter,Segoe UI,system-ui,sans-serif; }
@media(prefers-color-scheme:dark) { :root { color-scheme:dark; --bg:#10241f; --surface:#17332c; --raised:#1d3c34; --ink:#f1f6f3; --muted:#adc0b9; --line:#36564c; --accent:#70c2a7; --accent-strong:#96d7c1; --accent-soft:#244a3e; --danger:#ffaaa5; --warning:#ffc071; } }
* { box-sizing:border-box; }
body { margin:0; min-width:280px; min-height:100vh; background:var(--bg); color:var(--ink); }
.brand-header { min-height:78px; padding:10px clamp(18px,4vw,54px); display:flex; align-items:center; gap:22px; border-bottom:1px solid var(--line); background:var(--surface); }
.brand-header picture { display:flex; }
.brand-header img { display:block; width:190px; height:auto; }
.brand-header div { display:flex; flex-direction:column; padding-left:20px; border-left:1px solid var(--line); }
.brand-header span,.eyebrow { margin:0; color:var(--accent); font-size:.75rem; font-weight:750; letter-spacing:.12em; }
.brand-header strong { font-size:.95rem; }
.brand-header #logout { margin-left:auto; }
main { width:min(1320px,calc(100% - 32px)); margin:0 auto; padding:clamp(28px,5vw,68px) 0; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { margin:.15em 0; font-size:clamp(2rem,5vw,3.5rem); line-height:1.08; letter-spacing:-.035em; }
h2 { margin:.2em 0; font-size:1.55rem; }
.login-panel { width:min(480px,100%); margin:8vh auto 0; padding:clamp(24px,5vw,48px); border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:0 18px 50px #071b1515; }
label { display:block; margin:18px 0; font-size:.9rem; font-weight:650; }
input,select,textarea { width:100%; min-height:46px; margin-top:7px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--raised); color:var(--ink); font:inherit; }
textarea { resize:vertical; }
button,.button-link { min-height:44px; padding:10px 16px; border:1px solid transparent; border-radius:9px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid color-mix(in srgb,var(--accent),transparent 45%); outline-offset:2px; }
.primary { color:#fff; background:var(--accent-strong); }
.secondary { color:var(--ink); border-color:var(--line); background:var(--surface); }
.quiet { color:var(--accent); background:transparent; }
.icon-button { width:44px; padding:0; color:var(--ink); background:transparent; font-size:1.6rem; }
.muted { color:var(--muted); }
.feedback { min-height:1.4em; color:var(--accent-strong); font-weight:650; }
.error { min-height:1.4em; color:var(--danger); }
.hidden { display:none !important; }
.page-heading,.dialog-heading,.actions,.record-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.page-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.filters { display:grid; grid-template-columns:minmax(180px,1fr) minmax(150px,260px); gap:14px; margin:22px 0; }
.record-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:18px; }
.record-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); cursor:pointer; transition:border-color .15s ease,transform .15s ease; }
.record-card:is(:hover,:focus-visible) { border-color:var(--accent); transform:translateY(-1px); outline:none; }
.record-card > img { width:100%; height:170px; padding:16px; object-fit:contain; background:linear-gradient(0deg,var(--raised),var(--surface)); border-bottom:1px solid var(--line); }
.record-body { display:flex; flex-direction:column; flex:1; padding:18px; }
.record-body h3 { margin:0; font-size:1.12rem; }
.record-body p { margin:6px 0; }
.record-action { margin-top:auto; padding-top:10px; color:var(--accent-strong); font-size:.86rem; font-weight:750; }
.status { display:inline-flex; align-items:center; width:max-content; padding:4px 9px; border-radius:999px; font-size:.75rem; font-weight:750; background:var(--raised); }
.status-approved { color:var(--accent-strong); background:var(--accent-soft); }
.status-changes-requested { color:var(--danger); background:color-mix(in srgb,var(--danger),transparent 88%); }
.status-pending { color:var(--warning); background:color-mix(in srgb,var(--warning),transparent 88%); }
.record-meta { color:var(--muted); font-size:.82rem; }
dialog { width:min(780px,calc(100% - 28px)); max-height:calc(100vh - 28px); padding:clamp(20px,4vw,34px); border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--ink); }
dialog::backdrop { background:#061b16b8; backdrop-filter:blur(3px); }
.actions { justify-content:flex-end; flex-wrap:wrap; margin-top:22px; }
.review-dialog { width:min(1240px,calc(100% - 28px)); }
.review-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.75fr); gap:clamp(20px,3vw,40px); margin-top:16px; }
.review-stage { position:sticky; top:0; align-self:start; min-width:0; }
.review-image { display:block; width:100%; height:min(62vh,650px); padding:clamp(14px,3vw,32px); object-fit:contain; border:1px solid var(--line); border-radius:14px; background:var(--raised); }
.review-navigation { display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap:10px; margin-top:12px; text-align:center; }
.arrow-button { width:48px; min-width:48px; padding:0; font-size:1.35rem; }
.review-panel { min-width:0; }
.review-panel > .muted { margin-top:0; }
.record-details { display:grid; grid-template-columns:minmax(105px,.6fr) minmax(0,1fr); gap:6px 12px; margin:16px 0; padding:14px; border-radius:10px; background:var(--raised); font-size:.84rem; }
.record-details dt { color:var(--muted); }
.record-details dd { min-width:0; margin:0; overflow-wrap:anywhere; }
.record-details a { color:var(--accent-strong); }
fieldset { margin:18px 0; padding:14px; border:1px solid var(--line); border-radius:10px; }
legend { padding:0 6px; font-weight:700; }
.defect-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.defect-list label { display:flex; align-items:center; gap:9px; margin:0; padding:8px; border-radius:7px; background:var(--raised); }
.defect-list input { width:20px; min-height:20px; margin:0; accent-color:var(--accent); }
details { margin:18px 0; }
summary { min-height:44px; cursor:pointer; font-weight:700; }
pre { max-height:240px; overflow:auto; padding:12px; border-radius:8px; background:var(--bg); font:12px/1.5 ui-monospace,monospace; white-space:pre-wrap; }
@media(max-width:900px) { .review-layout { grid-template-columns:1fr; } .review-stage { position:static; } .review-image { height:min(48vh,430px); } }
@media(max-width:650px) { .brand-header img { width:145px; } .brand-header div { display:none; } .page-heading,.dialog-heading { align-items:stretch; flex-direction:column; } .page-actions { justify-content:stretch; } .page-actions > * { flex:1; } .filters,.defect-list { grid-template-columns:1fr; } .actions > * { width:100%; } .record-details { grid-template-columns:1fr; gap:2px; } .record-details dd + dt { margin-top:7px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }