.demo-container{min-height:100vh;background:var(--bg);color:var(--t1)}.demo-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;background:rgba(5,8,15,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);justify-content:space-between;padding:0 32px}.demo-nav,.demo-nav-left{display:flex;align-items:center}.demo-nav-left{gap:24px}.demo-back{font-family:var(--mono);font-size:12px;color:var(--t2);text-decoration:none;transition:color .2s}.demo-back:hover{color:var(--amber)}.demo-brand{gap:10px;font-family:var(--display);font-size:18px;letter-spacing:.07em;color:var(--t1)}.demo-brand,.demo-nav-right{display:flex;align-items:center}.demo-nav-right{gap:16px}.demo-status{font-family:var(--mono);font-size:10px;padding:4px 12px;border-radius:6px;border:1px solid;display:flex;align-items:center;gap:6px;background:rgba(5,8,15,.8)}.demo-status-dot{width:6px;height:6px;border-radius:50%;animation:pulse 2s ease-in-out infinite}.demo-mode-toggle{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:3px}.demo-mode-toggle button{font-family:var(--mono);font-size:11px;font-weight:600;padding:6px 14px;border:none;border-radius:4px;background:transparent;color:var(--t2);cursor:pointer;transition:all .2s}.demo-mode-toggle button.active{background:var(--amber);color:#000}.demo-mode-toggle button:disabled{opacity:.5;cursor:not-allowed}.demo-btn{font-family:var(--body);font-size:13px;font-weight:700;padding:10px 20px;border:none;border-radius:6px;cursor:pointer;transition:all .2s}.demo-btn-start{background:var(--green);color:#000}.demo-btn-start:hover{background:#20f5a8;transform:translateY(-1px)}.demo-btn-stop{background:var(--red);color:#fff}.demo-btn-stop:hover{background:#ff8787}.demo-stats{margin-top:64px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;padding:24px 32px}.demo-stat{text-align:center}.demo-stat-val{font-family:var(--mono);font-size:28px;font-weight:600;color:var(--amber);line-height:1;margin-bottom:6px}.demo-stat-lbl{font-family:var(--mono);font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}.demo-main{display:grid;grid-template-columns:1fr 400px;grid-gap:1px;gap:1px;background:var(--border);border-top:1px solid var(--border)}.demo-section-title{font-family:var(--mono);font-size:11px;color:var(--amber);text-transform:uppercase;letter-spacing:.12em;margin-bottom:20px}.demo-accounts{background:var(--bg);padding:32px}.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:16px;gap:16px}.demo-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;transition:all .3s;position:relative}.demo-card.observing{border-color:#00d4e8;box-shadow:0 0 20px rgba(0,212,232,.15)}.demo-card.calculating{border-color:#a78bfa;box-shadow:0 0 20px rgba(167,139,250,.15)}.demo-card.acting{border-color:#f5a20a;box-shadow:0 0 20px rgba(245,162,10,.15)}.demo-card.measuring{border-color:#10e89a;box-shadow:0 0 20px rgba(16,232,154,.15)}.demo-card.done{border-color:var(--green)}.demo-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.demo-card-name{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:4px}.demo-card-meta{font-family:var(--mono);font-size:11px;color:var(--t3)}.demo-spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.demo-card-result{margin-top:12px}.demo-badge{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;padding:4px 10px;border-radius:4px;background:rgba(16,232,154,.1);border:1px solid rgba(16,232,154,.3);color:var(--green)}.demo-log-panel{background:var(--surface);padding:32px;max-height:calc(100vh - 300px);display:flex;flex-direction:column}.demo-log{flex:1 1;overflow-y:auto;font-family:var(--mono);font-size:11px;line-height:1.6}.demo-log-entry{padding:6px 0;border-bottom:1px solid rgba(21,31,53,.5);display:flex;gap:12px}.demo-log-time{color:var(--t3);flex-shrink:0}.demo-log-msg{color:var(--t2)}.log-observing .demo-log-msg{color:#00d4e8}.log-calculating .demo-log-msg{color:#a78bfa}.log-acting .demo-log-msg{color:#f5a20a}.log-measuring .demo-log-msg{color:#10e89a}.log-system .demo-log-msg{color:#475569}.demo-log-empty{color:var(--t3);text-align:center;padding:40px 20px}.demo-optimization{background:var(--bg);padding:32px;border-top:1px solid var(--border)}.demo-opt-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:1px;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}.demo-opt-col{background:var(--surface);padding:32px}.demo-opt-col.v1{border-top:3px solid var(--red)}.demo-opt-col.v2{border-top:3px solid var(--green)}.demo-opt-badge{font-family:var(--mono);font-size:10px;font-weight:600;padding:4px 10px;border-radius:4px;display:inline-block;margin-bottom:16px}.demo-opt-badge.v1{color:var(--red);background:hsla(0,91%,71%,.1);border:1px solid hsla(0,91%,71%,.3)}.demo-opt-badge.v2{color:var(--green);background:rgba(16,232,154,.1);border:1px solid rgba(16,232,154,.3)}.demo-opt-title{font-family:var(--display);font-size:24px;letter-spacing:.02em;color:var(--t1);margin-bottom:12px}.demo-opt-desc{font-size:13px;color:var(--t2);margin-bottom:24px;line-height:1.6}.demo-opt-stats{display:flex;gap:32px}.demo-opt-stat{flex:1 1}.demo-opt-stat-val{font-family:var(--mono);font-size:32px;font-weight:600;color:var(--t1);display:block;margin-bottom:6px}.demo-opt-stat-lbl{font-family:var(--mono);font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@media (max-width:900px){.demo-nav{padding:0 16px}.demo-nav-left{gap:12px}.demo-brand{font-size:14px}.demo-stats{padding:20px 16px;flex-wrap:wrap;gap:16px}.demo-main{grid-template-columns:1fr}.demo-accounts,.demo-log-panel{padding:20px 16px}.demo-grid,.demo-opt-grid{grid-template-columns:1fr}.demo-optimization{padding:20px 16px}}