:root{
  --bg:#071018; --pane:#0b1522; --pane2:#111d2f; --line:#1a2a40;
  --ink:#eaf4ff; --muted:#97a7bd;
  --a:#24E1B5; --b:#8A7DFF; --good:#18e79a; --bad:#ff6f7e;
  --r:16px; --shadow:0 24px 80px rgba(0,0,0,.5)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 800px at -10% -20%, rgba(36,225,181,.08), transparent 60%),
    radial-gradient(1000px 700px at 120% 120%, rgba(138,125,255,.07), transparent 60%),
    linear-gradient(180deg,#070d14,#050a10);
  font:14px/1.45 Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial;
}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}

.glass{
  background:rgba(14,22,35,.6);
  border:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--shadow);
  border-radius:var(--r);
}

/* header */
.hx{position:sticky; top:0; z-index:20; border-radius:0; padding:10px 14px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px}
.hx__left,.hx__right{display:flex; align-items:center; gap:10px}
.hx__center{display:flex; justify-content:center}
.logo{width:28px;height:28px;border-radius:8px;object-fit:cover; box-shadow:0 0 16px rgba(36,225,181,.35)}
.brand{display:grid; line-height:1}

.seg{display:flex; gap:8px}
.seg__btn{padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:var(--pane2); color:var(--ink); font-weight:800; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease}
.seg__btn:hover{transform:translateY(-1px)}
.seg__btn.is-on{box-shadow:inset 0 0 0 2px var(--a), 0 0 0 3px rgba(36,225,181,.08)}

.btn{padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--pane2); color:var(--ink); font-weight:800; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(36,225,181,.18)}
.btn.primary{background:linear-gradient(90deg,var(--a),var(--b)); color:#0b0f14; border-color:#2ba78f}
.btn.ghost{background:#0c1726}

/* layout */
.frame{display:grid; grid-template-columns:320px 1fr; gap:14px; padding:14px}
@media (max-width:1100px){ .frame{grid-template-columns:1fr} }
.side{display:grid; gap:14px; align-content:start}
.tile{overflow:hidden; border-radius:var(--r); border:1px solid var(--line); background:var(--pane)}
.tile__head{padding:10px 12px; font-weight:900; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.stack{display:grid; gap:8px; padding:12px}

.flow{max-height:300px; overflow:auto; padding:10px; display:grid; gap:8px}
.flow__row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#0d1a2b}
.flow__row .good{color:var(--good)} .flow__row .bad{color:var(--bad)}

.list{max-height:300px; overflow:auto; padding:10px; display:grid; gap:8px}
.row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#0d1a2b}

/* main */
.main{display:grid; gap:14px; align-content:start}
.status{display:grid; grid-template-columns:auto 1fr; gap:12px; padding:12px}
@media (max-width:800px){ .status{grid-template-columns:1fr} }
.chips{display:flex; gap:8px; align-items:center}
.kpis{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.kpi{display:grid; gap:4px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:#0c1726}
.kpi span{color:var(--muted); font-size:12px}
.kpi b{font-size:16px}
.chip{padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:#0c1726; font-weight:900; font-size:12px}
.chip.live{border-color:#184736; background:#0d211b; color:var(--good)}

.prog{height:12px; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:#0b1522}
.prog__bar{height:100%; width:0%; background:linear-gradient(90deg,var(--a),var(--b))}

.panel{overflow:hidden}
.panel__head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}

.draw-grid{padding:12px; display:grid; grid-template-columns:repeat(15,1fr); gap:6px}
.cell{aspect-ratio:1/1; display:grid; place-items:center; border:1px solid #20324e; border-radius:8px; background:#0a1727; font-weight:900}
.cell.hit{background:#122d22; border-color:#234b3a; color:#bff9cf}

.cards{display:grid; gap:12px; grid-template-columns:repeat(3, minmax(220px,1fr)); padding:12px}
@media (max-width:1200px){ .cards{grid-template-columns:repeat(2, minmax(220px,1fr))} }
@media (max-width:700px){ .cards{grid-template-columns:1fr} }
.card{border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,#0b1728,#091420); padding:10px; display:grid; gap:8px}
.card__head{display:flex; align-items:center; justify-content:space-between}
.grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.cell.free{background:#261b0f; color:#ffdba7}

.toast{position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(8px); background:#0d1a2b; border:1px solid var(--line); border-radius:12px; padding:10px 14px; opacity:0; pointer-events:none; transition:.25s}
.toast.show{opacity:1; transform:translateX(-50%)}

/* wallet modal (текст видимый) */
.modal{position:fixed; inset:0; display:none; place-items:center; z-index:9999}
.modal.is-open{display:grid}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px)}
.modal__card{position:relative; z-index:1; width:min(460px,94vw); background:var(--pane); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.modal__header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line)}
.modal__title{margin:0; font-size:16px}
.modal__close{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#0c1726;color:#fff;cursor:pointer}
.modal__body{padding:14px; display:grid; gap:12px}
.wallet-list{display:grid; gap:8px}
.wallet-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#0c1726; cursor:pointer; font-weight:800}
.wallet-item__icon{width:24px;height:24px;display:grid;place-items:center}
.wallet-item__text{color:var(--ink)}
.spinner{width:16px;height:16px;border:2px solid #fff2;border-top-color:#fff; border-radius:50%; animation:spin .9s linear infinite; display:inline-block;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.modal__hint{color:var(--muted); font-size:12px}
.modal__error{color:var(--bad); background:#34161b; border:1px solid #4a2128; padding:8px 10px; border-radius:10px}

.wallet-pop{position:absolute; min-width:220px; background:#0c1726; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:10px; display:none; z-index:999}
.wallet-pop.is-open{display:block}
.wallet-pop__row{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.wallet-pop__actions{display:flex; justify-content:flex-end}
.btn-disconnect{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:#0b1522;color:#fff;cursor:pointer}