:root{--color-bg: #0f1419;--color-surface: #1a2332;--color-surface-alt: #212d3b;--color-border: #2a3a4a;--color-text: #e0e6ed;--color-text-muted: #8899a6;--color-primary: #1a56db;--color-primary-hover: #1e63f0;--color-success: #22c55e;--color-warning: #f59e0b;--color-error: #ef4444;--sidebar-width: 240px;--topbar-height: 56px;--radius: 8px;--radius-sm: 4px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.5;-webkit-font-smoothing:antialiased}.app-shell{display:flex;min-height:100vh}.landing{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}.landing h1{font-size:2rem;font-weight:700}.landing p{color:var(--color-text-muted);max-width:480px}.landing-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:16px}.dev-notice{text-align:center}.dev-notice p{margin-bottom:8px;font-size:.875rem}.app-header{position:fixed;top:0;left:0;right:0;height:var(--topbar-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:10}.header-brand{display:flex;align-items:center;gap:8px}.brand-icon{font-size:1.25rem}.brand-title{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}.header-version{color:var(--color-text-muted);font-size:.75rem}.sidebar{width:var(--sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:5}.sidebar-brand{height:var(--topbar-height);display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--color-border)}.sidebar-nav{flex:1;padding:8px;overflow-y:auto}.nav-item{display:block;width:100%;text-align:left;padding:10px 12px;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-muted);font-size:.875rem;cursor:pointer;transition:background .15s,color .15s}.nav-item:hover{background:var(--color-surface-alt);color:var(--color-text)}.nav-item.active{background:var(--color-primary);color:#fff}.nav-item.logout{color:var(--color-error)}.sidebar-footer{padding:8px;border-top:1px solid var(--color-border)}.main-area{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column;min-height:100vh}.topbar{height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--color-border);background:var(--color-surface)}.topbar-title{font-size:1.125rem;font-weight:600}.topbar-actions{display:flex;align-items:center;gap:12px}.loading-indicator{color:var(--color-text-muted);font-size:.75rem}.user-id{font-size:.75rem;color:var(--color-text-muted);font-family:monospace}.content{flex:1;padding:24px}.error-banner{background:#ef444426;border:1px solid var(--color-error);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;color:var(--color-error);font-size:.875rem}.error-banner button{background:none;border:none;color:var(--color-error);cursor:pointer;font-size:1.25rem}.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.kpi-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:4px}.kpi-value{font-size:2rem;font-weight:700;color:var(--color-primary)}.kpi-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px;margin-bottom:16px}.panel h3{font-size:1rem;font-weight:600;margin-bottom:12px}.help-text{font-size:.875rem;color:var(--color-text-muted);margin-bottom:12px}.data-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-table th{text-align:left;padding:8px 12px;border-bottom:2px solid var(--color-border);color:var(--color-text-muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}.data-table td{padding:10px 12px;border-bottom:1px solid var(--color-border)}.data-table .empty{text-align:center;color:var(--color-text-muted);padding:24px}.status-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.75rem;font-weight:600}.status-pending{background:#f59e0b26;color:var(--color-warning)}.status-created{background:#22c55e26;color:var(--color-success)}.status-failed{background:#ef444426;color:var(--color-error)}.form-row{display:flex;gap:8px;align-items:center}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:.875rem;color:var(--color-text-muted);margin-bottom:4px}.input{padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:.875rem;outline:none;transition:border-color .15s;min-width:180px}.input:focus{border-color:var(--color-primary)}.color-row{display:flex;gap:8px;align-items:center}.color-input{width:40px;height:36px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:none;cursor:pointer;padding:2px}.btn-primary{padding:8px 16px;border:none;border-radius:var(--radius-sm);background:var(--color-primary);color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .15s;white-space:nowrap}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{padding:8px 16px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-alt);color:var(--color-text);font-size:.875rem;cursor:pointer;transition:background .15s}.btn-secondary:hover{background:var(--color-border)}.empty-state{color:var(--color-text-muted);font-size:.875rem}.empty-state code{background:var(--color-bg);padding:2px 6px;border-radius:var(--radius-sm);font-family:monospace;font-size:.8125rem}@media(max-width:768px){.sidebar{display:none}.main-area{margin-left:0}.kpi-strip{grid-template-columns:repeat(2,1fr)}.form-row{flex-direction:column;align-items:stretch}.input{min-width:unset}}