:root{--bg-base: #E8ECEE;--bg-card: #F4F6F7;--bg-input: #FFFFFF;--bg-hover: #DDE3E6;--text-primary: #1A2C2E;--text-secondary: #4A6466;--text-muted: #7DAEB0;--border-color: #C5CED0;--border-focus: #4EB9BD;--accent: #4EB9BD;--accent-hover: #68F7FC;--accent-light: #B3FAFC;--success: #2ECC71;--error: #E74C3C;--warning: #F39C12;--shadow: 0 2px 8px rgba(0, 0, 0, .4);--font-base: 16px;--font-lg: 18px;--font-xl: 24px;--font-xxl: 36px;--font-huge: 42px;--font-sm: 14px;--font-xs: 12px;--font-mono: "JetBrains Mono", "Fira Code", monospace;--gap: 12px;--gap-lg: 20px;--radius: 8px;--radius-lg: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:var(--font-base);color:var(--text-primary);background:var(--bg-base);-webkit-font-smoothing:antialiased}#app{height:100%;display:flex;flex-direction:column}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--bg-card);color:var(--text-primary);font-size:var(--font-base);font-weight:600;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none}.btn:hover{background:var(--bg-hover);border-color:var(--accent)}.btn:active{transform:scale(.97)}.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-success{background:var(--success);border-color:var(--success);color:#fff}.btn-error{background:var(--error);border-color:var(--error);color:#fff}.btn-warning{background:var(--warning);border-color:var(--warning);color:#fff}.btn-lg{padding:14px 28px;font-size:var(--font-lg);min-height:56px}.btn-xl{padding:18px 36px;font-size:var(--font-xl);min-height:72px}.input{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius);color:var(--text-primary);font-size:var(--font-base);outline:none;transition:border-color .15s ease}.input:focus{border-color:var(--border-focus)}.input::placeholder{color:var(--text-muted)}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--gap-lg)}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border-color)}.table th{font-weight:700;font-size:var(--font-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.table tr{min-height:48px}.table tr:hover{background:var(--bg-hover)}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:var(--font-xs);font-weight:600}.badge-success{background:#2ecc7126;color:var(--success)}.badge-error{background:#e74c3c26;color:var(--error)}.badge-warning{background:#f39c1226;color:var(--warning)}.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 6px;background:var(--bg-base);border:1px solid var(--border-color);border-radius:4px;font-family:var(--font-mono);font-size:var(--font-xs);font-weight:600;color:var(--text-secondary)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000}.overlay-content{text-align:center;padding:48px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.text-success{color:var(--success)}.text-error{color:var(--error)}.text-warning{color:var(--warning)}.text-muted{color:var(--text-muted)}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.fw-bold{font-weight:700}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.gap-1{gap:8px}.gap-2{gap:16px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.flex-1{flex:1}.w-full{width:100%}
