/* slake: coins block, launch, creator bar, wallet modal, preloader */
.stats-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.stats-strip div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 120px; }
.stats-strip b { font-family: var(--mono); font-size: 18px; font-weight: 500; }
.stats-strip span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.coins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.coin-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 16px; }
.coin-empty a { color: var(--coral-l); }
.coin-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; cursor: pointer; transition: border-color .18s, transform .18s, box-shadow .18s; animation: cardIn .5s ease-out; }
.coin-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.coin-card.is-selected { border-color: var(--coral-l); box-shadow: 0 0 0 1px var(--coral-l) inset; }
.coin-card.is-playing { background: linear-gradient(180deg, rgba(255, 255, 255, .06), var(--panel)); }
.cc-top { display: flex; align-items: center; gap: 10px; }
.cc-top img, .cc-ph { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--panel-2); flex: none; }
.cc-id { min-width: 0; flex: 1; }
.cc-id b { display: block; font-size: 15px; }
.cc-id span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.cc-nums div span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cc-nums div b { display: block; font-family: var(--mono); font-weight: 500; font-size: 13px; margin-top: 2px; }
.cc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 11.5px; }
.cc-link { color: var(--coral-l); text-decoration: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.pill-live { color: #0a0a0b; background: var(--coral-l); border-color: var(--coral-l); }
.pill-live i { width: 6px; height: 6px; border-radius: 50%; background: #0a0a0b; animation: blink 1.2s infinite; }
.pill-paused { color: var(--coral-l); border-color: rgba(255, 255, 255, .5); }
.pill-bad { color: #f08a8a; border-color: rgba(240, 138, 138, .5); }
@keyframes blink { 50% { opacity: .2; } }
@keyframes cardIn { from { transform: translateY(8px); opacity: 0; } }
.coin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ctab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; }
.ctab.on { background: var(--coral-l); color: #0a0a0b; border-color: var(--coral-l); }
.ctab .pulse { width: 6px; height: 6px; }
.creator-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; background: rgba(255, 255, 255, .05); }
.creator-bar .agent-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-l); margin-right: 6px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.launch-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 16px; align-items: start; }
.launch-form { display: grid; gap: 14px; }
.lf-row { display: grid; gap: 6px; }
.lf-row label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lf-row input[type=text], .lf-row input[type=url], .lf-row textarea { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; color: var(--fg); font: inherit; padding: 10px 12px; }
.lf-row input:focus, .lf-row textarea:focus { outline: none; border-color: var(--coral-l); }
.lf-logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lf-logo img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.lf-logo input { font-size: 13px; color: var(--muted); }
.seg { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--coral-l); color: #0a0a0b; }
.lf-range { display: flex; align-items: center; gap: 12px; }
.lf-range input { flex: 1; accent-color: var(--coral-l); }
.lf-range b { font-family: var(--mono); min-width: 44px; }
.lf-hint { margin: 0; font-size: 12px; color: var(--muted); }
.lf-total { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); }
.lf-total span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lf-total b { font-family: var(--mono); font-size: 22px; font-weight: 500; }
.lf-total small { color: var(--muted); font-size: 12px; }
.lf-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lf-progress { display: grid; gap: 4px; padding: 12px 14px; border-left: 2px solid var(--coral-l); font-size: 13px; }
.lf-progress p { margin: 0; }
.lf-progress code { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.rules { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.rules li + li { margin-top: 6px; }
.modal-bg { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 20px; }
.modal { position: relative; width: min(420px, 100%); }
.modal .x { position: absolute; right: 12px; top: 10px; border: 0; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }
.wl { display: grid; gap: 6px; margin-top: 12px; }
.wl-i { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); color: var(--fg); font: inherit; cursor: pointer; text-align: left; }
.wl-i img, .wl-ph { width: 26px; height: 26px; border-radius: 6px; background: var(--panel-2); }
.wl-i small { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 11px; }
#boot { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-items: center; transition: opacity .55s ease, visibility .55s; }
#boot.out { opacity: 0; visibility: hidden; }
.boot-in { display: grid; gap: 26px; justify-items: center; width: min(640px, 92vw); }
.boot-wheel { position: relative; display: grid; place-items: center; }
.bw { width: 200px; height: 200px; animation: spinW 2.8s cubic-bezier(.2, .8, .2, 1) forwards; }
.bw-ring { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 2; }
.bw-ticks line { stroke-width: 6; }
.bw-ticks .r { stroke: var(--coral-l); }
.bw-ticks .b { stroke: #282828; }
.bw-ball { fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8)); animation: ball 2.6s cubic-bezier(.1, .9, .2, 1) forwards; transform-origin: 100px 100px; }
@keyframes spinW { to { transform: rotate(540deg); } }
@keyframes ball { to { transform: rotate(-1440deg); } }
.boot-word { position: absolute; font-weight: 700; font-size: 34px; letter-spacing: -.03em; color: #fff; }
.boot-word em { font-style: normal; color: var(--coral-l); }
.boot-word span { font-size: 16px; color: var(--muted); margin-left: 2px; }
#boot.landed .bw-ball { fill: var(--coral-l); }
.boot-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.boot-lines div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); opacity: .3; transition: opacity .4s, border-color .4s; }
.boot-lines div.on { opacity: 1; border-color: var(--coral-l); }
.boot-lines span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--coral-l); }
.boot-lines b { display: block; font-size: 15px; margin-top: 3px; }
.boot-lines small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.boot-line { width: 200px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.boot-line i { display: block; height: 100%; width: 0; background: var(--coral-l); animation: fillB 4s linear forwards; }
@keyframes fillB { to { width: 100%; } }
.boot-skip { position: absolute; right: 20px; top: 18px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.tx-link { color: var(--coral-l); text-decoration: none; margin-left: 4px; }
.votes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.votes li { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; font-size: 12.5px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.07); }
.past li small { display: block; font-size: 11px; }
.bs-plan.is-holders .bs-plan-k { color: var(--lav, #e9e9e9); }
.ov-live.is-live .pulse { background: #4ade80; }
.bs-status.is-quiet .bs-pulse { opacity: .35; animation: none; }
.wa a { color: inherit; text-decoration: none; }
@media (max-width: 760px) { .launch-grid { grid-template-columns: 1fr; } .boot-lines { grid-template-columns: 1fr; } .cc-nums { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .bw, .bw-ball, .coin-card { animation: none; } }

/* pages */
[data-page] { display: none; }
[data-page].show { display: block; }
.hero[data-page].show { display: flex; }
.coin-head-sec { padding-bottom: 0 !important; }
.back { display: inline-block; color: var(--muted); text-decoration: none; font-size: 13px; margin-bottom: 14px; }
.back:hover { color: var(--fg); }
.coin-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.coin-head img, .coin-head .cc-ph { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; }
.coin-head .ch-id { min-width: 0; }
.coin-head .ch-id h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.coin-head .ch-id p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.coin-head .ch-nums { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.coin-head .ch-nums div span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.coin-head .ch-nums div b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 500; }
.coin-head .ch-links { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.rounds-feed { margin-top: 18px; display: grid; gap: 6px; }
.rf { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 13px; text-decoration: none; color: var(--fg); }
.rf:hover { border-color: var(--line-2); }
.rf b { font-family: var(--mono); }
.rf .muted { color: var(--muted); }
.rf-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 22px; }
@media (max-width: 760px) { .rf { grid-template-columns: 70px 1fr auto; } .rf .side { display: none; } .coin-head .ch-nums { margin-left: 0; } }

/* brand emblem */
.brand .logo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #040404; box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 18px rgba(255,255,255,.22); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.brand:hover .logo { transform: rotate(-8deg) scale(1.06); }
.brand-sm .logo { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) { .brand:hover .logo { transform: none; } }

/* hold mode */
.pill-hold { background: rgba(255,255,255,.12); color: var(--coral-l, #ffffff); border: 1px solid rgba(255,255,255,.35); }