:root,:root[data-theme=light]{--color-bg:#f3f4f6;--color-surface:#fff;--color-border:#e5e7eb;--color-border-strong:#d1d5db;--color-text:#111827;--color-text-muted:#6b7280;--color-primary:#2563eb;--color-primary-dark:#1d4ed8;--color-primary-tint:#eff6ff;--color-code-bg:#111827;--color-code-text:#f9fafb;--color-chip-mix:#fff;--shadow-sm:0 1px 2px #0f172a0f;--shadow-md:0 8px 20px #0f172a14;color:var(--color-text);background:var(--color-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.45}:root[data-theme=dark]{--color-bg:#0d1117;--color-surface:#161b22;--color-border:#262c36;--color-border-strong:#364052;--color-text:#e6edf3;--color-text-muted:#9aa5b1;--color-primary:#3b82f6;--color-primary-dark:#93c5fd;--color-primary-tint:#17233b;--color-code-bg:#0b1220;--color-code-text:#e6edf3;--color-chip-mix:#161b22;--shadow-sm:0 1px 2px #0006;--shadow-md:0 10px 24px #00000080}*{box-sizing:border-box}html{scroll-behavior:auto}body{background:var(--color-bg);min-width:320px;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}#root{min-height:100svh}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}.app-shell{width:min(1120px,100% - 24px);margin:0 auto;padding:20px 0 40px}.app-header{align-items:center;gap:12px;padding:4px 2px 20px;display:flex}.app-header-icon{border-radius:9px;width:32px;height:32px}.theme-toggle{margin-left:auto}.app-header h1{color:var(--color-text);letter-spacing:-.01em;margin:0;font-size:1.6rem;font-weight:800}.control-panel,.content-panel,.toast,.modal-card{border:1px solid var(--color-border);box-shadow:var(--shadow-sm);background:var(--color-surface)}.eyebrow{background:var(--color-primary-tint);width:fit-content;color:var(--color-primary-dark);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:700}.control-panel{border-radius:20px;gap:16px;width:fit-content;max-width:100%;padding:14px;display:grid}.control-panel.is-expanded{width:100%}.toolbar-compact{align-items:center;gap:8px;display:flex}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--color-primary-tint);outline-offset:2px}.chip,.letter-button,.ghost-button,.modal-copy,.modal-close{border:none;border-radius:12px;transition:background .15s,box-shadow .15s,color .15s}.icon-button{border:1px solid var(--color-border);background:var(--color-surface);width:42px;height:42px;color:var(--color-text-muted);border-radius:12px;flex-shrink:0;place-items:center;transition:background .15s,border-color .15s,color .15s;display:grid;position:relative}.icon-button:hover{background:var(--color-bg);color:var(--color-text)}.icon-button.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.icon-button.star-toggle.active{background:#f59e0b;border-color:#f59e0b}.filter-button{margin-left:auto}.filter-active-dot{background:var(--color-primary);border-radius:999px;width:8px;height:8px;position:absolute;top:7px;right:7px}.toolbar-search-input{border:1px solid var(--color-border);background:var(--color-surface);min-width:0;color:var(--color-text);border-radius:12px;flex:1;padding:10px 14px}.view-menu-wrap{flex-shrink:0;position:relative}.view-menu{z-index:20;border:1px solid var(--color-border);background:var(--color-surface);min-width:180px;box-shadow:var(--shadow-md);border-radius:14px;gap:4px;padding:6px;display:grid;position:absolute;top:calc(100% + 8px);left:0}.view-menu button{color:var(--color-text);text-align:left;white-space:nowrap;background:0 0;border:none;border-radius:10px;padding:10px 12px;font-weight:600}.view-menu button:hover{background:var(--color-bg)}.view-menu button.active{background:var(--color-primary-tint);color:var(--color-primary-dark)}.filter-panel{border:1px solid var(--color-border);background:var(--color-surface);border-radius:16px;overflow:hidden}.filter-pane-track{width:200%;transition:transform .26s;display:flex}.filter-pane-track.shifted{transform:translate(-50%)}.filter-pane{width:50%;min-width:0;padding:12px}.filter-menu{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.filter-menu-box{border:1px solid var(--color-border);background:var(--color-bg);border-radius:14px;justify-items:center;gap:2px;padding:16px 10px;transition:background .15s,border-color .15s;display:grid}.filter-menu-box:hover{border-color:var(--color-primary);background:var(--color-primary-tint)}.filter-menu-box strong{color:var(--color-text)}.filter-menu-box small{color:var(--color-text-muted)}.filter-pane-header{color:var(--color-text);align-items:center;gap:10px;margin-bottom:10px;font-weight:700;display:flex}.filter-pane-header small{color:var(--color-text-muted);font-weight:500}.back-button{width:36px;height:36px}.option-slider{scrollbar-width:thin;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;grid-auto-flow:column;gap:8px;padding-bottom:6px;display:grid;overflow-x:auto}.letter-rail{scrollbar-width:thin;gap:10px;padding-bottom:2px;display:flex;overflow-x:auto}.flow-card{border:1px solid var(--color-border);background:var(--color-surface);border-radius:16px;align-content:space-between;gap:8px;width:250px;padding:10px;display:grid}.flow-card.active{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary) inset}.flow-card-main{text-align:left;background:0 0;border:none;border-radius:10px;padding:4px}.flow-card-main strong,.flow-card-main span{display:block}.flow-card-main strong{color:var(--color-text);margin-bottom:4px}.flow-card-main span{color:var(--color-text-muted);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.88rem;display:-webkit-box;overflow:hidden}.flow-card-tools{justify-content:flex-end;align-items:center;gap:6px;display:flex}.chip{background:var(--color-surface);color:var(--color-text);white-space:nowrap;border:1px solid var(--color-border);align-items:center;gap:8px;padding:10px 14px;display:inline-flex}.chip .accent-dot{width:9px;height:9px}.chip.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.toolbar-meta{color:var(--color-text-muted);flex-wrap:wrap;align-items:center;gap:8px;margin:12px 2px 0;font-size:.92rem;display:flex}.meta-count{white-space:nowrap;margin-left:auto}.filter-pill{background:var(--color-primary-tint);color:var(--color-primary-dark);white-space:nowrap;border:none;border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:.82rem;font-weight:700;display:inline-flex}.filter-pill:hover{background:var(--color-primary);color:#fff}.pending-badge{background:var(--color-bg);border-radius:999px;padding:6px 10px}.content-panel{background:var(--color-bg);border-radius:20px;margin-top:18px;padding:12px}.section-stack,.tag-stack{gap:16px;display:grid}.prompt-stack{gap:8px;display:grid}.section-block{gap:14px;display:grid}.section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;display:flex}.section-header h2{color:var(--color-text);margin:0;font-size:1.35rem}.section-header p{color:var(--color-text-muted);margin:0}.letter-rail{z-index:3;background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;margin-bottom:12px;padding:10px;position:sticky;top:12px}.letter-button{background:var(--color-bg);min-width:40px;color:var(--color-text);padding:10px 12px;font-weight:700}.accent-dot{background:var(--card-accent,var(--color-primary));border-radius:999px;width:12px;height:12px}.copied-pill{background:var(--color-primary-tint);color:var(--color-primary-dark);white-space:nowrap;border-radius:999px;padding:6px 10px;font-size:.8rem;font-weight:700}.ghost-button{background:var(--color-bg);color:var(--color-text);border:none;border-radius:12px;padding:10px 14px}.prompt-row{--row-accent:var(--color-primary);border:1px solid var(--color-border-strong);background:var(--color-surface);box-shadow:var(--shadow-sm);content-visibility:auto;contain-intrinsic-size:84px;border-radius:16px;align-items:center;gap:10px;padding:8px 10px;transition:transform .16s,background .16s,border-color .16s,box-shadow .16s;display:flex}.prompt-row:has(.prompt-row-surface:hover){background:color-mix(in srgb, var(--color-surface) 93%, var(--color-text));border-color:var(--color-border-strong);box-shadow:var(--shadow-md);transform:scale(1.012)}.prompt-row:has(.prompt-row-surface:active){box-shadow:var(--shadow-sm);transform:scale(.988)}.prompt-row.is-copied{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary) inset}.prompt-row-surface{text-align:left;background:0 0;border:none;border-radius:12px;flex:1;align-items:center;gap:12px;min-width:0;padding:2px 0;display:flex}.prompt-row-icon{background:color-mix(in srgb, var(--row-accent) 14%, var(--color-chip-mix));width:44px;height:44px;color:var(--row-accent);border-radius:12px;flex-shrink:0;place-items:center;display:grid}.prompt-row-text{gap:2px;min-width:0;display:grid}.prompt-row-text strong{color:var(--color-text);font-size:1.02rem;font-weight:700}.prompt-row-text span{color:var(--color-text-muted);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.88rem;display:-webkit-box;overflow:hidden}.prompt-row-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.details-button{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);white-space:nowrap;border-radius:999px;padding:10px 16px;font-size:.88rem;font-weight:700}.star-button{border:1px solid var(--color-border);background:var(--color-surface);width:38px;height:38px;color:var(--color-text-muted);border-radius:999px;flex-shrink:0;place-items:center;transition:background .15s,border-color .15s,color .15s;display:grid}.star-button:hover{color:#f59e0b;border-color:#f59e0b}.star-button svg{fill:none}.star-button.active{color:#f59e0b;background:#fef3c7;border-color:#f5d0a0}.star-button.active svg{fill:currentColor}.grade-select{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;border-radius:999px;padding:8px 10px;font-size:.85rem;font-weight:700}.grade-select.graded{background:var(--color-primary-tint);border-color:var(--color-primary);color:var(--color-primary-dark)}.details-button:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.type-chip{border:1px solid color-mix(in srgb, var(--chip-accent) 45%, var(--color-border));background:color-mix(in srgb, var(--chip-accent) 12%, var(--color-chip-mix));width:fit-content;color:var(--color-text);text-transform:uppercase;letter-spacing:.04em;border-radius:999px;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;font-size:.82rem;font-weight:700;display:inline-flex}.flow-collection{gap:10px;padding-bottom:12px;display:grid}.flow-collection+.flow-collection{border-top:1px dashed var(--color-border);padding-top:12px}.flow-collection>strong{color:var(--color-text)}.flow-collection>p{color:var(--color-text-muted);margin:0}.related-list{gap:10px;display:grid}.related-button{text-align:left;background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:14px;transition:border-color .15s,background .15s;display:flex}.related-button:hover{border-color:var(--color-primary)}.related-button strong{color:var(--color-text)}.related-button svg{color:var(--color-text-muted);flex-shrink:0}.empty-state{text-align:center;border:1px dashed var(--color-border-strong);color:var(--color-text-muted);border-radius:20px;padding:30px 20px}.toast{z-index:50;color:var(--color-text);border-radius:14px;padding:12px 16px;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.modal-backdrop{z-index:40;background:#11182766;place-items:end center;padding:16px;display:grid;position:fixed;inset:0}.modal-card{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:24px 24px 16px 16px;gap:18px;width:min(720px,100%);max-height:min(92svh,860px);padding:20px;display:grid;overflow-y:auto}.modal-topline{justify-content:space-between;align-items:start;gap:14px;display:flex}.modal-topline h2{color:var(--color-text);margin:0;font-size:1.6rem}.modal-topline p,.modal-body p,.modal-body li{color:var(--color-text-muted)}.modal-close{background:var(--color-bg);min-width:44px;min-height:44px;color:var(--color-text)}.modal-copy{background:var(--color-primary);color:#fff;width:fit-content;padding:12px 16px}.modal-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.modal-body{gap:16px;display:grid}.modal-section{border:1px solid var(--color-border);background:var(--color-bg);border-radius:16px;gap:10px;padding:16px;display:grid}.modal-section h3{color:var(--color-text);margin:0}.prompt-code{background:var(--color-code-bg);color:var(--color-code-text);white-space:pre-wrap;word-break:break-word;border-radius:14px;margin:0;padding:16px;font-family:SFMono-Regular,Cascadia Code,Consolas,monospace;font-size:.92rem;line-height:1.6}.flow-steps{gap:12px;display:grid}.flow-step{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:14px}.flow-step strong,.flow-step span,.flow-step small{display:block}.flow-step strong{color:var(--color-text)}.flow-step span,.flow-step small{color:var(--color-text-muted)}.status-screen{place-items:center;min-height:100svh;padding:20px;display:grid}.status-card{text-align:center;border:1px solid var(--color-border);background:var(--color-surface);width:min(560px,100%);box-shadow:var(--shadow-md);border-radius:20px;padding:24px}.status-card h1{color:var(--color-text);margin:0 0 10px}.status-card p{color:var(--color-text-muted);margin:0 0 18px}.modal-heading{align-items:flex-start;gap:10px;min-width:0;display:flex}.modal-topline-tools{flex-shrink:0;align-items:center;gap:6px;display:flex}.prompt-code-copy{text-align:left;background:0 0;border:none;border-radius:16px;width:100%;padding:0;display:block}.prompt-code-head{color:var(--color-text);justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:700;display:flex}.prompt-code-head svg{color:var(--color-text-muted)}.prompt-code-copy .prompt-code{transition:box-shadow .15s,transform .15s}.prompt-code-copy:hover .prompt-code{box-shadow:0 0 0 2px var(--color-primary)}.prompt-code-copy:active .prompt-code{transform:scale(.995)}.collection-chip-list{gap:8px;display:grid}.collection-open-card{border:1px solid var(--color-border);background:var(--color-surface);text-align:left;border-radius:14px;justify-content:space-between;align-items:center;gap:10px;padding:14px;transition:border-color .15s;display:flex}.collection-open-card:hover{border-color:var(--color-primary)}.collection-open-card strong{color:var(--color-text)}.collection-open-card svg{color:var(--color-text-muted);flex-shrink:0}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;display:grid}.collection-add-card{border:1px dashed var(--color-border-strong);min-height:124px;color:var(--color-text-muted);background:0 0;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-weight:700;transition:border-color .15s,color .15s;display:flex}.collection-add-card:hover{border-color:var(--color-primary);color:var(--color-primary)}.collection-card{border:1px solid var(--color-border-strong);background:var(--color-surface);box-shadow:var(--shadow-sm);border-radius:16px;align-content:space-between;gap:10px;padding:14px;display:grid}.collection-card.is-favorite{border-color:#f5d0a0}.collection-card-main{text-align:left;background:0 0;border:none;gap:4px;padding:0;display:grid}.collection-card-main strong{color:var(--color-text);font-size:1.05rem}.collection-card-main small{color:var(--color-text-muted)}.collection-card-tools{justify-content:flex-end;align-items:center;gap:6px;display:flex}.editor-body{gap:14px;display:grid}.editor-field{gap:6px;display:grid}.editor-field>span{color:var(--color-text);font-size:.9rem;font-weight:700}.editor-input,.editor-textarea{border:1px solid var(--color-border);background:var(--color-surface);width:100%;color:var(--color-text);border-radius:12px;padding:10px 12px}.editor-textarea{resize:vertical;min-height:96px;font-family:inherit}.toggle-chips{flex-wrap:wrap;gap:6px;max-height:168px;padding:2px;display:flex;overflow-y:auto}.toggle-chip{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:999px;align-items:center;gap:6px;padding:8px 12px;font-size:.85rem;font-weight:600;display:inline-flex}.toggle-chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.editor-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.editor-actions-right{gap:10px;margin-left:auto;display:flex}.danger-button{color:#dc2626;background:0 0;border:1px solid #fca5a5;border-radius:12px;padding:10px 16px;font-weight:700}.danger-button:hover{color:#fff;background:#dc2626;border-color:#dc2626}.modal-copy:disabled{opacity:.5;cursor:not-allowed}@media (width<=720px){.app-shell{width:min(100%,100% - 16px);padding-top:12px}.control-panel,.content-panel,.modal-card{border-radius:18px}.control-panel{padding:14px}.content-panel{border-radius:14px;padding:6px}.prompt-stack{gap:5px}.prompt-row{padding:6px 8px}.filter-menu-box{padding:12px 6px}.filter-menu-box small{font-size:.72rem}.flow-card{width:210px}.prompt-row{flex-wrap:wrap}.prompt-row-actions{justify-content:flex-end;width:100%}.modal-backdrop{padding:0}.modal-card{border-radius:24px 24px 0 0;max-height:100svh}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}