.App{min-height:100vh}.App>*:not(nav){animation:pageEnter .4s ease forwards}@keyframes pageEnter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}:root{--bg-primary: #0b0d17;--bg-secondary: #111427;--bg-card: rgba(17, 20, 39, .7);--bg-card-hover: rgba(25, 29, 55, .85);--bg-glass: rgba(255, 255, 255, .03);--bg-glass-strong: rgba(255, 255, 255, .06);--border-glass: rgba(255, 255, 255, .08);--border-glass-hover: rgba(255, 255, 255, .15);--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--text-accent: #a5b4fc;--accent-primary: #6366f1;--accent-primary-hover: #818cf8;--accent-glow: rgba(99, 102, 241, .25);--accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);--accent-gradient-hover: linear-gradient(135deg, #818cf8, #a78bfa);--success: #10b981;--success-hover: #34d399;--success-glow: rgba(16, 185, 129, .25);--success-gradient: linear-gradient(135deg, #059669, #10b981);--danger: #f43f5e;--danger-hover: #fb7185;--danger-glow: rgba(244, 63, 94, .25);--danger-gradient: linear-gradient(135deg, #e11d48, #f43f5e);--warning: #f59e0b;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow: 0 0 40px var(--accent-glow);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse 80% 50% at 20% 40%,rgba(99,102,241,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 20%,rgba(139,92,246,.06) 0%,transparent 50%),radial-gradient(ellipse 50% 60% at 50% 90%,rgba(16,185,129,.04) 0%,transparent 50%);pointer-events:none;z-index:0}#root{position:relative;z-index:1;min-height:100vh}.navbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:center;width:100%;height:64px;background:rgba(11,13,23,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-glass)}.navbar-contenet{width:100%;max-width:1200px;padding:0 24px;display:flex;align-items:center;justify-content:center}.navbar-brand{font-size:1.1rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em;margin-right:auto;display:flex;align-items:center;gap:8px}.navbar-logo{height:32px;width:auto}.navbar-brand span{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navbar-nav{display:flex;list-style-type:none;gap:4px;align-items:center}.navbar-nav-list{padding:8px 20px;border-radius:var(--radius-full);color:var(--text-secondary);font-size:.875rem;font-weight:500;transition:var(--transition-base);cursor:pointer;position:relative;white-space:nowrap;background:none;margin:0}.navbar-nav-list:hover{color:var(--text-primary);background:var(--bg-glass-strong)}.navbar-nav-list.active{color:#fff;background:var(--accent-gradient);box-shadow:0 2px 12px var(--accent-glow)}.navbar-nav li{display:flex;align-items:center;height:auto}.link-style,.navbar-nav li .link-style{text-decoration:none;color:inherit}.login-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 64px);padding:24px;width:auto}.form{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-glass);border-radius:var(--radius-xl);width:100%;max-width:400px;padding:40px 36px;box-shadow:var(--shadow-lg),var(--shadow-glow);position:relative;overflow:hidden;margin:0;text-align:center}.form:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent-gradient)}.form-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);text-align:center;margin-bottom:8px}.form-subtitle{font-size:.875rem;color:var(--text-secondary);text-align:center;margin-bottom:28px}.form input[type=text],.form input[type=email],.form input[type=password]{width:100%;padding:14px 16px;background:var(--bg-glass-strong);border:1px solid var(--border-glass);border-radius:var(--radius-md);color:var(--text-primary);font-family:Inter,sans-serif;font-size:.9rem;outline:none;transition:var(--transition-base);margin-bottom:14px}.form input[type=text]::placeholder,.form input[type=email]::placeholder,.form input[type=password]::placeholder{color:var(--text-muted)}.form input[type=text]:focus,.form input[type=email]:focus,.form input[type=password]:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow);background:rgba(255,255,255,.05)}.form button,.form .register-btn{width:100%;padding:14px;border:none;border-radius:var(--radius-md);font-family:Inter,sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-base);text-transform:none;letter-spacing:.01em}.form .register-btn{background:var(--accent-gradient);color:#fff;margin-bottom:12px;display:block;text-align:center}.form .register-btn:hover{background:var(--accent-gradient-hover);box-shadow:0 4px 20px var(--accent-glow);transform:translateY(-1px)}.form button{background:var(--bg-glass-strong);color:var(--text-secondary);border:1px solid var(--border-glass)}.form button:hover{background:var(--bg-glass);color:var(--text-primary);border-color:var(--border-glass-hover);transform:translateY(-1px)}.form-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--text-muted);font-size:.8rem}.form-divider:before,.form-divider:after{content:"";flex:1;height:1px;background:var(--border-glass)}.welcome{text-align:center;padding:32px 0 8px;color:var(--text-primary);font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.welcome-sub{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-bottom:24px}.duty-container{display:grid;grid-template-columns:1fr 340px;gap:24px;max-width:900px;margin:0 auto;padding:0 24px 40px;width:auto}.duty-items{background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:16px;animation:fadeIn .5s ease forwards}.duty-side{background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;align-items:stretch;gap:12px;animation:fadeIn .5s ease forwards;animation-delay:.1s;opacity:0}.duty-side-items{display:flex;flex-direction:column;gap:12px}.duty-time{background:var(--bg-glass-strong);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:16px 20px;color:var(--text-primary);font-size:.95rem;font-weight:500;text-align:center;font-variant-numeric:tabular-nums;width:auto;height:auto}.duty-end-date{background:var(--bg-glass-strong);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:14px 20px;color:var(--text-secondary);font-size:.85rem;text-align:center;width:auto;height:auto}.duty-time-all{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.1));border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-md);padding:16px 20px;color:var(--text-accent);font-size:.9rem;font-weight:500;text-align:center;font-variant-numeric:tabular-nums;width:auto;height:auto}.duty-starts-form-submit{width:100%;height:auto;padding:14px 24px;background:var(--success-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-family:Inter,sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-base);box-shadow:0 2px 12px var(--success-glow)}.duty-starts-form-submit:hover:not(:disabled){box-shadow:0 4px 20px var(--success-glow);transform:translateY(-2px)}.duty-starts-form-submit:disabled{background:rgba(16,185,129,.15);color:var(--success);border:1px solid rgba(16,185,129,.3);box-shadow:none;cursor:default;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px var(--success-glow)}50%{box-shadow:0 0 20px var(--success-glow)}}.duty-ends-btn{width:100%;height:auto;padding:14px 24px;background:var(--danger-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-family:Inter,sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-base);box-shadow:0 2px 12px var(--danger-glow)}.duty-ends-btn:hover{box-shadow:0 4px 20px var(--danger-glow);transform:translateY(-2px)}.logout-btn{width:100%;padding:12px 24px;background:var(--bg-glass-strong);color:var(--danger);border:1px solid rgba(244,63,94,.2);border-radius:var(--radius-md);font-family:Inter,sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;transition:var(--transition-base);height:auto}.logout-btn:hover{background:rgba(244,63,94,.1);border-color:#f43f5e66;transform:translateY(-1px)}.leaderboard-btn{width:100%;padding:12px 24px;background:var(--accent-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-family:Inter,sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:var(--transition-base);height:auto}.leaderboard-btn:hover{box-shadow:0 4px 20px var(--accent-glow);transform:translateY(-1px)}.report-btn{width:100%;padding:12px 24px;background:var(--bg-glass-strong);color:var(--text-secondary);border:1px solid var(--border-glass);border-radius:var(--radius-md);font-family:Inter,sans-serif;font-size:.85rem;font-weight:500;text-align:center;text-decoration:none;transition:var(--transition-base);display:inline-block;height:auto}.report-btn:hover{color:var(--text-primary);border-color:var(--border-glass-hover);background:rgba(255,255,255,.06);transform:translateY(-1px)}table.table{width:100%;max-width:600px;margin:24px auto;border-collapse:separate;border-spacing:0;background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);overflow:hidden;color:var(--text-primary);text-align:left}table.table thead{background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.1))}table.table thead th{font-size:.8rem;font-weight:600;color:var(--text-accent);text-transform:uppercase;letter-spacing:.05em;padding:16px 20px;text-align:left;border-bottom:1px solid var(--border-glass);border-left:none}table.table thead th[colspan]{text-align:center;font-size:.9rem;color:var(--text-primary);letter-spacing:0;text-transform:none;padding:14px 20px;background:rgba(99,102,241,.08);border-bottom:1px solid var(--border-glass)}table.table thead th:first-child{border-left:none}table.table td{padding:12px 20px;font-size:.875rem;color:var(--text-primary);border-bottom:1px solid rgba(255,255,255,.03);border-left:none;border-right:none}table.table .time{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-secondary)}table.table tbody tr{transition:var(--transition-fast)}table.table tbody tr:hover{background:var(--bg-glass-strong)}table.table tbody tr:last-child td{border-bottom:none}table.table tr:nth-child(even){background:rgba(255,255,255,.01)}table.table tr:nth-child(even):hover{background:var(--bg-glass-strong)}.archived-page-title{text-align:center;font-size:1.5rem;font-weight:700;color:var(--text-primary);padding:32px 0 24px}.archived-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(450px,1fr));gap:24px;padding:0 24px 40px;max-width:1400px;margin:0 auto}.archived-date{display:block;margin:16px auto;width:auto;text-align:center;border:1px solid var(--border-glass);padding:10px 20px;font-size:.85rem;font-weight:500;color:var(--text-accent);background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.08));border-radius:var(--radius-md)}.archived{display:flex;align-items:center;justify-content:center;margin:24px auto;padding:12px 28px;width:auto;border-radius:var(--radius-full);text-decoration:none;color:#fff;font-weight:600;font-size:.9rem;background:var(--accent-gradient);box-shadow:0 2px 12px var(--accent-glow);transition:var(--transition-base)}.archived:hover{box-shadow:0 4px 24px var(--accent-glow);transform:translateY(-2px)}.maintenance-text{text-align:center;color:var(--warning);padding:60px 24px;font-size:1.25rem;font-weight:600}.knowledge-page{max-width:800px;margin:0 auto;padding:40px 24px}.knowledge-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:16px}.knowledge-card{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--radius-lg);padding:32px;color:var(--text-secondary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease forwards}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}@media screen and (max-width: 900px){.duty-container{grid-template-columns:1fr;padding:0 16px 32px}.duty-items,.duty-side{padding:24px}}@media screen and (max-width: 600px){.navbar-nav-list{padding:8px 14px;font-size:.8rem}.navbar-nav{gap:2px}.welcome{font-size:1.2rem;padding:24px 16px 4px}.form{padding:32px 24px;margin:0 12px}table.table{font-size:.8rem}table.table thead th{padding:12px;font-size:.7rem}table.table td{padding:10px 12px;font-size:.8rem}.duty-time,.duty-end-date,.duty-time-all{font-size:.82rem;padding:12px 14px}.archived-container{grid-template-columns:1fr;padding:0 12px 32px}}@media screen and (max-width: 430px){.login-page,.form{width:100%;max-width:100%}.duty-starts-form-submit,.duty-ends-btn,.leaderboard-btn,.report-btn,.logout-btn{font-size:.82rem;padding:12px 16px}}@media screen and (min-width: 1200px){.archived-container{grid-template-columns:repeat(3,1fr)}}.archive-page{max-width:700px;margin:0 auto;padding:0 24px 48px}.archive-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}.archive-select{flex:1;max-width:340px;padding:10px 36px 10px 16px;background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--radius-md);color:var(--text-primary);font-family:Inter,sans-serif;font-size:.875rem;font-weight:500;outline:none;cursor:pointer;transition:var(--transition-base);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}.archive-select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.archive-select option{background:var(--bg-secondary);color:var(--text-primary);padding:8px}.archive-nav-btn{padding:10px 18px;background:var(--bg-glass-strong);color:var(--text-secondary);border:1px solid var(--border-glass);border-radius:var(--radius-md);font-family:Inter,sans-serif;font-size:.82rem;font-weight:500;cursor:pointer;transition:var(--transition-base);white-space:nowrap}.archive-nav-btn:hover:not(:disabled){background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--border-glass-hover)}.archive-nav-btn:disabled{opacity:.3;cursor:not-allowed}.archive-info{text-align:center;color:var(--text-muted);font-size:.8rem;margin-bottom:20px}.archive-table-wrapper{animation:fadeIn .3s ease forwards}.archive-table-wrapper table.table{max-width:100%}@media screen and (max-width: 600px){.archive-controls{flex-wrap:wrap;gap:8px}.archive-select{order:-1;flex-basis:100%;max-width:100%}.archive-nav-btn{flex:1;text-align:center;padding:10px 12px}}