:root{--brand-primary: #103150;--brand-teal: #69c8ca;--brand-pink: #fab5ca;--brand-rose: #c96182;--bg: #f4f6f9;--surface: #ffffff;--border: #e2e8f0;--text: #1a2332;--text-muted: #64748b;--danger: #d64545;--success: #3ba776;--radius: 10px;--shadow: 0 1px 3px rgba(16, 49, 80, .08), 0 4px 12px rgba(16, 49, 80, .05);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--fs-sm: 12px;--fs-md: 14px;--fs-lg: 18px;--fs-xl: 24px;--warning: #c9862a}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;border-radius:var(--radius);font-size:14px}button:disabled{opacity:.55;cursor:not-allowed}input,select{font-family:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);outline:none}input:focus,select:focus{border-color:var(--brand-teal)}.btn{padding:10px 16px;font-weight:600;transition:filter .15s ease}.btn:hover:not(:disabled){filter:brightness(.95)}.btn-primary{background:var(--brand-primary);color:#fff}.btn-rose{background:var(--brand-rose);color:#fff}.btn-teal{background:var(--brand-teal);color:var(--brand-primary)}.btn-ghost{background:transparent;color:var(--brand-primary);border:1px solid var(--border)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}.badge-on{background:#3ba77626;color:var(--success)}.badge-off{background:#d645451f;color:var(--danger)}.badge-role{background:#69c8ca2e;color:var(--brand-primary)}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border)}th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);background:#fafbfc}tbody tr:hover{background:#fafbfc}:focus-visible{outline:2px solid var(--brand-teal);outline-offset:2px}textarea{font-family:inherit;font-size:var(--fs-md);padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);outline:none;resize:vertical;width:100%}textarea:focus{border-color:var(--brand-teal)}.btn-danger{background:var(--danger);color:#fff}.badge-sent{background:#c9862a26;color:var(--warning)}.badge-resolved{background:#3ba77626;color:var(--success)}.badge-neutral{background:#10315014;color:var(--brand-primary)}.page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-5);flex-wrap:wrap}.page-header h1{font-size:var(--fs-xl);color:var(--brand-primary)}.page-header p{color:var(--text-muted);margin-top:var(--space-1)}.toolbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.empty-state{padding:var(--space-6);text-align:center;color:var(--text-muted)}.empty-state h3{color:var(--brand-primary);margin-bottom:var(--space-2)}.field{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-4)}.field label{font-weight:600}.placeholder-notice{border:1px dashed var(--brand-rose);background:#fab5ca1f;border-radius:var(--radius);padding:var(--space-4);margin-bottom:var(--space-5)}.placeholder-notice strong{color:var(--brand-rose)}.placeholder-notice code{background:#10315014;border-radius:4px;padding:1px 6px;font-size:var(--fs-sm)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#10315073;display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:50}.modal{background:var(--surface);border-radius:var(--radius);box-shadow:0 12px 40px #10315040;width:100%;max-width:520px;max-height:90vh;overflow:auto;padding:var(--space-5)}.modal-title{font-size:var(--fs-lg);color:var(--brand-primary);margin-bottom:var(--space-4)}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-5)}@media(max-width:720px){.page-header{flex-direction:column;align-items:flex-start}}