@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");*{box-sizing:border-box;margin:0;padding:0}:root{--blue:#4a90e2;--blue-light:#ebf3fd;--green:#50c878;--green-light:#edfbf2;--red:#e85d5d;--red-light:#fdeaea;--amber:#f5a623;--amber-light:#fef7e7;--purple:#8b5cf6;--sidebar-bg:#0f1117;--sidebar-hover:#1a1d27;--sidebar-active:#1e2235;--sidebar-border:#1f2333;--sidebar-text:#a0a8c0;--sidebar-text-active:#fff;--sidebar-section:#4a5070;--bg:#f4f6fa;--surface:#fff;--border:#e4e8f0;--text:#111827;--muted:#6b7280;--radius:14px;--transition-fast:0.15s ease;--transition-mid:0.25s ease;--transition-slow:0.4s ease}body.dark{--bg:#0f1117;--surface:#1a1d27;--border:#1f2333;--text:#e8ebf0;--muted:#6b7a99;--blue-light:rgba(74,144,226,.15);--green-light:rgba(80,200,120,.12);--red-light:rgba(232,93,93,.12);--amber-light:rgba(245,166,35,.12)}body.dark .mobile-nav{background:#0f1117!important;border-top-color:#1f2333!important;box-shadow:0 -2px 16px rgba(0,0,0,.3)!important}body.dark .mobile-nav a,body.dark .mobile-nav button{color:#4a5070}body.dark .mobile-nav a.active-link{color:#4a90e2}body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.app,body{min-height:100vh}.app,.sidebar{display:flex}.sidebar{width:248px;background:var(--sidebar-bg);flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:20;border-right:1px solid var(--sidebar-border)}.sidebar-logo{padding:24px 22px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--sidebar-border);margin-bottom:10px}.sidebar-logo-icon{width:38px;height:38px;background:var(--blue);border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;letter-spacing:-.5px;flex-shrink:0}.sidebar-logo-name{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.4px}.sidebar-logo-sub{font-size:11px;color:var(--sidebar-text);margin-top:2px;letter-spacing:.3px}.sidebar-section-label{padding:14px 22px 7px;font-size:10px;font-weight:700;color:var(--sidebar-section);text-transform:uppercase;letter-spacing:1.2px}.nav-item{display:flex;align-items:center;gap:12px;padding:11px 22px;cursor:pointer;font-size:14.5px;color:var(--sidebar-text);text-decoration:none;transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);margin:2px 10px;border-radius:10px;font-weight:400;letter-spacing:-.1px}.nav-item:hover{background:var(--sidebar-hover);color:#fff;transform:translateX(2px)}.nav-item.active{background:var(--sidebar-active);color:var(--sidebar-text-active);font-weight:500}.nav-item.active .nav-item-icon{color:var(--blue)}.nav-item-icon{width:20px;text-align:center;font-size:17px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.nav-spacer{flex:1 1}.sidebar-profile{padding:14px 16px;border-top:1px solid var(--sidebar-border);display:flex;align-items:center;gap:10px}.sidebar-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#6366f1);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;transition:transform var(--transition-fast)}.sidebar-avatar:hover{transform:scale(1.05)}.sidebar-avatar img{width:100%;height:100%;object-fit:cover}.sidebar-profile-name{font-size:13.5px;font-weight:500;color:#fff}.sidebar-profile-email,.sidebar-profile-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-profile-email{font-size:11.5px;color:var(--sidebar-text);max-width:140px}.sidebar-logout{margin-left:auto;background:none;border:none;color:var(--sidebar-text);cursor:pointer;padding:6px;border-radius:7px;transition:all var(--transition-fast);flex-shrink:0;font-size:14px}.sidebar-logout:hover{background:var(--sidebar-hover);color:#fff}.main{margin-left:248px;flex:1 1;padding:32px 36px;max-width:calc(100vw - 248px)}.page-title{font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.5px}.page-sub{font-size:14px;color:var(--muted);margin-top:4px}.page-header{margin-bottom:28px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:box-shadow var(--transition-mid),transform var(--transition-mid)}.card-hover:hover{box-shadow:0 4px 20px rgba(0,0,0,.08);transform:translateY(-1px)}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;display:flex;align-items:center;gap:16px;transition:box-shadow var(--transition-mid),transform var(--transition-mid)}.stat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.07);transform:translateY(-1px)}.stat-card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}.stat-card-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.stat-card-value{font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.5px;line-height:1}.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:10px;border:none;font-size:13.5px;font-weight:500;font-family:Inter,sans-serif;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);text-decoration:none}.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover:not(:disabled){background:#3a7fd4;transform:translateY(-1px);box-shadow:0 4px 12px rgba(74,144,226,.35)}.btn-primary:active:not(:disabled){transform:translateY(0);box-shadow:none}.btn-primary:disabled{background:var(--border);color:var(--muted);cursor:default;transform:none;box-shadow:none}.btn-outline{background:var(--surface);color:var(--text);border:1px solid var(--border)}.btn-outline:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px);box-shadow:0 2px 8px rgba(74,144,226,.15)}.btn-outline:active{transform:translateY(0);box-shadow:none}.tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;letter-spacing:.3px;text-transform:uppercase}.tag-blue{background:var(--blue-light);color:var(--blue)}.tag-green{background:var(--green-light);color:#1a8a42}.tag-red{background:var(--red-light);color:var(--red)}.tag-amber{background:var(--amber-light);color:#b57a10}.alt{background:var(--surface);border:1.5px solid var(--border);border-radius:11px;padding:13px 16px;cursor:pointer;display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.55;transition:border-color var(--transition-fast),background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);width:100%;text-align:left;font-family:Inter,sans-serif;color:var(--text)}.alt:hover:not(:disabled){box-shadow:0 2px 8px rgba(74,144,226,.1)}.alt.selected,.alt:hover:not(:disabled){border-color:var(--blue);background:var(--blue-light);transform:translateX(3px)}.alt.correta{border-color:var(--green);background:var(--green-light);animation:correctPulse .4s ease}.alt.errada{border-color:var(--red);background:var(--red-light);animation:wrongShake .35s ease}.alt:disabled{cursor:default}.alt-letra{font-weight:700;color:var(--blue);font-size:13px;min-width:18px;transition:color var(--transition-fast)}.alt.correta .alt-letra{color:#1a8a42}.alt.errada .alt-letra{color:var(--red)}@keyframes correctPulse{0%{transform:translateX(3px) scale(1)}50%{transform:translateX(3px) scale(1.01)}to{transform:translateX(3px) scale(1)}}@keyframes wrongShake{0%{transform:translateX(3px)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}to{transform:translateX(0)}}.feedback-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-top:14px;animation:slideUp .25s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.feedback-title{font-weight:700;font-size:15px;margin-bottom:8px}.feedback-title.ok{color:var(--green)}.feedback-title.nok{color:var(--red)}.feedback-text{font-size:13.5px;color:var(--muted);line-height:1.7}.themes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));grid-gap:12px;gap:12px}.theme-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-mid),transform var(--transition-mid)}.theme-card:hover{border-color:var(--blue);box-shadow:0 6px 20px rgba(74,144,226,.12);transform:translateY(-3px)}.theme-card:active{transform:translateY(-1px)}.theme-icon{font-size:26px;margin-bottom:10px}.theme-name{font-size:13px;font-weight:600;color:var(--text)}.theme-count{font-size:11px;color:var(--muted);margin-top:3px}.theme-bar{height:3px;background:var(--border);border-radius:99px;margin-top:12px;overflow:hidden}.theme-fill{height:100%;border-radius:99px;background:var(--blue);transition:width var(--transition-slow)}.subtema-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:border-color var(--transition-fast),background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);margin-bottom:8px}.subtema-item:hover{border-color:var(--blue);background:var(--blue-light);transform:translateX(4px);box-shadow:0 2px 10px rgba(74,144,226,.1)}.subtema-name{font-size:14px;font-weight:500}.subtema-meta{font-size:12px;color:var(--muted);margin-top:2px}.loading{display:flex;align-items:center;justify-content:center;min-height:300px;color:var(--muted);font-size:14px;gap:10px}.loading:before{content:"";width:20px;height:20px;border:2.5px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.back-btn{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--blue);cursor:pointer;margin-bottom:20px;font-weight:500;background:none;border:none;font-family:Inter,sans-serif;transition:gap var(--transition-fast),opacity var(--transition-fast)}.back-btn:hover{gap:10px;opacity:.8}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;text-align:center;gap:12px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.empty-icon{font-size:48px;opacity:.35}.empty-title{font-size:18px;font-weight:700}.empty-sub{font-size:14px;color:var(--muted);max-width:300px;line-height:1.6}.progress-bar-animated{height:4px;background:var(--border);border-radius:99px;overflow:hidden}.progress-bar-fill{height:100%;border-radius:99px;background:var(--blue);transition:width .5s cubic-bezier(.4,0,.2,1)}.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#0f1117;border-top:1px solid #1f2333;z-index:100;height:calc(64px + env(safe-area-inset-bottom, 0px));padding-bottom:env(safe-area-inset-bottom,0);flex-direction:row;align-items:stretch;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.mobile-nav::-webkit-scrollbar{display:none}.mobile-nav-item{flex:1 1;min-width:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;text-decoration:none;color:#4a5070;position:relative;transition:color .15s;white-space:nowrap}.mobile-nav-item.active{color:#4a90e2}.mobile-nav-indicator{position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:3px;background:#4a90e2;border-radius:0 0 6px 6px}.mobile-nav-icon{font-size:22px;line-height:1;transition:transform .15s}.mobile-nav-item.active .mobile-nav-icon{transform:scale(1.1)}.mobile-nav-label{font-size:9px;font-weight:600;font-family:Inter,sans-serif;letter-spacing:.2px}@media (max-width:768px){body,html{height:100%;overflow-x:hidden;-webkit-overflow-scrolling:touch}.sidebar{display:none}.app,.main{min-height:100svh;overflow-x:hidden}.main{margin-left:0;padding:20px 16px calc(76px + env(safe-area-inset-bottom, 0px) + 12px);max-width:100%;width:100%;box-sizing:border-box}.mobile-nav{display:flex}.themes-grid{grid-template-columns:repeat(2,1fr);gap:10px}.stat-card{padding:12px 14px;gap:10px}.stat-card-icon{width:36px;height:36px;font-size:16px}.stat-card-value{font-size:20px}.page-title{font-size:22px}.card{padding:16px}.alt{padding:11px 14px;font-size:13.5px}.feedback-box{padding:16px}.app>.main{width:100%}[style*="gridTemplateColumns: repeat(4"]{grid-template-columns:repeat(2,1fr)!important}}