:root{
  --white:#ffffff; --black:#0a0a0a; --green:#22c55e;
  --gray-50:#fafafa; --gray-100:#f5f5f5; --gray-200:#e5e7eb;
  --gray-400:#9ca3af; --gray-500:#6b7280;
  --radius:14px; --container:1100px; --pad:16px; --fade:360ms;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--white);color:var(--black);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.4}
img{max-width:100%;height:auto;display:block}
.no-wrap{white-space:nowrap}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.site-header{border-bottom:1px solid var(--gray-200);background:var(--white)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;font-weight:700}
.logo{height:80px;width:auto}

.hero{padding:28px 0;border-bottom:1px solid var(--gray-200);background:linear-gradient(0deg,var(--white),var(--gray-50))}
.hero-inner{display:grid;grid-template-columns:1fr;gap:16px}
.hero .tight{margin:0;font-size:clamp(1.3rem,3.2vw,2rem)}
.hero .meta{color:var(--gray-500);margin:8px 0}
.meta{display:flex;flex-wrap:wrap;gap:.5em}.meta-item{white-space:nowrap}.dot{padding:0 8px;color:var(--gray-400)}

.hero-actions{display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
@media(min-width:860px){.hero-actions{grid-template-columns:1fr auto;gap:24px}}

.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--black);color:var(--black);background:var(--white);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.btn:hover{background:var(--gray-100)}
.btn-green{background:var(--green);border-color:var(--green);color:var(--white)}
.btn-green:hover{filter:brightness(.95)}

.viewer{padding:22px 0}
.flip-wrap{position:relative;width:min(420px,100%);margin:0 auto;aspect-ratio:63/88;transform-style:preserve-3d;perspective:1000px;cursor:pointer}
.flip-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;transition:transform .35s ease}
.flip-img.back{transform:rotateY(180deg)}.flipped .front{transform:rotateY(180deg)}.flipped .back{transform:rotateY(360deg)}
.hint{text-align:center;color:var(--gray-500);font-size:.9rem;margin-top:8px}

.overall{display:grid;place-items:center}
@property --angle { syntax:'<percentage>'; inherits:false; initial-value:0% }
.circle{--angle:0%;width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--green) var(--angle),var(--gray-200) 0);display:grid;place-items:center;transition:--angle .9s cubic-bezier(.2,.7,.2,1)}
.circle-inner{width:86px;height:86px;border-radius:50%;background:var(--white);display:grid;place-items:center;font-size:1.6rem;font-weight:800;color:var(--black);border:2px solid var(--gray-200)}
.circle-label{text-align:center;margin-top:8px;font-weight:700}

/* Circle + slab badge row */
.grade-side{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;justify-items:start}

/* Slab badge */
.slab-badge{
  --ring:#22c55e; --ink:#0a0a0a; --bg:#ffffff;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  padding:12px 14px; min-height:92px; max-inline-size:18ch;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--gray-200); border-radius:12px; position:relative;
  box-shadow:0 4px 14px rgba(0,0,0,.08); white-space:normal; overflow-wrap:anywhere;
}
.slab-badge::before{content:""; position:absolute; inset:8px auto 8px 0; width:4px; border-radius:4px; background:var(--ring)}
.slab-left{display:grid;gap:6px;align-content:center}
.slab-tier{font-weight:900;letter-spacing:.02em;font-size:1.05rem}
.slab-sub{font-weight:700;font-size:.95rem;color:#0a0a0acc;padding:2px 8px;border-radius:999px;border:1px solid var(--gray-200);background:var(--gray-50)}
.slab-grade{font-weight:900;font-size:1.6rem;line-height:1;justify-self:end}

@media (max-width:600px){
  .grade-side{column-gap:10px}
  .slab-badge{max-inline-size:16ch;min-height:88px;padding:10px 12px}
  .slab-grade{font-size:1.45rem}
}
@media (max-width:360px){
  .grade-side{grid-template-columns:1fr;row-gap:8px}
  .slab-badge{max-inline-size:100%}
}

/* Grades & bars */
.grades{padding:18px 0}
.grid-2{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:860px){.grid-2{grid-template-columns:1fr 1fr}}
.subgrade{margin:12px 0}
.subgrade-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.subgrade-head .label{font-weight:700}.subgrade-head .value{font-weight:700;min-width:2ch;text-align:right}
.subgrade .bar{width:100%;height:10px;background:var(--gray-200);border-radius:999px;overflow:hidden}
.subgrade .bar>span{display:block;height:100%;width:0;background:var(--green);transition:width .6s ease}

.compare{padding:18px 0}
.bars{display:grid;grid-auto-flow:column;gap:16px;align-items:end;justify-content:center;min-height:160px;padding:8px;border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white)}
.barv{display:grid;grid-template-rows:1fr auto auto;gap:6px;width:90px;text-align:center}
.barv-fill{height:0;background:var(--green);border-radius:8px 8px 0 0;transition:height .6s ease}
.bars.animate .barv-fill{height:var(--h)}.barv-count{font-weight:700}.barv-label{font-size:.9rem;color:var(--gray-500)}

.pop-gem{padding:22px 0}
.dot.psa,.dot.sgc,.dot.cgc,.dot.bgs{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
:root{--psa-red:#d0021b;--psa-blue:#1155cc;--sgc-black:#000;--cgc-red:#cc1f1f;--bgs-gold:#b48b2c}
.dot.psa{background:var(--psa-blue)}.dot.sgc{background:var(--sgc-black);border:1px solid #444}.dot.cgc{background:var(--cgc-red)}.dot.bgs{background:var(--bgs-gold)}
.pop-bars{display:grid;gap:10px;border:1px solid var(--gray-200);border-radius:var(--radius);padding:12px;background:var(--white);margin-top:10px}
.pop-row{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center}
.pop-row .co{font-weight:700}
.pop-row .bar{height:12px;background:var(--gray-200);border-radius:999px;overflow:hidden}
.pop-row .bar>span{display:block;height:100%;width:0;border-radius:999px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.pop-row[data-co="psa"] .co{color:var(--psa-red)}.pop-row[data-co="psa"] .bar>span{background:linear-gradient(90deg,var(--psa-blue) 0%,#1a73e8 100%)}
.pop-row[data-co="sgc"] .co{color:#000}.pop-row[data-co="sgc"] .bar{background:#e6e6e6}.pop-row[data-co="sgc"] .bar>span{background:#000}
.pop-row[data-co="cgc"] .co{color:#000}.pop-row[data-co="cgc"] .bar>span{background:var(--cgc-red)}
.pop-row[data-co="bgs"] .co{color:#000}.pop-row[data-co="bgs"] .bar>span{background:var(--bgs-gold)}
.pop-row .val{font-weight:800;min-width:5ch;text-align:right}

.gem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:16px}
.gem{display:grid;gap:6px;justify-items:center;border:1px solid var(--gray-200);border-radius:var(--radius);padding:12px;background:var(--white)}
.gem-ring{--size:120px;--thick:12px;--angle:0%;--brand:var(--green);width:var(--size);height:var(--size);border-radius:50%;background:conic-gradient(var(--brand) var(--angle),var(--gray-200) 0);display:grid;place-items:center;transition:--angle .9s cubic-bezier(.2,.7,.2,1);box-shadow:0 1px 6px rgba(0,0,0,.06);position:relative}
.gem-ring::before{content:"";position:absolute;inset:var(--thick);background:var(--white);border-radius:50%}
.gem-kpi{position:relative;z-index:1}.gem-kpi .num{font-weight:900;font-size:1.2rem}
.gem-label{font-weight:700;text-align:center}
.gem[data-co="psa"] .gem-ring{--brand:var(--psa-blue)}
.gem[data-co="sgc"] .gem-ring{--brand:#000}
.gem[data-co="cgc"] .gem-ring{--brand:var(--cgc-red)}
.gem[data-co="bgs"] .gem-ring{--brand:var(--bgs-gold)}

.soft-frame{border:1px solid var(--gray-200);border-radius:14px;background:var(--gray-50);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.viewer-frame{padding:12px}
.viewer .flip-wrap{display:block;margin:0 auto;max-width:580px}

.downloads{margin-top:20px;text-align:center}.downloads .btn-jpg{margin:0 8px}
.btn-jpg{position:relative;font-weight:700;letter-spacing:.01em;border-radius:10px;background:var(--green);color:var(--white);border:1px solid var(--black);padding:10px 14px;overflow:hidden}
.btn-jpg::before,.btn-jpg::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:var(--green)}
.btn-jpg::before{left:0}.btn-jpg::after{right:0}
.btn-jpg:hover{filter:brightness(1.1)}.btn-jpg:focus-visible{outline:3px solid #22c55e66;outline-offset:2px}

.site-footer{border-top:1px solid var(--gray-200);padding:18px 0;margin-top:14px;background:var(--white)}
.footer-buttons{display:flex;flex-direction:column;align-items:center;gap:12px}
.footer-buttons .btn{min-width:220px;padding:12px 20px;font-size:1rem;font-weight:600;text-align:center}

.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity var(--fade) ease,transform var(--fade) ease}
.js .reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .bar>span,.barv-fill{transition:none}
  .circle{background:conic-gradient(var(--green) var(--angle),var(--gray-200) 0)}
}

/* Dark theme (optional opt-in via <html data-theme="dark">) */
html[data-theme="dark"]{
  color-scheme: dark;
  --white:#0f0f10; --black:#f1f1f1; --gray-50:#111214; --gray-100:#181a1c; --gray-200:#25282c; --gray-400:#9aa0a6; --gray-500:#b0b6bc;
  background:var(--white); color:var(--black);
}
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .pop-bars,
html[data-theme="dark"] .gem,
html[data-theme="dark"] .bars,
html[data-theme="dark"] .site-footer{ background:var(--white); border-color:var(--gray-200) }
html[data-theme="dark"] #q{ border-color:var(--gray-200) }
html[data-theme="dark"] .btn{ border-color:var(--black); color:var(--black); background:var(--white) }
html[data-theme="dark"] .btn:hover{ background:#16181a }
html[data-theme="dark"] .pop-row .bar{ background:var(--gray-200) }
html[data-theme="dark"] .gem-ring::before{ background:var(--white) }
html[data-theme="dark"] .barv-fill{ background:var(--green) }
html[data-theme="dark"] .bar > span{ background:var(--green) }

/* === Circle + Badge centering + right shift === */
.hero-actions .grade-side {
  display: flex;
  align-items: center;
  justify-content: center;  /* center pair as a whole */
  gap: 16px;
}

.hero-actions .grade-side .overall {
  flex: 0 0 auto;
}

.hero-actions .grade-side .slab-badge {
  flex: 0 0 auto;
  margin-left: 8px;  /* subtle right shift */
}

@media (max-width: 600px) {
  .hero-actions .grade-side {
    gap: 12px;
  }
  .hero-actions .grade-side .slab-badge {
    margin-left: 4px;
  }
}
/* Subtle note under badge */
.slab-note {
  font-size: 0.82rem;
  color: var(--gray-500);
  text-align: center;
  margin-top: 6px;
  max-width: 220px;
}