* { margin:0; padding:0; box-sizing:border-box; }
:root {
    --primary: #00C853;
    --secondary: #00BCD4;
    --success: #4CAF50;
    --warning: #FF9800;
    --danger: #FF5252;
    --info: #2196F3;
    --bg: #E8F5E9;
    --card: #ffffff;
    --text: #2E3B30;
    --text-light: #78909C;
    --border: #CFD8DC;
    --radius: 16px;
    --grad: linear-gradient(135deg,#00C853,#00BCD4);
    --grad-warm: linear-gradient(135deg,#FF9800,#FF5252);
    --grad-cool: linear-gradient(135deg,#2196F3,#00BCD4);
    --grad-fun: linear-gradient(135deg,#00C853,#FFD600);
}
html { -webkit-text-size-adjust:100%; }
body { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }
#app { min-height:100vh; }

#topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px; background:var(--card); box-shadow:0 2px 8px rgba(0,0,0,.08);
    position:sticky; top:0; z-index:100; flex-wrap:wrap; gap:8px;
}
.topbar-left { display:flex; align-items:center; gap:8px; min-width:0; }
.topbar-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.logo { font-size:20px; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; white-space:nowrap; }
.subtitle { font-size:13px; color:var(--text-light); }
.stat-pill { display:flex; align-items:center; gap:4px; padding:6px 12px; background:var(--bg); border-radius:20px; font-weight:700; font-size:14px; }
.stat-icon { font-size:16px; }
.btn-logout { padding:6px 14px; background:var(--danger); color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:600; font-size:14px; }
.btn-logout:hover { opacity:.85; }
.btn-back { padding:8px 14px; background:transparent; color:var(--primary); border:2px solid var(--primary); border-radius:8px; cursor:pointer; font-weight:600; margin:12px 0; font-size:14px; }
.btn-back:hover { background:var(--primary); color:#fff; }

.view { display:none; padding:16px; max-width:1200px; margin:0 auto; }
.view.active { display:block; }

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.active { display:flex; }
.modal-content { background:#fff; border-radius:24px; padding:32px 24px; max-width:500px; width:100%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.3); }

.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); padding:14px 24px; background:#333; color:#fff; border-radius:12px; font-weight:600; z-index:2000; opacity:0; transition:opacity .3s; pointer-events:none; max-width:90vw; text-align:center; }
.toast.show { opacity:1; }

@keyframes bounce { 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }
@keyframes pop { 0%{transform:scale(0);} 70%{transform:scale(1.2);} 100%{transform:scale(1);} }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);} }
@keyframes fadeIn { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
@keyframes slideIn { from{opacity:0;transform:translateX(30px);} to{opacity:1;transform:translateX(0);} }
@keyframes glow { 0%,100%{box-shadow:0 0 5px rgba(255,215,0,.5);} 50%{box-shadow:0 0 25px rgba(255,215,0,.8);} }

@media (min-width:768px) {
    #topbar { padding:12px 24px; }
    .topbar-left { gap:12px; }
    .topbar-right { gap:12px; }
    .logo { font-size:22px; }
    .stat-pill { padding:8px 16px; font-size:16px; gap:6px; }
    .stat-icon { font-size:18px; }
    .btn-logout { padding:8px 20px; font-size:16px; }
    .btn-back { padding:8px 16px; font-size:16px; }
    .view { padding:24px; }
    .modal-content { padding:40px; }
    .toast { padding:16px 32px; }
}