/* Rebellion v3 skin — chỉ đổi giao diện, nạp SAU app.css. 2026-10-28 */
:root{--bg:#0c0f14;--card:#151a22;--card2:#1a2130;--line:#2a3344;--text:#eef2f7;--muted:#8b97ab;--green:#34d399;--amber:#fbbf24;--red:#fb7185;--cyan:#38bdf8;--wood:#d9a066;--wood-bg:#1f1a14;--wood-line:#4a3520;--tool:var(--green)}
body[data-page="tuner"]{--tool:#34d399}body[data-page="metro"]{--tool:#fbbf24}body[data-page="dem"]{--tool:#38bdf8}
body{background:var(--bg)}
.app{background:radial-gradient(260px 200px at 100% 0,rgba(217,160,102,.10),transparent 70%),var(--bg)}
/* Header thống nhất */
.fhead{margin:0 0 6px -8px;gap:4px;min-height:48px}
.fhead .back{color:var(--wood);font-size:26px}
.fhead .back:hover{background:var(--wood-bg)}
.fhead .ttl{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.fhead .brand{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wood)}
.fhead .crumb{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fhead .swbtn{border-radius:14px;color:var(--cyan)}
.status{display:none}
header h1{font-size:24px;font-weight:750;display:flex;align-items:center;gap:8px}
header h1::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tool);box-shadow:0 0 10px var(--tool);flex:none}
header p{font-size:13px}
/* Card/khối giống home-v3 */
.gauge,.seg,.chip,.str,.btn.ghost,.step,.bpm-input,.lb-progress{border-radius:14px;border-color:var(--line)}
.gauge{border-radius:18px}
.str.active{border-color:var(--green);background:#0f2a24;box-shadow:0 0 0 1px var(--green);color:#bbf7d0}
.chip.on{border-color:var(--amber);background:#2a2412;color:#fde68a;box-shadow:0 0 0 1px var(--amber)}
.seg-btn.on{background:#2a2412;color:#fde68a}
.btn{border-radius:14px;min-height:48px;transition:transform .15s ease,filter .2s ease}
.btn:active{transform:scale(.98)}
body[data-page="metro"] .btn.primary:not(.stop){background:var(--amber);color:#3a2604}
.btn.primary.stop{background:#2a1418;border:1px solid #5c1e2a;color:#fca5a5}
#t-btnMic[aria-pressed="true"]{background:#2a1418;border:1px solid #5c1e2a;color:#fca5a5}
.btn.listen{border-radius:14px}
.lb-progress i{background:var(--amber)}
.light{border-radius:50%}
.light.on{box-shadow:0 0 14px rgba(251,191,36,.45)}
.meta button{color:var(--wood)}
:focus-visible{outline:2px solid var(--wood);outline-offset:2px}
/* Tab bar = home-v3 */
.tabs{border-top:1px solid #1a2230;background:rgba(12,15,20,.94);gap:6px}
.tab{height:48px;min-height:48px;gap:8px;font-size:15px;font-weight:600;color:var(--muted);border-radius:12px}
.tab .ti{display:inline-flex;width:20px;height:20px;filter:none;opacity:1}
.tab .ti svg{width:20px;height:20px}
.tab.on{background:var(--wood-bg);color:var(--wood)}
/* Motion nhẹ: chấm màu tiêu đề thở chậm */
header h1::before{animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
body[data-page="dem"] .app{background:var(--bg)}