@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap";
:root{--font-scale:1;--bg-main:#f1f5f9;--bg-panel:#f8fafc;--primary:#2563eb;--primary-hover:#1d4ed8;--primary-light:#eff6ff;--success:#10b981;--success-hover:#059669;--danger:#ef4444;--danger-light:#fef2f2;--warning:#f59e0b;--text-dark:#0f172a;--text-body:#334155;--text-muted:#64748b;--border-light:#e2e8f0}body.dark{--bg-main:#0f172a;--bg-panel:#1e293b;--text-dark:#f8fafc;--text-body:#cbd5e1;--text-muted:#94a3b8;--border-light:#334155;--primary-light:#1e3a8a}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{background-color:var(--bg-main);color:var(--text-dark);font-family:Plus Jakarta Sans,sans-serif;line-height:1.6;transition:background-color .3s,color .3s;overflow:hidden}.ambient-glow-1,.ambient-glow-2{z-index:-1;pointer-events:none;border-radius:50%;width:800px;height:800px;position:fixed}.ambient-glow-1{background:radial-gradient(circle,#2563eb26 0%,#2563eb00 60%);top:-200px;left:-200px}.ambient-glow-2{background:radial-gradient(circle,#6366f126 0%,#6366f100 60%);bottom:-200px;right:-200px}body.dark .ambient-glow-1{background:radial-gradient(circle,#3b82f626 0%,#0000 60%)}body.dark .ambient-glow-2{background:radial-gradient(circle,#6366f11a 0%,#0000 60%)}.app-container{flex-direction:column;height:100dvh;display:flex}.dashboard-layout{flex:1;display:flex;overflow:hidden}.sidebar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#fffffff2;border-right:1px solid #ffffff80;flex-direction:column;gap:0;width:280px;height:100dvh;padding:1.5rem 1.5rem 5rem;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-100%);box-shadow:1px 0 15px #0000000d}body.dark .sidebar{background:#0f172af2;border-right:1px solid #ffffff0d}.sidebar.open{transform:translate(0)}.sidebar-menu-item{width:100%;color:var(--text-muted);cursor:pointer;border-radius:1rem;flex-shrink:0;align-items:center;gap:1rem;margin-bottom:.25rem;padding:.85rem 1rem;font-size:.95rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.sidebar-menu-item:before{content:"";background:linear-gradient(90deg, var(--primary-light), transparent);z-index:-1;border-radius:1rem;width:0;height:100%;transition:width .3s;position:absolute;top:0;left:0}.sidebar-menu-item:hover{color:var(--text-dark);transform:translate(5px)}.sidebar-menu-item.active{color:var(--primary);background:var(--bg-panel);border:1px solid var(--primary-light);box-shadow:0 4px 15px #2563eb1a}.sidebar-menu-item.active:before{width:100%}.main-content-scroll{font-size:calc(1rem * var(--font-scale,1));flex:1;width:100%;height:100%;padding:3rem 4rem;position:relative;overflow-y:auto}.header-glass{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text-dark);z-index:50;border-bottom:1px solid var(--border-light);background:#f8fafcfa;justify-content:space-between;align-items:center;padding:1rem 2.5rem;transition:all .3s;display:flex;position:relative}body.dark .header-glass{color:#fff;background:#0f172af2;border-bottom:1px solid #ffffff0d}.header-logo-box{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:.75rem;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;display:flex;box-shadow:0 0 20px #3b82f680}.header-title{letter-spacing:-.02em;font-size:1.25rem;font-weight:900}.header-subtitle{color:#94a3b8;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;font-weight:700}.header-left,.header-right{align-items:center;gap:1rem;display:flex}.user-info-box{flex-direction:column;justify-content:center;align-items:flex-end;margin-right:.25rem;display:flex}.user-name{color:var(--text-dark);letter-spacing:.05em;font-size:.85rem;font-weight:800;transition:color .3s}body.dark .user-name{color:#fff}.user-id{background:var(--primary-light);color:var(--primary);border-radius:999px;margin-top:.2rem;padding:.15rem .6rem;font-family:monospace;font-size:.7rem;font-weight:700}body.dark .user-id{color:#bfdbfe;background:#ffffff26}.bento-header{margin-bottom:3rem}.bento-greeting{letter-spacing:-.04em;color:var(--text-dark);margin-bottom:.5rem;font-size:3rem;font-weight:900;line-height:1.1}.bento-greeting span{color:#1e293b;transition:color .3s}body.dark .bento-greeting span{color:#f8fafc}.bento-subtext{font-size:calc(1.1rem * var(--font-scale,1));color:var(--text-muted);font-weight:500}.bento-container{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(180px,auto);gap:1.5rem;max-width:1400px;display:grid}@media (max-width:1024px){.bento-container{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.bento-container{grid-template-columns:1fr}}.bento-card{cursor:pointer;background:linear-gradient(135deg,#fefce8,#fef9c3);border:1px solid #fef08a;border-radius:1.5rem;flex-direction:column;padding:2rem;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px -10px #0000000d,inset 0 0 0 1px #ffffff80}.bento-card .bento-title{color:#713f12;font-size:calc(1.25rem * var(--font-scale,1));letter-spacing:-.02em;z-index:2;margin-bottom:.5rem;font-weight:800;position:relative}.bento-card .bento-desc{color:#854d0e;font-size:calc(.9rem * var(--font-scale,1));z-index:2;line-height:1.5;position:relative}.bento-card .action-arrow{color:#a16207}.bento-card .bento-icon-bg{color:#713f120d}body.dark .bento-card{background:linear-gradient(135deg,#050505,#111);border-color:#222;box-shadow:0 10px 30px -10px #000c}body.dark .bento-card .bento-title{color:#f8fafc}body.dark .bento-card .bento-desc{color:#94a3b8}body.dark .bento-card .action-arrow{color:#cbd5e1}body.dark .bento-card .bento-icon-bg{color:#ffffff05}body.dark .bento-card:hover{border-color:#ffffff1a;box-shadow:0 20px 40px -15px #000000e6}.bento-card.bento-highlight{background:linear-gradient(135deg,#0a0a0a,#171717);border-color:#262626}.bento-card.bento-highlight .bento-title{color:#fff}.bento-card.bento-highlight .bento-desc{color:#a3a3a3}.bento-card.bento-highlight .action-arrow{color:#e5e5e5}.bento-card.bento-highlight .bento-icon-bg{color:#ffffff05}body.dark .bento-card.bento-highlight{background:linear-gradient(135deg,#fefce8,#fef9c3);border-color:#fef08a}body.dark .bento-card.bento-highlight .bento-title{color:#713f12}body.dark .bento-card.bento-highlight .bento-desc{color:#854d0e}body.dark .bento-card.bento-highlight .action-arrow{color:#a16207}body.dark .bento-card.bento-highlight .bento-icon-bg{color:#713f120d}.bento-card:hover{transform:translateY(-8px)scale(1.02);box-shadow:0 20px 40px -15px #0000001a}.bento-large{color:#fff;background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 100%);border:none;grid-area:span 1/span 2}body.dark .bento-large{background:linear-gradient(135deg,#020617 0%,#1e3a8a 100%)}.bento-large:before{content:"";background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");position:absolute;inset:0}.bento-large .bento-title{font-size:calc(2.25rem * var(--font-scale,1));letter-spacing:-.03em;color:#fff;z-index:2;margin-bottom:1rem;font-weight:900;position:relative}.bento-large .bento-desc{font-size:calc(1.1rem * var(--font-scale,1));color:#bfdbfe;z-index:2;max-width:80%;line-height:1.6;position:relative}.bento-large .bento-icon-bg{color:#ffffff0d;z-index:1;width:250px;height:250px;position:absolute;bottom:-2rem;right:-2rem}.bento-wide{flex-direction:row;grid-area:span 1/span 2;justify-content:space-between;align-items:center;display:flex}.bento-span-2{grid-area:span 1/span 2}.bento-square{grid-area:span 1/span 1}.bento-icon-bg{color:#00000008;z-index:1;width:120px;height:120px;transition:transform .5s;position:absolute;bottom:-1rem;right:-1rem}body.dark .bento-icon-bg{color:#ffffff05}.bento-card:hover .bento-icon-bg{transform:scale(1.1)rotate(-10deg)}.action-arrow{text-transform:uppercase;letter-spacing:.05em;color:var(--primary);z-index:2;align-items:center;gap:.5rem;margin-top:1.5rem;padding-top:1rem;font-size:.85rem;font-weight:800;display:inline-flex;position:relative}.bento-large .action-arrow{color:#60a5fa;border-top:1px solid #ffffff1a;width:100%;margin-top:auto}.bento-wide .action-arrow{margin-top:0;padding-top:0}.bento-card:hover .action-arrow svg{transition:transform .2s;transform:translate(5px)}.submenu-grid{grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem;display:grid}.submenu-grid .bento-card{padding:1.25rem}.submenu-grid .bento-title{font-size:1.1rem!important}.submenu-grid .bento-desc{font-size:.8rem!important}.submenu-grid .action-arrow{padding-top:.5rem;font-size:.75rem}.premium-panel{background:var(--bg-panel);border:1px solid var(--border-light);border-radius:1.5rem;flex-direction:column;transition:all .3s;display:flex;overflow:hidden;box-shadow:0 10px 40px -10px #00000014}.panel-header-clean{border-bottom:1px solid var(--border-light);background:#00000005;flex-shrink:0;justify-content:space-between;align-items:center;padding:.875rem 1.5rem;display:flex}.ph-left{align-items:center;gap:1.25rem;display:flex}.q-number-box{color:#fff;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:.75rem;justify-content:center;align-items:center;width:3rem;height:3rem;font-size:1.25rem;font-weight:800;display:flex;box-shadow:0 4px 10px #2563eb4d}.status-box{flex-direction:column;display:flex}.status-label{color:var(--text-muted);text-transform:uppercase;font-size:.75rem;font-weight:800}.status-value{color:var(--text-dark);font-size:.95rem;font-weight:700}.panel-body{background:var(--bg-panel);min-height:0;font-size:calc(1rem * var(--font-scale,1));flex:1;padding:1.5rem 2rem;overflow-y:auto}.panel-footer{border-top:1px solid var(--border-light);background:#00000005;flex-shrink:0;justify-content:space-between;align-items:center;padding:.875rem 1.5rem;display:flex}.question-text{font-size:calc(1.05rem * var(--font-scale,1));color:var(--text-dark);white-space:pre-wrap;margin-bottom:1.5rem;font-weight:500;line-height:1.75}.options-container{flex-direction:column;gap:.625rem;display:flex}.option-card{border:2px solid var(--border-light);cursor:pointer;background:var(--bg-panel);border-radius:1rem;align-items:flex-start;gap:1rem;padding:.875rem 1rem;transition:all .2s;display:flex}.option-card:hover{border-color:var(--primary);background:var(--primary-light);transform:scale(1.01)}.option-card.selected{border-color:var(--primary);background:var(--primary-light);box-shadow:0 4px 12px #2563eb1a}body.dark .option-card.selected{background:#2563eb33}.option-letter{width:2.25rem;height:2.25rem;color:var(--text-muted);background:#0000000d;border-radius:.75rem;flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;font-weight:800;display:flex}body.dark .option-letter{background:#ffffff0d}.option-card.selected .option-letter{background:var(--primary);color:#fff}.option-text{font-size:calc(.95rem * var(--font-scale,1));color:var(--text-body);padding-top:.2rem;font-weight:600;line-height:1.5}.timer-panel{border-top:5px solid var(--primary);flex-shrink:0}.timer-box{text-align:center;background:var(--bg-panel);padding:1.25rem 1.5rem;position:relative;overflow:hidden}.timer-label{color:var(--text-muted);text-transform:uppercase;margin-bottom:.25rem;font-size:.7rem;font-weight:800;display:block}.timer-display{color:var(--text-dark);font-variant-numeric:tabular-nums;letter-spacing:-2px;font-family:Plus Jakarta Sans,monospace;font-size:2.5rem;font-weight:900;line-height:1}.timer-critical{color:var(--danger);animation:2s infinite pulse-danger}@keyframes pulse-danger{0%{color:var(--danger)}50%{color:#fca5a5}to{color:var(--danger)}}.nav-panel{flex-direction:column;flex:1;min-height:0;display:flex}.nav-header-text{color:var(--text-dark);font-size:1.1rem;font-weight:800}.nav-legend{border-bottom:1px solid var(--border-light);background:#00000005;flex-shrink:0;justify-content:center;gap:1.5rem;padding:.625rem 1rem;display:flex}.legend-item{color:var(--text-muted);text-transform:uppercase;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;display:flex}.legend-dot-success{background:var(--success);border-radius:50%;width:.625rem;height:.625rem}.legend-dot-empty{background:var(--bg-panel);border:2px solid var(--border-light);border-radius:50%;width:.625rem;height:.625rem}.grid-wrapper{flex:1;min-height:0;padding:1rem;overflow-y:auto}.grid-container{grid-template-columns:repeat(5,1fr);gap:.5rem;display:grid}.grid-bubble{aspect-ratio:1;cursor:pointer;border:2px solid var(--border-light);background:var(--bg-panel);width:100%;color:var(--text-muted);border-radius:.5rem;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;transition:all .2s;display:flex}.grid-bubble:hover{border-color:var(--text-muted);transform:scale(1.05)}.grid-bubble.active{border:2px solid var(--primary);box-shadow:0 0 0 4px var(--primary-light);color:var(--primary);z-index:10;font-weight:800;transform:scale(1.1)}.grid-bubble.answered{background:var(--success);color:#fff;border-color:var(--success)}.grid-bubble.answered.active{background:var(--success-hover);border-color:var(--primary)}.nav-footer{border-top:1px solid var(--border-light);background:#00000005;flex-shrink:0;gap:1rem;padding:1rem;display:flex}.btn-modern{cursor:pointer;text-transform:uppercase;border:none;border-radius:.75rem;justify-content:center;align-items:center;gap:.5rem;padding:1rem 1.75rem;font-size:.95rem;font-weight:800;transition:all .2s;display:inline-flex}.btn-modern.w-full{width:100%}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-hover));color:#fff;box-shadow:0 4px 15px #2563eb4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #2563eb66}.btn-success{background:linear-gradient(135deg, var(--success), var(--success-hover));color:#fff;box-shadow:0 4px 15px #10b9814d}.btn-success:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #10b98166}.btn-outline{border:2px solid var(--border-light);color:var(--text-body);background:0 0}.btn-outline:hover:not(:disabled){background:#0000000d;transform:translateY(-2px)}body.dark .btn-outline:hover:not(:disabled){background:#ffffff0d}.btn-danger-outline{border:2px solid var(--danger);color:var(--danger);background:0 0}.btn-danger-outline:hover{background:var(--danger);color:#fff;transform:translateY(-2px)}.btn-modern:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.pill{text-transform:uppercase;border-radius:9999px;padding:.4rem 1rem;font-size:.7rem;font-weight:800}.pill-tiu{color:#4338ca;background:#e0e7ff;border:1px solid #c7d2fe}.pill-twk{color:#b91c1c;background:#fee2e2;border:1px solid #fecaca}.pill-tkp{color:#15803d;background:#dcfce7;border:1px solid #bbf7d0}body.dark .pill-tiu{color:#818cf8;background:#4338ca4d;border-color:#6366f14d}body.dark .pill-twk{color:#f87171;background:#b91c1c4d;border-color:#ef44444d}body.dark .pill-tkp{color:#4ade80;background:#15803d4d;border-color:#22c55e4d}.submenu-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:1.5rem;display:grid}.section-title{font-size:calc(1.75rem * var(--font-scale,1));color:var(--text-dark);letter-spacing:-.03em;align-items:center;gap:.75rem;margin-bottom:2rem;font-weight:900;display:flex}.pause-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#ffffffd9;border-radius:1.5rem;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;display:flex;position:absolute;inset:0}body.dark .pause-overlay{background:#0f172acc}.toast-container{z-index:9999;flex-direction:column;gap:.5rem;display:flex;position:fixed;bottom:2rem;right:2rem}.toast{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;background:#0f172af2;border-radius:1rem;align-items:center;gap:.75rem;padding:1rem 1.5rem;font-size:.9rem;font-weight:700;display:flex;box-shadow:0 10px 25px #0003}body.dark .toast{color:#0f172a;background:#ffffffe6}@media (min-width:1025px){html,body{height:100%;overflow:hidden}.layout-wrapper{box-sizing:border-box;grid-template-rows:100%;grid-template-columns:minmax(0,1fr) 280px;gap:.75rem;width:100%;height:100%;padding:.75rem;display:grid;overflow:hidden}.left-panel{grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;overflow:hidden;display:grid!important}.left-panel>.panel-body{height:100%;min-height:0;overflow-y:auto}.right-panel-wrapper{grid-template-rows:auto minmax(0,1fr);gap:.75rem;height:100%;min-height:0;display:grid;overflow:hidden}.nav-panel{grid-template-rows:auto auto minmax(0,1fr) auto;height:100%;min-height:0;overflow:hidden;display:grid!important}.nav-panel>.grid-wrapper{height:100%;min-height:0;overflow-y:auto}}.mobile-menu-btn{cursor:pointer;color:var(--text-dark);background:0 0;border:none;justify-content:center;align-items:center;padding:.5rem;display:flex}body.dark .mobile-menu-btn{color:#fff}.mobile-overlay{z-index:999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;display:block;position:fixed;inset:0}@media (max-width:1024px){body{overflow:auto!important}.app-container{height:auto;min-height:100dvh}.bento-container{grid-template-columns:repeat(2,1fr)}.dashboard-layout{flex-direction:column;flex:none;overflow:visible}.main-content-scroll{flex:none;width:100%;height:auto;padding:1.5rem 1.5rem 6rem;overflow:visible}.layout-wrapper{flex-direction:column;gap:1rem;height:auto;min-height:100dvh;padding:1rem;display:flex;position:relative;overflow-y:auto}.left-panel{height:auto;min-height:auto;overflow:visible}.right-panel-wrapper{flex-direction:column;gap:1rem;width:100%;height:auto;min-height:auto;display:flex;overflow:visible}.nav-panel{min-height:auto}.grid-wrapper{overflow:visible}.bkn-layout{min-height:100dvh;height:auto!important;position:relative!important;overflow-y:auto!important}.bkn-header{gap:1rem;flex-direction:column!important;align-items:flex-start!important;padding:1rem!important}.bkn-header>div{width:100%}.bkn-header>div:first-child{flex-wrap:wrap;font-size:1.1rem!important}.bkn-header>div:last-child{flex-wrap:wrap;justify-content:space-between;gap:.5rem}.bkn-content{flex-direction:column!important;gap:1rem!important;padding:1rem!important;overflow:visible!important}.bkn-content>div{flex:none!important;width:100%!important}.bkn-footer{flex-wrap:wrap;gap:1rem}.bkn-footer>div{flex-wrap:wrap;width:100%}.bkn-footer button{flex:1;min-width:120px}.bento-header{padding:0 1rem}.bento-greeting{font-size:2.5rem}.header-glass{flex-direction:column;gap:1rem;padding:1rem;position:sticky;top:0}.user-info-box{display:none}}@media (max-width:768px){.header-glass{padding:1rem}.header-title{font-size:1rem}.user-info-box{display:none}.bento-container{grid-template-columns:repeat(2,1fr);gap:.75rem}.bento-card{border-radius:1rem;padding:1rem}.bento-large{grid-area:span 1/span 2;padding:1.25rem}.bento-large .bento-title{font-size:1.5rem!important}.bento-large .bento-desc{font-size:.85rem!important}.bento-wide,.bento-span-2{text-align:center;flex-direction:column;grid-column:span 2}.bento-title{font-size:1rem!important}.bento-desc{font-size:.8rem!important}.bento-icon-bg{width:60px;height:60px}.bento-large .bento-icon-bg{width:120px;height:120px}.submenu-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.submenu-grid .bento-card{padding:.75rem}.submenu-grid .bento-title{font-size:.85rem!important}.submenu-grid .bento-desc{font-size:.7rem!important}.submenu-grid .action-arrow{font-size:.65rem}.grid-container{grid-template-columns:repeat(auto-fill,minmax(45px,1fr))}.panel-header-clean{flex-direction:column;align-items:flex-start;gap:1rem}.panel-footer{flex-direction:column;gap:1rem}.bkn-header{padding:.75rem!important}.bkn-header>div:first-child{font-size:.95rem!important}.bkn-content{padding:.75rem!important}.bkn-footer button{padding:.75rem 1rem!important;font-size:.85rem!important}.btn-modern{width:100%}.section-title{font-size:1.25rem!important}}.spin-animation{animation:2s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}