:root{--bg: #eef3fb;--surface: #ffffff;--surface2: #e8f0fa;--border: #c8d8ee;--text: #0d1e36;--muted: #4a6080;--muted2: #8da8c8;--accent: #1a6fd4;--accent-dim: rgba(26,111,212,.08);--green: #059669;--green-dim: rgba(5,150,105,.08);--amber: #d97706;--amber-dim: rgba(217,119,6,.08);--red: #dc2626;--red-dim: rgba(220,38,38,.08);--purple: #7c3aed;--purple-dim: rgba(124,58,237,.08);--radius: 8px;--shadow: 0 1px 3px rgba(13,30,54,.07), 0 4px 12px rgba(13,30,54,.05)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #090f1c;--surface: #0f1929;--surface2: #162236;--border: #1a2e48;--text: #dce8f8;--muted: #637da0;--muted2: #3d5473;--accent: #3b9eff;--accent-dim: rgba(59,158,255,.1);--green: #34d399;--green-dim: rgba(52,211,153,.1);--amber: #fbbf24;--amber-dim: rgba(251,191,36,.1);--red: #f87171;--red-dim: rgba(248,113,113,.1);--purple: #a78bfa;--purple-dim: rgba(167,139,250,.1);--shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2)}}:root[data-theme=dark]{--bg:#090f1c;--surface:#0f1929;--surface2:#162236;--border:#1a2e48;--text:#dce8f8;--muted:#637da0;--muted2:#3d5473;--accent:#3b9eff;--green:#34d399;--amber:#fbbf24;--red:#f87171;--purple:#a78bfa}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:13px;line-height:1.6}a{color:var(--accent);text-decoration:none}button{cursor:pointer;font:inherit}input,select{font:inherit}.page{display:flex;flex-direction:column;min-height:100vh}.loading-screen{display:flex;align-items:center;justify-content:center;height:100vh;color:var(--muted);font-size:14px}.navbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:52px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.nav-left{display:flex;align-items:center;gap:20px}.nav-logo{color:var(--accent);font-size:16px}.nav-brand{font-weight:800;font-size:13px;letter-spacing:.04em;color:var(--text)}.nav-links{display:flex;gap:4px}.nav-link{padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;color:var(--muted);transition:all .14s}.nav-link:hover{color:var(--text);background:var(--surface2)}.nav-link.active{color:var(--accent);background:var(--accent-dim)}.nav-right{display:flex;align-items:center;gap:12px}.nav-user{font-size:12px;color:var(--muted)}.nav-signout{background:none;border:1px solid var(--border);color:var(--muted);padding:4px 10px;border-radius:6px;font-size:11px;transition:all .14s}.nav-signout:hover{color:var(--text);border-color:var(--muted2)}.role-badge{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:4px}.role-badge.admin{background:var(--red-dim);color:var(--red)}.role-badge.analyst{background:var(--amber-dim);color:var(--amber)}.role-badge.viewer{background:var(--accent-dim);color:var(--accent)}.role-badge.demo{background:var(--purple-dim);color:var(--purple)}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:40px 36px;text-align:center;width:340px;box-shadow:var(--shadow)}.login-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}.login-logo{color:var(--accent);font-size:22px}.login-name{font-size:20px;font-weight:800;letter-spacing:-.02em}.login-tagline{font-size:12px;color:var(--muted);margin-bottom:28px;line-height:1.5}.login-note{font-size:11px;color:var(--muted2);margin-top:14px}.btn-primary{background:var(--accent);color:#fff;border:none;padding:9px 20px;border-radius:7px;font-size:13px;font-weight:600;transition:opacity .14s}.btn-primary:hover{opacity:.88}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.input{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:7px 10px;color:var(--text);width:100%;transition:border-color .14s}.input:focus{outline:none;border-color:var(--accent)}.field-group{display:flex;flex-direction:column;gap:5px}.field-group label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.checkbox-label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);cursor:pointer;align-self:flex-end;padding-bottom:9px}.demo-main{padding:28px 32px 80px;max-width:900px}.demo-header{margin-bottom:22px}.demo-header h1{font-size:20px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}.demo-header p{font-size:12px;color:var(--muted);margin-top:4px}.demo-badge{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:4px;background:var(--purple-dim);color:var(--purple)}.demo-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:22px}.form-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}.sku-input-row{display:flex}.sku-input-row .input{border-radius:6px}.seg-control{display:flex;gap:3px}.seg-btn{background:var(--surface2);border:1px solid var(--border);padding:6px 12px;font-size:11px;font-weight:600;color:var(--muted);border-radius:6px;transition:all .14s;white-space:nowrap}.seg-btn.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}.results-section{margin-top:4px}.results-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:11px;color:var(--muted)}.latency{background:var(--green-dim);color:var(--green);padding:2px 7px;border-radius:4px;font-weight:700;font-variant-numeric:tabular-nums}.rec-type-pill{background:var(--surface2);color:var(--muted);padding:2px 8px;border-radius:4px}.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.rec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .14s}.rec-card:hover{box-shadow:var(--shadow)}.rec-img-wrap{position:relative;aspect-ratio:1;background:var(--surface2)}.rec-img{width:100%;height:100%;object-fit:cover}.rec-img-placeholder{display:flex;align-items:center;justify-content:center;height:100%;font-size:28px;color:var(--muted2)}.rec-score{position:absolute;top:7px;right:7px;background:#0000008c;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;font-variant-numeric:tabular-nums}.rec-info{padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:2px}.rec-sku{font-size:10px;color:var(--accent);font-family:monospace}.rec-name{font-size:12px;font-weight:600;line-height:1.4}.rec-reason{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}.rec-feedback{display:flex;gap:4px;padding:6px 12px 10px}.fb-btn{background:none;border:1px solid var(--border);border-radius:5px;padding:3px 8px;font-size:13px;transition:all .12s}.fb-btn:hover{background:var(--surface2)}.fb-btn.active-up{background:var(--green-dim);border-color:var(--green)}.fb-btn.active-down{background:var(--red-dim);border-color:var(--red)}.demo-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 0;color:var(--muted2)}.empty-icon{font-size:28px}.error-box{background:var(--red-dim);border:1px solid var(--red);border-radius:6px;padding:10px 14px;color:var(--red);font-size:12px;margin-bottom:16px}.ops-main{padding:28px 32px 80px;max-width:900px}.ops-header{margin-bottom:20px}.ops-header h1{font-size:20px;font-weight:800;letter-spacing:-.02em}.ops-header p{font-size:12px;color:var(--muted);margin-top:4px}.tab-bar{display:flex;gap:3px;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:0}.tab-btn{background:none;border:none;border-bottom:2px solid transparent;padding:8px 16px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:-1px;transition:all .14s;border-radius:6px 6px 0 0}.tab-btn:hover{color:var(--text)}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.section-head{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:7px;margin-bottom:14px}.panel-loading{padding:40px 0;text-align:center;color:var(--muted)}.panel-empty{padding:40px 0;text-align:center;color:var(--muted2);font-size:12px}.stat-row{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 18px;flex:1;min-width:110px}.stat-num{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1;margin-bottom:3px;font-variant-numeric:tabular-nums}.stat-num.accent{color:var(--accent)}.stat-num.green{color:var(--green)}.stat-num.red{color:var(--red)}.stat-num.amber{color:var(--amber)}.stat-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.stat-sub{font-size:10px;color:var(--muted2);margin-top:1px}.pipeline-summary{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}.ps-row{display:flex;align-items:center;gap:12px;font-size:12px}.ps-label{width:80px;color:var(--muted);flex-shrink:0}.ps-val{color:var(--text)}.ps-empty{font-size:12px;color:var(--muted2)}.user-contrib-list{display:flex;flex-direction:column;gap:6px}.user-contrib-row{display:flex;justify-content:space-between;font-size:12px;padding:6px 10px;background:var(--surface);border:1px solid var(--border);border-radius:6px}.uc-email{color:var(--muted)}.uc-count{color:var(--text);font-weight:600}.status-chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em}.status-chip.green{background:var(--green-dim);color:var(--green)}.status-chip.amber{background:var(--amber-dim);color:var(--amber)}.status-chip.red{background:var(--red-dim);color:var(--red)}.status-chip.muted{background:var(--surface2);color:var(--muted)}.trigger-section{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px 18px;margin-bottom:22px}.trigger-row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}.msg-box{margin-top:10px;padding:8px 12px;border-radius:6px;font-size:12px}.msg-box.success{background:var(--green-dim);color:var(--green)}.msg-box.error{background:var(--red-dim);color:var(--red)}.run-list{display:flex;flex-direction:column;gap:6px}.run-row{display:flex;align-items:center;gap:14px;padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:6px;font-size:12px;flex-wrap:wrap}.run-source{font-family:monospace;font-size:11px;color:var(--accent)}.run-time{color:var(--muted)}.run-dur{color:var(--muted2);font-variant-numeric:tabular-nums}.run-counts{color:var(--green)}.feedback-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}.total-count{font-size:12px;color:var(--muted)}.filter-row{display:flex;gap:4px;flex-wrap:wrap}.filter-btn{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:4px 10px;font-size:11px;color:var(--muted);transition:all .12s}.filter-btn:hover,.filter-btn.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}.feedback-table-wrap,.users-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:8px}.feedback-table{width:100%;border-collapse:collapse;font-size:12px}.feedback-table th{padding:8px 12px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--surface2);border-bottom:1px solid var(--border)}.feedback-table td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle}.feedback-table tr:last-child td{border-bottom:none}.feedback-table tr:hover td{background:var(--surface2)}.td-sku{font-family:monospace;font-size:11px;color:var(--accent)}.td-muted{color:var(--muted)}.fb-chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;white-space:nowrap}.fb-chip.thumbs_up{background:var(--green-dim);color:var(--green)}.fb-chip.thumbs_down{background:var(--red-dim);color:var(--red)}.fb-chip.correction{background:var(--amber-dim);color:var(--amber)}.fb-chip.skip{background:var(--surface2);color:var(--muted)}.rec-feedback{display:flex;flex-direction:column;gap:4px;padding:6px 12px 10px}.fb-thumbs{display:flex;gap:4px}.fb-btn{background:none;border:1px solid var(--border);border-radius:5px;padding:4px 8px;display:flex;align-items:center;transition:all .12s;color:var(--muted)}.fb-btn:hover{background:var(--surface2);color:var(--text)}.fb-btn.up.active{background:var(--green-dim);border-color:var(--green);color:var(--green)}.fb-btn.down.active{background:var(--red-dim);border-color:var(--red);color:var(--red)}.fb-detail{display:flex;flex-direction:column;gap:5px}.fb-reason{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:4px 7px;font-size:11px;color:var(--text)}.fb-note{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:5px 7px;font-size:11px;color:var(--text);resize:none;font-family:inherit}.fb-error{color:var(--red);font-size:11px}.fb-actions{display:flex;gap:5px}.fb-thanks{font-size:11px;color:var(--green);font-weight:600}.rec-feedback.submitted{padding:8px 12px}.gate-badge{position:absolute;bottom:4px;left:4px;background:var(--amber-dim);color:var(--amber);font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px}.rec-card.gate-fail .rec-img-wrap{opacity:.75}.method-pill{font-size:10px;font-weight:600;background:var(--surface2);color:var(--muted);border-radius:4px;padding:2px 7px}.btn-sm{background:var(--accent);color:#fff;border:none;border-radius:5px;padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer}.btn-sm.ghost{background:none;color:var(--muted);border:1px solid var(--border)}.btn-sm:disabled{opacity:.5;cursor:default}.role-select{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:3px 7px;font-size:11px;font-weight:600;color:var(--text)}@media(max-width:600px){.demo-main,.ops-main{padding:14px 14px 60px}.rec-grid{grid-template-columns:1fr 1fr}.form-row,.trigger-row{flex-direction:column;align-items:stretch}.stat-row{flex-direction:column}}