:root{--bg:#f4f6fb;--surface:#fff;--surface-2:#f0f2f8;--border:#e2e6f0;--text:#111827;--muted:#6b7280;--accent:#6c63ff;--accent-hover:#5a52e0;--green:#16a34a;--red:#dc2626;--yellow:#ca8a04;--blue:#2563eb}:root.dark{--bg:#0f1117;--surface:#1a1d27;--surface-2:#22263a;--border:#2e3350;--text:#e8eaf2;--muted:#7c84a3;--accent:#6c63ff;--accent-hover:#5a52e0;--green:#22c55e;--red:#ef4444;--yellow:#eab308;--blue:#3b82f6}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.6}:root{--sidebar-w:240px;--sidebar-w-collapsed:72px}.app-shell{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);z-index:30;flex-direction:column;height:100vh;padding:24px 0 0;transition:width .2s,transform .25s;display:flex;position:fixed;top:0;bottom:0;left:0;overflow:hidden}.sidebar.collapsed{width:var(--sidebar-w-collapsed)}.sidebar-logo{color:var(--text);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;padding:0 16px 24px;font-size:18px;font-weight:700;display:flex}.sidebar-logo-brand{align-items:center;gap:10px;display:flex;overflow:hidden}.sidebar-logo-brand span{color:var(--accent)}.sidebar.collapsed .sidebar-logo{justify-content:center;padding:0 0 24px}.sidebar.collapsed .sidebar-logo-label{display:none}.sidebar-collapse-toggle{cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.sidebar-collapse-toggle:hover{background:var(--surface-2);color:var(--text)}.sidebar-nav{flex:auto;min-height:0;overflow-y:auto}.sidebar.collapsed .nav-section{display:none}.sidebar.collapsed .nav-item{justify-content:center;padding:10px 0}.sidebar.collapsed .nav-label{display:none}.user-menu{flex-shrink:0;padding:12px;position:relative}.user-menu-trigger{width:100%;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:10px;align-items:center;gap:10px;padding:8px 10px;transition:background .15s;display:flex}.user-menu-trigger:hover{background:var(--surface-2)}.user-menu-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.user-menu-avatar{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:15px;font-weight:700;display:flex}.user-menu-name{text-align:left;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;font-weight:500;line-height:1.3;overflow:hidden}.user-menu-chevron{color:var(--muted);flex-shrink:0}.user-menu-dropdown{background:var(--surface);border:1px solid var(--border);z-index:100;border-radius:12px;animation:.15s user-menu-in;position:absolute;bottom:calc(100% + 4px);left:0;right:0;overflow:hidden;box-shadow:0 12px 32px -8px #1118272e,0 4px 12px #1118270f}.user-menu-dropdown.is-narrow{width:240px;margin-left:8px;bottom:0;left:100%;right:auto}@keyframes user-menu-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.user-menu-header{border-bottom:1px solid var(--border);padding:12px 14px 10px}.user-menu-header-name{font-size:13px;font-weight:600;line-height:1.3}.user-menu-header-email{color:var(--muted);margin-top:2px;font-size:11.5px;line-height:1.3}.user-menu-body{padding:6px}.user-menu-item{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;padding:9px 8px;font-size:13px;line-height:1.3;text-decoration:none;transition:background .15s;display:flex}.user-menu-item:hover{background:var(--surface-2)}.user-menu-item:focus-visible{box-shadow:inset 0 0 0 1.5px var(--accent);outline:none}.user-menu-item svg{flex-shrink:0}.user-menu-item.danger{color:var(--red)}.user-menu-divider{border-top:1px solid var(--border);margin:6px 0}.sidebar-overlay{z-index:25;background:#0f111773;display:none;position:fixed;inset:0}.mobile-hamburger{z-index:20;background:var(--surface);border:1px solid var(--border);cursor:pointer;width:40px;height:40px;color:var(--text);border-radius:10px;justify-content:center;align-items:center;display:none;position:fixed;top:16px;left:16px;box-shadow:0 2px 8px #00000014}@media (max-width:1024px){.sidebar{transform:translate(-100%);width:var(--sidebar-w)!important}.sidebar.mobile-open{transform:translate(0)}.sidebar.collapsed .sidebar-logo{justify-content:space-between;padding:0 16px 24px}.sidebar.collapsed .sidebar-logo-label,.sidebar.collapsed .nav-section{display:block}.sidebar.collapsed .nav-item{justify-content:flex-start;padding:10px 20px}.sidebar.collapsed .nav-label{display:inline}.sidebar-collapse-toggle{display:none}.main{margin-left:0!important}.mobile-hamburger{display:flex}.sidebar-overlay{display:block}}.nav-item{color:var(--muted);align-items:center;gap:10px;padding:10px 20px;font-size:13.5px;text-decoration:none;transition:all .15s;display:flex}.nav-item:hover{background:var(--surface-2);color:var(--text)}.nav-item.active{color:var(--text);background:var(--surface-2);border-left:2px solid var(--accent);padding-left:18px}.nav-item svg{flex-shrink:0;width:16px;height:16px}.nav-section{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:16px 20px 6px;font-size:11px}.main{margin-left:var(--sidebar-w);flex:1;min-height:100vh;transition:margin-left .2s}.app-shell.sidebar-collapsed .main{margin-left:var(--sidebar-w-collapsed)}.page-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:28px;padding:28px 32px 0;display:flex}.page-title{font-size:22px;font-weight:700}.page-subtitle{color:var(--muted);margin-top:2px;font-size:13px}.page-body{padding:0 32px 40px}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px}.card-sm{padding:16px}.stats-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;display:grid}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 24px}.stat-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-size:12px}.stat-value{font-size:28px;font-weight:700}.stat-sub{color:var(--muted);margin-top:4px;font-size:12px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%}th{text-align:left;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border);padding:10px 16px;font-size:11px}td{border-bottom:1px solid var(--border);vertical-align:middle;padding:14px 16px}tr:last-child td{border-bottom:none}tr:hover td{background:#ffffff05}.form-grid{gap:20px;display:grid}.form-grid-2{grid-template-columns:1fr 1fr}.field{flex-direction:column;gap:6px;display:flex}.field label{color:var(--muted);font-size:12.5px;font-weight:500}.input,.select,.textarea{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:8px;outline:none;width:100%;padding:10px 14px;font-size:14px;transition:border-color .15s}.input:focus,.select:focus,.textarea:focus{border-color:var(--accent)}.input::placeholder{color:var(--muted)}.textarea{resize:vertical;min-height:100px;font-family:inherit}.select{cursor:pointer}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:8px;align-items:center;gap:8px;padding:9px 18px;font-size:13.5px;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-ghost{color:var(--muted);border:1px solid var(--border);background:0 0}.btn-ghost:hover{background:var(--surface-2);color:var(--text)}.btn-danger{color:var(--red);background:#ef44441a;border:1px solid #ef44444d}.btn-danger:hover{background:#ef444433}.btn-sm{padding:6px 12px;font-size:12.5px}.badge{border-radius:20px;align-items:center;gap:5px;padding:3px 10px;font-size:11.5px;font-weight:500;display:inline-flex}.badge-green{color:var(--green);background:#22c55e1a}.badge-red{color:var(--red);background:#ef44441a}.badge-yellow{color:var(--yellow);background:#eab3081a}.badge-blue{color:var(--blue);background:#3b82f61a}.badge-purple{color:var(--accent);background:#6c63ff1a}.badge-gray{color:var(--muted);background:#7c84a31a}.alert{border-radius:8px;padding:12px 16px;font-size:13.5px}.alert-error{color:var(--red);background:#ef444414;border:1px solid #ef444433}.alert-success{color:var(--green);background:#22c55e14;border:1px solid #22c55e33}.alert-info{color:var(--blue);background:#3b82f614;border:1px solid #3b82f633}.dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;display:inline-block}.dot-green{background:var(--green)}.dot-red{background:var(--red)}.dot-yellow{background:var(--yellow);animation:2s infinite pulse}.dot-gray{background:var(--muted)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.divider{border:none;border-top:1px solid var(--border);margin:24px 0}.empty-state{text-align:center;color:var(--muted);padding:60px 24px}.empty-state h3{color:var(--text);margin-bottom:8px;font-size:16px}.mono{font-family:JetBrains Mono,Fira Code,monospace;font-size:12.5px}.auth-page{background:#f5f7fb;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{background:var(--surface);border-radius:24px;flex-direction:column;align-items:center;width:100%;max-width:420px;padding:48px 44px 40px;display:flex;box-shadow:0 1px 2px #11182708,0 24px 48px -12px #1118271a}.auth-logo{justify-content:center;margin-bottom:28px;display:flex}.auth-title{letter-spacing:-.02em;text-align:center;margin-bottom:8px;font-size:32px;font-weight:700}.auth-subtitle{color:var(--muted);text-align:center;margin-bottom:36px;font-size:14px}.auth-card .form-grid{gap:22px;width:100%}.auth-card .field{text-align:left}.auth-card .input{border-radius:12px;height:50px;font-size:14.5px;transition:border-color .15s,box-shadow .15s}.auth-card .input:focus{border-color:var(--accent);box-shadow:0 0 0 4px #6c63ff1f}.auth-card .btn-primary{background:linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);height:50px;margin-top:4px;font-size:15px;font-weight:600;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:0 1px 2px #6c63ff1a,0 8px 16px -6px #6c63ff59}.auth-card .btn-primary:hover{transform:translateY(-1px);box-shadow:0 2px 4px #6c63ff26,0 12px 20px -6px #6c63ff73}.auth-card .btn-primary:active{transform:translateY(0)}@media (max-width:480px){.auth-card{border-radius:20px;padding:36px 24px 32px}.auth-title{font-size:26px}}.guide-layout{grid-template-columns:1fr 1fr;align-items:start;gap:24px;padding:0 32px 40px;display:grid}@media (max-width:1024px){.guide-layout{grid-template-columns:1fr;padding:0 20px 32px}}.guide-panel{background:var(--surface-2);max-height:calc(100vh - 120px);position:sticky;top:24px;overflow-y:auto}@media (max-width:1024px){.guide-panel{max-height:none;position:static}}.guide-panel--inline{max-height:none;margin-bottom:20px;position:static}.guide-panel-title{color:var(--text);align-items:center;gap:8px;margin-bottom:18px;font-size:13px;font-weight:700;display:flex}.guide-panel-description{color:var(--muted);margin-bottom:18px;font-size:12.5px;line-height:1.5}.guide-steps{flex-direction:column;display:flex}.guide-step{gap:12px;padding-bottom:18px;display:flex;position:relative}.guide-step:last-child{padding-bottom:0}.guide-step-line{background:var(--border);width:2px;position:absolute;top:24px;bottom:0;left:11px}.guide-step-number{background:var(--accent);color:#fff;z-index:1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;min-width:24px;height:24px;font-size:11px;font-weight:700;display:flex}.guide-step-body{flex:1;padding-top:2px}.guide-step-text{color:var(--text);font-size:13px;line-height:1.6}.guide-step-link{color:#fff;background:var(--accent);border-radius:6px;align-items:center;gap:6px;margin-top:8px;padding:5px 12px;font-size:12px;font-weight:600;text-decoration:none;display:inline-flex}.guide-step-warning{color:var(--yellow);background:#eab3081a;border:1px solid #eab3084d;border-radius:6px;gap:8px;margin-top:8px;padding:8px 10px;font-size:12px;line-height:1.5;display:flex}.guide-copy{background:var(--bg);border:1px solid var(--border);border-radius:6px;align-items:center;gap:8px;margin-top:6px;padding:6px 10px;display:flex}.guide-copy code{color:var(--accent);word-break:break-all;flex:1;font-size:12px}.guide-copy button{background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:4px;padding:3px 10px;font-size:11px;font-weight:600}.guide-copy button.copied{background:var(--green)}