/* ============================================================
   NoctPad — aplikasi launchpad "altar"
   Sengaja beda dari AEONPAD: tanpa sidebar, nav pil kaca di atas,
   3 kolom mengikuti kisi putus-putus, segel bulat sebagai tombol kirim,
   buku besar untuk permintaan, kartu tarot untuk Explore.
   ============================================================ */
:root {
  --side: clamp(16px, 3.2vw, 44px);
  --col: calc((min(100vw, var(--max)) - var(--side) * 2) / 4);
  --glass: rgba(20, 4, 6, 0.55);
  --glass-line: rgba(255, 255, 255, 0.3);
}
body.app { min-height: 100vh; background: var(--bg); }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tok svg { stroke: none; }
.small { font-size: 13px; }
.mono { font-family: var(--mono); }

/* ---------- latar ---------- */
/* kabut merah bergerak pelan (hanya transform) */
.app-fog { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.app-fog i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 14, 24, 0.22), transparent); filter: blur(20px); will-change: transform; }
.app-fog i:nth-child(1) { left: -20vmax; top: 30vh; animation: fog1 26s ease-in-out infinite alternate; }
.app-fog i:nth-child(2) { right: -25vmax; top: -10vh; animation: fog2 32s ease-in-out infinite alternate; }
.app-fog i:nth-child(3) { left: 30vw; bottom: -40vmax; animation: fog1 38s ease-in-out infinite alternate-reverse; }
@keyframes fog1 { to { transform: translate3d(18vw, -12vh, 0) scale(1.2); } }
@keyframes fog2 { to { transform: translate3d(-14vw, 20vh, 0) scale(0.85); } }
.app-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 45% at 50% -8%, rgba(160, 14, 24, 0.42), transparent 70%), radial-gradient(40% 40% at 100% 100%, rgba(90, 8, 14, 0.25), transparent 70%); }
.guides { position: fixed; inset: 0; z-index: 1; pointer-events: none; max-width: var(--max); margin: 0 auto; padding: 0 var(--side); }
.guides i { position: absolute; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(to bottom, rgba(255, 235, 235, 0.16) 0 4px, transparent 4px 9px); }
.guides i:nth-child(1) { left: calc(var(--side) + var(--col)); }
.guides i:nth-child(2) { right: calc(var(--side) + var(--col)); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: 0.35; } }

/* ============================================================
   NAV ATAS
   ============================================================ */
.bar { position: fixed; z-index: 30; inset: 0 0 auto 0; height: 0; }
.count { display: inline-block; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font: 600 10.5px/18px var(--ui); text-align: center; vertical-align: 1px; }
.bar-right { position: fixed; top: 16px; right: var(--side); display: flex; align-items: center; gap: 8px; }
.net { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font: 500 12px/1 var(--ui); color: var(--ink-2); }
.net i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.demo-tag { font: 700 10px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); padding: 8px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(240, 180, 90, 0.4); background: rgba(20, 4, 6, 0.6); }
.wallet-pill { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: #f4ecec; color: #1a0507; font: 600 13px/1 var(--ui); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); transition: background 0.25s, box-shadow 0.25s; }
.wallet-pill:hover { background: #fff; box-shadow: 0 0 0 1px #fff, 0 0 28px rgba(255, 59, 59, 0.4); }
.wallet-pill .ic { width: 16px; height: 16px; }
.wallet-pill .avatar { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 90deg, #3a060b, #b3141f, #ff5a4a, #3a060b); }

/* ============================================================
   TAMPILAN UMUM
   ============================================================ */
.main { position: relative; z-index: 2; }
.view { max-width: var(--max); margin: 0 auto; padding: 108px var(--side) 80px; }
.v-head { display: grid; grid-template-columns: 3fr 1fr; align-items: end; gap: 24px; padding-bottom: 30px; margin-bottom: 34px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.v-title { margin: 0; font: 600 clamp(38px, 5vw, 72px)/0.96 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.v-title span { display: block; font-weight: 200; }
.v-side { display: grid; gap: 16px; justify-items: start; }
.v-side p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.card { background: rgba(22, 6, 7, 0.7); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }

/* ============================================================
   SUMMON — altar
   ============================================================ */
.altar-hero { position: relative; margin: -108px calc(-1 * var(--side)) 0; height: clamp(320px, 44vh, 420px); display: grid; place-content: end center; text-align: center; padding: 0 var(--side) 34px; overflow: hidden; }
.ah-img { position: absolute; inset: 0; z-index: -1; background: url(/assets/hero.webp) center 44% / cover no-repeat; opacity: 0.85;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 96%), radial-gradient(70% 120% at 50% 30%, #000 45%, transparent 80%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 30%, transparent 96%), radial-gradient(70% 120% at 50% 30%, #000 45%, transparent 80%); mask-composite: intersect; }
.ah-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11, 3, 4, 0.2), rgba(11, 3, 4, 0.55) 60%, var(--bg)); }
.ah-kicker { margin: 0 0 14px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; font: 500 11.5px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: #ffd0c8; }
.ah-title { margin: 0; font: 600 clamp(34px, 4.6vw, 66px)/0.98 var(--display); text-transform: uppercase; letter-spacing: -0.01em; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.7); }
.ah-title span { display: block; font-weight: 200; }

.altar { display: grid; grid-template-columns: 1fr 2fr 1fr; margin-top: 26px; }
.altar > * { padding: 0 clamp(14px, 2vw, 28px); }
.altar-l { padding-left: 0; display: grid; gap: 26px; align-content: start; }
.altar-r { padding-right: 0; display: grid; gap: 14px; align-content: start; }

/* kolom kiri */
.holder-card { padding: 16px; border-radius: 18px; background: rgba(22, 6, 7, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); display: grid; gap: 3px; }
.holder-card.ok { box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.45), 0 0 30px rgba(255, 59, 59, 0.12); }
.hc-label { font: 600 10px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.holder-card b { font: 600 16px/1.25 var(--ui); }
.hc-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.quota { display: grid; gap: 6px; }
.quota .lbl { font: 600 10px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.quota b { font: 200 56px/1 var(--display); letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 6px; }
.quota b i { font-style: normal; color: var(--brand); font-size: 0.6em; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; }
.st-ic { width: 52px; height: 52px; filter: drop-shadow(0 0 14px rgba(255, 59, 59, 0.3)); }
.steps i { display: inline-block; margin-right: 6px; font: 300 14px/1 var(--display); font-style: normal; color: transparent; -webkit-text-stroke: 0.8px rgba(255, 90, 80, 0.95); }
.steps li > div > b { display: inline; }
.steps b { display: block; font: 600 14px/1.3 var(--ui); margin-bottom: 3px; }
.steps li > div > span { display: block; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* kolom tengah: kotak mantra */
.altar-c { display: grid; gap: 14px; align-content: start; }
.composer { position: relative; padding: 18px 20px 18px; border-radius: 28px; background: linear-gradient(180deg, rgba(34, 7, 9, 0.86), rgba(12, 2, 3, 0.9)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.9); transition: box-shadow 0.3s; }
.composer::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand), transparent); box-shadow: 0 0 14px var(--brand); }
.composer:focus-within { box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.6), 0 0 60px rgba(255, 59, 59, 0.14), 0 40px 80px -30px rgba(0, 0, 0, 0.9); }
.cp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cp-label { font: 500 12px/1 var(--mono); color: #ff8a7a; }
#fPrompt { width: 100%; min-height: 190px; padding: 6px 2px; border: 0; resize: none; background: transparent; color: #fff; font: 300 clamp(20px, 1.9vw, 26px)/1.45 var(--display); letter-spacing: -0.01em; }
#fPrompt:focus { outline: none; }
#fPrompt::placeholder { color: rgba(255, 220, 220, 0.28); }
.cp-foot { display: flex; align-items: center; gap: 12px; padding: 14px 120px 0 0; border-top: 1px dashed rgba(255, 255, 255, 0.14); }
.attach { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font: 500 12.5px/1 var(--ui); color: var(--ink-2); cursor: pointer; }
.attach:hover { box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.5); }
.attach input { display: none; }
.attach-thumb { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.attach-thumb svg { width: 15px; height: 15px; }
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; }
.drop-clear { background: none; border: 0; font-size: 12.5px; color: var(--muted); text-decoration: underline; }
.cp-count { margin-left: auto; font-size: 12px; color: var(--faint); }

/* segel bulat */
.seal { position: absolute; right: -22px; bottom: -40px; width: 132px; height: 132px; border: 0; padding: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: #1a0507; }
.seal::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: rgba(40, 8, 10, 0.75); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 20s linear infinite; }
.seal-ring text { font: 600 12px var(--ui); letter-spacing: 0.24em; fill: rgba(255, 255, 255, 0.75); stroke: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.seal-core { position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; background: #f6eeee; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1), 0 0 36px rgba(255, 59, 59, 0.45); transition: transform 0.35s var(--ease), background 0.3s; }
.seal-core svg { width: 18px; height: 18px; stroke-width: 2; }
.seal-core b { font: 700 12px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; }
.seal:not(:disabled):hover .seal-core { transform: scale(1.08); background: #fff; }
.seal:not(:disabled)::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 90, 80, 0.6); animation: ripple 2.6s ease-out infinite; }
@keyframes ripple { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.4); opacity: 0; } }
.seal:disabled { cursor: not-allowed; }
.seal:disabled .seal-core { background: #4a3536; color: #a88f90; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05); }
.seal:disabled .seal-ring { animation-play-state: paused; opacity: 0.45; }

.hint { margin: 30px 0 0; padding-right: 120px; font-size: 13.5px; color: var(--muted); }
.hint.tip { color: var(--amber); }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ex-lbl { font: 600 10px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.examples button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font: 500 12.5px/1 var(--ui); color: var(--ink-2); transition: background 0.2s, color 0.2s; }
.examples button:hover { background: rgba(255, 59, 59, 0.16); color: #fff; }

/* kolom kanan: hasil baca bergaya HUD + pratinjau koin */
.col-lbl { margin: 0 0 4px; display: flex; align-items: center; justify-content: space-between; font: 600 10px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.reads { display: grid; }
.rd-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; padding: 11px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.12); }
.rd-k { font: 600 10px/1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.rd-v { grid-column: 1; font: 500 14px/1.35 var(--ui); overflow-wrap: anywhere; }
.rd-v em { font-style: normal; font-weight: 400; color: var(--faint); font-size: 13px; }
.rd-row i { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.rd-row i svg { width: 15px; height: 15px; color: var(--brand); stroke-width: 2.4; }
.rd-row.ok .rd-k { color: #ff8a7a; }
.sigil { margin-top: 10px; padding: 18px 14px 16px; text-align: center; display: grid; justify-items: center; gap: 3px; border-radius: 120px 120px 18px 18px; background: linear-gradient(180deg, rgba(40, 8, 10, 0.75), rgba(12, 2, 3, 0.85)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: box-shadow 0.4s; }
.sigil.ready { box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.6), 0 0 44px rgba(255, 59, 59, 0.2); }
.sg-arch { padding: 10px; margin-bottom: 10px; border-radius: 999px 999px 22px 22px; box-shadow: inset 0 0 0 1px rgba(255, 90, 80, 0.45); }
.sigil .tok { border-radius: 999px 999px 16px 16px !important; }
.sigil b { font: 600 17px/1.2 var(--ui); }
.sigil > span { font: 400 12.5px/1.3 var(--mono); color: #ff8a7a; }
.sigil small { margin-top: 6px; font-size: 11px; color: var(--faint); }
.reads-note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--faint); }

/* ============================================================
   MY REQUESTS — buku besar
   ============================================================ */
.ledger { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; padding: 0 16px 14px; font: 600 10px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl td { padding: 20px 16px; border-top: 1px dashed rgba(255, 255, 255, 0.12); font-size: 14px; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 1px dashed rgba(255, 255, 255, 0.12); }
.tbl tr.clickable { cursor: pointer; transition: background 0.25s; }
.tbl tr.clickable:hover { background: linear-gradient(90deg, rgba(138, 12, 20, 0.22), transparent 70%); }
.tbl tr.flash { animation: rowflash 1.8s ease; }
@keyframes rowflash { 0% { background: rgba(255, 59, 59, 0.2); } 100% { background: transparent; } }
.coin-cell { display: flex; align-items: center; gap: 14px; }
.coin-cell b { display: block; font: 500 18px/1.2 var(--ui); }
.coin-cell > div > span { font: 400 12.5px/1.4 var(--mono); color: var(--muted); }
.conf { display: flex; align-items: center; gap: 8px; font: 400 13px/1 var(--mono); }
.conf i { position: relative; width: 70px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.conf i::after { content: ""; position: absolute; inset: 0; width: var(--w, 0%); background: var(--brand); box-shadow: 0 0 8px var(--brand); }
.tbl .mono { font-size: 13px; }
.tbl a.lnk { color: #ff8a7a; text-decoration: none; }
.tbl a.lnk:hover { text-decoration: underline; }
.empty { display: grid; justify-items: center; gap: 6px; padding: 56px 20px; text-align: center; }
.empty b { font: 500 20px/1.2 var(--ui); }
.empty span { color: var(--muted); font-size: 14px; margin-bottom: 12px; }

/* ============================================================
   EXPLORE — pita statistik + kartu tarot
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 40px; border-top: 1px dashed rgba(255, 255, 255, 0.14); border-bottom: 1px dashed rgba(255, 255, 255, 0.14); }
.stat { padding: 20px 20px 22px; display: grid; gap: 10px; border-left: 1px dashed rgba(255, 255, 255, 0.14); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat > span { font: 600 10px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.stat b { font: 200 clamp(36px, 4vw, 54px)/1 var(--display); letter-spacing: -0.03em; }
.stat b small { font-size: 0.4em; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.coin-card { position: relative; display: flex; flex-direction: column; padding: 22px 18px 18px; border-radius: 140px 140px 18px 18px; background: linear-gradient(180deg, rgba(48, 9, 12, 0.85), rgba(14, 3, 4, 0.92) 55%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); text-align: center; transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.coin-card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.5), 0 24px 60px -24px rgba(138, 12, 20, 0.8); }
.coin-card .cc-top { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.coin-card .cc-top .tok { width: 96px !important; height: 96px !important; font-size: 40px !important; border-radius: 999px 999px 20px 20px !important; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04), 0 0 40px rgba(255, 59, 59, 0.25); }
.coin-card .cc-top > div > b { display: block; font: 500 20px/1.2 var(--ui); }
.coin-card .cc-top > div > span { font: 400 12.5px/1.4 var(--mono); color: #ff8a7a; }
.coin-card .cc-top .pill { position: absolute; top: 16px; right: 16px; }
.cc-desc { margin: 14px 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); min-height: 44px; }
.cc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0; border-top: 1px dashed rgba(255, 255, 255, 0.12); font-size: 12px; text-align: left; }
.cc-meta > div > span { display: block; color: var(--faint); }
.cc-meta b { font-weight: 500; }
.coins .cc-foot { margin-top: auto; display: grid; gap: 10px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.12); }
.coins .cc-foot .muted { font-size: 12px; color: var(--faint); }
.coins .cc-acts { display: flex; gap: 8px; }
.coins .cc-acts .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }
.coin-card.home-coin { box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.55), 0 0 50px rgba(255, 59, 59, 0.15); }
.pill.brand { color: #fff; background: rgba(255, 59, 59, 0.3); border-color: rgba(255, 90, 80, 0.6); }

/* ============================================================
   PANEL DETAIL, MODAL, TOAST
   ============================================================ */
.btn .ic { width: 14px; height: 14px; }
.drawer-bg { position: fixed; inset: 0; z-index: 40; background: rgba(8, 2, 3, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade 0.2s ease; }
.drawer { position: fixed; top: 12px; right: 12px; bottom: 12px; width: 470px; max-width: calc(100% - 24px); z-index: 41; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1c0608, #0b0203); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), var(--shadow-lg); transform: translateX(110%); transition: transform 0.4s var(--ease); }
.drawer::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand), transparent); box-shadow: 0 0 12px var(--brand); }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px dashed rgba(255, 255, 255, 0.12); }
.dh-coin { display: flex; align-items: center; gap: 12px; }
.dh-coin b { display: block; font: 600 17px/1.2 var(--ui); }
.dh-coin > div > span { font: 400 12.5px/1.4 var(--mono); color: var(--muted); }
.dh-coin .pill { margin-left: 4px; }
.icon-btn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); display: grid; place-items: center; color: #fff; }
.icon-btn:hover { background: var(--brand); }
.icon-btn svg { width: 15px; height: 15px; }
.drawer-body { padding: 22px; overflow-y: auto; }
.d-prompt, .d-quote, .sign-prompt { margin: 0 0 22px; padding: 16px 18px; border-radius: 18px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font: 300 17px/1.5 var(--display); color: #fff; }
.d-prompt span { display: block; margin-bottom: 6px; font: 500 11px/1 var(--mono); color: #ff8a7a; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding-bottom: 22px; }
.tl li::before { content: ""; position: absolute; left: 11.5px; top: 28px; bottom: 2px; width: 1px; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0 3px, transparent 3px 7px); }
.tl li:last-child::before { display: none; }
.tl .dot { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); background: #0b0203; display: grid; place-items: center; transition: all 0.3s; }
.tl .dot svg { width: 12px; height: 12px; stroke-width: 2.4; opacity: 0; color: #fff; }
.tl li.done .dot { background: var(--brand); box-shadow: 0 0 14px rgba(255, 59, 59, 0.6); }
.tl li.done .dot svg { opacity: 1; }
.tl li.done::before { background: rgba(255, 59, 59, 0.55); }
.tl li.active .dot { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 4px rgba(255, 59, 59, 0.14); }
.tl li.active .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: pulse 1.2s ease-in-out infinite; }
.tl li.fail .dot { background: #5a0d12; box-shadow: inset 0 0 0 1px #ff7a7a; }
.tl li.fail .dot svg { opacity: 1; color: #ff9a9a; }
@keyframes pulse { 50% { transform: scale(0.6); opacity: 0.6; } }
.tl b { display: block; font: 600 14.5px/24px var(--ui); }
.tl .sub { font-size: 13px; color: var(--muted); }
.tl li.pending b { color: var(--faint); }
.found { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; }
.found div { padding: 9px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: all 0.3s; }
.found div.on { box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.5); background: rgba(255, 59, 59, 0.08); }
.found span { display: block; font: 600 10px/1.4 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.found b { font: 500 15px/1.3 var(--ui); }
.checks { margin: 10px 0 2px; display: grid; gap: 6px; }
.checks div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.checks svg { width: 15px; height: 15px; color: var(--brand); stroke-width: 2.2; }
.meter { margin-top: 12px; }
.meter-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.meter-top b { color: #fff; font: 400 13px/1 var(--mono); }
.meter-bar { position: relative; height: 4px; margin-top: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.meter-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 4px; background: linear-gradient(90deg, #8a0c14, var(--brand)); box-shadow: 0 0 10px rgba(255, 59, 59, 0.6); transition: width 1.2s var(--ease); }
.meter-bar em { position: absolute; top: -5px; bottom: -5px; left: 70%; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; }
.meter small { display: block; margin-top: 7px; font-size: 11.5px; color: var(--faint); }
.gen { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.gen-img { width: 64px; height: 64px; border-radius: 999px 999px 14px 14px; overflow: hidden; flex: none; display: grid; place-items: center; background: #1f090b; }
.gen-img img { width: 100%; height: 100%; object-fit: cover; animation: genin 0.6s var(--ease); }
@keyframes genin { from { opacity: 0; transform: scale(0.9); filter: blur(6px); } }
.gen b { display: block; font: 600 14px/1.3 var(--ui); }
.gen div > span { font-size: 12.5px; color: var(--muted); }
.shimmer { background: linear-gradient(100deg, #1f090b 30%, #6a0d12 50%, #1f090b 70%); background-size: 200% 100%; animation: shim 1.2s linear infinite; }
@keyframes shim { to { background-position: -200% 0; } }
.live-box { margin-top: 12px; padding: 14px; border-radius: 16px; display: grid; gap: 8px; background: rgba(255, 59, 59, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.35); }
.live-box .kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.live-box .kv > span { color: var(--muted); }
.live-box .kv b { font: 400 13px/1.4 var(--mono); }
.live-box .kv a { color: #ff8a7a; }
.live-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.live-acts .btn { flex: 1 1 140px; justify-content: center; }

.modal-bg { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(8, 2, 3, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade 0.2s ease; }
.modal { position: relative; width: 420px; max-width: 100%; padding: 22px; border-radius: 26px; background: linear-gradient(180deg, #1f0709, #0c0203); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--shadow-lg); animation: pop 0.25s var(--ease); }
.modal::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand), transparent); box-shadow: 0 0 12px var(--brand); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal .h3 { font: 500 20px/1.2 var(--ui); }
.wallet-list { display: grid; gap: 8px; margin-bottom: 14px; }
.wallet-list button { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); font: 500 15px/1 var(--ui); text-align: left; transition: background 0.2s, box-shadow 0.2s; }
.wallet-list button:hover { background: rgba(255, 59, 59, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.55); }
.wallet-list img, .wallet-list .wl-ic { width: 30px; height: 30px; border-radius: 50%; }
.wallet-list .wl-ic { background: conic-gradient(from 90deg, #3a060b, #b3141f, #ff5a4a, #3a060b); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; gap: 10px; }
.toast { display: flex; gap: 12px; align-items: flex-start; width: 360px; padding: 14px 18px; border-radius: 20px; background: #1c0608; box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.4), var(--shadow-lg); color: #fff; font-size: 14px; animation: pop 0.3s var(--ease); }
.toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--brand); stroke-width: 2.2; }
.toast.bad svg { color: #ff9a9a; }
.toast b { display: block; font-weight: 600; }
.toast span { color: rgba(255, 255, 255, 0.72); }

/* ============================================================
   LAYAR SEDANG & HP
   ============================================================ */
@media (max-width: 1100px) {
  .altar { grid-template-columns: 1fr 1.6fr; row-gap: 40px; }
  .altar-c { grid-column: 1 / -1; grid-row: 1; padding: 0; }
  .altar-l { padding-left: 0; }
  .altar-r { padding-right: 0; }
  .net { display: none; }
}
@media (max-width: 760px) {
  .guides i:nth-child(1) { left: 7px; }
  .guides i:nth-child(2) { right: 7px; }
  .demo-tag { display: none; }
  .ah-kicker { letter-spacing: 0.14em; font-size: 10.5px; }
  #walletLabel { display: none; }
  .wallet-pill { width: 44px; padding: 0; justify-content: center; }
  .view { padding-top: 90px; }
  .altar-hero { margin-top: -90px; height: 300px; }
  .altar { grid-template-columns: 1fr; }
  .altar-l, .altar-r, .altar-c { padding: 0; }
  .altar-r { grid-row: 2; }
  .composer { padding-bottom: 70px; }
  .cp-foot { padding-right: 0; flex-wrap: wrap; }
  .seal { right: 50%; margin-right: -58px; bottom: -58px; width: 116px; height: 116px; }
  .hint { margin-top: 64px; padding-right: 0; text-align: center; }
  .examples { justify-content: center; }
  .v-head { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px dashed rgba(255, 255, 255, 0.14); }
  .tbl th:nth-child(2), .tbl td:nth-child(2), .tbl th:nth-child(4), .tbl td:nth-child(4), .tbl th:nth-child(5), .tbl td:nth-child(5), .tbl th:nth-child(6), .tbl td:nth-child(6) { display: none; }
  .tbl td:last-child, .tbl th:last-child { padding-right: 0; text-align: right; }
  .coin-cell > div { min-width: 0; }
  .coin-cell b { font-size: 16px; }
  .coin-cell > div > span { display: block; max-width: 44vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .toast { width: calc(100vw - 32px); }
  .toasts { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .seal-ring, .seal::after, .live-dot, .tl li.active .dot::after, .shimmer { animation: none !important; }
}

/* ============================================================
   EFEK PREMIUM LAUNCHPAD
   ============================================================ */
/* bara melayang di pita atas */
.ah-embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ah-embers i { position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 8px #ff3b3b; opacity: 0; animation: ahEmber 9s linear infinite; }
.ah-embers i:nth-child(1) { left: 12%; } .ah-embers i:nth-child(2) { left: 24%; animation-delay: 2.2s; } .ah-embers i:nth-child(3) { left: 37%; animation-delay: 4.6s; }
.ah-embers i:nth-child(4) { left: 55%; animation-delay: 1.1s; } .ah-embers i:nth-child(5) { left: 63%; animation-delay: 6.3s; } .ah-embers i:nth-child(6) { left: 76%; animation-delay: 3.4s; }
.ah-embers i:nth-child(7) { left: 86%; animation-delay: 7.7s; } .ah-embers i:nth-child(8) { left: 45%; animation-delay: 5.5s; }
@keyframes ahEmber { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translate(14px, -360px); opacity: 0; } }

/* segel terisi daya sesuai kelengkapan prompt (--charge 0..1 dari app.js) */
.seal-charge-bg, .seal-charge { fill: none; stroke-width: 3; }
.seal-charge-bg { stroke: rgba(255, 255, 255, 0.08); }
.seal-charge { stroke: #ff3b3b; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--charge, 0)); filter: drop-shadow(0 0 6px #ff3b3b); transition: stroke-dashoffset 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.seal-ring { transform-origin: 50% 50%; }
.seal.full .seal-core { animation: sealReady 1.8s ease-in-out infinite; }
@keyframes sealReady { 0%, 100% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1), 0 0 30px rgba(255, 59, 59, 0.4); } 50% { box-shadow: 0 0 0 9px rgba(255, 59, 59, 0.25), 0 0 60px rgba(255, 59, 59, 0.8); } }

/* baris "The reading" berkilat saat baru terbaca */
.rd-row.fresh { animation: rdFresh 1s ease-out; }
@keyframes rdFresh { 0% { background: linear-gradient(90deg, rgba(255, 59, 59, 0.35), transparent); } 100% { background: transparent; } }
.rd-row.fresh .rd-v { animation: rdIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes rdIn { from { opacity: 0; transform: translateX(10px); filter: blur(4px); } }

/* pratinjau koin: kilau menyapu saat siap */
.sigil { position: relative; overflow: hidden; }
.sigil.ready::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 210, 200, 0.22), transparent); animation: sgShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes sgShine { 0%, 50% { left: -60%; } 100% { left: 140%; } }
.sigil.ready .sg-arch { animation: sgPulse 2.4s ease-in-out infinite; }
@keyframes sgPulse { 50% { box-shadow: inset 0 0 0 1px rgba(255, 90, 80, 0.9), 0 0 30px rgba(255, 59, 59, 0.45); } }

/* kartu tarot: kilau kursor mengikuti bentuk lengkung */
.coin-card.tilt::after { border-radius: 140px 140px 18px 18px; }

@media (prefers-reduced-motion: reduce) {
  .app-fog i, .ah-embers i, .seal.full .seal-core, .sigil.ready::after, .sigil.ready .sg-arch, .rd-row.fresh, .rd-row.fresh .rd-v { animation: none !important; }
}