:root{
  --bg: var(--tg-theme-bg-color, #0f0f14);
  --bg2: var(--tg-theme-secondary-bg-color, #17171f);
  --fg: var(--tg-theme-text-color, #f2f2f5);
  --muted: var(--tg-theme-hint-color, #8a8a96);
  --accent: var(--tg-theme-button-color, #7c5cff);
  --accent-fg: var(--tg-theme-button-text-color, #ffffff);
  --card: #1c1c26;
  --border: #2a2a36;
  --danger: #ff6b6b;
  --good: #34c77b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
body{padding-bottom:76px}
.wrap{max-width:560px;margin:0 auto;padding:14px 14px 20px}

h1{font-size:20px;margin:6px 2px 14px}
h2{font-size:14px;margin:0 0 10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:12px}
.card.center{text-align:center}

.muted{color:var(--muted)}
.err{color:var(--danger)}

.row{display:flex;align-items:center;gap:8px}
.listrow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.listrow:last-child{border-bottom:none}

.joke{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:22px 18px;
  font-size:18px;line-height:1.5;white-space:pre-wrap;min-height:140px;
  display:flex;align-items:center;transition:transform .16s ease, opacity .16s ease}
.joke.out-left{transform:translateX(-120%) rotate(-6deg);opacity:0}
.joke.out-right{transform:translateX(120%) rotate(6deg);opacity:0}

.pill{display:inline-block;background:var(--bg2);border:1px solid var(--border);color:var(--muted);
  border-radius:999px;padding:4px 10px;font-size:12px;margin:2px 2px}
.pill.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.pill.clk{cursor:pointer;user-select:none}

.rate{display:flex;justify-content:center;gap:22px;margin:18px 0 6px}
.rate button{font-size:32px;background:var(--card);border:1px solid var(--border);border-radius:50%;
  width:64px;height:64px;cursor:pointer;transition:transform .1s ease}
.rate button:active{transform:scale(.9)}

.btn{background:var(--accent);color:var(--accent-fg);border:none;border-radius:12px;
  padding:11px 16px;font-size:15px;font-weight:600;cursor:pointer}
.btn.sec{background:var(--bg2);color:var(--fg);border:1px solid var(--border)}
.btn.wide{width:100%;display:block}
.btn.sm{padding:9px 10px;font-size:13px}
.btn:active{opacity:.8}

input{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--fg);
  border-radius:10px;padding:10px 12px;font-size:15px}

.bar{background:var(--bg2);border-radius:999px;height:8px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px;font-style:normal}

#tabbar{position:fixed;bottom:0;left:0;right:0;display:none;background:var(--bg2);
  border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  justify-content:space-around;z-index:50}
#tabbar button{flex:1;background:none;border:none;color:var(--muted);font-size:11px;
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;cursor:pointer}
#tabbar button .ic{font-size:20px}
#tabbar button.on{color:var(--accent)}

.busyov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;
  justify-content:center;z-index:100}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--border);
  border-top-color:var(--accent);animation:spin .8s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--card);
  border:1px solid var(--border);color:var(--fg);padding:10px 16px;border-radius:999px;
  font-size:13px;z-index:200;box-shadow:0 6px 20px rgba(0,0,0,.35)}

@media (prefers-color-scheme: light){
  :root{
    --bg: var(--tg-theme-bg-color, #f5f5fa);
    --bg2: var(--tg-theme-secondary-bg-color, #ececf4);
    --fg: var(--tg-theme-text-color, #16161d);
    --card: #ffffff;
    --border: #e2e2ea;
  }
}