/* Settings: tabs, banners, limit meter, devices, streamer mode. Colours come from the active theme. */
.settings .set-tabs {
    display: flex; gap: 4px; padding: 4px; margin: 4px 0 18px;
    overflow-x: auto; scrollbar-width: none;
    border-radius: 12px; background: color-mix(in srgb, var(--bg) 78%, var(--panel));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line2) 55%, transparent);
}
.settings .set-tabs::-webkit-scrollbar { display: none; }
.settings .set-tab {
    flex: 1 0 auto; min-width: max-content; height: 40px; padding: 0 18px; border: 0; border-radius: 9px;
    background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em; cursor: pointer;
    transition: background .15s, color .15s;
}
.settings .set-tab:hover:not(.on) { color: var(--text); }
.settings .set-tab.on {
    background: color-mix(in srgb, var(--accent) 16%, var(--panel2)); color: var(--text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.settings .set-pane[hidden] { display: none; }

/* banners */
.set-banners { display: flex; flex-direction: column; gap: 10px; }
.set-banners:empty { display: none; }
.set-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; margin-top: 6px;
    border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.set-banner.warn { background: color-mix(in srgb, var(--gold) 11%, var(--panel)); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.set-banner div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-banner span { color: var(--muted); font-size: 13px; }
.set-banner .btn { flex: none; }
@media (max-width: 560px) { .set-banner { flex-direction: column; align-items: stretch; } }

/* rows */
.settings .set-sub { padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.settings .set-sub[hidden] { display: none; }
.settings .set-row .text-input { width: 140px; flex: none; text-align: right; }
.settings .set-row .select { width: auto; min-width: 130px; flex: none; }
.settings .set-foot { margin: 8px 0 0; }
.settings .set-note { margin: 10px 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, var(--gold) 10%, var(--bg2)); }
.settings .link-btn { border: 0; background: none; padding: 0; margin-left: 8px; color: var(--accent2); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.settings .dev-row .btn { flex: none; }

/* daily loss limit meter */
.lim-meter { margin: 14px 0 6px; }
.lim-bar { height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--bg) 70%, var(--panel2)); box-shadow: inset 0 0 0 1px var(--line); }
.lim-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .3s; }
.lim-bar i.hot { background: linear-gradient(90deg, var(--gold), var(--red)); }
.lim-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.settings .l-form { margin-top: 12px; }
.settings .l-form .text-input { flex: 1 1 auto; width: auto; min-width: 0; text-align: left; }
.brk-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.brk-btns .btn { flex: 1; }

/* confirm big bet window */
.confirm-bet .cb-body { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; padding: 6px 4px 2px; }
.confirm-bet .cb-amount { font-size: 28px; font-weight: 800; }
.confirm-bet .admin-btns { display: flex; gap: 10px; width: 100%; }
.confirm-bet .admin-btns .btn { flex: 1; }

/* streamer mode: balance and name are blurred until you turn it off */
.streamer-mode .balance b, .streamer-mode #bal, .streamer-mode .bal-mini,
.streamer-mode .user-chip span, .streamer-mode .um-head b, .streamer-mode .pf-head b, .streamer-mode .a-name {
    filter: blur(7px); user-select: none; transition: filter .15s;
}
.streamer-mode .balance:hover b, .streamer-mode .balance:hover #bal { filter: blur(7px); }