@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;900&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #141414;--bg-secondary: #1c1c1c;--bg-panel: #0b0f13;--accent: #10b981;--accent-hover: #059669;--accent-from: #16a34a;--accent-to: #10b981;--text: #f8f9fa;--text-muted: rgba(248, 249, 250, .7);--text-dim: #9aa3ad;--border: rgba(255, 255, 255, .1);--border-hover: rgba(255, 255, 255, .2);--danger: #ef4444;--warning: #f59e0b;--shadow: 0 6px 18px rgba(2, 6, 23, .6);--card-radius: 16px}html,body,#root{height:100%}body{font-family:Roboto,system-ui,-apple-system,sans-serif;background-color:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}.btn{padding:12px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;border:none;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(90deg,var(--accent-from),var(--accent-to));color:var(--bg)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 10px 15px -3px #0009;transform:translateY(-2px)}.btn-secondary{background:#222;color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:#2c2c2c;border-color:var(--border-hover)}.btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent)}.btn-outline:hover{background:var(--accent);color:var(--bg)}.btn-danger{background:#ef444426;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.btn-danger:hover{background:#ef4444;color:#fff}.btn-full{width:100%;padding:16px 24px;font-size:16px}.btn-sm{padding:8px 16px;font-size:13px;border-radius:8px}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px;position:relative;overflow:hidden}.login-page:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(16,185,129,.08) 0%,transparent 60%);pointer-events:none}.login-card{background:var(--bg-secondary);border-radius:var(--card-radius);border:1px solid var(--border);padding:40px;width:100%;max-width:420px;position:relative;z-index:1}.login-header{text-align:center;margin-bottom:32px}.login-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;background:#10b9811a;border-radius:50%;margin-bottom:24px;font-size:32px}.login-header h1{font-size:28px;font-weight:700;color:var(--text);margin-bottom:8px}.login-header p{color:var(--text-muted);font-size:15px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;font-size:14px;color:var(--text-muted)}.form-group input{width:100%;padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-radius:12px;font-size:15px;color:var(--text);transition:border-color .2s;outline:none;font-family:inherit}.form-group input:focus{border-color:var(--accent)}.form-group input::placeholder{color:#f8f9fa4d}.error-msg{background:#ef44441a;color:#ef4444;padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:14px;font-weight:500;border:1px solid rgba(239,68,68,.2)}.app-layout{display:flex;min-height:100vh}.sidebar{width:16rem;background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:50}.sidebar-logo{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}.sidebar-logo .logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--accent-from),var(--accent-to));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px}.sidebar-logo .logo-text{font-size:16px;font-weight:700;color:var(--text)}.sidebar-logo .logo-sub{font-size:11px;color:var(--text-dim)}.sidebar nav{flex:1;padding:1rem;overflow-y:auto}.menu-list{list-style:none;padding:0}.menu-list li{margin-bottom:.5rem}.menu-btn{width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.5rem;background:transparent;color:var(--text-dim);font-weight:500;cursor:pointer;transition:all .15s ease;border:none;text-align:left;font-family:inherit;font-size:14px}.menu-btn:hover{background:#ffffff05;color:#fff}.menu-btn.active{background:linear-gradient(90deg,var(--accent-from),var(--accent-to));color:#fff;box-shadow:var(--shadow)}.menu-btn .menu-icon{font-size:18px;width:24px;text-align:center}.sidebar-footer{padding:1rem;border-top:1px solid var(--border)}.sidebar-user{display:flex;align-items:center;gap:10px;margin-bottom:12px}.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent-from),var(--accent-to));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--bg)}.user-name{font-weight:600;font-size:14px;color:var(--text)}.user-role{font-size:12px;color:var(--text-dim)}.main-content{flex:1;margin-left:16rem;padding:1.5rem;overflow-y:auto;min-height:100vh}.bottom-nav{display:none;align-items:center;justify-content:space-around;gap:.5rem;position:fixed;left:0;right:0;bottom:0;height:4.5rem;padding:.25rem .5rem;background:linear-gradient(180deg,rgba(11,15,19,.95),var(--bg-panel));border-top:1px solid var(--border);z-index:60;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.bottom-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.25rem .75rem;background:transparent;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;transition:color .12s ease,transform .12s ease;min-width:64px;font-family:inherit}.bottom-btn .b-icon{font-size:20px}.bottom-btn.active{color:#fff;transform:translateY(-2px)}.bottom-btn.active .b-icon{background:linear-gradient(90deg,var(--accent-from),var(--accent-to));border-radius:8px;padding:6px;box-shadow:0 6px 14px #02061773}.page-header{margin-bottom:2rem}.page-header h1{font-size:32px;font-weight:700;margin-bottom:8px}.page-header p{color:var(--text-muted);font-size:16px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}.stat-card{background:var(--bg-secondary);border-radius:var(--card-radius);border:1px solid var(--border);padding:24px;transition:all .3s ease}.stat-card:hover{border-color:var(--border-hover)}.stat-card .stat-icon{font-size:24px;margin-bottom:12px}.stat-card .stat-value{font-size:28px;font-weight:700;color:var(--text);margin-bottom:4px}.stat-card .stat-label{color:var(--text-muted);font-size:14px}.section-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:1rem}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem}.category-card{background:var(--bg-secondary);border-radius:var(--card-radius);border:1px solid var(--border);padding:32px;transition:all .3s ease;overflow:hidden;position:relative}.category-card:hover{transform:translateY(-8px);box-shadow:0 20px 25px -5px #000000b3;border-color:var(--border-hover)}.category-card .card-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:#10b9811a;border-radius:12px;font-size:28px;margin-bottom:16px}.category-card h3{font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px}.category-card .card-desc{color:var(--text-muted);font-size:14px;margin-bottom:20px;line-height:1.6}.category-card .card-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.category-card .card-count{color:var(--accent);font-weight:600;font-size:14px}.results-section{margin-top:2rem}.results-table-wrap{background:var(--bg-secondary);border-radius:var(--card-radius);border:1px solid var(--border);overflow:hidden}.results-table{width:100%;border-collapse:collapse}.results-table th,.results-table td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--border)}.results-table th{background:#ffffff08;color:var(--text-muted);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.results-table td{font-size:14px;color:var(--text)}.results-table tbody tr:hover{background:#ffffff05}.results-table tbody tr:last-child td{border-bottom:none}.badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}.badge-pass{background:#10b98126;color:var(--accent)}.badge-fail{background:#ef444426;color:#ef4444}.test-page{max-width:800px;margin:0 auto;padding:24px 20px;min-height:100vh}.test-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;background:var(--bg-secondary);border-radius:var(--card-radius);border:1px solid var(--border);padding:16px 24px}.test-topbar h2{font-size:18px;color:var(--text);font-weight:600}.test-info{display:flex;gap:24px;font-weight:600;font-size:14px}.timer{color:var(--accent);display:flex;align-items:center;gap:6px}.counter{color:var(--text-muted)}.progress-bar{height:4px;background:#ffffff1a;border-radius:2px;margin-bottom:24px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-from),var(--accent-to));border-radius:2px;transition:width .3s}.question-card{background:var(--bg-secondary);border-radius:var(--card-radius);border:1px solid var(--border);padding:32px;margin-bottom:24px}.question-number{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:#10b9811a;border-radius:8px;color:var(--accent);font-weight:700;font-size:14px;margin-bottom:16px}.question-text{font-size:18px;font-weight:500;margin-bottom:24px;line-height:1.6;color:var(--text)}.options-list{display:flex;flex-direction:column;gap:12px}.option-btn{display:flex;align-items:center;gap:14px;padding:16px 20px;border:1px solid var(--border);border-radius:12px;background:var(--bg);cursor:pointer;transition:all .2s ease;text-align:left;font-size:15px;color:var(--text);font-family:inherit}.option-btn:hover{border-color:var(--accent);background:#10b9810d}.option-btn.selected{border-color:var(--accent);background:#10b9811a}.option-letter{width:36px;height:36px;border-radius:10px;background:#ffffff0d;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--text-muted);flex-shrink:0;transition:all .2s}.option-btn.selected .option-letter{background:linear-gradient(135deg,var(--accent-from),var(--accent-to));color:var(--bg)}.test-nav{display:flex;justify-content:space-between;align-items:center;gap:16px}.question-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.dot{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--bg);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--text-dim);font-family:inherit}.dot:hover{border-color:var(--border-hover)}.dot-current{background:linear-gradient(135deg,var(--accent-from),var(--accent-to));color:#fff;border-color:transparent}.dot-answered{border-color:var(--accent);color:var(--accent);background:#10b9811a}.dot-current.dot-answered{background:linear-gradient(135deg,var(--accent-from),var(--accent-to));color:#fff}.results-page{min-height:100vh;background:var(--bg)}.results-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);background:var(--bg-panel)}.results-topbar .logo{font-size:18px;font-weight:700;color:var(--accent)}.result-showcase{text-align:center;padding:48px 20px;max-width:500px;margin:0 auto}.circle-progress{width:180px;height:180px;margin:0 auto 32px;position:relative}.circle-progress svg{transform:rotate(-90deg);width:100%;height:100%}.circle-bg{fill:none;stroke:#ffffff1a;stroke-width:8}.circle-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dasharray 1s ease}.circle-progress.pass .circle-fill{stroke:var(--accent)}.circle-progress.fail .circle-fill{stroke:#ef4444}.circle-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.circle-percent{font-size:36px;font-weight:700}.pass .circle-percent{color:var(--accent)}.fail .circle-percent{color:#ef4444}.text-pass{color:var(--accent);font-size:24px;font-weight:700;margin-bottom:8px}.text-fail{color:#ef4444;font-size:24px;font-weight:700;margin-bottom:8px}.result-details{color:var(--text-muted);font-size:16px;margin-bottom:8px}.result-note{color:var(--text-dim);margin-bottom:32px;font-size:14px}.history-section{max-width:900px;margin:0 auto;padding:0 20px 40px}.history-section h2{font-size:22px;font-weight:700;margin-bottom:16px;color:var(--text)}.loading{display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:18px;color:var(--text-muted);background:var(--bg)}.empty-state{text-align:center;padding:48px 20px;color:var(--text-dim)}.empty-state .empty-icon{font-size:48px;margin-bottom:16px}.empty-state p{font-size:16px}.tickets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.ticket-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:20px 16px;text-align:center;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:inherit;color:var(--text)}.ticket-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 20px #0006}.ticket-number{font-size:28px;font-weight:700;color:var(--accent)}.ticket-label{font-size:13px;color:var(--text-muted);font-weight:500}.ticket-count{font-size:11px;color:var(--text-dim)}.topics-list{display:flex;flex-direction:column;gap:8px}.topic-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:16px 20px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:space-between}.topic-card:hover{border-color:var(--accent);background:#10b98108;transform:translate(4px)}.topic-left{display:flex;align-items:center;gap:16px}.topic-num{width:40px;height:40px;border-radius:10px;background:#10b9811a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:var(--accent);flex-shrink:0}.topic-info h3{font-size:15px;font-weight:600;color:var(--text);margin-bottom:2px}.topic-count{font-size:13px;color:var(--text-dim)}.topic-arrow{font-size:18px;color:var(--text-dim);transition:color .2s}.topic-card:hover .topic-arrow{color:var(--accent)}.question-image{margin-bottom:24px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}.question-image img{width:100%;max-height:400px;object-fit:contain;background:#1a1a1a;display:block}.lang-switch{display:flex;gap:4px}@media(max-width:1023px){.sidebar{display:none}.main-content{margin-left:0;padding-bottom:5.5rem}.bottom-nav{display:flex}}@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr)}.category-grid{grid-template-columns:1fr}.page-header h1{font-size:24px}.test-topbar{flex-direction:column;gap:12px;align-items:flex-start}.test-nav{flex-wrap:wrap;justify-content:center}.question-dots{order:3;width:100%}.results-table th,.results-table td{padding:10px 12px;font-size:13px}}@media(max-width:480px){.stats-grid{grid-template-columns:1fr}.login-card{padding:24px}}