
:root{
  --navy:#0b2637;--navy2:#071b28;--teal:#18a993;--cyan:#55c9e7;--orange:#ff7a1a;
  --bg:#f3f6f8;--card:#fff;--text:#18303d;--muted:#687b86;--line:#dce5ea;
  --good:#14866f;--warn:#b56a16;--bad:#b84949;--soft:#eef5f7
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text);line-height:1.45}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-header{
  height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:20
}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}
.brand img{width:42px;height:42px}
.brand strong{display:block;color:var(--navy);font-size:17px}
.brand small{display:block;color:var(--teal);font-size:10px;letter-spacing:.16em;font-weight:800}
.header-actions{display:flex;gap:13px;align-items:center}
.save-state{font-size:11px;color:var(--muted)}
.link-btn{font-size:12px;text-decoration:none;color:var(--navy);font-weight:700;border:1px solid var(--line);padding:9px 11px;border-radius:9px}
.shell{display:grid;grid-template-columns:300px 1fr;min-height:calc(100vh - 72px)}
.sidebar{background:var(--navy2);color:#fff;padding:32px 24px;position:sticky;top:72px;height:calc(100vh - 72px);overflow:auto}
.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:var(--teal)}
.sidebar h1{font-size:31px;line-height:1.05;margin:10px 0 13px}
.sidebar-intro p{font-size:13px;color:#b8c9d1}
.steps-nav{display:grid;gap:7px;margin:28px 0}
.step-nav{display:flex;align-items:center;gap:11px;background:transparent;border:0;color:#a9bdc8;text-align:left;padding:10px;border-radius:10px}
.step-nav b{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.18);font-size:11px}
.step-nav.active{background:rgba(255,255,255,.08);color:#fff}
.step-nav.active b{background:var(--teal);border-color:var(--teal);color:#06241f}
.quality-box{margin-top:26px;padding:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:13px}
.quality-top{display:flex;justify-content:space-between;gap:10px;font-size:11px}
.track{height:7px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;margin:10px 0}
.track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--teal),var(--cyan));transition:width .2s}
.quality-box small{font-size:10px;color:#aec0c8}
.privacy-note{margin-top:18px;padding:14px;border:1px dashed rgba(255,255,255,.18);border-radius:12px}
.privacy-note strong,.privacy-note span{display:block}
.privacy-note strong{font-size:11px}
.privacy-note span{font-size:10px;color:#9fb4be;margin-top:5px}

.workspace{padding:30px;min-width:0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;display:none;min-height:640px}
.panel.active{display:block}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}
.panel-head h2{font-size:30px;color:var(--navy);margin:4px 0 5px}
.panel-head p{margin:0;color:var(--muted);font-size:13px}
.status-pill{font-size:10px;font-weight:800;color:var(--teal);background:#e9f7f4;padding:8px 10px;border-radius:999px}
.status-pill.warning{color:var(--warn);background:#fff3e5}
.form-grid{display:grid;gap:15px}
.form-grid.two{grid-template-columns:repeat(2,1fr)}
label{font-size:12px;font-weight:700;color:#3f5764;display:block}
input,select,textarea{
  width:100%;margin-top:6px;border:1px solid #cfdae0;background:#fff;color:var(--text);
  border-radius:10px;padding:11px 12px;outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(24,169,147,.10)}
.client-branding{display:grid;grid-template-columns:1fr 220px;gap:15px;margin-top:20px}
.file-drop{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:190px;border:1.5px dashed #b9cbd4;border-radius:16px;background:#f8fbfc;text-align:center;padding:22px
}
.file-drop.compact{min-height:120px}
.file-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-drop strong{font-size:16px;color:var(--navy)}
.file-drop span{color:var(--navy);font-weight:700}
.file-drop small,.file-drop>span:last-child{color:var(--muted);font-size:11px;margin-top:4px;font-weight:400}
.logo-preview{border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;color:var(--muted);font-size:11px;padding:15px;overflow:hidden}
.logo-preview img{max-width:100%;max-height:90px}
.evidence-meta{margin:20px 0}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.photo-card img{width:100%;height:180px;object-fit:cover}
.photo-card .photo-body{padding:10px}
.photo-card textarea{font-size:11px;min-height:70px}
.photo-card button{border:0;background:#fff0f0;color:#a64242;font-size:10px;padding:6px 8px;border-radius:7px;margin-top:7px}
.judgement-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px}
.findings-list{display:grid;gap:12px;margin:0 0 20px}
.finding{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fbfcfd}
.finding-top{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:10px}
.finding-top strong{color:var(--navy)}
.finding-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:10px}
.small-btn,.ghost-btn,.secondary-btn,.primary-btn{border:0;border-radius:10px;padding:10px 13px;font-weight:800}
.small-btn{background:#eaf8f4;color:var(--teal)}
.primary-btn{background:var(--orange);color:#fff}
.secondary-btn{background:#edf3f5;color:var(--navy);border:1px solid #d9e3e8}
.ghost-btn{background:transparent;color:#6e7d84}
.primary-btn:disabled,.secondary-btn:disabled{opacity:.45;cursor:not-allowed}
.rule-box{margin-top:22px;padding:18px;border-radius:14px;background:#f5f9fa;border:1px solid var(--line)}
.rule-box>div:first-child strong,.rule-box>div:first-child span{display:block}
.rule-box>div:first-child span{font-size:11px;color:var(--muted);margin-top:3px}
.rule-box .form-grid{margin-top:12px}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review-card{border:1px solid var(--line);border-radius:14px;padding:17px;background:#fbfcfd}
.review-card h3{font-size:15px;color:var(--navy);margin-top:0}
.review-card p,.review-card li{font-size:11px;color:var(--muted)}
.review-card ul{padding-left:18px}
.ok{color:var(--good)!important}.missing{color:var(--bad)!important}
.approval-box{margin-top:18px;padding:18px;border-radius:15px;background:#eef8f6}
.check-row{display:flex;gap:9px;align-items:flex-start;margin-bottom:12px;font-size:12px}
.check-row input{width:auto;margin:2px 0 0}
.output-actions{display:flex;gap:10px;flex-wrap:wrap}
.blocking-message{margin:16px 0;font-size:12px;color:var(--bad)}
.report-preview{margin-top:20px;border:1px solid var(--line);border-radius:16px;background:#eef2f4;padding:20px;overflow:auto}
.report-preview.empty{min-height:350px;display:grid;place-items:center;text-align:center;color:var(--muted)}
.report-preview.empty strong,.report-preview.empty span{display:block}
.report-preview.empty span{font-size:12px;margin-top:5px}
.step-controls{display:flex;justify-content:space-between;margin-top:16px}

/* Report */
.report-sheet{width:210mm;min-height:297mm;margin:0 auto;background:#fff;color:#20333d;padding:15mm;box-shadow:0 8px 28px rgba(0,0,0,.08)}
.report-header{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #18a993;padding-bottom:12px}
.report-brand{display:flex;gap:10px;align-items:center}
.report-brand img{width:48px;height:48px}
.report-title small{display:block;color:#18a993;font-size:9px;letter-spacing:.14em;font-weight:800}
.report-title strong{display:block;color:#0b2637;font-size:22px}
.client-logo-report{max-width:45mm;max-height:18mm}
.report-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;margin:14px 0 18px;font-size:10px}
.report-meta div{border-bottom:1px solid #e3e8eb;padding-bottom:5px}
.report-meta span{display:block;color:#7a8990;font-size:8px}
.report-meta strong{display:block;margin-top:2px}
.report-section{margin-top:16px}
.report-section h3{font-size:12px;color:#0b2637;border-left:4px solid #ff7a1a;padding-left:8px;margin-bottom:8px}
.report-summary{font-size:10px;background:#f5f8f9;border-radius:8px;padding:10px}
.report-findings{display:grid;gap:7px}
.report-finding{font-size:9px;border:1px solid #e1e7ea;border-radius:7px;padding:8px}
.report-finding strong{display:block;color:#0b2637}
.report-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.report-photo{border:1px solid #e1e7ea;border-radius:7px;overflow:hidden}
.report-photo img{width:100%;height:55mm;object-fit:cover}
.report-photo p{font-size:8px;margin:6px}
.report-decision{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.report-decision>div{padding:10px;border-radius:8px;background:#f5f8f9}
.report-decision span{display:block;font-size:8px;color:#7a8990}
.report-decision strong{display:block;font-size:12px;margin-top:3px}
.report-footer{margin-top:18px;padding-top:8px;border-top:1px solid #dfe6e9;font-size:7px;color:#7b8b92;display:flex;justify-content:space-between;gap:10px}

@media(max-width:1000px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative;top:auto;height:auto}
  .steps-nav{grid-template-columns:repeat(5,1fr)}
  .step-nav{justify-content:center}
  .step-nav span{display:none}
  .review-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .app-header{padding:0 14px}
  .save-state{display:none}
  .workspace{padding:14px}
  .panel{padding:18px}
  .form-grid.two,.judgement-grid,.client-branding,.finding-grid{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:1fr}
  .panel-head{flex-direction:column}
  .report-sheet{width:100%;min-height:0;padding:20px}
}
@media print{
  body{background:#fff}
  .app-header,.sidebar,.panel-head,.output-actions,.blocking-message,.step-controls{display:none!important}
  .shell{display:block}
  .workspace{padding:0}
  .panel{display:none!important;border:0;padding:0}
  [data-step-panel="5"]{display:block!important}
  .report-preview{border:0;padding:0;margin:0;background:#fff}
  .report-sheet{box-shadow:none;margin:0;width:100%;min-height:auto}
  @page{size:A4;margin:0}
}
