[hidden]{display:none!important;}
:root{
  --up-color:#16a34a; /* green */
  --down-color:#dc2626; /* red */

  --tg-bg: var(--tg-theme-bg-color, #fff);
  --tg-text: var(--tg-theme-text-color, #0b1421);
  --tg-hint: var(--tg-theme-hint-color, #6f7b87);
  --card: var(--tg-theme-secondary-bg-color, #f5f7fb);
  --card-on: var(--tg-bg);
  --card-border: rgba(0,0,0,.08);
  --shadow: 0 8px 20px rgba(0,0,0,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;background:var(--tg-bg);color:var(--tg-text);}

/* HOME */
.home-content{ padding:12px; display:flex; flex-direction:column; gap:12px; }
.balance-card{ background:var(--card-on); border:1px solid var(--card-border); border-radius:18px; box-shadow:var(--shadow); padding:20px 16px 16px; text-align:center; }
.balance-caption{ color:var(--tg-hint); font-size:13px; margin-bottom:6px; font-weight:600; }
.balance-amount{ font-size:40px; font-weight:800; letter-spacing:-.5px; }
.actions{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.act{ display:grid; place-items:center; gap:6px; padding:12px 8px; background:var(--card); border:1px solid var(--card-border); border-radius:14px; text-decoration:none; color:var(--tg-text); font-size:12px; font-weight:700; }
.assets-card{ background:var(--card-on); border:1px solid var(--card-border); border-radius:18px; box-shadow:var(--shadow); padding:4px; }
.asset-list{ display:flex; flex-direction:column; }
.asset-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 8px; border-radius:14px; }
.asset-row + .asset-row{ border-top:1px solid var(--card-border); }
.left{ display:flex; align-items:center; gap:10px; }
.coin-icon{ width:38px; height:38px; border-radius:19px; display:grid; place-items:center; overflow:hidden; background:var(--card); border:1px solid var(--card-border); }
.coin-img{ width:100%; height:100%; object-fit:cover; display:none; }
.coin-fallback{ font-weight:800; font-size:13px; color:var(--tg-text); }
.name{ font-weight:800; }
.sub{ font-size:12px; color:var(--tg-hint); display:flex; align-items:center; gap:6px; }
.right{ text-align:right; }
.right .usd{ font-weight:800; font-variant-numeric: tabular-nums; }
.right .amt{ font-size:12px; color:var(--tg-hint); }

.not-linked{ display:flex; min-height:70vh; padding:24px 16px; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; }
.logo{ width:220px; max-width:80%; height:auto; }

/* INNER base */
.inner-content{ padding:12px; display:flex; flex-direction:column; gap:12px; }

/* ASSET page (latest style) */
.asset-hero,.asset-chart-card,.asset-ops-card{border-radius:20px;border:1px solid var(--card-border);background:var(--card-on);box-shadow:0 6px 18px rgba(0,0,0,.06);}
.asset-hero{padding:14px 12px;}
.asset-header-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;}
.asset-left{display:flex;align-items:center;gap:10px;}
.coin-icon.big{width:44px;height:44px;border-radius:22px;border:1px solid var(--card-border);background:var(--card);display:grid;place-items:center;overflow:hidden;}
.asset-titles{display:flex;flex-direction:column;gap:2px;}
.asset-symbol{font-size:16px;font-weight:900;line-height:1;}
.asset-subname{font-size:11px;color:var(--tg-hint);}
.asset-price-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.asset-price{font-size:20px;font-weight:900;letter-spacing:-.3px;}
.badge24{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:900;background:var(--card);border:1px solid var(--card-border);}
.badge24.pos{color:#14b26e;border-color:rgba(20,178,110,.35);}
.badge24.neg{color:#ef4444;border-color:rgba(239,68,68,.35);}
.asset-availability{margin-top:10px;display:grid;grid-template-columns:1fr auto;align-items:center;padding-top:10px;border-top:1px solid var(--card-border);}
.asset-availability .label{font-size:12px;color:var(--tg-hint);}
.asset-availability .coin{font-size:16px;font-weight:900;text-align:right;}
.asset-availability .usd{font-size:12px;color:var(--tg-hint);text-align:right;}
.asset-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;}
.asset-actions .act{border-radius:18px;padding:12px 10px;background:var(--card);border:1px solid var(--card-border);text-align:center;font-weight:800;text-decoration:none;color:var(--tg-text);}
.asset-chart-card{padding:10px 10px 6px;}
#spark{display:block;width:100%;height:120px;}
.chart-periods{display:flex;gap:8px;padding-top:8px;}
.chart-periods .chip{padding:6px 12px;border-radius:999px;border:1px solid var(--card-border);background:var(--card);font-weight:800;}
.chart-periods .chip--on{background:rgba(36,129,204,.15);border-color:rgba(36,129,204,.35);}
.asset-ops-card{padding:6px;}
.asset-ops-header{display:flex;align-items:center;justify-content:space-between;padding:8px;}
.op-date{padding:6px 8px 4px;font-size:12px;color:var(--tg-hint);font-weight:800;}
.asset-list .asset-row{padding:10px 8px;}
.asset-row .right .usd{font-weight:800;}
.asset-row .right .amt{font-size:12px;opacity:.85;}
.subline { font-size: 12px; color: var(--tg-hint); }
/* v27: section title and single-row filters */
.section-title{
  margin: 2px 2px 6px;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 900;
}
.filters{
  display: flex;
  gap: 8px;
  padding: 8px;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.filters .chip{ flex: 0 0 auto; } /* prevent wrapping */

/* [added] colored percentage changes */
.sub .chg.pos, .asset-chg.pos { color: var(--up-color) !important; }
.sub .chg.neg, .asset-chg.neg { color: var(--down-color) !important; }


/* [added] larger section title on asset page */
.inner-content .section-title { font-size: 18px; }

/* dates */
.op-date{ font-size:12px; color:var(--tg-hint); padding:6px 8px; }
.op-date--sticky{ position:sticky; top:0; z-index:5; background:var(--tg-theme-bg-color,#fff); border-bottom:1px solid var(--card-border); }

/* search row */
.searchRow{ display:grid; grid-template-columns: 1fr 140px; gap:8px; padding:4px; }
.searchRow input, .searchRow select{ padding:10px; border:1px solid var(--card-border); border-radius:10px; background:var(--card-on); }

.tabbar{position:sticky;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:var(--card-on);border-top:1px solid var(--card-border);padding:8px 6px 6px;z-index:3;}
.tabbar button{background:none;border:0;padding:6px 8px;font-size:12px;color:var(--tg-theme-hint-color,#707579);display:flex;flex-direction:column;align-items:center;gap:4px;}
.tabbar button.active{color:var(--tg-theme-text-color,#222);font-weight:600;}

.header{position:relative;}
.kebab{position:absolute; right:8px; top:8px; width:32px; height:32px; border-radius:50%; border:0; background:transparent; font-size:20px; line-height:32px; text-align:center; color:var(--tg-hint);}
.kebab-menu{position:absolute; right:8px; top:44px; min-width:220px; background:var(--card-on); border:1px solid var(--card-border); border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08); padding:6px; z-index:20;}
.kebab-menu button{display:flex; align-items:center; gap:8px; width:100%; background:transparent; border:0; padding:10px 12px; font-size:14px; color:var(--tg-theme-text-color,#222); border-radius:8px;}
.kebab-menu button:hover{ background:rgba(0,0,0,.04); }
.kebab-menu hr{ border:0; border-top:1px solid var(--card-border); margin:6px 0; }
.kebab-menu .ico{ width:18px; display:inline-block; }
.toast{position:fixed;left:50%;bottom:72px;transform:translateX(-50%) translateY(30px);opacity:.0;padding:10px 14px;border-radius:10px;background:rgba(0,0,0,.78);color:#fff;font-size:13px;z-index:999;transition:all .25s ease;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.gridCoins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px 4px;}
.coinBtn{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--card-border);border-radius:10px;background:var(--card-on);}
.coinBtn .coin-img.small{width:22px;height:22px;display:block;}
.h3{font-size:16px;font-weight:700;margin:6px 6px 10px;}
.row{display:flex;gap:8px;align-items:center;padding:6px 0;}
.row input{flex:1;padding:10px;border-radius:8px;border:1px solid var(--card-border);background:var(--card-on);color:var(--tg-theme-text-color,#000);}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;}
.btn{padding:10px 14px;border-radius:10px;border:1px solid var(--card-border);background:var(--card-on);}
.btn.primary{background:var(--tg-theme-button-color,#2481cc);color:#fff;border-color:transparent;}
.btn.secondary{background:transparent;}
.ex-block{display:grid;grid-template-columns:88px 1fr;gap:8px;align-items:center;margin:6px 0;}
.ex-block label{color:var(--tg-hint);font-size:12px;}
.ex-block select,.ex-block input{width:100%;padding:10px;border:1px solid var(--card-border);border-radius:10px;background:var(--card-on);}
.ex-swap{display:flex;justify-content:center;margin:6px 0;}
.hint{color:var(--tg-hint);font-size:12px;}
.error{color:#b00020;padding:8px 0;}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:6px 4px;}
.chip{padding:6px 10px;border-radius:16px;border:1px solid var(--card-border);background:var(--card-on);font-size:12px;}
.chip--on{background:var(--tg-theme-button-color,#2481cc);color:#fff;border-color:transparent;}
.op-date{font-size:12px;color:var(--tg-hint);padding:6px 8px;}
.op-date--sticky{position:sticky;top:0;z-index:5;background:var(--tg-theme-bg-color,#fff);border-bottom:1px solid var(--card-border);}
.searchRow{display:grid;grid-template-columns:1fr 140px;gap:8px;padding:4px;}
.searchRow input,.searchRow select{padding:10px;border:1px solid var(--card-border);border-radius:10px;background:var(--card-on);}
.coin-icon .coin-img{display:block;}


/* fixed bottom tabbar with safe-area support */
:root{ --safe-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar{ position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:space-around;
  background:var(--card-on); border-top:1px solid var(--card-border); padding:6px 6px calc(6px + var(--safe-bottom)); z-index:100;}
body{ padding-bottom: calc(64px + var(--safe-bottom)); } /* keep content above tabbar */
.tabbar button{ background:none; border:0; padding:6px 8px; font-size:12px; color:var(--tg-theme-hint-color,#707579);
  display:flex; flex-direction:column; align-items:center; gap:4px; min-width:70px; }
.tabbar button.active{ color:var(--tg-theme-text-color,#222); font-weight:600; }
.tabbar button .ico{ width:22px; height:22px; display:block; }
.tabbar button .ico img{ width:22px; height:22px; display:block; }


/* active tab highlight + richer active icons */
:root{ --tab-active-bg: rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark){
  :root{ --tab-active-bg: rgba(255,255,255,.08); }
}
.tabbar button{ border-radius: 12px; }
.tabbar button .ico img{ opacity: .6; transition: opacity .2s ease, filter .2s ease, transform .12s ease; }
.tabbar button.active{ background: var(--tab-active-bg); }
.tabbar button.active .ico img{ opacity: 1; filter: saturate(160%) contrast(110%); }
.tabbar button:active .ico img{ transform: translateY(1px); }


/* header gear button */
.header{ position:relative; }
.gear{ position:absolute; right:8px; top:8px; width:32px; height:32px; border-radius:50%; border:0; background:transparent; font-size:18px; line-height:32px; text-align:center; color:var(--tg-hint); }
.gear:active{ transform: translateY(1px); }

.row select{ flex:1; padding:10px; border-radius:8px; border:1px solid var(--card-border); background:var(--card-on); color:var(--tg-theme-text-color,#000);}

/* ===== Asset hero like Telegram Wallet ===== */
.asset-hero{ background:var(--card-on); border:1px solid var(--card-border); border-radius:16px; padding:12px; margin:8px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.asset-hero .top{ display:flex; align-items:center; gap:10px; }
.asset-hero .top .icon{ width:48px; height:48px; border-radius:24px; background:rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; }
.asset-hero .top .icon .coin-img{ width:36px; height:36px; display:block; }
.asset-hero .top .name{ font-weight:700; }
.asset-hero .top .sub{ color:var(--tg-hint); font-size:12px; }
.asset-hero .price{ margin-left:auto; text-align:right; }
.asset-hero .price .usd{ font-weight:800; font-size:18px; }
.asset-hero .price .chg{ font-size:12px; padding:2px 6px; border-radius:999px; display:inline-block; }
.asset-hero hr{ border:0; border-top:1px solid var(--card-border); margin:10px 0; }
.asset-hero .avail{ display:flex; justify-content:space-between; align-items:flex-end; }
.asset-hero .avail .amt{ font-size:18px; font-weight:700; }
.asset-hero .avail .fiat{ color:var(--tg-hint); font-size:12px; }

.asset-actions-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:10px 8px 0; }
.asset-actions-row .act{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 8px; border-radius:12px; background:var(--card-on); border:1px solid var(--card-border); }
.asset-actions-row .act .i{ width:24px; height:24px; line-height:24px; text-align:center; }
.asset-actions-row .act span{ font-size:12px; }


/* === Wallet-like asset page (header values + actions + price box with sparkline) === */
.asset-hero{ background:var(--card-on); border:1px solid var(--card-border); border-radius:16px; padding:16px; margin:8px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.asset-hero .top{ display:flex; align-items:center; gap:12px; }
.asset-hero .top .icon{ width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; }
.asset-hero .top .icon .coin-img{ width:44px; height:44px; display:block; }
.asset-hero .vals{ margin-top:8px; }
.asset-hero .vals .fiat{ font-size:22px; font-weight:800; line-height:1.2; }
.asset-hero .vals .crypto{ color:var(--tg-hint); font-size:13px; }

.asset-actions-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:10px 8px 0; }
.asset-actions-row .act{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 8px; border-radius:12px; background:var(--card-on); border:1px solid var(--card-border); }
.asset-actions-row .act .i{ width:24px; height:24px; line-height:24px; text-align:center; }
.asset-actions-row .act span{ font-size:12px; }

.price-box{ background:var(--card-on); border:1px solid var(--card-border); border-radius:16px; margin:12px 8px; padding:10px 12px; }
.price-box .head{ display:flex; justify-content:space-between; align-items:center; color:var(--tg-theme-link-color,#5E9); font-weight:600; }
.price-box .body{ display:flex; gap:12px; align-items:center; margin-top:8px; }
.price-box .left{ flex:1; }
.price-box .rate{ font-size:20px; font-weight:800; }
.price-box .delta{ display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:6px 10px; border-radius:12px; background:rgba(0,0,0,.06); }
.price-box .delta .pc{ font-weight:600; }
.price-box .delta .abs{ color:var(--tg-hint); }
.price-box .spark{ width:120px; height:56px; }
@media (min-width:420px){ .price-box .spark{ width:160px; height:64px; } }


/* A2HS pill */
#a2hs-pill{ position:fixed; right:12px; bottom:88px; z-index:2000; }
.a2hs-btn{ padding:8px 12px; border-radius:999px; border:1px solid var(--card-border); background:var(--card-on);
  box-shadow:0 2px 8px rgba(0,0,0,.12); font-size:12px; }
@media (max-width: 360px){ #a2hs-pill{ bottom:96px; right:8px; } }

#tabbar{
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 56px; display: flex; gap: 8px; align-items: center; justify-content: space-around;
  border-top: 1px solid rgba(0,0,0,.08);
  background: var(--tg-theme-secondary-bg-color, #fff);
  z-index: 1000;
}
#tabbar .tab{
  flex: 1; text-align: center; text-decoration: none;
  font: 500 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 8px 4px; color: var(--tg-theme-text-color, #111);
  opacity: .7;
}
#tabbar .tab.is-active{ opacity: 1; font-weight: 600; }
#content{ padding-bottom: 64px; } /* запас под таббар */
/* Optional styles if you want to drop into /public/css/app.css*/
.btn{background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:8px 10px;font:600 13px system-ui}
.input{border:1px solid rgba(0,0,0,.15);border-radius:10px;padding:6px 8px;font:500 13px system-ui;background:#fff}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1100}
.modal{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:block}
.modal-card{margin:0 auto 0 auto;max-width:520px;background:#fff;border-radius:16px 16px 0 0;padding:14px;border:1px solid rgba(0,0,0,.08)}
.modal-title{font:700 16px system-ui;margin-bottom:8px}
.modal-body{font:500 13px system-ui}
.modal-actions{margin-top:10px;display:flex;justify-content:flex-end;gap:8px}