:root{--bg:#eef2fb;--surface:#fff;--surface-2:#f0f4ff;--primary:#2d6cdf;--primary-dark:#1a54c4;--primary-light:#e8f0fd;--accent:#7c5cff;--text:#0f1e3a;--muted:#6b7a99;--border:#e4e9f2;--success:#2ecc71;--danger:#ff6b6b;--warning:#ffc107;--radius:16px;--radius-sm:10px;--shadow:0 2px 12px #2d6cdf14;--shadow-lg:0 8px 32px #2d6cdf29}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px;line-height:1.5}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4{margin:0 0 8px;font-weight:700}h1{font-size:24px}h2{font-size:20px}h3{font-size:17px}button{text-align:center;cursor:pointer;border:2px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;justify-content:center;align-items:center;gap:6px;min-height:34px;padding:7px 14px;font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;display:inline-flex}button:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--primary);border-color:var(--primary);color:#fff}button.primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;box-shadow:0 4px 14px #2d6cdf59}.mobile-add-button{justify-content:center;align-items:center;gap:8px;display:inline-flex}.mobile-add-icon{font-size:18px;line-height:1}.mobile-add-text{white-space:nowrap}button.danger{border-color:var(--danger);color:var(--danger);background:#fff}button.danger:hover{background:#fff5f5}button.ghost{color:var(--muted);background:0 0;border-color:#0000;min-height:34px;padding:6px 12px}button.ghost:hover{background:var(--surface-2);color:var(--text);border-color:#0000}input,select,textarea{font:inherit;border:2px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);background:#fff;padding:10px 14px;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #2d6cdf1f}label{color:var(--muted);margin-bottom:4px;font-size:13px;font-weight:600;display:block}.field{margin-bottom:14px}.field-hint{margin-top:4px;font-size:12px}.pw-wrap{align-items:center;display:flex;position:relative}.pw-wrap input{flex:1;padding-right:36px}.pw-eye{cursor:pointer;color:var(--muted);opacity:.7;min-height:unset;min-width:unset;background:0 0;border:none;width:28px;height:28px;padding:0;font-size:16px;line-height:1;position:absolute;right:6px}.pw-eye:hover{opacity:1}.time-picker{align-items:center;gap:4px;display:flex}.time-picker-select{text-align:center;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;appearance:none;border-radius:8px;flex:1;padding:8px 4px;font-size:18px;font-weight:600}.time-picker-select:focus{outline:2px solid var(--accent);border-color:#0000}.time-picker-sep{color:var(--muted);-webkit-user-select:none;user-select:none;font-size:20px;font-weight:700}.app-shell{height:100vh;display:flex;overflow:hidden}.sidebar{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:248px;height:100vh;padding:28px 14px 20px;display:flex;overflow-y:auto;box-shadow:2px 0 16px #2d6cdf0f}.sidebar .brand{color:var(--primary);align-items:center;gap:10px;margin-bottom:6px;padding:0 8px;font-size:18px;font-weight:700;display:flex}.sidebar .brand-emoji{font-size:26px}.sidebar .role-badge{color:var(--primary);background:var(--primary-light);border-radius:999px;margin:0;padding:0;font-size:11px;font-weight:600;display:inline-block}.sidebar nav{flex-direction:column;flex:1;gap:3px;display:flex}.sidebar nav a{border-radius:var(--radius-sm);color:var(--muted);align-items:center;gap:11px;padding:11px 14px;font-size:14px;font-weight:500;transition:background .15s,color .15s;display:flex}.sidebar nav a .nav-icon{text-align:center;flex-shrink:0;width:20px;font-size:17px}.sidebar nav a:hover{background:var(--primary-light);color:var(--primary);text-decoration:none}.sidebar nav a.active{background:var(--primary);color:#fff;font-weight:600}.sidebar nav a.active .nav-icon{filter:brightness(2)}.sidebar-footer{background:var(--surface-2);border-radius:var(--radius-sm);color:var(--muted);margin-top:20px;padding:14px;font-size:13px}.sidebar-footer .user-name{color:var(--text);word-break:break-word;margin-bottom:1px;font-size:14px;font-weight:700}.sidebar-footer button{width:100%;margin-top:8px}.main{flex:1;padding:28px 32px;overflow:auto}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:24px;display:flex}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.card+.card{margin-top:16px}.grid .card+.card{margin-top:0}.card+.grid,.grid+.card{margin-top:16px}.card .card-title{color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-top:0;margin-bottom:12px;font-size:11px;font-weight:700}.grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:stretch;gap:16px;margin-bottom:24px;display:grid}.grid .card{flex-direction:column;display:flex}.dashboard-summary-grid .card{border:1px solid #0000}.dashboard-summary-grid .card:first-child{background:linear-gradient(#84c2ea47 0%,#84c2ea29 100%);border-color:#84c2ea4d}.dashboard-summary-grid .card:nth-child(2){background:linear-gradient(#ffcc323d 0%,#ffcc321f 100%);border-color:#ffcc3247}.dashboard-summary-grid .card:nth-child(3){background:linear-gradient(#bd56a033 0%,#bd56a01a 100%);border-color:#bd56a03d}.dashboard-summary-grid .card:nth-child(4){background:linear-gradient(#a6ce3938 0%,#a6ce391a 100%);border-color:#a6ce3942}.dashboard-summary-grid .card .card-title{color:#20283cb3}.stat{color:var(--text);font-size:30px;font-weight:700}.stat-label{color:var(--muted);margin-top:2px;font-size:13px}.table{border-collapse:collapse;width:100%;font-size:11px}.table th,.table td{text-align:left;border-bottom:1px solid var(--border);padding:11px 14px}.table td{font-size:14px;font-weight:400}.table th{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface-2);font-weight:600}.table tr:last-child td{border-bottom:none}.table tbody tr:nth-child(2n) td{background:#f8faff}.table tbody tr:hover td{background:var(--surface-2)}.badge{background:var(--surface-2);color:var(--muted);border-radius:999px;align-items:center;padding:3px 11px;font-size:12px;font-weight:600;display:inline-flex}.badge.success{color:#16a34a;background:#ecfdf5}.badge.warning{color:#b45309;background:#fffbeb}.badge.danger{color:var(--danger);background:#fff5f5}.badge.info{background:var(--primary-light);color:var(--primary)}.auth-screen{background:linear-gradient(145deg,#1a54c4 0%,#2d6cdf 55%,#7c5cff 100%);place-items:center;min-height:100vh;padding:24px;display:grid}.auth-card{background:#fff;border-radius:24px;width:100%;max-width:420px;padding:36px;box-shadow:0 24px 64px #00000038}.auth-card .brand{text-align:center;color:var(--primary);margin-bottom:4px;font-size:26px;font-weight:700}.auth-card .subtitle{text-align:center;color:var(--muted);margin-bottom:28px;font-size:14px}.alert{border-radius:var(--radius-sm);border-left:4px solid #0000;margin-bottom:14px;padding:12px 14px;font-size:14px;font-weight:500}.alert.error{color:var(--danger);border-left-color:var(--danger);background:#fff5f5}.alert.info{background:var(--primary-light);color:var(--primary);border-left-color:var(--primary)}.alert.success{color:#16a34a;border-left-color:var(--success);background:#ecfdf5}.test-accounts{background:var(--surface-2);border-radius:var(--radius-sm);color:var(--muted);margin-top:20px;padding:16px;font-size:13px}.test-accounts h4{color:var(--text);margin:0 0 10px;font-size:13px;font-weight:600}.test-accounts code{border:1px solid var(--border);background:#fff;border-radius:5px;padding:2px 7px;font-size:12px}.test-accounts .acc{margin-bottom:6px}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row.right{justify-content:flex-end}.spacer{flex:1}.muted{color:var(--muted);font-size:13px}.empty{text-align:center;color:var(--muted);padding:36px;font-size:14px}.list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.list li{border-radius:var(--radius-sm);background:var(--surface-2);padding:14px 16px}.xp-bar{background:var(--surface-2);border-radius:999px;height:10px;margin:10px 0 6px;position:relative;overflow:hidden}.xp-bar .fill{background:linear-gradient(90deg, var(--primary), var(--accent));border-radius:999px;transition:width .6s;position:absolute;inset:0 auto 0 0}.achievement-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;display:grid}.achievement{text-align:center;border-radius:var(--radius);background:var(--surface-2);padding:16px 10px;transition:transform .15s,box-shadow .15s}.achievement:not(.locked):hover{box-shadow:var(--shadow);transform:translateY(-2px)}.achievement.locked{opacity:.4;filter:grayscale()}.achievement .ach-icon{font-size:34px}.achievement .ach-name{margin-top:6px;font-size:13px;font-weight:600}.achievement .ach-desc{color:var(--muted);margin-top:4px;font-size:11px}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f1e3a8c;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:20px;width:100%;max-width:480px;padding:28px;box-shadow:0 24px 60px #00000040}.quick-login-grid{grid-template-columns:1fr;gap:8px;margin-bottom:16px;display:grid}.quick-login-btn{border-radius:var(--radius-sm);background:var(--surface-2);border:2px solid var(--border);cursor:pointer;text-align:left;width:100%;color:var(--text);align-items:center;gap:12px;padding:12px 16px;font-family:inherit;transition:border-color .15s,background .15s;display:flex}.quick-login-btn:hover{border-color:var(--primary);background:var(--primary-light)}.quick-login-btn .ql-icon{flex-shrink:0;font-size:22px}.quick-login-btn .ql-name{color:var(--text);font-size:13px;font-weight:600}.quick-login-btn .ql-email{color:var(--muted);font-size:11px}.divider{color:var(--muted);align-items:center;gap:12px;margin:16px 0;font-size:13px;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.mobile-header,.bottom-nav,.drawer-overlay{display:none}@media (width<=800px){.app-shell{flex-direction:column}.sidebar{display:none}.mobile-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:50;justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0;box-shadow:0 2px 8px #2d6cdf12}.main{flex:1;min-width:0;padding:16px 16px 80px}h1{font-size:20px}.page-header{flex-direction:row;align-items:center;gap:10px}.page-header h1{flex:1;min-width:0}.page-header .row{flex-wrap:wrap;gap:6px}.mobile-add-button{border-radius:50%;flex-shrink:0;gap:0;width:34px;min-width:34px;height:34px;margin-left:auto;padding:0}.mobile-add-button .mobile-add-text{display:none}.card table{-webkit-overflow-scrolling:touch;display:block;overflow-x:auto}.modal-overlay{align-items:flex-end;padding:0}.modal{border-radius:16px 16px 0 0;max-height:90vh;overflow-y:auto;width:100%!important;max-width:100%!important}.modal.modal-float{max-height:calc(100vh - 32px);border-radius:20px!important;width:min(100%,560px)!important;max-width:560px!important}button{min-height:36px}.cal-month-grid{font-size:11px}.cal-week-grid{overflow-x:auto}.list li{min-height:44px;padding:12px 14px}.bottom-nav{background:var(--surface);border-top:1px solid var(--border);z-index:60;height:64px;padding-bottom:env(safe-area-inset-bottom);display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 12px #2d6cdf17}.bottom-nav-item{color:var(--muted);cursor:pointer;min-height:unset;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;padding:6px 4px;font-size:11px;text-decoration:none;transition:color .15s;display:flex}.bottom-nav-item.active,.bottom-nav-item[aria-current=page],.bottom-nav-item:hover{color:var(--primary)}.bottom-nav-icon{font-size:22px;line-height:1}.bottom-nav-label{font-size:10px;font-weight:500}.drawer-overlay{z-index:100;background:#00000073;align-items:flex-end;display:flex;position:fixed;inset:0}.drawer{background:var(--surface);width:100%;padding:0 0 calc(16px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;max-height:80vh;animation:.22s slideUp;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.drawer-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:20px 20px 12px;display:flex}.drawer-nav{flex-direction:column;padding:8px 12px;display:flex}.drawer-nav a{color:var(--text);border-radius:10px;align-items:center;gap:12px;padding:12px 10px;font-size:15px;font-weight:500;text-decoration:none;display:flex}.drawer-nav a.active{background:var(--primary-light);color:var(--primary)}.drawer-nav a .nav-icon{font-size:20px}.drawer-footer{gap:10px;padding:12px 20px 0;display:flex}.icon-btn{cursor:pointer;color:var(--text);min-height:unset;background:0 0;border:none;border-radius:8px;padding:4px 8px;font-size:22px}.icon-btn:hover{background:var(--surface-2)}}