:root{--radius-sm: 12px;--radius-md: 16px;--radius-lg: 20px;--radius-xl: 24px;--primary-start: #667eea;--primary-end: #764ba2;--primary-gradient: linear-gradient(135deg, var(--primary-start) 0%, var(--primary-end) 100%);--text-primary: #1a202c;--text-secondary: #6b7280;--text-muted: #9ca3af;--text-label: #374151;--bg-primary: rgba(255, 255, 255, .95);--bg-secondary: rgba(255, 255, 255, .8);--bg-input: rgba(255, 255, 255, .8);--bg-input-focus: rgba(255, 255, 255, 1);--border-primary: #e5e7eb;--border-focus: var(--primary-start);--border-glass: rgba(255, 255, 255, .3);--destructive: #ef4444;--destructive-hover: #dc2626;--destructive-shadow: rgba(239, 68, 68, .2);--destructive-shadow-hover: rgba(239, 68, 68, .3);--success-bg: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);--success-text: #16a34a;--success-border: #bbf7d0;--error-bg: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);--error-text: #dc2626;--error-border: #fecaca;--secondary-start: #6b7280;--secondary-end: #4b5563;--secondary-gradient: linear-gradient(135deg, var(--secondary-start) 0%, var(--secondary-end) 100%);--secondary-hover-start: #4b5563;--secondary-hover-end: #374151;--secondary-hover-gradient: linear-gradient(135deg, var(--secondary-hover-start) 0%, var(--secondary-hover-end) 100%);--shadow-sm: 0 10px 25px rgba(102, 126, 234, .3);--shadow-md: 0 20px 40px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 20px rgba(107, 114, 128, .3);--shadow-focus: 0 0 0 4px rgba(102, 126, 234, .1);--spacing-xs: .3rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 4.5rem}*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;background:var(--primary-gradient);color:var(--text-primary);line-height:1.6;min-height:100vh;position:relative}.header-right{display:flex;align-items:center;gap:var(--spacing-md);position:fixed;top:10px;right:12px;background-color:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--spacing-xs) 3px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.3);box-shadow:0 2px 8px #0000001a;z-index:1000;transition:transform .3s ease,opacity .3s ease;transform:translate(0)}.header-right.hidden{transform:translate(calc(100% + 24px));opacity:.7}.header-right.visible{transform:translate(0);opacity:1}.header-toggle-btn{position:fixed;top:10px;right:12px;width:40px;height:40px;background-color:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-sm);box-shadow:0 2px 8px #0000001a;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;z-index:1001;transition:all .3s ease;opacity:0;visibility:hidden;transform:scale(.8)}.header-toggle-btn.visible{opacity:1;visibility:visible;transform:scale(1)}.header-toggle-btn:hover{background-color:#fff;transform:scale(1.05)}.header-toggle-btn:before{content:"👤";font-size:16px}.user-info{color:var(--text-primary);font-size:.875rem;font-weight:600;background:#667eea26;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);border:1px solid rgba(102,126,234,.2);text-shadow:0 1px 2px rgba(0,0,0,.1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}#logout-btn{margin:0;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm)}.logo-container{position:fixed;top:var(--spacing-lg);left:var(--spacing-lg);z-index:1000}.logo-link{display:inline-block;transition:transform .2s ease}.logo-link:hover{transform:scale(1.05)}.logo{width:40px;height:40px;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease}.logo:hover{box-shadow:var(--shadow-md)}.container{max-width:440px;width:100%;margin:var(--spacing-2xl) auto var(--spacing-xl) auto;padding:3rem var(--spacing-md);background:var(--bg-primary);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-xl);box-shadow:var(--shadow-md),0 0 0 1px #fff3;border:1px solid var(--border-glass)}.title{font-size:2rem;font-weight:800;margin:0 0 var(--spacing-xs);background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center}.subtitle{color:var(--text-secondary);margin:0 0 var(--spacing-2xl);text-align:center;font-size:1rem;font-weight:400}.field{margin-bottom:var(--spacing-lg)}label{display:block;margin-bottom:var(--spacing-sm);font-size:.875rem;color:var(--text-label);font-weight:600;letter-spacing:.025em}input{width:100%;padding:var(--spacing-md) 1.25rem;border:2px solid var(--border-primary);border-radius:var(--radius-md);outline:none;font-size:1rem;transition:all .2s ease;background:var(--bg-input)}input:focus{border-color:var(--border-focus);box-shadow:var(--shadow-focus);background:var(--bg-input-focus)}input::placeholder{color:var(--text-muted);font-weight:400}.btn{width:100%;padding:var(--spacing-md) var(--spacing-lg);border:0;border-radius:var(--radius-md);background:var(--primary-gradient);color:#fff;font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;transition:all .2s ease;letter-spacing:.025em;margin-top:var(--spacing-xs)}.btn:hover{box-shadow:var(--shadow-sm)}.btn:active{opacity:.9}.btn-secondary{background:var(--secondary-gradient);width:auto;padding:var(--spacing-sm) var(--spacing-lg);font-family:inherit;font-size:.875rem}.btn-secondary:hover{background:var(--secondary-hover-gradient);box-shadow:var(--shadow-lg)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-family:inherit;font-size:.875rem;border-radius:var(--radius-sm)}.note{display:block;text-align:center;color:var(--text-secondary);margin-top:var(--spacing-lg);font-size:.875rem;font-weight:500}.note a{color:var(--primary-start);text-decoration:none;font-weight:600;transition:color .2s ease}.note a:hover{color:var(--primary-end)}.error{background:var(--error-bg);color:var(--error-text);border:1px solid var(--error-border);padding:var(--spacing-md) 1.25rem;border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);display:none;font-weight:500;font-size:.875rem}.success{background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border);padding:var(--spacing-md) 1.25rem;border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);display:none;font-weight:500;font-size:.875rem}@media (max-width: 480px){.header-right{top:calc(var(--spacing-md) - 4px);right:var(--spacing-md);padding:var(--spacing-xs);gap:var(--spacing-sm);max-width:50%}.header-toggle-btn{top:var(--spacing-md);right:var(--spacing-md);width:36px;height:36px}.header-toggle-btn:before{font-size:14px}.user-info{font-size:.8rem;padding:var(--spacing-xs) var(--spacing-sm);max-width:150px}.title{font-size:1.75rem}input{padding:.875rem var(--spacing-md)}.btn{padding:.875rem 1.25rem}.logo-container{position:fixed;top:var(--spacing-md);left:var(--spacing-md)}.logo{width:32px;height:32px}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-lg)}.modal{background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:500px;width:100%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-md);border-bottom:1px solid var(--border-primary)}.modal-header h2{margin:0;font-size:1.25rem;font-weight:700;color:var(--text-primary)}.modal-close-btn{background:none;border:none;font-family:inherit;font-size:1.5rem;color:var(--text-muted);cursor:pointer;padding:var(--spacing-xs);line-height:1;transition:color .2s ease}.modal-close-btn:hover{color:var(--text-primary)}.modal-body{padding:var(--spacing-lg)}.modal-actions{display:flex;gap:var(--spacing-md);justify-content:flex-end;margin-top:var(--spacing-lg)}textarea{width:100%;padding:var(--spacing-md) 1.25rem;border:2px solid var(--border-primary);border-radius:var(--radius-md);outline:none;font-size:1rem;font-family:inherit;transition:all .2s ease;background:var(--bg-input);resize:vertical;min-height:80px}textarea:focus{border-color:var(--border-focus);box-shadow:var(--shadow-focus);background:var(--bg-input-focus)}textarea::placeholder{color:var(--text-muted);font-weight:400}@media (max-width: 768px){.modal-overlay{padding:var(--spacing-md)}.modal-actions{flex-direction:column}.modal-actions .btn{width:100%}}@media (max-width: 480px){.modal-body{padding:var(--spacing-md)}}.icon{stroke-width:2;display:flex;align-items:center;justify-content:center;margin-right:.15em}.icon svg{stroke:currentColor;fill:none}.icon-sm{width:.875em;height:.875em}.icon-lg{width:1.25em;height:1.25em}button .icon{width:1em;height:1em;margin-right:.25em;color:inherit}button .icon:only-child{margin-right:0}