/* CoreStrata — taş tonları + yeşim vurgu. Çerçeve yok: ayrım yüzey tonuyla. Tema Telegram'ı izler. */
:root{
  --bg:#eceee9; --surface:#f9faf7; --surface-2:#e2e5df; --text:#1a1d1b; --muted:#6b726d; --faint:#b6bcb7;
  --accent:#1b7f58; --accent-soft:#d7ebe0; --on-accent:#ffffff;
  --warn:#8a6100; --warn-soft:#f1e6c9; --bad:#a3333b; --bad-soft:#f3dcdc;
  --shadow:0 1px 2px rgba(26,29,27,.04),0 8px 24px -12px rgba(26,29,27,.12);
  --font:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#101211; --surface:#191c1a; --surface-2:#232724; --text:#eceeeb; --muted:#8e958f; --faint:#3c423e;
  --accent:#5cc995; --accent-soft:#1d2e25; --on-accent:#08170f;
  --warn:#e2b75e; --warn-soft:#2d2716; --bad:#ef8b8f; --bad-soft:#2f1d1e;
  --shadow:0 1px 2px rgba(0,0,0,.2),0 10px 30px -14px rgba(0,0,0,.5);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{max-width:460px;margin:0 auto;display:grid;gap:14px;
  padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}

.top{display:flex;justify-content:space-between;align-items:center;padding:4px 2px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.mark{width:24px;height:24px;fill:var(--accent)}
.net{font-size:12px;font-weight:600;color:var(--warn);background:var(--warn-soft);padding:5px 10px;border-radius:999px}
.pv{margin:0;font-size:13px;color:var(--muted);background:var(--surface-2);padding:11px 14px;border-radius:16px}

/* Bakiye kartı */
.hero{position:relative;background:var(--surface);border-radius:28px;padding:20px 20px 0;overflow:hidden;box-shadow:var(--shadow)}
.hero-head{display:flex;justify-content:space-between;align-items:center}
.label{font-size:13px;font-weight:500;color:var(--muted)}
.live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:5px 10px 5px 9px;border-radius:999px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35;transform:scale(.8)}}

.bal{display:flex;align-items:baseline;margin:14px 0 0;font-weight:600;font-size:clamp(30px,9.4vw,42px);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bal .slot{display:inline-block;height:1.15em;width:.6em;overflow:hidden;text-align:center;vertical-align:bottom}
.bal .col{display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.bal .col span{height:1.15em;line-height:1.15em}
.bal .slot.z{color:var(--faint)}
.bal .slot.hot{color:var(--accent)}
.bal .slot.fast .col{transition-duration:.16s;transition-timing-function:linear}
.bal.still .col{transition:none}
.bal .dot{display:inline-block;width:.3em;height:1.15em;line-height:1.15em;text-align:center;color:var(--muted)}
.bal .unit{font-size:.4em;font-weight:500;color:var(--muted);margin-left:.4em}
.meta{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--muted)}
.meta b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.meta .sep{width:3px;height:3px;border-radius:50%;background:var(--faint)}
#strata{display:block;width:calc(100% + 40px);height:86px;margin:16px -20px 0}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;border-radius:18px;font-weight:600;font-size:15px;transition:transform .12s,opacity .2s}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.main{background:var(--accent);color:var(--on-accent)}
.btn.soft{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.btn.wide{width:100%}
.btn.sm{height:50px;padding:0 18px;border-radius:14px;font-size:14px;box-shadow:none;background:var(--surface-2)}
.btn:disabled,.btn.off{opacity:.45}

.panel{background:var(--surface);border-radius:24px;padding:16px 18px;box-shadow:var(--shadow)}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:600}
.panel-head a{font-size:13px;font-weight:500;color:var(--accent);text-decoration:none}
.quiet{font-size:12.5px;font-weight:500;color:var(--muted)}
.pool-val{margin-top:8px;font-size:15px;color:var(--muted)}
.pool-val b{font-size:26px;font-weight:600;color:var(--text);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pool-sub{margin-top:4px;font-size:12.5px;color:var(--muted)}
.pool-sub b{color:var(--text);font-weight:600}

.feed{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.feed li{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:9px 0;animation:rise .35s both}
@keyframes rise{from{opacity:0;transform:translateY(5px)}}
.feed .ic{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:var(--surface-2)}
.feed .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.feed .ic.in{color:var(--accent);background:var(--accent-soft)}
.feed .t{font-size:14px;font-weight:600}
.feed .s{font-size:12.5px;color:var(--muted)}
.feed .s .ok{color:var(--accent)}.feed .s .wait{color:var(--warn)}.feed .s .bad{color:var(--bad)}
.feed .v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.feed li.empty{display:block;padding:10px 0 4px;font-size:13px;color:var(--muted)}

/* Alt sayfalar */
.scrim{position:fixed;inset:0;z-index:5;background:rgba(10,12,11,.38);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:6;max-width:460px;margin:0 auto;max-height:92vh;overflow:auto;background:var(--surface);
  border-radius:28px 28px 0 0;padding:10px 20px max(22px,env(safe-area-inset-bottom));display:grid;gap:10px;box-shadow:0 -20px 50px -20px rgba(0,0,0,.35);
  animation:up .34s cubic-bezier(.2,.9,.25,1)}
@keyframes up{from{transform:translateY(100%)}}
.handle{width:38px;height:4px;border-radius:2px;background:var(--faint);margin:0 auto 6px}
.sheet h2{margin:0 0 2px;font-size:20px;font-weight:600;letter-spacing:-.01em}
.qr{justify-self:center;padding:12px;border-radius:20px;background:#fff}
#qr img,#qr canvas{display:block;width:164px;height:164px}
.field-label{font-size:12.5px;font-weight:500;color:var(--muted);margin-top:4px}
.copy{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:13px 14px;border-radius:16px;background:var(--surface-2)}
.addr{font-size:13px;word-break:break-all;font-variant-numeric:tabular-nums}
.copy.memo{background:var(--accent-soft)}
.code{font-size:21px;font-weight:600;letter-spacing:.1em;color:var(--accent)}
.copy-tag{flex:none;font-size:13px;font-weight:600;color:var(--accent)}
.note{margin:2px 0 4px;font-size:12.5px;color:var(--muted)}
.note b{color:var(--text);font-weight:600}
.link{color:var(--accent);font-size:13px;font-weight:500;padding:8px}
.avail{font-size:13px;color:var(--muted)}
.avail b{color:var(--text);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.inp{width:100%;height:50px;padding:0 14px;border:0;border-radius:14px;background:var(--surface-2);color:var(--text);font:inherit;font-size:14px;outline:none;transition:box-shadow .15s}
.inp:focus{box-shadow:0 0 0 2px var(--accent)}
.inp::placeholder{color:var(--muted)}
.amt{display:flex;gap:8px}
.amt .inp{flex:1;min-width:0}
.msg{margin:0;min-height:18px;font-size:13px}
.msg.err{color:var(--bad)}.msg.ok{color:var(--accent)}

.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:9;transform:translateX(-50%);max-width:calc(100% - 32px);
  padding:11px 16px;border-radius:14px;background:var(--text);color:var(--bg);font-size:13px;font-weight:500;animation:rise .25s}

.gate{position:fixed;inset:0;z-index:8;display:grid;place-items:center;padding:24px;background:var(--bg);text-align:center}
.gate h1{margin:0 0 6px;font-size:26px;font-weight:600}
.gate p{margin:0;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .live i{animation:none}
  .bal .col{transition:none}
}