*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font-base: 13px;--line-height: 1.4;--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--page-max-w: 100%;--page-px: .75rem;--page-py: .6rem;--radius-sm: 5px;--radius-md: 7px;--radius-lg: 10px;--font-xs: .65rem;--font-sm: .75rem;--font-md: .875rem;--font-lg: 1rem;--font-xl: 1.2rem;--color-bg: #f5f7fa;--color-surface: #ffffff;--color-border: #e2e8f0;--color-border-lt: #f1f5f9;--color-text: #1a1a2e;--color-text-md: #374151;--color-text-sm: #6b7280;--color-accent: #4f46e5;--color-accent-h: #4338ca;--color-danger: #dc2626;font-family:system-ui,-apple-system,sans-serif;font-size:var(--font-base);line-height:var(--line-height);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}@media(min-width:640px){:root{--font-base: 17px;--line-height: 1.5;--space-xs: .3rem;--space-sm: .6rem;--space-md: 1rem;--space-lg: 1.5rem;--page-max-w: 960px;--page-px: 2rem;--page-py: 1.5rem;--font-xs: .7rem;--font-sm: .8rem;--font-md: .875rem;--font-lg: 1rem;--font-xl: 1.5rem}}body{min-height:100vh}.page{max-width:var(--page-max-w);margin:0 auto;padding:var(--page-py) var(--page-px)}.header{margin-bottom:var(--space-md);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-sm)}.header h1{font-size:var(--font-xl);font-weight:700}.subtitle{font-size:var(--font-sm);color:var(--color-text-sm);margin-top:var(--space-xs)}.main{display:flex;flex-direction:column;gap:var(--space-md)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.card-header{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border)}.card-header h2{font-size:var(--font-lg);font-weight:600;color:var(--color-text-md)}.card-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xs) var(--space-md);border-bottom:1px solid var(--color-border-lt)}.badge{font-size:var(--font-xs);color:var(--color-text-sm);background:var(--color-border-lt);border-radius:99px;padding:.15em .5em}.table-wrapper{overflow-x:auto}.table{width:100%;border-collapse:collapse;font-size:var(--font-sm)}.table th{text-align:left;padding:var(--space-xs) var(--space-md);font-size:var(--font-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-sm);background:#f9fafb;border-bottom:1px solid var(--color-border)}.table td{padding:var(--space-xs) var(--space-md);color:var(--color-text-md);border-bottom:1px solid var(--color-border-lt)}.table tbody tr:last-child td{border-bottom:none}.table tbody tr:hover td{background:#f8fafc}.table-actions{width:1%;white-space:nowrap;display:flex;gap:var(--space-xs);justify-content:flex-end}.status{padding:var(--space-md);color:var(--color-text-sm);font-size:var(--font-sm)}.status--error{color:var(--color-danger)}.btn{display:inline-flex;align-items:center;gap:.3em;border:none;border-radius:var(--radius-sm);font-size:var(--font-sm);font-weight:500;cursor:pointer;padding:.35em .7em;transition:opacity .15s,background .15s;line-height:1}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--color-accent);color:#fff}.btn--primary:hover:not(:disabled){background:var(--color-accent-h)}.btn--ghost{background:var(--color-border-lt);color:var(--color-text-md)}.btn--ghost:hover:not(:disabled){background:var(--color-border)}.btn--danger{background:#fee2e2;color:var(--color-danger)}.btn--danger:hover:not(:disabled){background:#fecaca}.btn--sm{font-size:var(--font-xs);padding:.3em .55em}.modal-overlay{position:fixed;inset:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--space-md)}.modal{background:var(--color-surface);border-radius:var(--radius-lg);width:100%;max-width:400px;box-shadow:0 16px 48px #00000026;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border)}.modal-header h3{font-size:var(--font-md);font-weight:600}.modal-close{background:none;border:none;font-size:var(--font-md);color:var(--color-text-sm);cursor:pointer;padding:.15em .35em;border-radius:var(--radius-sm)}.modal-close:hover{background:var(--color-border-lt);color:var(--color-text-md)}.modal-body{padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-md)}.field{display:flex;flex-direction:column;gap:var(--space-xs)}.field label{font-size:var(--font-xs);font-weight:600;color:var(--color-text-md)}.field input{padding:.45em .65em;border:1px solid #d1d5db;border-radius:var(--radius-sm);font-size:var(--font-md);color:var(--color-text);outline:none;transition:border-color .15s}.field input:focus{border-color:var(--color-accent)}.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-xs);padding-top:var(--space-xs)}