:root{--bg: #f4f6fb;--surface: #ffffff;--surface-muted: #f8f9fc;--border: #e4e7ef;--text: #1c2233;--text-muted: #6b7386;--primary: #4f46e5;--primary-hover: #4338ca;--primary-soft: #eef0fe;--danger: #dc2626;--danger-soft: #fdecec;--success: #15803d;--shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);--radius: 12px;--radius-sm: 8px;color-scheme:light;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:15px;line-height:1.5;color:var(--text);-webkit-font-smoothing:antialiased}@media(prefers-color-scheme:dark){:root{--bg: #0f1220;--surface: #171b2d;--surface-muted: #1d2236;--border: #2a3049;--text: #e7e9f2;--text-muted: #9aa1b8;--primary: #7c74ff;--primary-hover: #918aff;--primary-soft: #262a4a;--danger: #f87171;--danger-soft: #3a1f26;--success: #4ade80;--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);color-scheme:dark}}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg)}body.no-scroll{overflow:hidden}h1,h2,p{margin:0}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.page{max-width:1100px;margin:0 auto;padding:48px 24px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 24px 16px}h1{font-size:1.6rem;font-weight:700;letter-spacing:-.01em}.subtitle{margin-top:2px;color:var(--text-muted);font-size:.93rem}.toolbar{padding:0 24px 16px}input{width:100%;padding:10px 12px;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color .15s,box-shadow .15s}input::placeholder{color:var(--text-muted)}input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}input[aria-invalid=true]{border-color:var(--danger)}.filter-input{max-width:320px;padding-left:36px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa1b8' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;font:inherit;font-weight:600;white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}.btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.btn:disabled{opacity:.6;cursor:progress}.btn-primary{color:#fff;background:var(--primary)}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-secondary{color:var(--text);background:var(--surface);border-color:var(--border)}.btn-secondary:hover{background:var(--surface-muted)}.btn-ghost{padding:6px 10px;font-size:.87rem;background:transparent}.btn-edit{color:var(--primary)}.btn-edit:hover{background:var(--primary-soft)}.btn-delete{color:var(--danger)}.btn-delete:hover{background:var(--danger-soft)}.icon-btn{width:32px;height:32px;font-size:1.4rem;line-height:1;color:var(--text-muted);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer}.icon-btn:hover{color:var(--text);background:var(--surface-muted)}.table-wrapper{overflow-x:auto;border-top:1px solid var(--border)}.user-table{width:100%;border-collapse:collapse}.user-table th,.user-table td{padding:12px 24px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border)}.user-table th{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);background:var(--surface-muted)}.user-table tbody tr:last-child td{border-bottom:none}.user-table tbody tr:hover td{background:var(--surface-muted)}.user-cell{display:flex;align-items:center;gap:12px}.avatar{display:inline-grid;place-items:center;flex-shrink:0;width:34px;height:34px;font-size:.8rem;font-weight:700;color:var(--primary);background:var(--primary-soft);border-radius:50%}.login{font-weight:600}.muted{color:var(--text-muted)}.actions{text-align:right}.actions-col{width:1%}.state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:56px 24px;text-align:center;color:var(--text-muted);border-top:1px solid var(--border)}.state-title{font-size:1.05rem;font-weight:600;color:var(--text)}.modal-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:#0f122080;animation:fade-in .15s ease-out}.modal-content{width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow-y:auto;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 24px 48px #0003;animation:pop-in .18s ease-out}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal-header h2{font-size:1.2rem;font-weight:700}.user-form{display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:.87rem;font-weight:600}.error-message{font-size:.82rem;color:var(--danger)}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.toast{position:fixed;right:24px;bottom:24px;z-index:200;max-width:calc(100vw - 48px);padding:12px 16px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--success);border-radius:var(--radius-sm);box-shadow:var(--shadow);animation:pop-in .18s ease-out}.toast-error{border-left-color:var(--danger)}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:720px){.page{padding:16px}.card-header{flex-direction:column;align-items:stretch;padding:20px 16px 12px}.toolbar{padding:0 16px 16px}.filter-input{max-width:none}.user-table thead{display:none}.user-table,.user-table tbody,.user-table tr,.user-table td{display:block}.user-table tr{padding:12px 16px;border-bottom:1px solid var(--border)}.user-table tbody tr:last-child{border-bottom:none}.user-table td{display:flex;justify-content:space-between;gap:16px;padding:4px 0;white-space:normal;border:none}.user-table td[data-label]:before{content:attr(data-label);color:var(--text-muted);font-size:.85rem}.user-table tbody tr:hover td{background:none}.actions{justify-content:flex-end;padding-top:8px}}