*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {

  --ink:#0e0e0f; --paper:#f7f4ef; --warm:#c8a96e; --warm-light:#e8d8b8;

  --warm-dark:#8a6d3e; --accent:#d4583a; --muted:#888078; --surface:#fff;

  --border:#e2ddd6; --danger:#d4583a; --warning:#b8860b; --success:#3a8a5a;

  /* Font size scale — desktop */
  --fs-xs:   10px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-h3:   18px;
  --fs-h2:   22px;
  --fs-h1:   32px;

}

@media (max-width: 720px) {
  :root {
    --fs-xs:   10px;
    --fs-sm:   12px;
    --fs-base: 12px;
    --fs-md:   13px;
    --fs-h3:   14px;
    --fs-h2:   16px;
    --fs-h1:   24px;
  }
}

body { font-family:'DM Sans',sans-serif; background:var(--paper); color:var(--ink); min-height:100vh; }

#reportBody,
#coverReportBody {
  color: var(--ink) !important;
}

#reportBody td:not([style*="color:var(--muted)"]),
#coverReportBody td:not([style*="color:var(--muted)"]) {
  color: var(--ink);
}

#reportBody [style*="color:var(--muted)"],
#coverReportBody [style*="color:var(--muted)"] {
  color: #5f574f !important;
}

body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.3;

  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); }

.shell { display:grid; grid-template-columns:340px 1fr; grid-template-rows:auto 1fr; min-height:100vh; }

/* HEADER */

header { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; border-bottom:1px solid var(--border); background:rgba(247,244,239,.96); backdrop-filter:blur(8px); position:sticky; top:0; z-index:200; }

.logo { font-family:'Playfair Display',serif; font-size:21px; letter-spacing:-.5px; display:flex; align-items:baseline; gap:6px; }

.logo span { color:var(--accent); font-style:italic; }

.badge { font-size:9px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; padding:3px 7px; border:1px solid var(--warm); border-radius:2px; color:var(--warm-dark); }

.hdr-right { display:flex; gap:10px; align-items:center; }

/* API status pill */

.api-pill { font-size:10px; padding:3px 10px; border-radius:10px; font-family:'DM Mono',monospace; border:1px solid; }

.api-pill.ok    { background:rgba(58,138,90,.1);  color:var(--success); border-color:rgba(58,138,90,.3); }

.api-pill.err   { background:rgba(212,88,58,.1);  color:var(--danger);  border-color:rgba(212,88,58,.3); }

.api-pill.check { background:rgba(200,169,110,.1); color:var(--warm-dark); border-color:var(--warm-light); }

/* BUTTONS */

.btn { font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; padding:8px 18px; border-radius:4px; border:none; cursor:pointer; transition:all .18s; }

.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--ink); }

.btn-ghost:hover { border-color:var(--warm); color:var(--warm-dark); }

.btn-primary { background:var(--ink); color:var(--paper); }

.btn-primary:hover { background:var(--accent); }

.btn-sm { padding:6px 12px; font-size:12px; }

/* SIDEBAR */

.sidebar { border-right:1px solid var(--border); padding:24px 20px; overflow-y:auto; background:var(--surface); }

.sec { margin-bottom:24px; }

.sec-label { font-size:10px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; display:block; }

/* Upload */

.drop-zone { border:1.5px dashed var(--warm); border-radius:8px; padding:24px 14px; text-align:center; cursor:pointer; transition:all .2s; background:rgba(200,169,110,.04); position:relative; overflow:hidden; }

.drop-zone:hover,.drop-zone.over { background:rgba(200,169,110,.1); border-color:var(--warm-dark); }

.drop-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; }

.drop-zone.disabled { opacity:.5; cursor:not-allowed; background:rgba(180,170,155,.08); border-color:var(--border); }

.drop-zone.disabled:hover,.drop-zone.disabled.over { background:rgba(180,170,155,.08); border-color:var(--border); }

.drop-zone.disabled input { cursor:not-allowed; }

.dz-icon { width:34px; height:34px; border:1.5px solid var(--warm); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; color:var(--warm-dark); font-size:18px; }

.dz-text { font-size:12px; color:var(--muted); line-height:1.5; }

.dz-text strong { color:var(--ink); }

/* Progress */

.prog-wrap { display:none; margin-top:8px; }

.prog-wrap.on { display:block; }

.prog-bar-bg { height:3px; background:var(--border); border-radius:2px; overflow:hidden; margin-bottom:5px; }

.prog-bar { height:100%; background:var(--warm); border-radius:2px; transition:width .3s; width:0%; }

.prog-status { font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; }

/* Fields */

.field { margin-bottom:12px; }

.field label { display:block; font-size:11px; color:var(--muted); margin-bottom:4px; }

.field input,.field select { width:100%; font-family:'DM Sans',sans-serif; font-size:13px; padding:8px 10px; border:1px solid var(--border); border-radius:4px; background:var(--paper); color:var(--ink); transition:border-color .15s; appearance:none; }

.field input:focus,.field select:focus { outline:none; border-color:var(--warm); }

.field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Unit toggle */

.unit-tog { display:flex; border:1px solid var(--border); border-radius:3px; overflow:hidden; }

.unit-btn { font-family:'DM Sans',sans-serif; font-size:10px; font-weight:500; padding:3px 9px; border:none; background:transparent; color:var(--muted); cursor:pointer; transition:all .15s; border-right:1px solid var(--border); }

.unit-btn:last-child { border-right:none; }

.unit-btn.on { background:var(--ink); color:var(--paper); }

/* Hint */

.dim-hint { font-size:10px; margin-top:5px; padding:5px 8px; border-radius:3px; display:none; }

.hint-ok   { background:rgba(58,138,90,.08);  color:var(--success); border:1px solid rgba(58,138,90,.2); }

.hint-close{ background:rgba(200,169,110,.1); color:var(--warm-dark); border:1px solid var(--warm-light); }

.hint-custom{ background:rgba(212,88,58,.07); color:#b84228; border:1px solid rgba(212,88,58,.2); }

/* Color swatches */

.swatches { display:flex; gap:7px; flex-wrap:wrap; }

.swatch { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .15s,border-color .15s; }

.swatch:hover { transform:scale(1.15); }

.swatch.on { border-color:var(--ink); transform:scale(1.1); }

/* Score ring */

.score-wrap { display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--paper); border:1px solid var(--border); border-radius:6px; margin-bottom:10px; }

.score-ring { width:44px; height:44px; flex-shrink:0; }

.score-info .sv { font-size:22px; font-family:'DM Mono',monospace; line-height:1; }

.score-info .sl { font-size:12px; color:var(--muted); }

.score-info .sd { font-size:12px; color:var(--muted); margin-top:2px; }

.summary-error { color:var(--danger); }

.summary-ok { color:var(--success); }

/* Issue items */

.issues-list { max-height:220px; overflow-y:auto; }

.issue { display:flex; align-items:flex-start; gap:7px; padding:7px 10px; border-radius:4px; font-size:12px; margin-bottom:5px; line-height:1.45; }

.issue.error   { background:rgba(212,88,58,.07);  color:#b84228; }

.issue.warning { background:rgba(212,88,58,.07); color:#b84228; }

.issue.ok      { background:rgba(58,138,90,.07);  color:var(--success); }

.issue.info    { background:rgba(200,169,110,.1);  color:var(--warm-dark); }

.i-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-top:4px; }

.error   .i-dot { background:var(--danger); }

.warning .i-dot { background:var(--danger); }

.ok      .i-dot { background:var(--success); }

.info    .i-dot { background:var(--warm); }

.issue-body { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }

.issue-word { font-family:'DM Mono',monospace; font-size:12px; padding:2px 7px; border:1px solid currentColor; border-radius:999px; line-height:1.4; }

.issue-page-btn { font-family:'DM Mono',monospace; font-size:12px; padding:2px 7px; border:1px solid currentColor; border-radius:999px; background:transparent; color:inherit; cursor:pointer; line-height:1.4; }

.issue-page-btn:hover { background:rgba(14,14,15,.08); }

.issue-page-more { opacity:.75; }

/* Dim grid */

.dim-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:8px; }

.dim-cell { background:var(--paper); border:1px solid var(--border); border-radius:4px; padding:8px 6px; text-align:center; }

.dim-cell .dv { font-family:'DM Mono',monospace; font-size:13px; }

.dim-cell .du { font-size:9px; color:var(--muted); display:block; margin-top:1px; text-transform:uppercase; letter-spacing:.5px; }

.cover-spec-box { margin-top:10px; padding:12px; background:var(--paper); border:1px solid var(--border); border-radius:6px; }

.cover-spec-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:10px; }

.cover-spec-title { font-size:11px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }

.cover-spec-note { font-size:11px; color:var(--warm-dark); line-height:1.5; }

.cover-spec-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }

.cover-spec-cell { border:1px solid var(--border); border-radius:5px; background:var(--surface); padding:9px 10px; }

.cover-spec-cell .k { display:block; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; }

.cover-spec-cell .v { display:block; font-family:'DM Mono',monospace; font-size:12px; color:var(--ink); }

.cover-formula { margin-top:10px; display:grid; gap:6px; }

.cover-formula div { font-family:'DM Mono',monospace; font-size:11px; color:var(--warm-dark); background:rgba(200,169,110,.08); border:1px solid var(--warm-light); border-radius:4px; padding:7px 8px; word-break:break-word; }

/* STAGE */

.stage { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:32px 28px 80px; background:var(--paper); position:relative; min-height:600px; overflow:hidden; }

.stage::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(14,14,15,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(14,14,15,.035) 1px,transparent 1px); background-size:36px 36px; pointer-events:none; }

/* View tabs */

.vtabs { display:flex; border:1px solid var(--border); border-radius:4px; overflow:hidden; margin-bottom:28px; z-index:1; }

.vtab { font-family:'DM Sans',sans-serif; font-size:12px; padding:8px 18px; border:none; background:transparent; color:var(--muted); cursor:pointer; transition:all .15s; font-weight:500; border-right:1px solid var(--border); }

.vtab:last-child { border-right:none; }

.vtab.on { background:var(--ink); color:var(--paper); }

.vtab:disabled { opacity:.32; cursor:not-allowed; pointer-events:none; }

.vtab.vtab-cta { background:linear-gradient(135deg,#8b5e2a,#c48a3f); color:#fff; font-weight:700; letter-spacing:.01em; border-right:none; padding:8px 20px; }
.vtab.vtab-cta:hover { background:linear-gradient(135deg,#7a5124,#b07a34); color:#fff; }
.vtab.vtab-cta.on { background:linear-gradient(135deg,#5c3d18,#9a6a2a); color:#fff; }