:root{
  --bg: var(--tg-theme-bg-color, #0f0f12);
  --card: var(--tg-theme-secondary-bg-color, #1c1c22);
  --text: var(--tg-theme-text-color, #fff);
  --hint: var(--tg-theme-hint-color, #8a8a92);
  --btn: var(--tg-theme-button-color, #3390ec);
  --btntext: var(--tg-theme-button-text-color, #fff);
  --left: #e0556b;   /* мем / тикток */
  --right: #33b36b;  /* не мем / не тикток */
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:-apple-system,Roboto,Segoe UI,sans-serif;overflow:hidden;}
header{display:flex;align-items:center;gap:8px;padding:8px 10px;}
.tabs{display:flex;gap:6px;flex:1;}
.tab{flex:1;background:var(--card);color:var(--text);border:none;border-radius:12px;
  padding:9px;font-size:15px;font-weight:600;opacity:.55;}
.tab.active{opacity:1;outline:2px solid var(--btn);}
.icon{background:var(--card);border:none;color:var(--text);border-radius:12px;width:44px;height:40px;font-size:18px;}

main{position:relative;height:calc(100% - 56px);display:flex;flex-direction:column;}
.counter{position:absolute;top:6px;left:0;right:0;text-align:center;color:var(--hint);font-size:13px;z-index:1;}
.stack{position:relative;flex:1;margin:14px;}
.card{position:absolute;inset:0;background:var(--card);border-radius:20px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.4);
  touch-action:none;will-change:transform;}
.card img,.card video{max-width:100%;max-height:100%;object-fit:contain;background:#000;pointer-events:none;}
.card .badge{position:absolute;top:18px;padding:6px 14px;border-radius:10px;font-weight:800;font-size:20px;
  border:3px solid;opacity:0;transform:rotate(-12deg);letter-spacing:.5px;}
.card .badge.l{left:16px;color:var(--left);border-color:var(--left);}
.card .badge.r{right:16px;color:var(--right);border-color:var(--right);transform:rotate(12deg);}
.card .spinner{color:var(--hint);font-size:14px;}

.hintbar{display:flex;justify-content:space-between;padding:0 22px 2px;font-size:13px;color:var(--hint);}
.hint.left b{color:var(--left);} .hint.right b{color:var(--right);}
.controls{display:flex;gap:12px;padding:8px 16px 16px;}
.big{flex:1;border:none;border-radius:16px;padding:15px;font-size:16px;font-weight:700;color:#fff;}
.big.left{background:var(--left);} .big.right{background:var(--right);}
.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--hint);text-align:center;padding:24px;}

/* history */
#histView{height:calc(100% - 56px);overflow-y:auto;padding:8px 10px 40px;}
.histlist{display:flex;flex-direction:column;gap:8px;}
.hrow{display:flex;gap:10px;align-items:center;background:var(--card);border-radius:14px;padding:8px;}
.hrow img{width:54px;height:54px;object-fit:cover;border-radius:10px;background:#000;flex:none;}
.hrow .meta{flex:1;min-width:0;}
.hrow .lbl{font-weight:700;font-size:14px;}
.hrow .lbl.und{color:var(--hint);text-decoration:line-through;}
.hrow .sub{font-size:12px;color:var(--hint);}
.hrow .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.hrow .acts button{border:none;border-radius:9px;padding:7px 9px;font-size:12px;font-weight:600;color:#fff;background:#3a3a44;}
.hrow .acts .toleft{background:var(--left);} .hrow .acts .toright{background:var(--right);}
.hrow .acts .back{background:#555;}

/* toast */
.toast{position:fixed;left:12px;right:12px;bottom:14px;background:#26262e;border-radius:14px;
  padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 6px 24px rgba(0,0,0,.5);z-index:10;}
.toast #toastText{flex:1;font-size:14px;}
.toast #toastUndo{background:var(--btn);color:var(--btntext);border:none;border-radius:10px;padding:9px 14px;font-weight:700;}
.toastbar{position:absolute;left:0;bottom:0;height:3px;background:var(--btn);border-radius:0 0 14px 14px;width:100%;}
.hidden{display:none!important;}
[hidden]{display:none!important;}   /* важно: перебивает display:flex у .toast/.empty/main */