coderadar 0.1.0

package/templates/styles.css

@@ -0,0 +1,489 @@
+*{margin:0;padding:0;box-sizing:border-box}
+:root{--bg:#09090b;--s1:#18181b;--s2:#27272a;--bd:#3f3f46;--ac:#8b5cf6;--ac2:#7c3aed;
+--ok:#22c55e;--warn:#eab308;--err:#ef4444;--info:#3b82f6;--txt:#fafafa;--mut:#a1a1aa;--dim:#71717a}
+:root.light{--bg:#f8fafc;--s1:#ffffff;--s2:#f1f5f9;--bd:#e2e8f0;--txt:#0f172a;--mut:#64748b;--dim:#94a3b8}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;padding:1.5rem;transition:background .2s,color .2s}
+.app{max-width:1600px;margin:0 auto}
+button{font-family:inherit;cursor:pointer}
+input[type="text"],input[type="search"]{font-family:inherit;background:var(--s1);color:var(--txt);border:1px solid var(--bd);border-radius:6px;padding:.4rem .7rem;font-size:.8rem}
+input:focus{outline:none;border-color:var(--ac)}
+textarea{font-family:inherit;background:var(--s1);color:var(--txt);border:1px solid var(--bd);border-radius:8px;padding:.75rem;width:100%;min-height:60px;resize:vertical;font-size:.85rem}
+textarea:focus{outline:none;border-color:var(--ac)}
+header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--bd);flex-wrap:wrap}
+.brand{display:flex;align-items:center;gap:.6rem}
+.brand-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--ac),#6366f1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
+.brand h1{font-size:1.1rem;font-weight:700}
+.brand h1 span{color:var(--dim);font-weight:400;font-size:.7rem;margin-left:.4rem}
+.header-actions{display:flex;gap:.5rem;margin-left:auto;align-items:center}
+.icon-btn{width:32px;height:32px;border-radius:6px;border:1px solid var(--bd);background:var(--s1);color:var(--mut);display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all .15s}
+.icon-btn:hover{border-color:var(--ac);color:var(--ac)}
+.icon-btn.tts-active{border-color:var(--ok);color:var(--ok);animation:tts-pulse 1.5s infinite}
+@keyframes tts-pulse{0%,100%{opacity:1}50%{opacity:.5}}
+.icon-btn{position:relative}
+.sync-badge{position:absolute;top:-4px;right:-4px;background:var(--ac);color:white;font-size:.55rem;font-weight:700;min-width:14px;height:14px;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0 3px}
+.icon-btn.syncing svg{animation:spin 1s linear infinite}
+@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
+.stats-bar{display:flex;gap:1rem;padding:.75rem 1rem;background:var(--s1);border:1px solid var(--bd);border-radius:10px;margin-bottom:1rem;flex-wrap:wrap;align-items:center;transition:max-height .25s ease,opacity .2s,padding .25s,margin .25s;max-height:120px;overflow:hidden}
+.stats-bar.collapsed{max-height:0;padding:0;margin:0;border-color:transparent;opacity:0}
+.stats-toggle{background:none;border:none;color:var(--dim);cursor:pointer;font-size:.6rem;padding:0 .3rem;transition:transform .2s}
+.stats-toggle.flipped{transform:rotate(180deg)}
+.stat{display:flex;flex-direction:column;align-items:center;padding:0 .75rem}
+.stat-val{font-size:1.25rem;font-weight:700;color:var(--ac)}
+.stat-val.ok{color:var(--ok)}.stat-val.warn{color:var(--warn)}.stat-val.err{color:var(--err)}
+.stat-label{font-size:.65rem;color:var(--dim);text-transform:uppercase}
+.stat-divider{width:1px;height:30px;background:var(--bd)}
+.stat-stacks{display:flex;gap:.3rem;flex-wrap:wrap}
+.stat-stack{font-size:.65rem;padding:.15rem .4rem;border-radius:4px;background:var(--s2);color:var(--mut)}
+/* Tab navigation */
+.persistent-bar{display:flex;gap:.75rem;margin-bottom:1rem;align-items:center;flex-wrap:wrap}
+.tab-bar{display:flex;gap:2px;background:var(--s1);border-radius:8px;border:1px solid var(--bd);padding:2px;flex-shrink:0}
+.tab-nav{padding:.4rem .8rem;font-size:.75rem;border:none;background:transparent;color:var(--dim);font-weight:500;border-radius:6px;cursor:pointer;transition:all .15s;white-space:nowrap}
+.tab-nav.active{background:var(--ac);color:white}
+.tab-nav:hover:not(.active){background:var(--s2);color:var(--txt)}
+.tab-panel{display:none}
+.tab-panel.active{display:block}
+.toolbar{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center}
+.search-box{position:relative;flex:1;min-width:200px}
+.search-box input{width:100%;padding-left:2rem}
+.search-box::before{content:'O';position:absolute;left:.7rem;top:50%;transform:translateY(-50%);font-size:.7rem;opacity:.4}
+.filter-group{display:flex;gap:2px;background:var(--s1);border-radius:6px;border:1px solid var(--bd);overflow:hidden}
+.filter-btn{padding:.35rem .6rem;font-size:.7rem;border:none;background:transparent;color:var(--dim);font-weight:500;transition:all .15s}
+.filter-btn.active{background:var(--ac);color:white}
+.filter-btn:hover:not(.active){background:var(--s2);color:var(--txt)}
+.toolbar-right{margin-left:auto;display:flex;gap:.5rem;align-items:center}
+.sync-indicator{font-size:.65rem;color:var(--dim)}
+.section{margin-bottom:1.5rem}
+.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
+.section-head h2{font-size:.7rem;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
+.tabs{display:flex;gap:2px;background:var(--s1);border-radius:6px;border:1px solid var(--bd);overflow:hidden}
+.tab{padding:.3rem .6rem;font-size:.7rem;border:none;background:transparent;color:var(--dim);font-weight:500;transition:all .15s}
+.tab.active{background:var(--ac);color:white}
+.tab:hover:not(.active){background:var(--s2);color:var(--txt)}
+.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.6rem}
+.p-card{background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:.85rem;transition:all .15s;position:relative}
+.p-card:hover{border-color:var(--ac)}
+.p-card.warn-border{border-left:3px solid var(--warn)}
+.p-card.err-border{border-left:3px solid var(--err)}
+.p-card.fav{background:linear-gradient(135deg,rgba(139,92,246,.08),transparent)}
+.p-card.hidden{display:none}
+.p-fav{position:absolute;top:.6rem;right:.6rem;width:22px;height:22px;border-radius:5px;border:1px solid var(--bd);background:var(--bg);color:var(--dim);display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;transition:all .15s}
+.p-fav:hover,.p-fav.active{color:var(--warn);border-color:var(--warn)}
+.p-fav.active{background:rgba(234,179,8,.15)}
+.p-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem;padding-right:28px}
+.p-name{font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.p-idx{font-size:.6rem;color:var(--dim);opacity:.6;margin-right:.2rem}
+.p-stack{font-size:.6rem;padding:.12rem .35rem;background:rgba(139,92,246,.12);color:var(--ac);border-radius:4px;font-weight:500;white-space:nowrap}
+.p-health{width:40px;height:4px;background:var(--bd);border-radius:2px;overflow:hidden;margin-left:auto}
+.p-health-fill{height:100%;border-radius:2px;transition:width .3s}
+.p-info{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.4rem;font-size:.65rem;color:var(--dim)}
+.p-info .tag{padding:.1rem .35rem;border-radius:4px;border:1px solid var(--bd);background:var(--bg)}
+.p-info .tag.ok{border-color:rgba(34,197,94,.3);color:var(--ok)}
+.p-info .tag.bad{border-color:rgba(239,68,68,.3);color:var(--err)}
+.p-info .tag.changed{border-color:rgba(234,179,8,.3);color:var(--warn)}
+.p-info .tag.gh{border-color:rgba(139,92,246,.3);color:var(--ac)}
+.p-commit{font-size:.65rem;color:var(--dim);margin-bottom:.35rem;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.p-next{font-size:.65rem;color:var(--info);margin-bottom:.5rem;padding:.25rem .4rem;background:rgba(59,130,246,.08);border-radius:4px;border-left:2px solid var(--info)}
+.p-actions{display:flex;gap:.25rem}
+.p-btn{flex:1;padding:.35rem;border-radius:5px;border:none;font-size:.65rem;font-weight:500;transition:all .12s;text-align:center}
+.p-btn.primary{background:var(--ac);color:white}
+.p-btn.primary:hover{background:var(--ac2)}
+.p-btn.ghost{background:transparent;color:var(--dim);border:1px solid var(--bd)}
+.p-btn.ghost:hover{color:var(--txt);border-color:var(--ac)}
+.p-note-btn{width:28px;flex:none;font-size:.7rem}
+.sessions{display:flex;gap:.4rem;overflow-x:auto;padding:.3rem 0}
+.session{background:var(--s1);border:1px solid var(--bd);border-radius:6px;padding:.5rem .7rem;min-width:180px;cursor:pointer;transition:all .15s}
+.session:hover{border-color:var(--ac)}
+.session-title{font-size:.7rem;font-weight:600;margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.session-meta{font-size:.6rem;color:var(--dim)}
+.ref-content{display:none;background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:1rem}
+.ref-content.active{display:block}
+.ref-content h3{font-size:.8rem;font-weight:600;margin-bottom:.4rem;color:var(--ac)}
+.ref-content table{width:100%;border-collapse:collapse;font-size:.75rem}
+.ref-content td{padding:.3rem .4rem;border-bottom:1px solid var(--bd);vertical-align:top}
+.ref-content td:first-child{color:var(--ac);font-family:monospace;white-space:nowrap;width:38%}
+.ref-content td:last-child{color:var(--mut)}
+.prompts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.4rem}
+.prompt{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:.6rem;cursor:pointer;transition:all .15s;position:relative}
+.prompt:hover{border-color:var(--ac);background:var(--s2)}
+.prompt h4{font-size:.75rem;font-weight:600;margin-bottom:.2rem}
+.prompt p{font-size:.65rem;color:var(--mut);font-family:monospace;line-height:1.3;max-height:2.6em;overflow:hidden}
+.prompt .prompt-del{display:none;position:absolute;top:.35rem;right:.35rem;width:16px;height:16px;border-radius:4px;border:none;background:var(--bg);color:var(--dim);font-size:.55rem;align-items:center;justify-content:center}
+.prompt:hover .prompt-del{display:flex}
+.prompt .prompt-del:hover{color:var(--err)}
+.links{display:flex;gap:.35rem;flex-wrap:wrap}
+.link{display:flex;align-items:center;gap:.3rem;padding:.35rem .55rem;border-radius:5px;border:1px solid var(--bd);background:var(--s1);color:var(--txt);text-decoration:none;font-size:.7rem;transition:all .12s}
+.link:hover{border-color:var(--ac);background:var(--s2)}
+.last-session-card{display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(99,102,241,.05));border:1px solid var(--ac);border-radius:10px;margin-bottom:1rem;cursor:pointer;transition:all .15s}
+.last-session-card:hover{background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(99,102,241,.1))}
+.recent-sessions{display:flex;flex-direction:column;gap:.4rem}
+.rs-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;background:var(--s1);border:1px solid var(--bd);border-radius:8px;cursor:pointer;transition:all .15s}
+.rs-item:hover{border-color:var(--ac);background:var(--s2)}
+.rs-summary{flex:1;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rs-meta{display:flex;gap:.5rem;align-items:center;font-size:.65rem;color:var(--dim)}
+.rs-date{color:var(--mut)}
+.rs-msgs{color:var(--ac)}
+.session-count{font-size:.7rem;color:var(--dim);margin-left:.5rem}
+.insights-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:1rem}
+.insight-card{background:linear-gradient(135deg,var(--s1),var(--s2));border:1px solid var(--bd);border-radius:12px;padding:.85rem}
+.insight-card h4{font-size:.75rem;color:var(--ac);margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}
+.insight-card h4::before{content:'';width:8px;height:8px;border-radius:50%}
+.insight-card.wip h4::before{background:var(--warn)}
+.insight-card.keypoints h4::before{background:var(--ok)}
+.insight-card.tags h4::before{background:var(--info)}
+.insight-card.patterns h4::before{background:linear-gradient(135deg,#f59e0b,#8b5cf6)}
+.insight-card.capture h4::before{background:var(--ac)}
+.pattern-item{display:flex;gap:.5rem;padding:.4rem .5rem;background:var(--bg);border-radius:6px;margin-bottom:.3rem;align-items:flex-start}
+.pattern-icon{width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;flex-shrink:0;background:rgba(139,92,246,.15);color:var(--ac)}
+.pattern-text{font-size:.7rem;color:var(--txt);line-height:1.35}
+.pattern-empty{font-size:.7rem;color:var(--dim);font-style:italic;padding:.4rem}
+.wip-item{padding:.4rem .6rem;background:var(--bg);border-radius:6px;margin-bottom:.35rem;cursor:pointer;transition:all .15s}
+.wip-item:hover{border-left:2px solid var(--warn);padding-left:calc(.6rem - 2px)}
+.wip-proj{font-size:.7rem;color:var(--warn);font-weight:600}
+.wip-next{font-size:.65rem;color:var(--mut);margin-top:.15rem}
+.wip-gh-btn{background:transparent;border:1px solid var(--bd);border-radius:4px;padding:2px 6px;cursor:pointer;color:var(--dim);transition:all .15s;display:flex;align-items:center}
+.wip-gh-btn:hover{color:var(--fg);border-color:var(--ac);background:rgba(139,92,246,.1)}
+.kp-item{display:flex;gap:.4rem;padding:.3rem 0;border-bottom:1px solid var(--bd)}
+.kp-item:last-child{border-bottom:none}
+.kp-bullet{color:var(--ok);font-weight:bold}
+.kp-text{font-size:.7rem;flex:1}
+.kp-proj{font-size:.6rem;color:var(--dim)}
+.tag-cloud{display:flex;flex-wrap:wrap;gap:.3rem}
+.tag-pill{padding:.2rem .5rem;background:var(--bg);border:1px solid var(--bd);border-radius:12px;font-size:.6rem;color:var(--mut);cursor:pointer;transition:all .15s}
+.tag-pill:hover{border-color:var(--ac);color:var(--ac)}
+.tag-count{font-size:.5rem;color:var(--dim);margin-left:.2rem}
+.quick-capture{display:flex;gap:.4rem}
+.quick-capture input{flex:1;padding:.4rem .6rem;font-size:.7rem}
+.quick-capture button{padding:.4rem .8rem;background:var(--ac);color:white;border:none;border-radius:6px;font-size:.7rem;font-weight:500}
+.insight-card.coach h4::before{background:linear-gradient(135deg,#f59e0b,#ef4444)}
+.coach-item{display:flex;gap:.5rem;padding:.4rem .5rem;background:var(--bg);border-radius:6px;margin-bottom:.3rem;align-items:flex-start}
+.coach-icon{width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;flex-shrink:0}
+.coach-icon.warning{background:rgba(245,158,11,.15);color:#f59e0b}
+.coach-icon.info{background:rgba(59,130,246,.15);color:#3b82f6}
+.coach-icon.success{background:rgba(34,197,94,.15);color:#22c55e}
+.coach-text{font-size:.7rem;color:var(--txt);line-height:1.35}
+.coach-empty{font-size:.7rem;color:var(--dim);font-style:italic;padding:.4rem}
+.ls-icon{width:28px;height:28px;background:var(--ac);color:white;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
+.ls-text{flex:1;font-size:.8rem;overflow:hidden}
+.ls-text strong{color:var(--ac)}
+.ls-text span{color:var(--mut);margin-left:.3rem}
+.ls-date{font-size:.65rem;color:var(--dim)}
+.toast-box{position:fixed;bottom:1.5rem;right:1.5rem;z-index:300;display:flex;flex-direction:column;gap:.3rem}
+.toast{padding:.45rem .8rem;border-radius:6px;font-size:.7rem;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.4);animation:slideIn .2s ease;background:#166534;color:#bbf7d0;border:1px solid #22c55e33}
+@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
+.add-btn{padding:.2rem .5rem;border-radius:5px;border:1px dashed var(--bd);background:transparent;color:var(--dim);font-size:.65rem;transition:all .15s}
+.add-btn:hover{border-color:var(--ac);color:var(--ac)}
+.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(3px)}
+.modal-bg.open{display:flex}
+.modal{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:1.1rem;width:90%;max-width:480px;max-height:90vh;overflow-y:auto}
+.modal h3{font-size:.95rem;margin-bottom:.65rem}
+.modal-field{margin-bottom:.5rem}
+.modal-field label{display:block;font-size:.65rem;color:var(--mut);margin-bottom:.15rem;font-weight:500}
+.modal-field input,.modal-field textarea{font-family:inherit;background:var(--bg);color:var(--txt);border:1px solid var(--bd);border-radius:5px;padding:.35rem .5rem;font-size:.75rem;width:100%}
+.modal-field input:focus,.modal-field textarea:focus{outline:none;border-color:var(--ac)}
+.modal-actions{display:flex;gap:.35rem;justify-content:flex-end;margin-top:.85rem}
+.modal-actions button{padding:.35rem .85rem;border-radius:6px;border:none;font-size:.75rem;font-weight:500}
+.modal-actions .save{background:var(--ac);color:white}
+.modal-actions .cancel{background:var(--s2);color:var(--mut)}
+.kbd{display:inline-block;padding:.1rem .3rem;background:var(--bg);border:1px solid var(--bd);border-radius:3px;font-size:.6rem;font-family:monospace;color:var(--dim)}
+.collapsible-head{cursor:pointer;user-select:none}
+.collapsible-head::before{content:'V ';font-size:.6rem;opacity:.5}
+.collapsible.closed .collapsible-head::before{content:'> '}
+.collapsible.closed .collapsible-body{display:none}
+/* Timeline v2 - List-based UX */
+.timeline-container{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:1rem;margin-bottom:.5rem}
+.timeline-header{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--bd)}
+.timeline-filters{display:flex;gap:.3rem;flex:1}
+.timeline-filter{padding:.3rem .6rem;font-size:.65rem;background:var(--bg);border:1px solid var(--bd);border-radius:4px;color:var(--mut);cursor:pointer;transition:all .15s}
+.timeline-filter:hover,.timeline-filter.active{border-color:var(--ac);color:var(--ac);background:rgba(139,92,246,.1)}
+.timeline-view-toggle{display:flex;gap:2px;background:var(--bg);border-radius:4px;padding:2px}
+.timeline-view-btn{padding:.25rem .5rem;font-size:.6rem;background:transparent;border:none;color:var(--mut);cursor:pointer;border-radius:3px}
+.timeline-view-btn.active{background:var(--ac);color:white}
+.timeline-list{display:flex;flex-direction:column;gap:.25rem;max-height:320px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ac) var(--s2)}
+.timeline-list::-webkit-scrollbar{width:6px}
+.timeline-list::-webkit-scrollbar-track{background:var(--s2);border-radius:3px}
+.timeline-list::-webkit-scrollbar-thumb{background:var(--ac);border-radius:3px}
+.timeline-day-header{font-size:.65rem;font-weight:600;color:var(--dim);padding:.4rem .5rem;background:var(--bg);border-radius:4px;margin-top:.5rem;position:sticky;top:0;z-index:10}
+.timeline-day-header:first-child{margin-top:0}
+.timeline-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;background:var(--bg);border:1px solid transparent;border-radius:6px;cursor:pointer;transition:all .12s}
+.timeline-row:hover{border-color:var(--ac);background:rgba(139,92,246,.08)}
+.timeline-row-time{font-size:.65rem;color:var(--dim);min-width:40px;font-family:monospace}
+.timeline-row-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
+.timeline-row-project{font-size:.7rem;font-weight:600;color:var(--ac);min-width:120px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.timeline-row-summary{font-size:.7rem;color:var(--txt);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.timeline-row-actions{display:flex;gap:.2rem;opacity:0;transition:opacity .15s}
+.timeline-row:hover .timeline-row-actions{opacity:1}
+.timeline-row-btn{padding:.2rem .4rem;font-size:.55rem;background:var(--s2);border:1px solid var(--bd);border-radius:3px;color:var(--mut);cursor:pointer}
+.timeline-row-btn:hover{border-color:var(--ac);color:var(--ac)}
+/* Compact dots view */
+.timeline-dots-view{display:none}
+.timeline-dots-view.active{display:block}
+.timeline-list-view{display:block}
+.timeline-list-view.hidden{display:none}
+.timeline-scroll{display:flex;gap:.4rem;overflow-x:auto;padding:.5rem 0;scrollbar-width:thin;scrollbar-color:var(--ac) var(--s2)}
+.timeline-scroll::-webkit-scrollbar{height:5px}
+.timeline-scroll::-webkit-scrollbar-track{background:var(--s2);border-radius:3px}
+.timeline-scroll::-webkit-scrollbar-thumb{background:var(--ac);border-radius:3px}
+.timeline-day{display:flex;flex-direction:column;align-items:center;min-width:65px;padding:.4rem;background:var(--bg);border:1px solid var(--bd);border-radius:8px;transition:all .15s}
+.timeline-day:hover{border-color:var(--ac)}
+.timeline-date{font-size:.6rem;font-weight:600;color:var(--txt);margin-bottom:.35rem}
+.timeline-dots{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;min-height:24px;align-items:center}
+.timeline-dot{width:18px;height:18px;border-radius:50%;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:700;color:white;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:transform .1s}
+.timeline-dot:hover{transform:scale(1.3)}
+.timeline-mini-tip{position:fixed;background:var(--s1);border:1px solid var(--ac);border-radius:6px;padding:.35rem .5rem;font-size:.65rem;z-index:300;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.4);white-space:nowrap;display:none}
+.timeline-mini-tip.show{display:block}
+.timeline-mini-tip-proj{font-weight:600;color:var(--ac)}
+.timeline-mini-tip-time{color:var(--dim);margin-left:.3rem}
+.timeline-legend{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.5rem;margin-top:.5rem;border-top:1px solid var(--bd)}
+.timeline-legend-item{display:flex;align-items:center;gap:.3rem;font-size:.6rem;color:var(--mut);cursor:pointer;padding:.2rem .4rem;border-radius:4px;transition:all .15s;border:1px solid transparent}
+.timeline-legend-item:hover,.timeline-legend-item.active{background:var(--s2);border-color:var(--bd)}
+.timeline-legend-item.dimmed{opacity:.3}
+.timeline-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+/* GitHub-style heatmap */
+.timeline-heatmap-view{display:none;padding:.5rem 0}
+.timeline-heatmap-view.active{display:block}
+.heatmap-container{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem}
+.heatmap-months{display:flex;font-size:.55rem;color:var(--dim);margin-bottom:.25rem;margin-left:28px}
+.heatmap-month{text-align:center}
+.heatmap-wrapper{display:flex;gap:3px}
+.heatmap-days{display:flex;flex-direction:column;gap:3px;font-size:.5rem;color:var(--dim);padding-right:4px}
+.heatmap-day-label{height:11px;line-height:11px;text-align:right}
+.heatmap-grid{display:flex;gap:3px}
+.heatmap-week{display:flex;flex-direction:column;gap:3px}
+.heatmap-cell{width:11px;height:11px;border-radius:2px;background:var(--s2);cursor:pointer;transition:all .1s}
+.heatmap-cell:hover{transform:scale(1.3);outline:2px solid var(--ac)}
+.heatmap-cell.l0{background:var(--s2)}
+.heatmap-cell.l1{background:rgba(139,92,246,.25)}
+.heatmap-cell.l2{background:rgba(139,92,246,.5)}
+.heatmap-cell.l3{background:rgba(139,92,246,.75)}
+.heatmap-cell.l4{background:rgba(139,92,246,1)}
+.heatmap-legend{display:flex;align-items:center;gap:.5rem;justify-content:flex-end;margin-top:.5rem;font-size:.55rem;color:var(--dim)}
+.heatmap-legend-label{margin-right:.25rem}
+.heatmap-legend-cells{display:flex;gap:2px}
+.heatmap-legend-cell{width:11px;height:11px;border-radius:2px}
+.heatmap-stats{display:flex;gap:1.5rem;margin-top:.75rem;padding-top:.5rem;border-top:1px solid var(--bd)}
+.heatmap-stat{text-align:center}
+.heatmap-stat-value{font-size:1.2rem;font-weight:700;color:var(--ac)}
+.heatmap-stat-label{font-size:.6rem;color:var(--dim);margin-top:.15rem}
+@media(max-width:768px){.projects{grid-template-columns:1fr}.prompts{grid-template-columns:1fr}.stats-bar{flex-direction:column;gap:.5rem}.stat-divider{display:none}.persistent-bar{flex-direction:column;align-items:stretch}.tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tab-bar::-webkit-scrollbar{display:none}.search-box{max-width:none}}
+.search-results{position:absolute;top:100%;left:0;right:0;max-height:400px;overflow-y:auto;background:var(--s1);border:1px solid var(--bd);border-top:none;border-radius:0 0 8px 8px;z-index:50;display:none;box-shadow:0 4px 12px rgba(0,0,0,.3)}
+.search-results.active{display:block}
+.search-results-header{padding:.5rem .75rem;font-size:.65rem;color:var(--dim);border-bottom:1px solid var(--bd);display:flex;justify-content:space-between}
+.search-result{padding:.6rem .75rem;border-bottom:1px solid var(--bd);cursor:pointer;transition:background .15s}
+.search-result:hover{background:var(--s2)}
+.search-result:last-child{border-bottom:none}
+.sr-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}
+.sr-project{font-size:.7rem;font-weight:600;color:var(--ac)}
+.sr-date{font-size:.6rem;color:var(--dim)}
+.sr-tags{display:flex;gap:.2rem;margin-left:auto}
+.sr-tag{font-size:.55rem;padding:.1rem .3rem;background:var(--s2);border-radius:3px;color:var(--mut)}
+.sr-summary{font-size:.7rem;color:var(--mut);line-height:1.4}
+.sr-summary mark{background:rgba(139,92,246,.3);color:var(--txt);padding:0 2px;border-radius:2px}
+.sr-keypoint{font-size:.65rem;color:var(--info);margin-top:.2rem;padding-left:.5rem;border-left:2px solid var(--info)}
+.sr-empty{padding:1rem;text-align:center;font-size:.75rem;color:var(--dim)}
+.report-modal{max-width:700px}
+.report-preview{background:white;color:#1a1a1a;padding:2rem;border-radius:8px;margin:.75rem 0;max-height:60vh;overflow-y:auto;font-size:.85rem;line-height:1.6}
+.report-preview h1{font-size:1.4rem;color:#2d3748;border-bottom:2px solid #8b5cf6;padding-bottom:.5rem;margin-bottom:1rem}
+.report-preview h2{font-size:1.1rem;color:#4a5568;margin-top:1.2rem;margin-bottom:.5rem;border-left:3px solid #8b5cf6;padding-left:.5rem}
+.report-preview h3{font-size:.95rem;color:#718096;margin-top:.8rem}
+.report-preview ul{list-style:disc;margin-left:1.5rem}
+.report-preview li{margin:.3rem 0}
+.report-preview .meta{color:#718096;font-size:.75rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e2e8f0}
+.report-preview .total{background:#f7fafc;padding:.75rem;border-radius:6px;margin-top:1rem;font-weight:600}
+.report-preview .tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
+.report-preview .tag{background:#e9d5ff;color:#7c3aed;padding:.15rem .4rem;border-radius:4px;font-size:.7rem}
+.report-actions{display:flex;gap:.5rem;flex-wrap:wrap}
+.report-actions button{padding:.5rem 1rem;border-radius:6px;border:none;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s}
+.report-actions .btn-pdf{background:linear-gradient(135deg,#ef4444,#dc2626);color:white}
+.report-actions .btn-pdf:hover{transform:translateY(-1px)}
+.report-actions .btn-md{background:linear-gradient(135deg,#3b82f6,#2563eb);color:white}
+.report-actions .btn-md:hover{transform:translateY(-1px)}
+.report-actions .btn-copy{background:var(--s2);color:var(--txt);border:1px solid var(--bd)}
+@media print{.report-preview{max-height:none;box-shadow:none}}
+/* Plugin Catalog */
+.plugin-toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
+.plugin-toolbar input[type=search]{flex:1;min-width:200px;padding:.5rem .75rem;border-radius:8px;border:1px solid var(--bd);background:var(--s2);color:var(--txt);font-size:.85rem}
+.plugin-toolbar input[type=search]:focus{outline:none;border-color:var(--ac)}
+.plugin-filter-group{display:flex;gap:.25rem;flex-wrap:wrap}
+.plugin-filter-btn{padding:.35rem .65rem;border-radius:6px;border:1px solid var(--bd);background:var(--s2);color:var(--mut);font-size:.7rem;cursor:pointer;transition:all .15s;white-space:nowrap}
+.plugin-filter-btn:hover{border-color:var(--ac);color:var(--txt)}
+.plugin-filter-btn.active{background:var(--ac);color:white;border-color:var(--ac)}
+.plugins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem}
+.pl-card{background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:1rem;border-left:4px solid var(--ac);transition:all .2s;cursor:default;display:flex;flex-direction:column;gap:.5rem}
+.pl-card:hover{border-color:var(--ac);box-shadow:0 4px 12px rgba(0,0,0,.15)}
+.pl-card.disabled{opacity:.5}
+.pl-card[data-type=mcp]{border-left-color:#14b8a6}
+.pl-card[data-type=workflow]{border-left-color:#8b5cf6}
+.pl-card[data-type=skill]{border-left-color:#22c55e}
+.pl-card[data-type=command]{border-left-color:#3b82f6}
+.pl-card[data-type=agent]{border-left-color:#f59e0b}
+.pl-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
+.pl-status{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+.pl-status.on{background:#22c55e}
+.pl-status.off{background:#6b7280}
+.pl-name{font-weight:600;font-size:.9rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.pl-version{font-size:.65rem;color:var(--dim);background:var(--s2);padding:.15rem .4rem;border-radius:4px}
+.pl-type-badge{font-size:.6rem;text-transform:uppercase;font-weight:700;padding:.15rem .4rem;border-radius:4px;color:white}
+.pl-type-badge[data-t=mcp]{background:#14b8a6}
+.pl-type-badge[data-t=workflow]{background:#8b5cf6}
+.pl-type-badge[data-t=skill]{background:#22c55e}
+.pl-type-badge[data-t=command]{background:#3b82f6}
+.pl-type-badge[data-t=agent]{background:#f59e0b}
+.pl-desc{font-size:.8rem;color:var(--mut);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.pl-meta{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
+.pl-badge{font-size:.65rem;padding:.15rem .35rem;border-radius:4px;background:var(--s2);color:var(--dim);border:1px solid var(--bd)}
+.pl-badge.highlight{background:rgba(139,92,246,.15);color:var(--ac);border-color:var(--ac)}
+.pl-marketplace{font-size:.65rem;color:var(--dim);margin-left:auto}
+.pl-actions{display:flex;gap:.4rem;margin-top:auto;padding-top:.5rem}
+.pl-actions button{flex:1;padding:.4rem .5rem;border-radius:6px;border:1px solid var(--bd);background:var(--s2);color:var(--txt);font-size:.7rem;cursor:pointer;transition:all .15s;text-align:center}
+.pl-actions button:hover{border-color:var(--ac);color:var(--ac)}
+.pl-actions button.primary{background:var(--ac);color:white;border-color:var(--ac)}
+.pl-actions button.primary:hover{background:var(--ac2)}
+.pl-detail-section{margin-top:1rem}
+.pl-detail-section h4{font-size:.85rem;margin-bottom:.5rem;color:var(--ac);display:flex;align-items:center;gap:.4rem}
+.pl-detail-item{padding:.5rem .75rem;background:var(--s2);border-radius:8px;margin-bottom:.4rem;font-size:.8rem;display:flex;flex-direction:column;gap:.25rem}
+.pl-detail-item .item-name{font-weight:600;display:flex;align-items:center;gap:.5rem}
+.pl-detail-item .item-desc{color:var(--mut);font-size:.75rem}
+.pl-detail-item .item-meta{font-size:.65rem;color:var(--dim)}
+.pl-detail-item button{padding:.25rem .5rem;border-radius:4px;border:1px solid var(--bd);background:var(--bg);color:var(--txt);font-size:.65rem;cursor:pointer}
+.pl-detail-item button:hover{border-color:var(--ac);color:var(--ac)}
+.pl-keywords{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.5rem}
+.pl-keywords span{background:rgba(139,92,246,.1);color:var(--ac);padding:.15rem .35rem;border-radius:4px;font-size:.65rem}
+.pl-empty{text-align:center;padding:3rem 1rem;color:var(--dim);font-size:.9rem}
+/* TTS Player Modal */
+.tts-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;z-index:210;align-items:center;justify-content:center}
+.tts-modal-bg.open{display:flex}
+.tts-modal{width:90%;max-width:600px;background:var(--s1);border-radius:16px;border:1px solid var(--bd);overflow:hidden}
+.tts-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:var(--s2);border-bottom:1px solid var(--bd)}
+.tts-title{flex:1;font-size:1rem;font-weight:600;display:flex;align-items:center;gap:.5rem}
+.tts-title svg{width:20px;height:20px;fill:var(--ac)}
+.tts-close{width:32px;height:32px;border-radius:8px;border:1px solid var(--bd);background:transparent;color:var(--txt);font-size:1rem;cursor:pointer}
+.tts-close:hover{border-color:var(--err);color:var(--err)}
+.tts-body{padding:1.5rem}
+.tts-current{background:var(--bg);border-radius:12px;padding:1.25rem;font-size:1rem;line-height:1.6;min-height:80px;max-height:120px;overflow-y:auto;margin-bottom:1rem;border:1px solid var(--bd)}
+.tts-progress-bar{height:6px;background:var(--s2);border-radius:3px;overflow:hidden;margin-bottom:1rem}
+.tts-progress-fill{height:100%;background:linear-gradient(90deg,var(--ac),var(--ac2));border-radius:3px;transition:width .2s ease}
+.tts-controls{display:flex;align-items:center;gap:.75rem;justify-content:center;margin-bottom:1rem}
+.tts-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--bd);background:var(--s2);color:var(--txt);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
+.tts-btn:hover{border-color:var(--ac);color:var(--ac)}
+.tts-btn.play{width:56px;height:56px;font-size:1.2rem;background:var(--ac);border-color:var(--ac);color:white}
+.tts-btn.play:hover{background:var(--ac2);border-color:var(--ac2)}
+.tts-slider{flex:1;height:6px;-webkit-appearance:none;background:var(--s2);border-radius:3px;cursor:pointer}
+.tts-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ac);cursor:pointer}
+.tts-footer{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--bd)}
+.tts-counter{font-size:.8rem;color:var(--dim)}
+.tts-rate-control{display:flex;align-items:center;gap:.5rem}
+.tts-rate-control label{font-size:.75rem;color:var(--dim)}
+.tts-rate-select{padding:.4rem .6rem;border-radius:6px;border:1px solid var(--bd);background:var(--bg);color:var(--txt);font-size:.8rem;cursor:pointer}
+.tts-rate-display{font-size:.8rem;color:var(--ac);font-weight:600;min-width:35px}
+.tts-full-text{margin-top:1rem;padding:1rem;background:var(--bg);border-radius:8px;font-size:.75rem;color:var(--dim);max-height:100px;overflow-y:auto;line-height:1.5;border:1px solid var(--bd)}
+.tts-full-text summary{cursor:pointer;font-weight:500;color:var(--txt);margin-bottom:.5rem}
+/* TTS Advanced Config */
+.tts-modal-advanced{max-width:700px}
+.tts-config{padding:1.5rem;background:var(--bg);border-bottom:1px solid var(--bd)}
+.tts-config-row{display:flex;gap:1rem;margin-bottom:1.25rem}
+.tts-config-item{flex:1}
+.tts-config-item label{display:block;font-size:.7rem;color:var(--dim);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.5px}
+.tts-config-item select{width:100%;padding:.6rem .8rem;border-radius:8px;border:1px solid var(--bd);background:var(--s1);color:var(--txt);font-size:.85rem;cursor:pointer}
+.tts-config-item select:focus{border-color:var(--ac);outline:none}
+.tts-detail-section{margin-bottom:1.25rem}
+.tts-detail-section>label{display:block;font-size:.7rem;color:var(--dim);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}
+.tts-detail-slider-wrap{position:relative;padding:0 .5rem}
+.tts-detail-slider{width:100%;height:8px;-webkit-appearance:none;background:linear-gradient(90deg,var(--ok),var(--ac),var(--ac2));border-radius:4px;cursor:pointer}
+.tts-detail-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:white;border:3px solid var(--ac);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3)}
+.tts-detail-labels{display:flex;justify-content:space-between;margin-top:.5rem}
+.tts-detail-labels span{font-size:.65rem;color:var(--dim);transition:all .15s}
+.tts-detail-labels span.active{color:var(--ac);font-weight:600}
+.tts-detail-desc{text-align:center;font-size:.75rem;color:var(--txt);margin-top:.75rem;padding:.5rem;background:var(--s1);border-radius:6px}
+.tts-generate-btn{width:100%;padding:.9rem;border-radius:10px;border:none;background:linear-gradient(135deg,var(--ac),var(--ac2));color:white;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px rgba(139,92,246,.3)}
+.tts-generate-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(139,92,246,.4)}
+.tts-generate-btn:active{transform:translateY(0)}
+/* Session Replay Modal */
+.replay-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;z-index:200;flex-direction:column}
+.replay-modal-bg.open{display:flex}
+.replay-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:var(--s1);border-bottom:1px solid var(--bd)}
+.replay-title{flex:1;font-size:1rem;font-weight:600}
+.replay-meta{font-size:.7rem;color:var(--dim)}
+.replay-close{width:36px;height:36px;border-radius:8px;border:1px solid var(--bd);background:var(--bg);color:var(--txt);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
+.replay-close:hover{border-color:var(--err);color:var(--err)}
+.replay-body{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem}
+.replay-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem;color:var(--dim)}
+.replay-empty-icon{font-size:3rem;opacity:.3}
+.replay-empty-text{font-size:.9rem}
+.replay-load-btn{padding:.6rem 1.2rem;background:var(--ac);color:white;border:none;border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer}
+.replay-load-btn:hover{background:var(--ac2)}
+.replay-msg{max-width:85%;padding:.75rem 1rem;border-radius:12px;font-size:.85rem;line-height:1.5;animation:fadeInMsg .2s ease}
+@keyframes fadeInMsg{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
+.replay-msg.user{align-self:flex-start;background:var(--info);color:white;border-bottom-left-radius:4px}
+.replay-msg.assistant{align-self:flex-end;background:var(--s2);color:var(--txt);border-bottom-right-radius:4px}
+.replay-msg.tool{align-self:center;background:var(--bg);color:var(--mut);font-family:monospace;font-size:.75rem;padding:.5rem .75rem;border:1px solid var(--bd);max-width:95%;overflow-x:auto}
+.replay-msg-role{font-size:.6rem;text-transform:uppercase;opacity:.7;margin-bottom:.25rem;font-weight:600}
+.replay-msg-content{white-space:pre-wrap;word-break:break-word}
+.replay-msg-content code{background:rgba(0,0,0,.2);padding:.1rem .3rem;border-radius:3px;font-family:monospace;font-size:.8em}
+.replay-msg-time{font-size:.55rem;opacity:.5;margin-top:.25rem;text-align:right}
+.replay-controls{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:var(--s1);border-top:1px solid var(--bd)}
+.replay-btn{width:40px;height:40px;border-radius:8px;border:1px solid var(--bd);background:var(--bg);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem}
+.replay-btn:hover{border-color:var(--ac);color:var(--ac)}
+.replay-btn.active{background:var(--ac);color:white;border-color:var(--ac)}
+.replay-slider{flex:1;height:6px;-webkit-appearance:none;background:var(--bd);border-radius:3px;cursor:pointer}
+.replay-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--ac);border-radius:50%;cursor:pointer}
+.replay-slider::-moz-range-thumb{width:16px;height:16px;background:var(--ac);border-radius:50%;cursor:pointer;border:none}
+.replay-progress{font-size:.75rem;color:var(--dim);min-width:80px;text-align:center}
+.replay-speed{padding:.3rem .6rem;border-radius:4px;border:1px solid var(--bd);background:var(--bg);color:var(--txt);font-size:.7rem;cursor:pointer}
+.replay-folder-info{padding:.5rem .75rem;background:var(--s2);border-radius:6px;font-size:.7rem;color:var(--mut);display:flex;align-items:center;gap:.5rem}
+.replay-folder-info code{background:var(--bg);padding:.2rem .4rem;border-radius:4px;font-family:monospace}
+.replay-tool-summary{background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:.5rem .75rem;margin:.25rem 0;font-size:.75rem}
+.replay-tool-name{color:var(--ac);font-weight:600;font-family:monospace}
+.replay-tool-params{color:var(--dim);font-size:.7rem;margin-top:.25rem;max-height:100px;overflow-y:auto}
+.cost-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem}
+.cost-stat-card{background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:1rem;text-align:center}
+.cost-stat-card .cost-val{font-size:1.4rem;font-weight:700;color:var(--txt)}
+.cost-stat-card .cost-val.warn{color:var(--warn)}
+.cost-stat-card .cost-val.err{color:var(--err)}
+.cost-stat-card .cost-val.ok{color:var(--ok)}
+.cost-stat-card .cost-label{font-size:.7rem;color:var(--mut);margin-top:.25rem}
+.cost-charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1rem}
+.cost-period-bar{display:flex;gap:.4rem;justify-content:center;margin-bottom:.75rem;flex-wrap:wrap}
+.btn-csv{background:var(--s2);color:var(--mut);border:1px solid var(--bd);border-radius:6px;padding:.3rem .6rem;font-size:.7rem;cursor:pointer;font-weight:500;transition:all .15s}
+.btn-csv:hover{background:var(--ac);color:white;border-color:var(--ac)}
+.compare-fab{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--ac);color:white;border:none;border-radius:2rem;padding:.6rem 1.2rem;font-size:.85rem;font-weight:600;cursor:pointer;z-index:50;box-shadow:0 4px 12px rgba(139,92,246,.4);transition:all .2s}
+.compare-fab:hover{box-shadow:0 6px 16px rgba(139,92,246,.5)}
+.p-check{position:absolute;top:.5rem;left:.5rem;width:1.1rem;height:1.1rem;accent-color:var(--ac);cursor:pointer;z-index:2}
+.compare-table{width:100%;border-collapse:collapse;font-size:.75rem}
+.compare-table th{text-align:left;padding:.4rem .5rem;color:var(--dim);font-weight:500;border-bottom:1px solid var(--bd);white-space:nowrap}
+.compare-table td{padding:.4rem .5rem;border-bottom:1px solid var(--bd)}
+.compare-table .metric-label{color:var(--mut);font-weight:500}
+.cost-chart-card{background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:1rem}
+.cost-chart-card h4{font-size:.75rem;color:var(--mut);margin-bottom:.5rem}
+.cost-chart-wrapper{height:220px;position:relative}
+.cost-currency-toggle{padding:.3rem .5rem;border-radius:6px;border:1px solid var(--bd);background:var(--bg);color:var(--txt);font-size:.7rem;cursor:pointer;font-weight:600;appearance:none;-webkit-appearance:none;padding-right:1.2rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .4rem center}
+.cost-currency-toggle:hover,.cost-currency-toggle:focus{border-color:var(--ac);color:var(--ac);outline:none}
+.cost-table{width:100%;border-collapse:collapse;font-size:.75rem}
+.cost-table th{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--bd);color:var(--mut);font-weight:600}
+.cost-table td{padding:.4rem .6rem;border-bottom:1px solid var(--s2)}
+.cost-plan-bar{height:18px;background:var(--s2);border-radius:4px;overflow:hidden;margin:.2rem 0}
+.cost-plan-fill{height:100%;border-radius:4px;transition:width .3s}
+.cost-plan-fill.ok{background:var(--ok)}
+.cost-plan-fill.warn{background:var(--warn)}
+.cost-plan-fill.err{background:var(--err)}
+@media(max-width:768px){.cost-stats,.cost-charts-grid{grid-template-columns:1fr}}
+.disk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem}
+.disk-stat-card{background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:1rem;text-align:center}
+.disk-stat-card .disk-val{font-size:1.4rem;font-weight:700;color:var(--txt)}
+.disk-stat-card .disk-val.warn{color:var(--warn)}
+.disk-stat-card .disk-val.err{color:var(--err)}
+.disk-stat-card .disk-val.ok{color:var(--ok)}
+.disk-stat-card .disk-label{font-size:.7rem;color:var(--mut);margin-top:.25rem}
+.disk-charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1rem}
+.disk-chart-card{background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:1rem}
+.disk-chart-card h4{font-size:.75rem;color:var(--mut);margin-bottom:.5rem}
+.disk-chart-wrapper{height:220px;position:relative}
+.disk-table{width:100%;border-collapse:collapse;font-size:.75rem}
+.disk-table th{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--bd);color:var(--mut);font-weight:600}
+.disk-table td{padding:.4rem .6rem;border-bottom:1px solid var(--s2)}
+.disk-gauge{height:22px;background:var(--s2);border-radius:6px;overflow:hidden;margin:.5rem 0;position:relative}
+.disk-gauge-fill{height:100%;border-radius:6px;transition:width .3s}
+.disk-gauge-fill.ok{background:var(--ok)}
+.disk-gauge-fill.warn{background:var(--warn)}
+.disk-gauge-fill.err{background:var(--err)}
+.disk-gauge-text{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
+@media(max-width:768px){.disk-stats,.disk-charts-grid{grid-template-columns:1fr}}