*{margin:0;padding:0;box-sizing:border-box}:root{--color-bg: #222;--color-node-default: #ddd;--color-node-selected: #ff6b6b;--color-node-assigned: #a8e6cf;--color-node-inferred: #ff6b6b;--color-node-stroke: #666;--color-text-default: #333;--color-edge-default: #555;--color-check-v: #ed8936;--color-check-u: #ecc94b;--color-error: #e74c3c;--color-bg-primary: #1a1a1a;--color-bg-secondary: #222;--color-bg-panel: #1e1e1e;--color-border: #333;--color-text-primary: #fff;--color-text-secondary: #ccc;--color-text-muted: #888;--color-accent-blue: #4a9eff;--color-accent-orange: #ed8936;--color-accent-yellow: #ecc94b;--color-accent-green: #4aff4a;--color-accent-red: #ff6b6b;--color-highlight-border: #ffffff;--color-accent-purple: #c678dd;--color-highlight-purple: rgba(198, 120, 221, .2);--color-highlight-blue: #63b3ed;--color-highlight-red: #fc8181;--color-highlight-orange: #fbd38d;--color-white: #ffffff;--color-text-light: #aaa;--color-text-dark-gray: #777;--color-bg-light-gray: #ddd;--color-highlight-green-light: #a8e6cf}body{font-family:Courier New,monospace;background:#1a1a1a;color:#e0e0e0;padding:0;overflow:hidden;height:100vh;display:flex;flex-direction:column}#root{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.global-nav{display:flex;align-items:center;gap:24px;padding:10px 24px;background:linear-gradient(180deg,#1e1e1e,#1a1a1a);border-bottom:1px solid #333}.global-nav__brand{display:flex;align-items:center;gap:8px}.global-nav__logo{font-size:18px;font-weight:700;color:#4a9eff;letter-spacing:.3px}.global-nav__badge{font-size:10px;background:#667eea40;color:#667eea;padding:2px 6px;border-radius:8px;font-weight:500}.global-nav__links{display:flex;gap:4px;margin-left:16px}.global-nav__link{padding:6px 14px;border-radius:6px;font-size:13px;font-weight:500;color:#fff9;text-decoration:none;transition:all .15s ease}.global-nav__link:hover{color:#ffffffe6;background:#ffffff0f}.global-nav__link--active{color:#4a9eff;background:#4a9eff1f}.global-nav__feedback{margin-left:auto;color:#667eea;text-decoration:none;font-size:11px;opacity:.85;display:flex;align-items:center;gap:3px;transition:opacity .15s}.global-nav__feedback:hover{opacity:1}circle.node-default{fill:var(--color-node-default);stroke:var(--color-node-stroke);stroke-width:2px}circle.node-assigned{fill:var(--color-node-assigned);stroke:#16a085;stroke-width:2px}circle.node-inferred{fill:var(--color-node-inferred);stroke:var(--color-highlight-border);stroke-width:15px}circle.node-ring-active-v{stroke:var(--color-check-v);stroke-width:5px;fill:none;opacity:.8}circle.node-ring-active-u{stroke:var(--color-check-u);stroke-width:5px;fill:none;opacity:.8}circle.node-ring-selected{stroke:#fff;stroke-width:4px;fill:none;opacity:1;stroke-dasharray:4 2}circle.node-highlight-manual{stroke:var(--color-accent-purple);stroke-width:4px;fill:none;opacity:1;filter:drop-shadow(0 0 5px var(--color-accent-purple))}line.edge-highlight-manual{stroke:var(--color-accent-purple)!important;stroke-width:4px!important;opacity:1!important}circle.node-selected{fill:var(--color-node-selected)}line.edge-default{stroke:var(--color-edge-default);stroke-width:1;opacity:.6}line.edge-active{stroke:var(--color-check-v)}.node-highlight-queue{stroke:var(--color-accent-purple);stroke-dasharray:6 3}.clickable-label{cursor:pointer;border-radius:3px;padding:0 2px;transition:all .2s ease}.clickable-label:hover{background:var(--color-highlight-purple-faint);color:var(--color-accent-purple);text-decoration:underline}.highlighted-label{background:var(--color-highlight-purple-faint);color:var(--color-accent-purple);border:1px solid var(--color-accent-purple)}.edge-active{stroke:var(--color-check-v);stroke-width:4;opacity:1}.edge-highlight-manual{stroke:var(--color-accent-purple)!important;stroke-width:4px!important;opacity:1!important;z-index:100}.container{width:100%;max-width:none;margin:0;padding:20px;flex:1;display:flex;flex-direction:column;min-height:0}header{position:relative;background:#2a2a2acc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);min-height:50px;padding:5px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;z-index:100;box-shadow:0 4px 6px #0000001a;margin-bottom:20px;width:100%}.navbar{display:flex;align-items:center;gap:10px}.logo{font-weight:700;font-size:16px;color:#4a9eff;letter-spacing:.5px;white-space:nowrap}.nav-links{display:flex;gap:5px}.nav-btn{background:transparent;border:none;color:#888;padding:6px 12px;font-size:13px;border-radius:4px;transition:all .2s ease}.nav-btn:hover:not(.disabled){color:#fff;background:#ffffff0d}.nav-btn.active{color:#4a9eff;background:#4a9eff1a;font-weight:600}.nav-btn.disabled{opacity:.5;cursor:not-allowed}.controls-bar{display:flex;align-items:center;gap:20px;flex:1;justify-content:space-between;flex-wrap:wrap}.parameters-group,.playback-group,.speed-control,.meta-group{display:flex;align-items:center;gap:5px;white-space:nowrap}.meta-group{flex-shrink:0}.divider{width:1px;height:24px;background:#ffffff1a;margin:0 5px}select,input[type=text],input[type=number]{background:#1a1a1a;border:1px solid #444;color:#e0e0e0;padding:4px 8px;border-radius:4px;font-family:inherit;font-size:12px;outline:none}select:focus,input:focus{border-color:#4a9eff}.checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:#ccc;cursor:pointer;-webkit-user-select:none;user-select:none}button{background:#2d2d2d;color:#e0e0e0;border:1px solid #444;padding:6px 14px;border-radius:6px;font-family:inherit;font-size:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center;min-height:32px;height:auto}button:hover{background:#363636;border-color:#666;transform:translateY(-1px)}button:active{transform:translateY(0)}button.primary{background:linear-gradient(135deg,#2a5a8a,#1a4a7a);border-color:#3a6a9a;color:#fff;font-weight:600}button.primary:hover{background:linear-gradient(135deg,#3a6a9a,#2a5a8a);box-shadow:0 0 10px #4a9eff4d}button.action-btn{background:linear-gradient(135deg,#2a8a5a,#1a7a4a);border-color:#3aa6a9;color:#fff;white-space:nowrap;padding:6px 18px;min-width:140px}button.action-btn:hover{background:linear-gradient(135deg,#3aa6a9,#2a8a5a);box-shadow:0 0 10px #2a8a5a4d}#step-counter{background:#0003;padding:0 12px;height:32px;border-radius:16px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;font-size:12px;white-space:nowrap}.panel{background:#2a2a2a;border:2px solid #444;padding:15px}.variable-state-layout{display:flex;gap:0;flex:1;overflow:hidden;align-items:stretch}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.panel-header h2,.panel>h2,#event-details h2,#event-log-panel h2{margin-bottom:10px;font-size:16px;color:var(--color-accent-blue);font-weight:700}.info-card{background:#0003;border:1px solid #444;border-radius:6px;padding:16px;display:flex;flex-direction:column;justify-content:center;flex:1;margin-bottom:12px;min-height:80px}.info-card:last-child{margin-bottom:0}.info-label{text-transform:uppercase;font-size:14px;letter-spacing:1px;font-weight:700;color:var(--color-text-secondary);margin-bottom:8px}.info-value{font-size:20px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.graph-layout-container{display:flex;flex-direction:row;gap:15px;flex:1;min-height:0}.side-legend{width:140px;flex-shrink:0;background:#0003;border-radius:4px;padding:15px 10px;display:flex;flex-direction:column;gap:12px;border:1px solid #333}.domain-cell{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.domain-cell:hover{white-space:normal;overflow:visible;background:#444;position:relative;z-index:10}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{border:1px solid #444;padding:8px 10px;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:#e0e0e0}tr:hover{background:#ffffff0d}th{background:#333;font-size:13px;text-transform:uppercase;color:var(--color-accent-blue);font-weight:700}#state-container{flex:1;overflow:visible;position:relative}.layout{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;flex:1;min-height:0;margin-bottom:10px;width:100%}.left-column{display:flex;flex-direction:column;gap:15px;height:100%;overflow-y:auto;padding-left:8px;direction:rtl}.left-column>*{direction:ltr}.right-column{display:flex;flex-direction:column;gap:15px;height:100%;overflow-y:auto;padding-right:8px}#graph-panel{flex:0 0 auto;background:#2a2a2a;border:2px solid #444;padding:10px;display:flex;flex-direction:column}#graph-container{flex:1;background:#1a1a1a;border:1px solid #333;min-height:300px;max-height:400px}#event-log-panel{flex:1;min-height:250px;display:flex;flex-direction:column}#event-log{background:var(--color-bg-primary);padding:0;border:1px solid var(--color-border);flex:1;min-height:0;overflow:hidden;font-size:13px;display:flex;flex-direction:column;position:relative}#event-log-content{flex:1;overflow-y:auto;min-height:0;direction:rtl}.log-item{direction:ltr;padding-left:10px}.log-filters{display:flex;gap:6px;align-items:center}.log-filters input[type=number],.log-filters select{background:#1a1a1a;border:1px solid #444;color:#e0e0e0;padding:4px 8px;border-radius:4px;font-family:inherit;font-size:11px;outline:none;width:70px}.log-filters select{width:140px;cursor:pointer}.log-filters input:focus,.log-filters select:focus{border-color:#4a9eff}tr.active-row td{background:#4a9eff1a!important;border-top:1px solid rgba(74,158,255,.4);border-bottom:1px solid rgba(74,158,255,.4);color:var(--color-white)}tr.assigned-row td{background:#ffffff08;color:var(--color-text-muted)}#event-details{background:var(--color-bg-primary);padding:10px;border:1px solid var(--color-border);overflow-x:auto}tr.row-highlight-manual td{background:var(--color-highlight-purple)!important;border-left:3px solid var(--color-accent-purple)!important}pre{margin:0;font-size:12px;color:var(--color-text-secondary)}tr.active-ac3-v-row td{background:#ed893626!important;border-left:3px solid var(--color-accent-orange)}tr.active-ac3-u-row td{background:#ecc94b1a!important;border-left:3px solid var(--color-accent-yellow)}.cell-ac3-v{background-color:var(--color-accent-orange)!important;color:var(--color-white)!important;font-weight:700;border-radius:2px}.cell-ac3-u{background-color:var(--color-accent-yellow)!important;color:var(--color-bg-primary)!important;font-weight:700;border:1px solid var(--color-accent-orange);border-radius:2px}.legend-item{display:flex;align-items:center;font-size:11px;color:var(--color-text-light)}.legend-item .swatch{width:8px;height:8px;border-radius:50%;margin-right:4px}.legend-item .swatch.gray{background:var(--color-bg-light-gray)}.legend-item .swatch.green{background:var(--color-highlight-green-light)}.legend-item .swatch.red{background:var(--color-accent-red)}.legend-item .swatch.orange{background:var(--color-accent-orange)}.swatch.white-dotted{background:transparent;border:2px dashed #fff}.swatch.purple{background:var(--color-accent-purple)}.color-swatch{width:12px;height:12px;display:inline-block;margin-right:6px;border:1px solid #555;border-radius:2px}#state-container{flex:1;overflow-y:auto}.sudoku-cell.border-left-thick{border-left:3px solid #111!important}.sudoku-cell.border-top-thick{border-top:3px solid #111!important}.sudoku-cell{font-family:Inter,Roboto,sans-serif;font-size:20px;transition:background-color .1s;cursor:default;position:relative;-webkit-user-select:none;user-select:none;background-color:var(--color-white);border:1px solid #ddd;box-sizing:border-box}.cell-fixed{color:#000;font-weight:900;background-color:var(--color-white)}.cell-assigned{background-color:var(--color-white);color:var(--color-text-dark-gray);font-weight:700}.cell-selected{outline:3px solid var(--color-highlight-orange)!important;z-index:10}.cell-active{outline:3px solid var(--color-accent-blue)!important;box-shadow:0 0 10px #4a9eff80;z-index:11}.cell-highlight{background-color:var(--color-highlight-blue)!important;color:var(--color-white)!important}.cell-error{background-color:var(--color-highlight-red)!important;color:var(--color-white)!important}.variable-state-layout{display:flex;flex-direction:row;gap:15px;align-items:stretch;min-height:0;max-height:45vh;flex:1;overflow:hidden}.table-container{flex:1 1 0;min-width:300px;overflow-y:auto}.focus-pane.side-focus{flex:0 0 auto;width:auto;min-width:240px;max-width:50%;flex-shrink:0;padding:16px;background:var(--color-bg-panel);border:1px solid var(--color-border);border-left:4px solid var(--color-accent-orange);display:flex;flex-direction:column;justify-content:flex-start;align-self:stretch;height:auto;overflow-y:auto}.focus-pane.side-focus>.focus-group:last-child{flex:1;margin-bottom:0}.focus-header{margin-bottom:20px}.focus-label{text-transform:uppercase;font-size:14px;color:var(--color-text-secondary);letter-spacing:1px;font-weight:700;margin-bottom:8px}.focus-main-title{font-size:20px;font-weight:700;color:var(--color-text-primary);line-height:1.2;white-space:nowrap}.focus-group{background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:6px;padding:12px;margin-bottom:12px}.focus-group:last-child{flex:1;margin-bottom:0}.group-title{font-size:11px;color:#888;text-transform:uppercase;margin-bottom:8px;display:block}.group-content{font-size:14px;color:#eee}.highlight-v{color:#ed8936;font-weight:700}.highlight-u{color:#ecc94b;font-weight:700}.focus-pane.hidden{display:none}.focus-title{font-size:11px;text-transform:uppercase;color:#ed8936;letter-spacing:1px;font-weight:700}.focus-content{display:flex;flex-direction:column;gap:8px}.focus-main{font-size:20px;font-weight:700;color:#fff;font-family:Inter,sans-serif}.focus-details{display:flex;gap:20px;font-size:13px;color:#ccc;background:#0000004d;padding:10px;border-radius:4px;border:1px solid #333}.focus-var-info{display:flex;flex-direction:column;gap:4px}.focus-var-name{color:#4a9eff;font-weight:700}.focus-var-val{font-family:monospace;font-size:12px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.state-context-container{margin-bottom:8px;padding:5px 10px;background:#4a9eff14;border:1px solid rgba(74,158,255,.2);border-radius:4px;display:none}.state-context-container.visible{display:block}.state-context-label{font-size:10px;text-transform:uppercase;color:#4a9eff;margin-bottom:4px;display:block;font-weight:700}.cell-pencil{padding:2px}.pencil-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;font-size:10px;line-height:1;color:#718096}.pencil-grid span{display:flex;align-items:center;justify-content:center}#event-log{background:#1a1a1a;padding:0;border:1px solid #333;flex:1;overflow:visible;font-size:13px}.log-item{padding:6px 10px;border-bottom:1px solid #222;cursor:pointer;display:flex;align-items:center}.log-item:hover{background:#333}.active-log-item{background:#2a4a2a;border-left:3px solid #4aff4a}.step-num{color:#666;margin-right:8px;min-width:30px}.icon{margin-right:8px}.event-backtrack{color:#ff6b6b}.event-solution{color:#4aff4a}.event-heuristic{color:#4a9eff}.event-propagation{color:#9a6aff}.event-default{color:#ccc}input[type=range]{width:150px}.empty-state{text-align:center;padding:20px;color:#666}.empty-state p{margin:5px 0;font-size:14px}.empty-state strong{color:#999}.legend-item{display:flex;align-items:center;gap:5px}.swatch{width:12px;height:12px;border-radius:50%;display:inline-block}.swatch.gray{background-color:#444;border:1px solid #666}.swatch.green{background-color:#4caf50}.swatch.red{background-color:#ff5252}.swatch.orange{background-color:#ffa726;border-radius:2px;height:4px;width:16px}.status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status-badge.running{background:#ffa72633;color:#ffa726;border:1px solid rgba(255,167,38,.3);animation:pulse 2s infinite}.status-badge.finished{background:#4caf5033;color:#4caf50;border:1px solid rgba(76,175,80,.3)}.status-badge.ready{background:#4a9eff1a;color:#4a9eff;border:1px solid rgba(74,158,255,.2)}.status-badge.hidden{display:none}@keyframes pulse{0%{opacity:1}50%{opacity:.6}to{opacity:1}}.ac3-split-container{display:flex;gap:15px;margin-top:10px;height:250px}.ac3-info-column{flex:1;display:flex;flex-direction:column}.ac3-queue-column{flex:1;background:#0003;border-radius:4px;padding:8px;border:1px solid #444;overflow-y:auto}.ac3-added-arcs-container{margin-top:8px;border-top:1px solid var(--color-border);padding-top:5px;flex:1;display:flex;flex-direction:column;min-height:0}.ac3-added-label{color:var(--color-accent-orange);display:block;margin-bottom:2px;font-size:11px}.ac3-added-list{font-size:10px;color:var(--color-text-secondary);background:var(--color-bg-secondary);padding:5px;border-radius:3px;flex:1;overflow-y:auto}.ac3-queue-title{font-size:11px;text-transform:uppercase;color:#ffa726;margin-bottom:5px;border-bottom:1px solid #444;padding-bottom:2px}.ac3-queue-list{list-style:none;padding:0;font-size:11px;color:#ccc}.ac3-queue-item{margin-bottom:3px;padding:2px 4px;border-radius:2px;background:#ffffff08}.queue-indicator{background:#ffffff0d;padding:10px;border-radius:4px;margin-bottom:10px;border-left:3px solid #ffa726}.queue-label{font-size:11px;text-transform:uppercase;color:#888;margin-bottom:4px;display:block}.queue-bar-container{height:6px;background:#333;border-radius:3px;overflow:hidden;margin-top:5px}.queue-bar{height:100%;background:#ffa726;width:0%;transition:width .3s ease}.controls-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:15px;z-index:10}.controls-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;margin-left:auto;padding-right:15px}.controls-right .playback-group{margin:0}.controls-right .meta-group{font-size:.85em;opacity:.9}