@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-dark:#09090b;--bg-card:#18181b;--bg-card-hover:#27272a;--text-main:#f4f4f5;--text-muted:#a1a1aa;--border-color:#27272a;--primary:#6366f1;--primary-hover:#4f46e5;--success:#10b981;--warning:#f59e0b;--danger:#ef4444}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,sans-serif;line-height:1.5}.app-container{flex-direction:column;min-height:100vh;display:flex}.center-screen{justify-content:center;align-items:center;min-height:100vh;display:flex}.header{border-bottom:1px solid var(--border-color);background-color:var(--bg-dark);z-index:10;padding:1rem 1.5rem;position:sticky;top:0}.header-content{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;display:flex}.brand{align-items:center;gap:.75rem;display:flex}.brand-icon{background:linear-gradient(135deg, var(--primary), #9333ea);border-radius:.75rem;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;display:flex;box-shadow:0 4px 14px #6366f133}.brand-title{letter-spacing:-.025em;font-size:1.25rem;font-weight:600}.brand-subtitle{color:var(--text-muted);font-size:.75rem;font-weight:500}.nav-tabs{border:1px solid var(--border-color);background-color:#18181b;border-radius:.5rem;align-items:center;gap:.25rem;padding:.25rem;display:flex}.nav-tab{color:var(--text-muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:.375rem;align-items:center;gap:.5rem;padding:.5rem .875rem;font-size:.8125rem;font-weight:500;transition:all .2s;display:flex}.nav-tab:hover{color:var(--text-main)}.nav-tab.active{color:var(--text-main);background-color:#27272a}.badge{background-color:var(--primary);color:#fff;border-radius:9999px;padding:.125rem .5rem;font-size:.625rem;font-weight:700}.badge-warning{background-color:var(--warning);color:#000}.badge-success{background-color:var(--success);color:#fff}.badge-danger{background-color:var(--danger);color:#fff}.main-content{width:100%;max-width:1200px;margin:0 auto;padding:2rem 1.5rem}.section-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.section-title{font-size:1.5rem;font-weight:600}.section-subtitle{color:var(--text-muted);margin-top:.25rem;font-size:.875rem}.btn{cursor:pointer;border:none;border-radius:.5rem;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--text-main);color:var(--bg-dark);cursor:pointer;border:none;border-radius:.5rem;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-weight:500;transition:all .2s;display:flex;box-shadow:0 4px 14px #ffffff1a}.btn-primary:hover:not(:disabled){background-color:#e4e4e7}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-success{background-color:var(--success);color:#fff}.btn-success:hover:not(:disabled){background-color:#059669}.btn-danger{color:var(--danger);background-color:#0000;border:1px solid #7f1d1d}.btn-danger:hover:not(:disabled){color:#fff;background-color:#7f1d1d}.btn-ghost{color:var(--text-muted);border:1px solid var(--border-color);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--text-main);border-color:#52525b}.btn-group{gap:.5rem;display:flex}.card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:.75rem;margin-bottom:1.5rem;overflow:hidden}.card-header{border-bottom:1px solid var(--border-color);padding:1rem 1.5rem;font-weight:500}.card-body{padding:1.5rem}.stat-card{padding:1.25rem}.stat-label{color:var(--text-muted);margin-bottom:.25rem;font-size:.875rem;font-weight:500}.stat-value{align-items:flex-end;gap:.5rem;display:flex}.stat-number{font-size:2.25rem;font-weight:700;line-height:1}.stat-total{color:#71717a;margin-bottom:.25rem}.progress-bar-bg{background-color:#27272a;border-radius:9999px;width:100%;height:.375rem;margin-top:1rem;overflow:hidden}.progress-bar-fill{background-color:var(--primary);border-radius:9999px;height:100%;transition:width 1s ease-out}.list-item{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1rem 1.5rem;transition:background-color .2s;display:flex}.list-item:last-child{border-bottom:none}.list-item:hover{background-color:var(--bg-card-hover)}.list-item-content{align-items:center;gap:1rem;display:flex}.list-item-index{width:2rem;height:2rem;color:var(--text-muted);background-color:#27272a;border-radius:.5rem;justify-content:center;align-items:center;font-family:monospace;font-size:.75rem;display:flex}.list-item-title{font-size:.875rem;font-weight:500}.list-item-subtitle{color:#71717a;margin-top:.125rem;font-family:monospace;font-size:.75rem}.status-badge{border-radius:9999px;padding:.25rem .625rem;font-size:.75rem;font-weight:500}.status-pending{color:var(--warning);background-color:#f59e0b1a}.status-approved{color:var(--success);background-color:#10b9811a}.status-denied{color:var(--danger);background-color:#ef44441a}.status-auto{color:var(--primary);background-color:#6366f11a}.empty-state{text-align:center;flex-direction:column;align-items:center;padding:3rem 1.5rem;display:flex}.empty-icon{color:#52525b;margin-bottom:.75rem}.empty-title{color:var(--text-muted);font-weight:500}.empty-subtitle{color:#71717a;margin-top:.25rem;font-size:.875rem}.session-header{border-bottom:1px solid var(--border-color);background-color:#18181b80;justify-content:space-between;align-items:flex-start;padding:1.25rem 1.5rem;display:flex}.session-title-wrap{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.session-title{font-size:1.125rem;font-weight:600}.session-id{color:#818cf8;background-color:#6366f11a;border:1px solid #6366f133;border-radius:9999px;padding:.25rem .625rem;font-family:monospace;font-size:.75rem}.session-desc{color:var(--text-muted);max-width:48rem;font-size:.875rem}.session-meta-label{color:var(--text-muted);margin-bottom:.25rem;font-size:.875rem}.session-meta-value{background-color:#27272a;border-radius:.375rem;padding:.25rem .75rem;font-weight:500}.diff-row{border-bottom:1px solid var(--border-color);flex-direction:column;display:flex}@media (width>=768px){.diff-row{flex-direction:row}}.diff-rationale{background-color:var(--bg-card);border-bottom:1px solid var(--border-color);padding:1.5rem}@media (width>=768px){.diff-rationale{border-right:1px solid var(--border-color);border-bottom:none;width:33.3333%}}.rationale-title{color:#d4d4d8;text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:.875rem;font-weight:600;display:flex}.rationale-text{color:var(--text-muted);margin-bottom:.75rem;font-size:.875rem}.reasoning-block{border-top:1px solid var(--border-color);margin-top:.75rem;padding-top:.75rem}.reasoning-label{text-transform:uppercase;letter-spacing:.05em;color:#818cf8;margin-bottom:.375rem;font-size:.75rem;font-weight:600}.reasoning-text{color:#a1a1aa;font-size:.8125rem;line-height:1.6}.linked-tags{flex-wrap:wrap;gap:.375rem;margin-top:.5rem;display:flex}.linked-tag{border-radius:.25rem;padding:.125rem .5rem;font-family:monospace;font-size:.6875rem}.linked-tag-call{color:#a5b4fc;background-color:#6366f126;border:1px solid #6366f133}.linked-tag-problem{color:#fcd34d;background-color:#f59e0b1a;border:1px solid #f59e0b26}.diff-content{font-size:.875rem;overflow:hidden}@media (width>=768px){.diff-content{width:66.6667%}}.toggle-container{align-items:center;gap:.75rem;display:flex}.toggle-label{font-size:.875rem;font-weight:500}.toggle-switch{cursor:pointer;background-color:#3f3f46;border:none;border-radius:9999px;width:2.75rem;height:1.5rem;padding:0;transition:background-color .3s;position:relative}.toggle-switch.active{background-color:var(--primary)}.toggle-knob{background-color:#fff;border-radius:9999px;width:1.125rem;height:1.125rem;transition:transform .3s;position:absolute;top:.1875rem;left:.1875rem}.toggle-switch.active .toggle-knob{transform:translate(1.25rem)}.modal-overlay{z-index:100;background-color:#000000b3;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:.75rem;width:90%;max-width:28rem;padding:2rem;box-shadow:0 25px 50px -12px #00000080}.modal-title{align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:1.125rem;font-weight:600;display:flex}.modal-body{color:var(--text-muted);margin-bottom:1.5rem;font-size:.875rem;line-height:1.6}.modal-footer{justify-content:flex-end;gap:.75rem;display:flex}.tuner-layout{grid-template-columns:1fr;gap:1.5rem;display:grid}@media (width>=768px){.tuner-layout{grid-template-columns:1fr 1fr}}.tuner-input{width:100%;min-height:8rem;color:var(--text-main);resize:vertical;background-color:#27272a;border:1px solid #3f3f46;border-radius:.5rem;outline:none;padding:1rem;font-family:Inter,sans-serif;font-size:.875rem;transition:border-color .2s}.tuner-input:focus{border-color:var(--primary)}.tuner-input::placeholder{color:#52525b}.context-panel{border:1px solid var(--border-color);max-height:12rem;color:var(--text-muted);white-space:pre-wrap;background-color:#0f0f12;border-radius:.5rem;padding:1rem;font-family:monospace;font-size:.8125rem;overflow-y:auto}.context-label{text-transform:uppercase;letter-spacing:.05em;color:#71717a;margin-bottom:.375rem;font-size:.75rem;font-weight:600}.overflow-banner{background:linear-gradient(135deg,#f59e0b1a,#ef44441a);border:1px solid #f59e0b4d;border-radius:.75rem;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1.25rem 1.5rem;display:flex}.overflow-text{color:var(--warning);font-size:.875rem}.overflow-text strong{color:var(--text-main)}.approval-card{background:linear-gradient(135deg,#f59e0b08,#6366f108);border:1px solid #f59e0b4d}.approval-actions{border-top:1px solid var(--border-color);background-color:#18181b80;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;display:flex}.settings-bar{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:.75rem;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:.75rem 1.5rem;display:flex}.settings-info{color:var(--text-muted);font-size:.875rem}.animate-spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-in{animation:.5s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}