.page>.page-head,.search-bar{margin-bottom:var(--space-6)}.category-nav{gap:var(--space-2);margin-bottom:var(--space-6);flex-wrap:wrap;display:flex}.category-btn{font-weight:var(--font-medium);transition:all .2s}.filters-section{gap:var(--space-4);margin-bottom:var(--space-6);padding:var(--space-4);background:var(--glass-bg-light);border:1px solid var(--glass-border);border-radius:var(--radius-md);flex-wrap:wrap;display:flex}.goals-list{gap:var(--space-4);margin-top:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(400px,1fr));display:grid}.goal-card{padding:var(--space-4);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.goal-card:hover{box-shadow:var(--shadow-glass-hover), var(--shadow-lg);transform:translateY(-2px)}.tile-grid{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(320px,1fr));display:grid}.item-tile{cursor:pointer;background:var(--glass-bg-light);-webkit-backdrop-filter:blur(16px)saturate(180%);border:1px solid var(--glass-border);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.item-tile:before{content:"";background:var(--brand);height:3px;transition:transform .3s;position:absolute;top:0;left:0;right:0;transform:scaleX(0)}.item-tile:hover{transform:var(--lift-md,translateY(-4px));background:var(--glass-bg);border-color:var(--glass-border-bright);box-shadow:var(--shadow-glass), var(--shadow-lg)}.item-tile:hover:before{transform:scaleX(1)}.delete-btn{top:var(--space-2);left:var(--space-2);border-radius:var(--radius-full);background:var(--error);color:#fff;cursor:pointer;opacity:0;width:28px;height:28px;transition:all var(--duration-normal);z-index:10;border:none;justify-content:center;align-items:center;font-size:1.25rem;line-height:1;display:flex;position:absolute;transform:scale(.8)}.item-tile:hover .delete-btn{opacity:1;transform:scale(1)}.delete-btn:hover{background:var(--error-600,var(--error));transform:scale(1.1)}.delete-btn:active{transform:scale(.95)}.item-tile-header{align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);padding-right:80px;display:flex}.item-tile-icon{font-size:2rem;line-height:1}.item-tile-title{font-size:var(--font-size-lg);color:var(--text);flex:1;margin:0;font-weight:600}.badge-stack{top:var(--space-2);right:var(--space-2);align-items:flex-end;gap:var(--space-1);z-index:5;flex-direction:column;display:flex;position:absolute}.item-tile-type{background:var(--brand-600);color:#fff;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;font-size:.65rem;font-weight:600;line-height:1.2}.auto-badge{padding:2px 6px!important;font-size:.65rem!important;line-height:1.2!important}.item-tile-description{color:var(--muted);font-size:var(--font-size-sm);margin-bottom:var(--space-3);padding-right:80px;line-height:1.5}.item-tile-footer{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--glass-border);justify-content:space-between;align-items:center;display:flex}.item-tile-tags{gap:var(--space-2);flex-wrap:wrap;display:flex}.item-tag{font-size:var(--font-size-xs);padding:var(--space-px,2px) var(--space-2);background:var(--background-elevated);color:var(--muted);border-radius:var(--radius-sm);border:1px solid var(--border)}.item-tile-arrow{font-size:var(--font-size-lg);color:var(--brand);transition:transform .3s}.item-tile:hover .item-tile-arrow{transform:translate(4px)}.code-block{background:var(--background-elevated);padding:var(--space-3);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm);overflow:auto}.empty-state{text-align:center;padding:var(--space-8);color:var(--muted)}.empty-state-icon{margin-bottom:var(--space-4);opacity:.5;font-size:4rem}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px)saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);border-radius:12px}.glass-panel-light{background:var(--glass-bg-light);-webkit-backdrop-filter:blur(16px)saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);border-radius:12px}.glass-panel-hover:hover{background:var(--glass-bg);border-color:var(--glass-border-bright);box-shadow:var(--shadow-glass-hover), var(--shadow-lg);transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(-2px)}@media (width<=768px){.tile-grid{grid-template-columns:1fr}.category-nav{flex-direction:column}}.app-layout{flex-direction:column;min-height:100vh;display:flex}.app-nav{padding:var(--space-4) var(--space-6);background:var(--surface-raised);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.nav-brand{align-items:center;gap:var(--space-2);font-size:var(--font-size-lg);font-weight:600;display:flex}.nav-icon{font-size:var(--font-size-2xl)}.nav-title{color:var(--text)}.nav-links{gap:var(--space-2);display:flex}.nav-link{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);color:var(--text-muted);transition:all var(--duration-fast);font-weight:500;text-decoration:none}.nav-link:hover{background:var(--surface);color:var(--text)}.nav-link.active{background:var(--brand);color:#fff}.app-main{padding:var(--space-6);background:var(--surface);flex:1}.flow-diagram-page{gap:var(--space-4);flex-direction:column;height:calc(100vh - 140px);display:flex}.flow-diagram-header{text-align:center}.flow-diagram-header h1{font-size:var(--font-size-2xl);color:var(--text);margin:0}.flow-diagram-header .text-muted{margin:var(--space-2) 0 0;color:var(--text-muted)}.flow-diagram-controls{gap:var(--space-4);padding:var(--space-4);background:var(--surface-raised);border-radius:var(--radius-lg);border:1px solid var(--border);grid-template-columns:2fr 1fr 1fr;display:grid}@media (width<=1024px){.flow-diagram-controls{grid-template-columns:1fr}}.controls-section h3{margin:0 0 var(--space-3) 0;font-size:var(--font-size-md);color:var(--text)}.filter-checkboxes{gap:var(--space-2);flex-wrap:wrap;display:flex}.filter-checkbox{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast);display:flex}.filter-checkbox:hover{background:var(--surface-hover);border-color:var(--brand)}.filter-checkbox input[type=checkbox]{cursor:pointer}.filter-label{font-size:var(--font-size-sm);color:var(--text);-webkit-user-select:none;user-select:none}.filter-actions{gap:var(--space-2);margin-top:var(--space-3);display:flex}.filter-btn{padding:var(--space-2) var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--duration-fast)}.filter-btn:hover{background:var(--surface-hover);border-color:var(--brand)}.stats-row{gap:var(--space-2);display:flex}.interaction-help{font-size:var(--font-size-sm);color:var(--text-muted);margin:0;padding:0;list-style:none}.interaction-help li{padding:var(--space-1) 0}.flow-diagram-container{border-radius:var(--radius-lg);flex:1;min-height:500px;position:relative;overflow:hidden}.flow-diagram-canvas{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;height:100%;position:relative}.flow-diagram-canvas svg{cursor:grab;display:block}.flow-diagram-canvas svg:active{cursor:grabbing}.canvas-empty-state{text-align:center;color:var(--text-muted);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.graph-layer{transition:transform .2s ease-out}.link{stroke-opacity:.6;transition:stroke-opacity var(--duration-fast)}.link-dependency{stroke:#3b82f6}.link-workflow{stroke:#10b981}.link-trigger{stroke:#f59e0b}.link-category{stroke:#8b5cf6;stroke-dasharray:5 5}.node{transition:opacity var(--duration-fast)}.node circle{stroke:#fff;stroke-width:2px;cursor:pointer;transition:all var(--duration-fast)}.node:hover circle{filter:brightness(1.2);stroke-width:3px}.node-agent circle{fill:#3b82f6}.node-hook circle{fill:#10b981}.node-command circle{fill:#8b5cf6}.node-skill circle{fill:#f59e0b}.node-mcp circle{fill:#14b8a6}.node text{pointer-events:none;-webkit-user-select:none;user-select:none}.flow-diagram-legend{bottom:var(--space-4);right:var(--space-4);padding:var(--space-4);background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-md);border:1px solid var(--border);min-width:180px;box-shadow:var(--shadow-lg);position:absolute}.flow-diagram-legend h4{margin:0 0 var(--space-2) 0;font-size:var(--font-size-sm);color:var(--text);text-transform:uppercase;letter-spacing:.5px}.legend-items{gap:var(--space-2);flex-direction:column;display:flex}.legend-item{align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--text);display:flex}.legend-line{border-radius:1px;width:24px;height:2px}.legend-dependency{background:#3b82f6}.legend-workflow{background:#10b981}.legend-trigger{background:#f59e0b}.legend-category{background:#8b5cf6 repeating-linear-gradient(90deg,#8b5cf6,#8b5cf6 5px,#0000 5px 10px)}.legend-circle{border:2px solid #fff;border-radius:50%;width:16px;height:16px}.legend-agent{background:#3b82f6}.legend-hook{background:#10b981}.legend-command{background:#8b5cf6}.legend-skill{background:#f59e0b}.legend-mcp{background:#14b8a6}.legend-divider{background:var(--border);height:1px;margin:var(--space-3) 0}.node-details{gap:var(--space-4);flex-direction:column;display:flex}.node-meta{gap:var(--space-3);flex-wrap:wrap;display:flex}.node-type{padding:var(--space-1) var(--space-2);background:var(--brand);color:#fff;font-size:var(--font-size-xs);border-radius:var(--radius-sm);text-transform:uppercase;font-weight:600}.node-file{padding:var(--space-1) var(--space-2);background:var(--surface);color:var(--text-muted);font-size:var(--font-size-xs);border-radius:var(--radius-sm);font-family:monospace}.code-block{padding:var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);font-family:monospace;font-size:var(--font-size-sm);color:var(--text);line-height:1.6;overflow-x:auto}.tags{gap:var(--space-2);flex-wrap:wrap;display:flex}.tag{padding:var(--space-1) var(--space-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--text)}@media (prefers-color-scheme:dark){.node circle{stroke:#1f2937}.legend-circle{border-color:#1f2937}}.node,.link{will-change:opacity}.graph-layer{will-change:transform}.empty-state{padding:var(--space-8);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state-icon{margin-bottom:var(--space-4);font-size:4rem}.empty-state h2{margin:0 0 var(--space-2) 0;color:var(--text)}.empty-state p{color:var(--text-muted);margin:0}