/* =====================================================================
   read.css — halaman "Read a coin" (alat utama)
   ===================================================================== */
.ask { text-align: center; padding: 70px 0 30px; display: grid; justify-items: center; gap: 22px; }
.ask h1 { font-weight: 300; font-size: clamp(40px, 5vw, 72px); letter-spacing: -.045em; line-height: 1; }
.ask .search { width: min(680px, 100%); }
.ask .hint { color: var(--faint); font-size: 13.5px; }
body.has-report .ask { padding: 26px 0 8px; grid-template-columns: auto 1fr; justify-items: stretch; text-align: left; align-items: center; }
body.has-report .ask h1, body.has-report .ask .hint, body.has-report .ask .live-pill { display: none; }
body.has-report .ask .search { width: 100%; grid-column: 1 / -1; }

/* ---------- sedang membaca ---------- */
.reading { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center; max-width: 1040px; margin: 30px auto 0; }
.oracle { position: relative; aspect-ratio: 3 / 4; border-radius: 26px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.oracle img { width: 100%; height: 100%; object-fit: cover; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.02); } }
.oracle .mirror { position: absolute; inset: 0; width: 100%; height: 100%; }
.oracle .mirror .arc { stroke: url(#og); stroke-dasharray: 2 100; transition: stroke-dasharray .9s var(--ease); }
.steps-box h2 { font-weight: 300; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.035em; margin: 14px 0 26px; }
.rsteps { list-style: none; display: grid; gap: 4px; }
.rsteps li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--faint); transition: color .4s; }
.rsteps li .ic { width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--line-2); position: relative; }
.rsteps li.on { color: var(--ink); }
.rsteps li.on .ic { border-color: var(--violet-2); border-top-color: transparent; animation: spin .9s linear infinite; }
.rsteps li.done { color: var(--ink-2); }
.rsteps li.done .ic { border-color: var(--good); background: radial-gradient(circle, var(--good) 35%, transparent 40%); }
.rsteps li b { font-weight: 500; font-size: 15px; display: block; }
.rsteps li small { font: 12px var(--mono); color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }

.fail { max-width: 620px; margin: 40px auto; padding: 34px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.fail h2 { font-weight: 400; font-size: 26px; letter-spacing: -.02em; }
.fail p { color: var(--muted); }

/* ---------- laporan ---------- */
.report { display: grid; grid-template-columns: 380px 1fr; gap: 22px; align-items: start; margin-top: 18px; }
.grade-col { position: sticky; top: 90px; }
.grade-card { padding: 22px; background: linear-gradient(170deg, rgba(255,255,255,.55), rgba(255,255,255,.7)); }
.tk { display: flex; gap: 14px; align-items: center; }
.tk-logo { width: 52px; height: 52px; border-radius: 14px; flex: none; overflow: hidden; background: linear-gradient(135deg, #e9d6ae, #c9d3e3); border: 1px solid var(--line-2); }
.tk-logo img { width: 100%; height: 100%; object-fit: cover; }
.tk h1 { font-weight: 600; font-size: 22px; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.tk small { font-size: 11.5px; color: var(--muted); display: block; margin-top: 3px; }
.dial { position: relative; width: 230px; margin: 20px auto 6px; }
.dial svg { width: 100%; overflow: visible; }
.dial .d-glass { fill: url(#none); fill: rgba(246,242,234,.55); stroke: rgba(60,44,22,0.048); }
.dial .d-bg { fill: none; stroke: rgba(60,44,22,0.072); stroke-width: 10; }
.dial .d-arc { fill: none; stroke: url(#dg); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.9s var(--ease); }
.d-read { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.d-read b { font-weight: 600; font-size: 76px; letter-spacing: -.05em; line-height: 1; }
.d-read span { font: 500 13px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--violet-2); margin-top: 6px; }
.dial.good .d-read span { color: var(--good); } .dial.warn .d-read span { color: var(--warn); } .dial.bad .d-read span { color: var(--bad); }
.caps { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 4px; }
.cap { font: 500 11px var(--mono); padding: 5px 10px; border-radius: 999px; background: rgba(204,61,98,.08); border: 1px solid rgba(204,61,98,.3); color: #a32448; line-height: 1.4; text-align: center; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; }
.facts dt { color: var(--faint); }
.facts dd { color: var(--ink-2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facts a { color: var(--violet-2); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.acts .btn { padding: 11px 12px; }
.acts #share { grid-column: 1 / -1; }
.saved { margin-top: 14px; font-size: 11.5px; color: var(--muted); text-align: center; min-height: 16px; }
.saved b { color: var(--good); font-weight: 500; }

.detail-col { display: grid; gap: 14px; min-width: 0; }
.summary { padding: 22px 24px; }
.summary p { font-size: 19px; line-height: 1.55; margin-top: 10px; color: var(--ink); font-weight: 300; }
.summary p b { font-weight: 600; }
.panel { padding: 22px 24px; }
.p-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.p-head h2 { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.sub { font-size: 11.5px; color: var(--faint); }
a.sub:hover { color: var(--violet-2); }

.finds { list-style: none; }
.finds li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); line-height: 1.45; animation: rise .6s var(--ease) both; }
.finds li:first-child { border-top: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.cats { display: grid; gap: 4px; }
.cat { border-top: 1px solid var(--line); }
.cat:first-child { border-top: 0; }
.cat summary { list-style: none; display: grid; grid-template-columns: 1fr 160px 40px 18px; gap: 14px; align-items: center; padding: 13px 0; cursor: pointer; font-size: 14.5px; }
.cat summary::-webkit-details-marker { display: none; }
.cat summary .nm small { font: 11px var(--mono); color: var(--faint); margin-left: 8px; }
.cat summary .bar { height: 5px; border-radius: 5px; background: rgba(60,44,22,0.064); overflow: hidden; }
.cat summary .bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: width 1.4s var(--ease); }
.cat summary .bar i.null { width: 100%; background: repeating-linear-gradient(90deg, rgba(60,44,22,0.128) 0 4px, transparent 4px 8px); }
.cat summary b { font: 500 13px var(--mono); text-align: right; }
.cat summary .chev { width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .3s; justify-self: center; }
.cat[open] summary .chev { transform: rotate(225deg); }
.cat ul { list-style: none; padding: 0 0 14px; display: grid; gap: 2px; }
.cat li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 7px 12px; border-radius: 8px; background: rgba(60,44,22,0.020); font-size: 13px; color: var(--muted); }
.cat li span:last-child { font: 12.5px var(--mono); color: var(--ink-2); text-align: right; }
.cat li .lvl:not(.good):not(.warn):not(.bad) { background: rgba(60,44,22,0.160); }

.holders { display: grid; grid-template-columns: 1fr 200px; gap: 18px; align-items: center; }
#hmap { width: 100%; height: auto; aspect-ratio: 520 / 360; border-radius: 14px; background: radial-gradient(80% 80% at 50% 50%, rgba(176,138,72,.08), transparent); }
.h-legend { display: grid; gap: 9px; font-size: 12px; color: var(--muted); }
.h-legend span { display: flex; gap: 10px; align-items: center; }
.h-legend i { width: 10px; height: 10px; border-radius: 50%; }
.hlist { list-style: none; margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.hlist li { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.hlist li .n { font: 11px var(--mono); color: var(--faint); }
.hlist li a { font: 12.5px var(--mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.hlist li a:hover { color: var(--violet-2); }
.hlist li b { font: 500 12.5px var(--mono); }
.htag { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: rgba(60,44,22,0.048); color: var(--muted); }
.htag.creator { background: rgba(185,120,26,.15); color: var(--warn); }
.htag.curve, .htag.pool, .htag.escrow { background: rgba(127,149,184,.12); color: var(--cyan); }

.c-stats, .mkt { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stat { padding: 14px; border-radius: 12px; background: rgba(60,44,22,0.028); border: 1px solid var(--line); }
.stat dt, .stat small { font: 11px var(--mono); color: var(--faint); display: block; text-transform: uppercase; letter-spacing: .08em; }
.stat dd, .stat b { font-weight: 600; font-size: 20px; letter-spacing: -.02em; display: block; margin-top: 6px; }
.stat.bad b { color: var(--bad); } .stat.good b { color: var(--good); } .stat.warn b { color: var(--warn); }
.sells { list-style: none; margin-top: 12px; }
.sells li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.sells li .mono { color: var(--muted); font-size: 12px; }
.sells .none { color: var(--muted); font-size: 13.5px; padding: 6px 0; border: 0; display: block; }
.grad { margin-bottom: 16px; }
.grad div { height: 8px; border-radius: 8px; background: rgba(60,44,22,0.064); overflow: hidden; }
.grad i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: width 1.6s var(--ease); }
.grad span { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.mkt .stat dd { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }

.rec-mini { display: grid; gap: 2px; font-size: 13.5px; color: var(--muted); }
.rec-mini .r { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.rec-mini .r:first-child { border-top: 0; }
.rec-mini b { color: var(--ink); font-weight: 600; }

.warn-panel { padding: 20px 24px; border-radius: var(--r); border: 1px dashed rgba(185,120,26,.4); background: rgba(185,120,26,.05); }
.warn-panel ul { list-style: none; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; }
.warn-panel li::before { content: "—"; color: var(--warn); margin-right: 10px; }
.disclaimer { font-size: 12.5px; color: var(--faint); line-height: 1.7; padding: 6px 4px; }

@media (max-width: 980px) {
  .reading { grid-template-columns: 1fr; gap: 26px; }
  .oracle { max-width: 280px; margin: 0 auto; }
  .report { grid-template-columns: 1fr; }
  .grade-col { position: static; }
  .holders { grid-template-columns: 1fr; }
  .h-legend { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .panel, .summary { padding: 18px 16px; }
  .summary p { font-size: 17px; }
  .cat summary { grid-template-columns: 1fr 70px 34px 14px; gap: 10px; font-size: 13.5px; }
  .cat summary .nm small { display: none; }
  .hlist { grid-template-columns: 1fr; }
  .finds li { grid-template-columns: auto 1fr; }
  .finds li .receipt { grid-column: 2; justify-self: start; }
}

/* mode studio perekam video: semua transisi/animasi CSS dimatikan, perekam yang mengatur tiap frame */
html.studio *, html.studio *::before, html.studio *::after { transition: none !important; animation: none !important; }
html.studio .sky canvas { display: none; }