*{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);font-size:var(--font-size-md);line-height:var(--line-height);color:var(--color-text);background:var(--color-bg)}.app{display:grid;grid-template-columns:var(--nav-width) 1fr;min-height:100vh}.nav{background:var(--color-surface);border-right:1px solid var(--color-border);padding:var(--space-lg) var(--space-md);display:flex;flex-direction:column;gap:var(--space-lg)}.nav__brand{font-size:var(--font-size-lg);font-weight:700;color:var(--color-text)}.nav__links{display:flex;flex-direction:column;gap:var(--space-xs)}.nav__link{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);color:var(--color-text-muted);text-decoration:none}.nav__link:hover{background:var(--color-surface-alt);color:var(--color-text)}.nav__link--active{background:var(--color-primary);color:var(--color-primary-contrast)}.nav__footer{margin-top:auto}.main{padding:var(--space-xl)}.view-title{font-size:var(--font-size-xl);margin:0 0 var(--space-md)}.view-note{color:var(--color-text-muted)}.theme-toggle{background:var(--color-surface-alt);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm);cursor:pointer}.theme-toggle:disabled{opacity:.6;cursor:default}.nav__status{display:block;color:var(--color-text-muted);font-size:var(--font-size-sm);padding:var(--space-xs) var(--space-sm)}.loop-list{list-style:none;padding:0;margin:var(--space-md) 0 0;display:flex;flex-direction:column;gap:var(--space-sm)}.loop-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md)}.loop-item__main{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);background:none;border:none;cursor:pointer;color:var(--color-text);text-align:left}.loop-item__type{font-weight:600}.loop-item__meta{color:var(--color-text-muted);font-size:var(--font-size-sm)}.loop-item__actions{display:flex;gap:var(--space-xs)}.loop-detail{margin-top:var(--space-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md)}.loop-detail__payload{background:var(--color-surface-alt);border-radius:var(--radius-sm);padding:var(--space-sm);overflow:auto;font-size:var(--font-size-sm)}.toasts{position:fixed;right:var(--space-lg);bottom:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);z-index:1000;max-width:360px}.toast{display:flex;align-items:center;gap:var(--space-sm);background:var(--color-surface);border:1px solid var(--color-border);border-left:3px solid var(--color-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--space-sm) var(--space-md)}.toast__body{display:flex;flex-direction:column;gap:var(--space-xs);flex:1}.toast__meta{color:var(--color-text-muted);font-size:var(--font-size-sm)}.toast__link{color:var(--color-primary);text-decoration:none;font-size:var(--font-size-sm)}.toast__close{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:var(--font-size-lg);line-height:1}:root,:root[data-theme=light]{--color-bg: #f7f8fa;--color-surface: #ffffff;--color-surface-alt: #eef1f5;--color-border: #d8dee6;--color-text: #1b2733;--color-text-muted: #5b6b7b;--color-primary: #2563eb;--color-primary-contrast: #ffffff;--color-danger: #d92d20;--color-warning: #b54708;--color-success: #067647;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-size-sm: 13px;--font-size-md: 15px;--font-size-lg: 20px;--font-size-xl: 28px;--line-height: 1.5;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);--shadow-md: 0 4px 12px rgba(16, 24, 40, .1);--nav-width: 240px}:root[data-theme=dark]{--color-bg: #0f141a;--color-surface: #161d26;--color-surface-alt: #1f2935;--color-border: #2c3a48;--color-text: #e7edf3;--color-text-muted: #9aaabb;--color-primary: #5b8def;--color-primary-contrast: #0f141a;--color-danger: #f97066;--color-warning: #f79009;--color-success: #47c781}