*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--nav-width: 200px;--state-panel-width: 300px;--header-height: 48px;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;--color-bg: #f8f9fa;--color-surface: #ffffff;--color-border: #e2e8f0;--color-text: #1a202c;--color-text-secondary: #64748b;--color-text-muted: #94a3b8;--color-accent: #3b82f6;--color-accent-light: #eff6ff;--color-accent-dark: #1d4ed8;--color-success: #22c55e;--color-success-light: #f0fdf4;--color-warning: #f59e0b;--color-warning-light: #fffbeb;--color-error: #ef4444;--color-error-light: #fef2f2;--color-info: #3b82f6;--color-info-light: #eff6ff}body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);line-height:1.5;-webkit-font-smoothing:antialiased}.demo-layout{display:grid;grid-template-columns:var(--nav-width) 1fr var(--state-panel-width);grid-template-rows:var(--header-height) 1fr;height:100vh;overflow:hidden}.demo-header{grid-column:1 / -1;display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:10}.demo-header__title{font-size:15px;font-weight:700;letter-spacing:-.02em}.demo-header__version{font-size:11px;font-weight:500;color:var(--color-accent);background:var(--color-accent-light);padding:2px 8px;border-radius:10px}.demo-header__separator{flex:1}.demo-header__status{display:flex;gap:12px;font-size:11px;font-family:var(--font-mono);color:var(--color-text-secondary)}.demo-nav{background:var(--color-surface);border-right:1px solid var(--color-border);padding:12px 0;overflow-y:auto}.demo-nav__section{padding:0 12px;margin-bottom:4px}.demo-nav__section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);padding:8px 8px 4px}.demo-nav__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:none;border-radius:6px;background:transparent;color:var(--color-text-secondary);font-size:13px;font-family:var(--font-sans);cursor:pointer;text-align:left;transition:all .15s}.demo-nav__item:hover{background:var(--color-bg);color:var(--color-text)}.demo-nav__item--active{background:var(--color-accent-light);color:var(--color-accent-dark);font-weight:600}.demo-nav__icon{width:18px;text-align:center;font-size:14px;flex-shrink:0}.demo-content{overflow-y:auto;padding:24px 32px}.demo-content__header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--color-border)}.demo-content__title{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}.demo-content__subtitle{font-size:13px;color:var(--color-text-secondary)}.feature-section{margin-bottom:24px}.feature-section__title{font-size:14px;font-weight:600;margin-bottom:8px;color:var(--color-text)}.feature-section__desc{font-size:13px;color:var(--color-text-secondary);margin-bottom:12px;line-height:1.6}.feature-section__actions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);font-size:13px;font-family:var(--font-sans);cursor:pointer;transition:all .15s;white-space:nowrap}.btn:hover{background:var(--color-bg);border-color:#cbd5e1}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn--primary:hover{background:var(--color-accent-dark)}.btn--danger{color:var(--color-error);border-color:#fca5a5}.btn--danger:hover{background:var(--color-error-light)}.btn--success{color:#16a34a;border-color:#86efac}.btn--success:hover{background:var(--color-success-light)}.btn--warning{color:#d97706;border-color:#fcd34d}.btn--warning:hover{background:var(--color-warning-light)}.btn--small{padding:3px 10px;font-size:12px}.code-block{background:#1e293b;color:#e2e8f0;padding:12px 16px;border-radius:8px;font-size:12px;font-family:var(--font-mono);line-height:1.6;overflow-x:auto;margin-bottom:12px}.code-inline{background:var(--color-bg);color:var(--color-accent-dark);padding:1px 6px;border-radius:4px;font-size:12px;font-family:var(--font-mono)}.info-card{padding:12px 16px;border-radius:8px;font-size:13px;line-height:1.6;margin-bottom:12px}.info-card--blue{background:var(--color-info-light);border:1px solid #bfdbfe;color:#1e40af}.info-card--green{background:var(--color-success-light);border:1px solid #bbf7d0;color:#166534}.info-card--yellow{background:var(--color-warning-light);border:1px solid #fde68a;color:#92400e}.info-card--red{background:var(--color-error-light);border:1px solid #fecaca;color:#991b1b}.result-display{padding:8px 12px;border-radius:6px;background:var(--color-bg);font-size:12px;font-family:var(--font-mono);color:var(--color-text-secondary)}.state-panel{background:var(--color-surface);border-left:1px solid var(--color-border);overflow-y:auto;padding:0}.state-panel__section{padding:12px 16px;border-bottom:1px solid var(--color-border)}.state-panel__title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:8px}.state-panel__row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:12px}.state-panel__label{color:var(--color-text-secondary)}.state-panel__value{font-family:var(--font-mono);font-weight:500;font-size:12px}.state-panel__value--accent{color:var(--color-accent)}.state-panel__value--success{color:var(--color-success)}.state-panel__value--error{color:var(--color-error)}.state-panel__value--warning{color:var(--color-warning)}.event-item{padding:4px 8px;margin-bottom:2px;border-radius:4px;font-size:11px;font-family:var(--font-mono);background:var(--color-bg)}.event-item__type{font-weight:600}.event-item__type--page{color:var(--color-accent)}.event-item__type--modal{color:#7c3aed}.event-item__type--drawer{color:#0891b2}.event-item__type--notification{color:var(--color-success)}.event-item__type--form{color:#ea580c}.event-item__type--async{color:#d946ef}.event-item__type--governance{color:var(--color-error)}.event-item__meta{color:var(--color-text-muted);font-size:10px}.status-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}.status-tag--active{background:var(--color-success-light);color:#16a34a}.status-tag--idle{background:var(--color-bg);color:var(--color-text-muted)}.status-tag--loading{background:var(--color-warning-light);color:#d97706}.status-tag--error,.status-tag--locked{background:var(--color-error-light);color:var(--color-error)}.modal-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{background:var(--color-surface);border-radius:12px;padding:24px;width:380px;box-shadow:0 20px 60px #00000026}.modal-content h3{font-size:16px;font-weight:600;margin-bottom:8px}.modal-content p{font-size:13px;color:var(--color-text-secondary);margin-bottom:20px}.modal-actions{display:flex;gap:8px;justify-content:flex-end}.data-row{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;margin-bottom:2px;border-radius:4px;font-size:12px;background:var(--color-bg)}.data-row__label{font-weight:500}.data-row__close{border:none;background:transparent;cursor:pointer;color:var(--color-text-muted);font-size:14px;padding:0 4px;border-radius:4px}.data-row__close:hover{color:var(--color-error);background:var(--color-error-light)}.notif-card{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;margin-bottom:3px;border-radius:6px;font-size:12px;border-left:3px solid}.notif-card--info{background:var(--color-info-light);border-left-color:var(--color-info);color:#1e40af}.notif-card--success{background:var(--color-success-light);border-left-color:var(--color-success);color:#166534}.notif-card--warning{background:var(--color-warning-light);border-left-color:var(--color-warning);color:#92400e}.notif-card--error{background:var(--color-error-light);border-left-color:var(--color-error);color:#991b1b}.field-card{padding:6px 10px;margin-bottom:2px;border-radius:4px;font-size:12px;font-family:var(--font-mono)}.field-card--clean{background:var(--color-bg)}.field-card--dirty{background:var(--color-info-light)}.field-card--error{background:var(--color-error-light)}.audit-entry{padding:4px 8px;margin-bottom:2px;border-radius:4px;font-size:11px;font-family:var(--font-mono);border-left:3px solid}.audit-entry--allow{background:var(--color-success-light);border-left-color:var(--color-success)}.audit-entry--deny{background:var(--color-error-light);border-left-color:var(--color-error)}.devtools-fab{position:fixed;bottom:16px;right:16px;z-index:9999;width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-size:18px;cursor:pointer;box-shadow:0 2px 12px #0000001f;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:var(--font-sans)}.devtools-fab:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent);box-shadow:0 4px 16px #3b82f64d}.devtools-panel{position:fixed;bottom:0;left:0;right:0;z-index:9998;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -4px 24px #0000001a;display:flex;flex-direction:column}.devtools-panel__resize{height:4px;cursor:ns-resize;background:transparent;flex-shrink:0}.devtools-panel__resize:hover{background:var(--color-accent-light)}.devtools-panel__header{display:flex;align-items:center;gap:0;height:34px;border-bottom:1px solid var(--color-border);flex-shrink:0;background:var(--color-bg)}.devtools-panel__title{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--color-accent);padding:0 14px;white-space:nowrap}.devtools-panel__tabs{display:flex;gap:0;flex:1;overflow-x:auto}.devtools-tab{padding:0 14px;height:34px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--color-text-secondary);font-size:12px;font-family:var(--font-sans);font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s}.devtools-tab:hover{color:var(--color-text);background:var(--color-surface)}.devtools-tab--active{color:var(--color-accent);border-bottom-color:var(--color-accent);background:var(--color-surface)}.devtools-panel__close{width:34px;height:34px;border:none;background:transparent;color:var(--color-text-muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.devtools-panel__close:hover{color:var(--color-error);background:var(--color-error-light)}.devtools-panel__body{flex:1;overflow:hidden}.devtools-tab-content{display:flex;flex-direction:column;height:100%}.devtools-toolbar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--color-border);flex-shrink:0;background:var(--color-bg)}.devtools-toolbar__info{font-size:11px;color:var(--color-text-muted);font-weight:500;margin-right:auto}.devtools-toolbar__btn{padding:2px 10px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text-secondary);font-size:11px;font-family:var(--font-sans);cursor:pointer;transition:all .15s}.devtools-toolbar__btn:hover{background:var(--color-bg);color:var(--color-text)}.devtools-toolbar__btn--danger{color:var(--color-error)}.devtools-toolbar__btn--danger:hover{background:var(--color-error-light)}.devtools-scroll{flex:1;overflow-y:auto;padding:4px 0}.devtools-empty{padding:24px;text-align:center;font-size:12px;color:var(--color-text-muted)}.devtools-row{display:flex;justify-content:space-between;align-items:center;padding:3px 12px;font-size:11px;font-family:var(--font-mono);border-bottom:1px solid #f1f5f9}.devtools-row:hover{background:var(--color-bg)}.devtools-row__type{font-weight:600;color:var(--color-text)}.devtools-row__meta{color:var(--color-text-muted);font-size:10px;display:flex;align-items:center;gap:6px}.devtools-row__version{color:var(--color-accent)}.devtools-row__hash{background:var(--color-bg);padding:0 4px;border-radius:3px;font-size:10px}.devtools-state-row{display:flex;align-items:center;gap:6px;padding:2px 12px;font-size:11px;font-family:var(--font-mono);border-bottom:1px solid #f8fafc;-webkit-user-select:none;user-select:none}.devtools-state-row--expandable{cursor:pointer}.devtools-state-row--expandable:hover{background:var(--color-bg)}.devtools-state-row__arrow{width:10px;font-size:9px;color:var(--color-text-muted);flex-shrink:0}.devtools-state-row__key{color:#7c3aed;font-weight:500}.devtools-state-row__value{color:var(--color-text-secondary);margin-left:auto;text-align:right;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devtools-metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 12px}.devtools-metric{padding:8px 10px;background:var(--color-bg);border-radius:6px;text-align:center}.devtools-metric__value{font-size:16px;font-weight:700;font-family:var(--font-mono);color:var(--color-text)}.devtools-metric__label{font-size:10px;color:var(--color-text-muted);margin-top:2px}.devtools-section-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);padding:8px 12px 4px}.devtools-agent-actions{display:flex;gap:6px;padding:4px 12px 8px;flex-wrap:wrap}.devtools-code{margin:4px 12px 12px;background:#1e293b;color:#e2e8f0;padding:10px 14px;border-radius:6px;font-size:11px;font-family:var(--font-mono);line-height:1.6;overflow-x:auto;white-space:pre}