:root{--purple-50:#eeedfe;--purple-100:#cecbf6;--purple-200:#afa9ec;--purple-400:#7f77dd;--purple-600:#534ab7;--purple-800:#3c3489;--purple-900:#26215c;--teal-50:#e1f5ee;--teal-100:#9fe1cb;--teal-200:#5dcaa5;--teal-400:#1d9e75;--teal-600:#0f6e56;--teal-800:#085041;--teal-900:#04342c;--gray-50:#f1efe8;--gray-100:#d3d1c7;--gray-200:#b4b2a9;--gray-400:#888780;--gray-600:#5f5e5a;--gray-800:#444441;--gray-900:#2c2c2a;--green-50:#eaf3de;--green-400:#639922;--green-800:#27500a;--amber-50:#faeeda;--amber-400:#ba7517;--amber-800:#633806;--red-50:#fcebeb;--red-400:#e24b4a;--red-800:#791f1f;--bg-page:#f8f8f6;--bg-surface:#fff;--bg-subtle:#f1efe8;--text-primary:#2c2c2a;--text-secondary:#5f5e5a;--text-tertiary:#888780;--text-disabled:#b4b2a9;--text-inverse:#fff;--border-subtle:#e8e7e0;--border-default:#d3d1c7;--border-strong:#b4b2a9;--role-superuser-bg:var(--purple-50);--role-superuser-text:var(--purple-800);--role-manager-bg:var(--teal-50);--role-manager-text:var(--teal-800);--role-user-bg:var(--gray-50);--role-user-text:var(--gray-800);--status-active-bg:var(--green-50);--status-active-text:var(--green-800);--status-inactive-bg:var(--gray-50);--status-inactive-text:var(--gray-600);--status-error-bg:var(--red-50);--status-error-text:var(--red-800);--status-warn-bg:var(--amber-50);--status-warn-text:var(--amber-800);--dot-ok:var(--green-400);--dot-warn:var(--amber-400);--dot-err:var(--red-400);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--text-xs:11px;--text-sm:13px;--text-base:14px;--text-md:15px;--text-lg:18px;--text-xl:22px;--sidebar-width:200px;--transition-fast:.1s ease;--transition-base:.15s ease}@media (prefers-color-scheme:dark){:root{--bg-page:#1c1c1a;--bg-surface:#242422;--bg-subtle:#2c2c2a;--text-primary:#f1efe8;--text-secondary:#b4b2a9;--text-tertiary:#888780;--text-disabled:#5f5e5a;--text-inverse:#2c2c2a;--border-subtle:#2c2c2a;--border-default:#3a3a38;--border-strong:#5f5e5a;--role-superuser-bg:var(--purple-900);--role-superuser-text:var(--purple-100);--role-manager-bg:var(--teal-900);--role-manager-text:var(--teal-100);--role-user-bg:var(--gray-900);--role-user-text:var(--gray-100);--status-active-bg:#173404;--status-active-text:#c0dd97;--status-inactive-bg:var(--gray-900);--status-inactive-text:var(--gray-200);--status-error-bg:#501313;--status-error-text:#f7c1c1;--status-warn-bg:#412402;--status-warn-text:#fac775}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-primary);background:var(--bg-page);-webkit-font-smoothing:antialiased;line-height:1.6}img,svg{max-width:100%;display:block}button,input,select,textarea{font-family:inherit;font-size:inherit}a{color:var(--purple-600);text-decoration:none}a:hover{color:var(--purple-800);text-decoration:underline}h1{font-size:var(--text-xl);font-weight:500;line-height:1.3}h2{font-size:var(--text-lg);font-weight:500;line-height:1.4}h3{font-size:var(--text-md);font-weight:500;line-height:1.4}h4{font-size:var(--text-base);font-weight:500}p{line-height:1.7}code,pre{font-family:var(--font-mono);font-size:var(--text-sm)}pre{background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4);overflow-x:auto}.app-layout{min-height:100vh;display:flex}.app-main{min-width:0;padding:var(--space-6);flex:1;overflow-y:auto}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-sm{font-size:var(--text-sm)}.text-xs{font-size:var(--text-xs)}.font-medium{font-weight:500}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sidebar{width:var(--sidebar-width);background:var(--bg-surface);border-right:1px solid var(--border-subtle);flex-direction:column;flex-shrink:0;height:100vh;display:flex;position:sticky;top:0}.sidebar-logo{align-items:center;gap:var(--space-2);padding:var(--space-5) var(--space-4);font-size:var(--text-md);color:var(--text-primary);border-bottom:1px solid var(--border-subtle);font-weight:500;display:flex}.sidebar-nav{padding:var(--space-2) 0;flex:1;overflow-y:auto}.nav-section-label{padding:var(--space-4) var(--space-4) var(--space-1);font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;font-weight:500}.nav-item{align-items:center;gap:var(--space-2);padding:7px var(--space-4);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);-webkit-user-select:none;user-select:none;display:flex}.nav-item:hover{background:var(--bg-subtle);color:var(--text-primary)}.nav-item.active{background:var(--bg-subtle);color:var(--text-primary);font-weight:500}.nav-item svg,.nav-item i{opacity:.7;flex-shrink:0;width:16px;height:16px}.nav-item.active svg,.nav-item.active i{opacity:1}.sidebar-footer{padding:var(--space-4);border-top:1px solid var(--border-subtle)}.user-pill{align-items:center;gap:var(--space-2);display:flex}.user-pill-info{flex:1;min-width:0}.user-pill-name{font-size:var(--text-sm);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.user-pill-role{font-size:var(--text-xs);color:var(--text-tertiary)}.avatar{border-radius:var(--radius-full);width:30px;height:30px;font-size:var(--text-xs);flex-shrink:0;justify-content:center;align-items:center;font-weight:500;display:flex}.avatar-sm{width:24px;height:24px;font-size:10px}.avatar-lg{width:40px;height:40px;font-size:var(--text-sm)}.avatar-superuser{background:var(--role-superuser-bg);color:var(--role-superuser-text)}.avatar-manager{background:var(--role-manager-bg);color:var(--role-manager-text)}.avatar-user{background:var(--role-user-bg);color:var(--role-user-text)}.page-header{margin-bottom:var(--space-6);justify-content:space-between;align-items:center;display:flex}.page-header-left{align-items:center;gap:var(--space-3);display:flex}.page-title{font-size:var(--text-lg);color:var(--text-primary);font-weight:500}.badge{font-size:var(--text-xs);border-radius:var(--radius-sm);white-space:nowrap;align-items:center;padding:3px 8px;font-weight:500;display:inline-flex}.badge-superuser{background:var(--role-superuser-bg);color:var(--role-superuser-text)}.badge-manager{background:var(--role-manager-bg);color:var(--role-manager-text)}.badge-user{background:var(--role-user-bg);color:var(--role-user-text)}.badge-active{background:var(--status-active-bg);color:var(--status-active-text)}.badge-inactive{background:var(--status-inactive-bg);color:var(--status-inactive-text)}.badge-error{background:var(--status-error-bg);color:var(--status-error-text)}.badge-warn{background:var(--status-warn-bg);color:var(--status-warn-text)}.metrics-grid{gap:var(--space-3);margin-bottom:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));display:grid}.metric-card{background:var(--bg-subtle);border-radius:var(--radius-md);padding:var(--space-4)}.metric-label{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:var(--space-1)}.metric-value{color:var(--text-primary);font-size:22px;font-weight:500;line-height:1.2}.metric-sub{font-size:var(--text-xs);color:var(--text-tertiary);margin-top:3px}.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5)}.card-title{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-3);font-weight:500}.row{align-items:center;gap:var(--space-3);border-bottom:1px solid var(--border-subtle);font-size:var(--text-sm);padding:7px 0;display:flex}.row:last-child{border-bottom:none;padding-bottom:0}.row-name{color:var(--text-primary);flex:1;font-weight:500}.row-meta{font-size:var(--text-xs);color:var(--text-secondary)}.log-row{align-items:flex-start;gap:var(--space-2);border-bottom:1px solid var(--border-subtle);font-size:var(--text-sm);padding:6px 0;display:flex}.log-row:last-child{border-bottom:none}.log-dot{border-radius:var(--radius-full);flex-shrink:0;width:6px;height:6px;margin-top:6px}.log-dot-ok{background:var(--dot-ok)}.log-dot-warn{background:var(--dot-warn)}.log-dot-err{background:var(--dot-err)}.log-time{font-size:var(--text-xs);color:var(--text-tertiary);white-space:nowrap;flex-shrink:0;width:52px;padding-top:1px}.log-msg{color:var(--text-secondary);flex:1;line-height:1.5}.btn{align-items:center;gap:var(--space-2);padding:7px var(--space-4);font-size:var(--text-sm);border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none;font-weight:500;display:inline-flex}.btn:hover{background:var(--bg-subtle);border-color:var(--border-strong)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:var(--purple-600);border-color:var(--purple-600);color:var(--text-inverse)}.btn-primary:hover{background:var(--purple-800);border-color:var(--purple-800)}.btn-danger{background:var(--red-50);border-color:var(--red-400);color:var(--red-800)}.btn-danger:hover{background:var(--red-400);color:var(--text-inverse)}.btn-sm{padding:4px var(--space-3);font-size:var(--text-xs)}.btn-logout{cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;padding:0;display:flex}.btn-logout:hover i{color:var(--text-primary)!important}.field{gap:var(--space-1);margin-bottom:var(--space-4);flex-direction:column;display:flex}.field label{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}.field input,.field select,.field textarea{padding:8px var(--space-3);font-size:var(--text-sm);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none}.field input:hover,.field select:hover{border-color:var(--border-strong)}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple-400);box-shadow:0 0 0 3px var(--purple-50)}.field-error{font-size:var(--text-xs);color:var(--red-400);margin-top:var(--space-1)}.form-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-8);width:100%;max-width:400px}.form-card h2{margin-bottom:var(--space-6)}.login-wrapper{background:var(--bg-page);min-height:100vh;padding:var(--space-4);justify-content:center;align-items:center;display:flex}.login-wrapper .form-card h2{margin-bottom:var(--space-2)}.token-reveal{background:var(--amber-50);border:1px solid var(--amber-400);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-4)}.token-reveal-warning{font-size:var(--text-sm);color:var(--amber-800);margin-bottom:var(--space-3);font-weight:500}.token-box{align-items:center;gap:var(--space-2);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);display:flex}.token-box code{font-size:var(--text-xs);color:var(--text-primary);word-break:break-all;flex:1}.state-loading,.state-empty,.state-error{padding:var(--space-10);font-size:var(--text-sm);color:var(--text-tertiary);justify-content:center;align-items:center;display:flex}.state-error{color:var(--red-400)}.two-col{gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid}.pager{justify-content:center;align-items:center;gap:var(--space-3);margin-top:var(--space-4);display:flex}.pager:empty{display:none}.pager button[disabled]{opacity:.5;cursor:not-allowed}.filters-bar{gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;align-items:center;display:flex}.filter-search{min-width:160px;padding:6px var(--space-3);font-size:var(--text-sm);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);outline:none;flex:1;font-family:inherit}.filter-search:focus{border-color:var(--purple-400);box-shadow:0 0 0 3px var(--purple-50)}.filters-actions{gap:var(--space-2);display:flex}.log-detail-row{padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle)}.log-detail-row:last-child{border-bottom:none;padding-bottom:0}.log-row-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-1);flex-wrap:wrap;display:flex}.log-row-message{font-size:var(--text-sm);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:500;overflow:hidden}.log-row-time{white-space:nowrap;flex-shrink:0;margin-left:auto}.log-row-meta{gap:var(--space-4);flex-wrap:wrap;padding-left:2px;display:flex}.log-row-meta .row-meta{font-size:var(--text-xs)}.log-pager{justify-content:center;align-items:center;gap:var(--space-3);margin-top:var(--space-4);display:flex}.log-pager:empty{display:none}.log-pager button[disabled]{opacity:.5;cursor:not-allowed}.modal-backdrop{z-index:100;background:#2c2c2a66;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-box{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-6);width:100%;max-width:420px;margin:var(--space-4)}.modal-header{margin-bottom:var(--space-5);justify-content:space-between;align-items:center;display:flex}.modal-header h3{font-size:var(--text-md);color:var(--text-primary);font-weight:500}.filter-select{padding:6px var(--space-3);font-size:var(--text-sm);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);outline:none;font-family:inherit}.filter-select:focus{border-color:var(--purple-400);box-shadow:0 0 0 3px var(--purple-50)}.toast-container{bottom:var(--space-6);right:var(--space-6);gap:var(--space-2);z-index:999;pointer-events:none;flex-direction:column;display:flex;position:fixed}.toast{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);pointer-events:all;opacity:0;border:1px solid;min-width:260px;max-width:360px;transition:opacity .18s,transform .18s;display:flex;position:relative;overflow:hidden;transform:translateY(6px)}.toast.visible{opacity:1;transform:translateY(0)}.toast.hiding{opacity:0;transform:translateY(6px)}.toast-success{background:var(--status-active-bg);border-color:var(--green-400)}.toast-error{background:var(--status-error-bg);border-color:var(--red-400)}.toast-warn{background:var(--status-warn-bg);border-color:var(--amber-400)}.toast-info{background:var(--role-superuser-bg);border-color:var(--purple-400)}.toast-icon{font-size:var(--text-base);flex-shrink:0;margin-top:1px;font-style:normal}.toast-success .toast-icon{color:var(--green-800)}.toast-error .toast-icon{color:var(--red-800)}.toast-warn .toast-icon{color:var(--amber-800)}.toast-info .toast-icon{color:var(--purple-800)}.toast-body{flex:1;min-width:0}.toast-title{font-size:var(--text-sm);font-weight:500;line-height:1.4}.toast-success .toast-title{color:var(--green-800)}.toast-error .toast-title{color:var(--red-800)}.toast-warn .toast-title{color:var(--amber-800)}.toast-info .toast-title{color:var(--purple-800)}.toast-msg{font-size:var(--text-xs);margin-top:2px;line-height:1.5}.toast-success .toast-msg{color:var(--green-400)}.toast-error .toast-msg{color:var(--red-400)}.toast-warn .toast-msg{color:var(--amber-400)}.toast-info .toast-msg{color:var(--purple-600)}.toast-close{font-size:var(--text-sm);cursor:pointer;opacity:.5;transition:opacity var(--transition-fast);background:0 0;border:none;flex-shrink:0;margin-top:1px;padding:0;line-height:1}.toast-close:hover{opacity:1}.toast-success .toast-close{color:var(--green-800)}.toast-error .toast-close{color:var(--red-800)}.toast-warn .toast-close{color:var(--amber-800)}.toast-info .toast-close{color:var(--purple-800)}.toast-progress{border-radius:0;width:100%;height:2px;transition:width 4s linear;position:absolute;bottom:0;left:0;right:0}.toast-success .toast-progress{background:var(--green-400)}.toast-error .toast-progress{background:var(--red-400)}.toast-warn .toast-progress{background:var(--amber-400)}.toast-info .toast-progress{background:var(--purple-400)}