@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--bg:#f5f5f4;--bg-surface:#fff;--bg-hover:#f0f0ef;--border:#e2e1de;--border-focus:#a3a39e;--text-primary:#1c1c1a;--text-secondary:#6b6b66;--text-muted:#9f9f99;--brand:#3d52a0;--brand-hover:#2e3f7c;--brand-light:#eef0f9;--green:#2d7d46;--green-bg:#ecf7f0;--green-border:#b8dfc6;--blue:#1d5fa8;--blue-bg:#ebf2fb;--blue-border:#b3cfee;--red:#b03a2e;--red-bg:#fdf1f0;--red-border:#f0b9b5;--amber:#92600a;--amber-bg:#fdf6ea;--amber-border:#f0d59e;--shadow-xs:0 1px 2px #0000000f;--shadow-sm:0 1px 4px #00000014, 0 0 0 1px var(--border);--radius:8px;--radius-lg:12px;--sidebar-w:220px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#111110;--bg-surface:#1c1c1a;--bg-hover:#242422;--border:#2e2e2b;--border-focus:#5a5a55;--text-primary:#e8e8e3;--text-secondary:#999991;--text-muted:#62625c;--brand:#7b92d8;--brand-hover:#9aaee3;--brand-light:#1e2238;--green:#4caf71;--green-bg:#0f2318;--green-border:#1f4a2e;--blue:#5a9fd4;--blue-bg:#0d1f30;--blue-border:#1a3a55;--red:#d97060;--red-bg:#2a1210;--red-border:#4d2219;--amber:#c9904a;--amber-bg:#271a08;--amber-border:#4a3010;--shadow-xs:0 1px 2px #0000004d;--shadow-sm:0 1px 4px #0006, 0 0 0 1px var(--border);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*,:before,:after{box-sizing:border-box}html{background:var(--bg)}body{background:var(--bg);min-height:100vh;color:var(--text-primary);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:Inter,Segoe UI,system-ui,sans-serif;font-size:14px;font-weight:400;line-height:1.5}button,input,select,textarea{font:inherit}h1,h2,h3,p{margin:0}#root{min-height:100vh}.login-shell{background:var(--bg);place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:min(380px,100%);box-shadow:var(--shadow-sm);padding:32px 28px}.login-card .eyebrow{text-transform:uppercase;letter-spacing:.1em;color:var(--brand);margin-bottom:6px;font-size:11px;font-weight:600}.login-card h1{color:var(--text-primary);margin-bottom:24px;font-size:20px;font-weight:600}.login-card label,.change-password-form label{margin-bottom:14px;display:block}.login-card label span,.change-password-form label span{color:var(--text-secondary);margin-bottom:5px;font-size:12px;font-weight:500;display:block}.login-card input,.change-password-form input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text-primary);padding:8px 10px;transition:border-color .15s}.login-card input:focus,.change-password-form input:focus{border-color:var(--brand);outline:none}.login-card button[type=submit],.change-password-form button[type=submit]{border-radius:var(--radius);background:var(--brand);color:#fff;cursor:pointer;border:none;width:100%;margin-top:8px;padding:9px 14px;font-size:13px;font-weight:600;transition:background .15s}.login-card button[type=submit]:hover,.change-password-form button[type=submit]:hover{background:var(--brand-hover)}.login-card small{color:var(--text-muted);margin-top:12px;font-size:12px;display:block}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000073;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.welcome-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:min(480px,100%);padding:28px;box-shadow:0 8px 32px #0000002e}.modal-header{margin-bottom:12px}.modal-header h2{color:var(--text-primary);font-size:17px;font-weight:600}.modal-copy{color:var(--text-secondary);margin-bottom:20px;font-size:13px;line-height:1.65}.welcome-modal>button{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;margin-top:4px;padding:8px 16px;font-size:13px;font-weight:500;transition:background .15s}.welcome-modal>button:hover{background:var(--bg-hover)}.key-display{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);text-align:center;word-break:break-all;margin-bottom:18px;padding:14px 16px}.key-display code{color:var(--brand);font-family:SF Mono,Fira Code,monospace;font-size:13px;font-weight:500}.app-shell{grid-template-columns:var(--sidebar-w) minmax(0, 1fr);min-height:100vh;transition:grid-template-columns .2s;display:grid;position:relative}.app-shell.sidebar-collapsed{grid-template-columns:68px minmax(0,1fr)}.sidebar-overlay{z-index:40;background:#0006;display:none;position:fixed;inset:0}.sidebar{background:var(--bg-surface);border-right:1px solid var(--border);flex-direction:column;height:100vh;padding:18px 12px;transition:width .2s,padding .2s;display:flex;position:sticky;top:0;overflow:hidden}.sidebar.collapsed{padding:18px 8px}.brand{border-bottom:1px solid var(--border);align-items:center;gap:10px;margin-bottom:8px;padding-bottom:16px;display:flex;position:relative}.brand-mark{background:var(--brand);color:#fff;border-radius:8px;flex-shrink:0;place-items:center;width:34px;height:34px;font-size:15px;font-weight:700;display:grid}.brand-text{white-space:nowrap;flex:1;min-width:0;transition:opacity .15s;overflow:hidden}.sidebar.collapsed .brand-text{display:none}.brand strong{color:var(--text-primary);font-size:13px;font-weight:600;display:block}.brand small{color:var(--text-muted);font-size:11px;display:block}.collapse-btn{border-radius:var(--radius);color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;width:28px;height:28px;padding:0;transition:all .15s;display:flex}.collapse-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border)}.sidebar.collapsed .collapse-btn{display:none}.nav{flex-direction:column;gap:4px;margin-top:12px;display:flex}.nav-item{border-radius:var(--radius);width:100%;color:var(--text-secondary);text-align:left;cursor:pointer;white-space:nowrap;background:0 0;border:none;align-items:center;gap:10px;padding:9px 10px;font-size:13px;font-weight:500;text-decoration:none;transition:background .12s,color .12s;display:flex}.nav-icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.nav-label{text-overflow:ellipsis;transition:opacity .15s;overflow:hidden}.sidebar.collapsed .nav-label{display:none}.sidebar.collapsed .nav-item{justify-content:center;padding:10px 0}.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-item.active{background:var(--brand-light);color:var(--brand)}.sidebar-footer{border-top:1px solid var(--border);margin-top:auto;padding-top:12px}.logout-item:hover{color:var(--red)}.menu-btn{border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:0 0;flex-direction:column;flex-shrink:0;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;display:none}.menu-btn span{background:var(--text-secondary);border-radius:2px;height:2px;transition:all .2s;display:block}.menu-btn:hover span{background:var(--text-primary)}.desktop-toggle-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);width:34px;height:34px;color:var(--text-secondary);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;transition:all .15s;display:flex}.desktop-toggle-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.content{min-width:0;padding:28px 32px;overflow:auto}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.topbar-left{align-items:center;gap:12px;min-width:0;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.1em;color:var(--brand);margin-bottom:2px;font-size:11px;font-weight:600}.topbar h1{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:20px;font-weight:600;overflow:hidden}.status-pill{border:1px solid var(--green-border);background:var(--green-bg);color:var(--green);white-space:nowrap;border-radius:999px;flex-shrink:0;padding:5px 12px;font-size:12px;font-weight:500}.loading{color:var(--text-muted);margin-bottom:20px;font-size:13px}.stats-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:24px;display:grid}.stat-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-xs);padding:16px 18px;transition:transform .15s,box-shadow .15s}.stat-card:hover{box-shadow:var(--shadow-sm)}.stat-card span{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:8px;font-size:11px;font-weight:500;display:block}.stat-card strong{color:var(--text-primary);font-size:24px;font-weight:600;display:block}.panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-xs);min-width:0;margin-bottom:16px;padding:20px}.panel.wide{width:100%}.panel-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.panel-header h2{color:var(--text-primary);font-size:14px;font-weight:600}.panel-header span{color:var(--text-muted);font-size:12px}.inline-form{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.inline-form input,.inline-form select{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);min-width:130px;color:var(--text-primary);flex:1;padding:8px 10px;font-size:13px;transition:border-color .15s}.inline-form input:focus,.inline-form select:focus{border-color:var(--brand);outline:none}.inline-form button{border-radius:var(--radius);background:var(--brand);color:#fff;cursor:pointer;white-space:nowrap;border:none;padding:8px 18px;font-size:13px;font-weight:600;transition:background .15s}.inline-form button:hover{background:var(--brand-hover)}.table-scroll{-webkit-overflow-scrolling:touch;border-radius:var(--radius);overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:480px}th{text-align:left;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap;padding:8px 10px;font-size:11px;font-weight:600}td{text-align:left;color:var(--text-primary);border-bottom:1px solid var(--border);vertical-align:middle;padding:10px;font-size:13px}tr:last-child td{border-bottom:none}tr:hover td{background:var(--bg-hover)}.tag{text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;border:1px solid #0000;border-radius:4px;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.tag.active,.tag.sent{color:var(--green);background:var(--green-bg);border-color:var(--green-border)}.tag.queued,.tag.processing{color:var(--blue);background:var(--blue-bg);border-color:var(--blue-border)}.tag.failed,.tag.dead_letter{color:var(--red);background:var(--red-bg);border-color:var(--red-border)}.tag.revoked{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-border)}.btn-action{border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;white-space:nowrap;border-radius:5px;padding:4px 10px;font-size:12px;font-weight:500;transition:background .12s,color .12s}.btn-action:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-action.danger{color:var(--red);border-color:var(--red-border)}.btn-action.danger:hover{background:var(--red-bg)}@media (width<=1024px){.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=768px){.app-shell{grid-template-columns:1fr!important}.sidebar-overlay{display:block}.sidebar{z-index:50;transition:transform .22s;position:fixed;inset:0 auto 0 0;transform:translate(-100%);box-shadow:4px 0 24px #00000026;width:var(--sidebar-w)!important;padding:20px 14px!important}.sidebar.collapsed{padding:20px 14px!important}.sidebar .brand-text,.sidebar .nav-label{display:block!important}.sidebar .nav-item{justify-content:flex-start!important;padding:9px 10px!important}.sidebar.open{transform:translate(0)}.menu-btn{display:flex}.desktop-toggle-btn,.collapse-btn{display:none}.content{padding:20px 16px}.stats-grid{gap:10px;grid-template-columns:1fr!important}.stat-card{justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.stat-card span{margin-bottom:0;font-size:12px}.stat-card strong{font-size:20px}.topbar h1{font-size:18px}.status-pill{padding:4px 10px;font-size:11px}.inline-form{flex-direction:column}.inline-form input,.inline-form select,.inline-form button{flex:none;width:100%}}@media (width<=400px){.login-card{padding:24px 18px}}
