style.css

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--bg-primary:#0f0f1a;--bg-surface:#1a1a2e;--bg-card:#16213e;
--pastel-lavender:#c9b8ff;--pastel-mint:#b8ffd9;--pastel-peach:#ffd4b8;--pastel-sky:#b8e8ff;--pastel-rose:#ffb8d4;--pastel-lemon:#fffdb8;--pastel-lilac:#e8b8ff;--pastel-seafoam:#b8fff5;
--edge-default:#3a3a5c;--edge-candidate:#7c6fff;--edge-mst:#4fffb0;--edge-rejected:#ff4f6e;
--glow-node:rgba(180,140,255,0.55);--glow-mst:rgba(79,255,176,0.50);--glow-reject:rgba(255,79,110,0.45);--glow-active:rgba(255,220,100,0.55);
--text-primary:#f0eeff;--text-secondary:#9090b8;--text-accent:#a78bfa;
--accent-purple:#7c6fff;--accent-green:#4fffb0;--accent-pink:#ff6eb4;
--font-heading:'Outfit',sans-serif;--font-body:'Inter',sans-serif;--font-mono:'JetBrains Mono',monospace;
--spring:cubic-bezier(0.34,1.56,0.64,1);
}
:root{--sel-arrow: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='%239090b8'/%3E%3C/svg%3E")}
:root[data-theme="light"]{
--bg-primary:#f8f9fc;--bg-surface:#ffffff;--bg-card:#f0f2f8;
--text-primary:#1e293b;--text-secondary:#64748b;--text-accent:#6366f1;
--edge-default:#cbd5e1;--edge-candidate:#818cf8;--edge-mst:#10b981;--edge-rejected:#ef4444;
--glow-node:rgba(99,102,241,0.25);--glow-mst:rgba(16,185,129,0.3);--glow-reject:rgba(239,68,68,0.25);--glow-active:rgba(245,158,11,0.35);
--accent-purple:#6366f1;--accent-green:#10b981;--accent-pink:#ef4444;
--sel-arrow: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='%2364748b'/%3E%3C/svg%3E")
}
html,body{height:100%;overflow:hidden;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);transition:background 0.3s,color 0.3s}
#app{display:grid;grid-template-rows:auto 1fr 5px 180px;grid-template-columns:280px 5px 1fr;height:100vh;width:100vw}

/* HEADER */
header{grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:space-between;padding:10px 24px;background:rgba(26,26,46,0.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(124,111,255,0.15);z-index:100}
.header-left{display:flex;flex-direction:column}
.header-title{font-family:var(--font-heading);font-weight:700;font-size:1.6rem;background:linear-gradient(90deg,var(--accent-purple),var(--accent-green),var(--accent-pink));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.header-sub{font-size:.8rem;color:var(--text-secondary);margin-top:2px}
.header-right{display:flex;gap:8px}
.hdr-btn{background:var(--bg-card);border:1px solid rgba(124,111,255,0.2);color:var(--text-primary);padding:7px 14px;border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:.8rem;transition:all .2s var(--spring)}
.hdr-btn:hover:not(:disabled){border-color:var(--accent-purple);box-shadow:0 0 12px rgba(124,111,255,0.3)}
.hdr-btn:disabled{opacity:0.5;cursor:not-allowed}

/* SIDEBAR */
.sidebar{grid-column:1;grid-row:2;overflow-y:auto;background:var(--bg-surface);border-right:0px solid rgba(124,111,255,0.1);padding:16px;display:flex;flex-direction:column;gap:16px}
.resizer-v{grid-column:2;grid-row:2;width:100%;cursor:ew-resize;background:rgba(124,111,255,0.1);transition:background 0.2s}
.resizer-v:hover,.resizer-v.active{background:var(--accent-purple)}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:var(--accent-purple);border-radius:4px}
.panel-section{background:var(--bg-card);border-radius:12px;padding:14px;border:1px solid rgba(124,111,255,0.1)}
.panel-title{font-family:var(--font-heading);font-weight:600;font-size:.85rem;color:var(--text-accent);margin-bottom:10px;text-transform:uppercase;letter-spacing:.6px}

/* Mode toggles */
.mode-group{display:flex;gap:6px}
.mode-btn{flex:1;padding:8px 4px;border:1px solid rgba(124,111,255,0.15);background:transparent;color:var(--text-secondary);border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:.75rem;transition:all .25s var(--spring);text-align:center}
.mode-btn.active{background:rgba(124,111,255,0.2);color:#fff;border-color:var(--accent-purple);box-shadow:0 0 14px rgba(124,111,255,0.35)}
.mode-btn:hover{border-color:var(--accent-purple)}
.mode-icon{font-size:1.1rem;display:block;margin-bottom:2px}

/* Inputs */
.form-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.form-label{font-size:.75rem;color:var(--text-secondary);min-width:50px}
.form-input,.form-select{background:var(--bg-primary);border:1px solid rgba(124,111,255,0.2);color:var(--text-primary);padding:6px 10px;border-radius:8px;font-family:var(--font-mono);font-size:.8rem;width:100%;outline:none;transition:border-color .2s}
.form-input:focus,.form-select:focus{border-color:var(--accent-purple)}
.form-select{cursor:pointer;appearance:none;background-image:var(--sel-arrow);background-repeat:no-repeat;background-position:right 10px center}

/* Buttons */
.btn{padding:8px 14px;border:none;border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:.8rem;font-weight:500;transition:all .25s var(--spring);display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:linear-gradient(135deg,var(--accent-purple),#a855f7);color:#fff}
.btn-primary:hover{box-shadow:0 0 20px rgba(124,111,255,0.5);transform:translateY(-1px)}
.btn-success{background:linear-gradient(135deg,var(--accent-green),#34d399);color:#0f0f1a}
.btn-success:hover{box-shadow:0 0 20px rgba(79,255,176,0.5);transform:translateY(-1px)}
.btn-danger{background:linear-gradient(135deg,var(--accent-pink),#f43f5e);color:#fff}
.btn-danger:hover{box-shadow:0 0 20px rgba(255,110,180,0.4);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid rgba(124,111,255,0.2);color:var(--text-secondary)}
.btn-ghost:hover{border-color:var(--accent-purple);color:var(--text-primary)}
.btn-sm{padding:5px 10px;font-size:.72rem}
.btn-block{width:100%;justify-content:center}

/* Algo controls */
.algo-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* Slider */
.slider-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.slider-row label{font-size:.72rem;color:var(--text-secondary);white-space:nowrap}
input[type=range]{-webkit-appearance:none;background:var(--bg-primary);height:4px;border-radius:4px;outline:none;flex:1}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent-purple);border-radius:50%;cursor:pointer;box-shadow:0 0 8px rgba(124,111,255,0.5)}

/* Stats */
.stat-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.stat-label{font-size:.75rem;color:var(--text-secondary)}
.stat-value{font-family:var(--font-mono);font-size:.8rem;color:var(--accent-green)}

/* CANVAS */
.canvas-wrap{grid-column:3;grid-row:2;position:relative;overflow:hidden;background:var(--bg-primary)}
#graphCanvas{display:block;width:100%;height:100%;cursor:crosshair}
.canvas-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:.72rem;color:var(--text-secondary);background:rgba(22,33,62,0.8);padding:5px 14px;border-radius:20px;pointer-events:none;backdrop-filter:blur(8px)}

.resizer-h{grid-column:1/-1;grid-row:3;height:100%;cursor:ns-resize;background:rgba(124,111,255,0.1);transition:background 0.2s}
.resizer-h:hover,.resizer-h.active{background:var(--accent-purple)}

/* BOTTOM PANEL */
.bottom-panel{grid-column:1/-1;grid-row:4;background:var(--bg-surface);display:flex;flex-direction:column}
.bottom-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid rgba(124,111,255,0.08)}
.bottom-header h3{font-family:var(--font-heading);font-size:.85rem;font-weight:600;color:var(--text-accent)}
.step-log{flex:1;overflow-y:auto;padding:6px 12px}
.step-log::-webkit-scrollbar{width:4px}
.step-log::-webkit-scrollbar-thumb{background:var(--accent-purple);border-radius:4px}
.step-entry{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;margin-bottom:4px;font-size:.78rem;font-family:var(--font-mono);animation:slideUp .3s var(--spring);border-left:3px solid transparent}
.step-entry.accept{border-left-color:var(--edge-mst);background:rgba(79,255,176,0.06)}
.step-entry.reject{border-left-color:var(--edge-rejected);background:rgba(255,79,110,0.06)}
.step-entry.current{background:rgba(124,111,255,0.15)}
.step-entry.sort{border-left-color:var(--accent-purple);background:rgba(124,111,255,0.06)}
.step-icon{font-size:1rem;flex-shrink:0}
.step-num{color:var(--text-secondary);min-width:48px}
.step-msg{color:var(--text-primary)}
.step-entry.reject .step-msg{text-decoration:line-through;text-decoration-color:var(--edge-rejected);opacity:.8}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* TOAST */
.toast-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:10px 18px;border-radius:12px;font-size:.8rem;font-family:var(--font-body);backdrop-filter:blur(10px);animation:toastIn .35s var(--spring);box-shadow:0 4px 24px rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.08)}
.toast.green{background:rgba(79,255,176,0.15);color:var(--accent-green)}
.toast.purple{background:rgba(124,111,255,0.15);color:var(--accent-purple)}
.toast.pink{background:rgba(255,110,180,0.15);color:var(--accent-pink)}
.toast.gray{background:rgba(144,144,184,0.15);color:var(--text-secondary)}
.toast.out{animation:toastOut .3s forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{to{opacity:0;transform:translateX(60px)}}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(15,15,26,0.7);backdrop-filter:blur(6px);z-index:8000;display:none;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:var(--bg-card);border:1px solid rgba(124,111,255,0.2);border-radius:16px;padding:32px;text-align:center;animation:modalIn .4s var(--spring);max-width:400px;width:90%;box-shadow:0 16px 64px rgba(0,0,0,0.6)}
.modal h2{font-family:var(--font-heading);font-size:1.4rem;margin-bottom:8px}
.modal p{color:var(--text-secondary);font-size:.9rem;margin-bottom:6px}
.modal .big-num{font-family:var(--font-mono);font-size:2rem;color:var(--accent-green);margin:12px 0}
.modal-buttons{display:flex;gap:10px;justify-content:center;margin-top:18px}
@keyframes modalIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}

/* CONTEXT MENU */
.context-menu{position:fixed;z-index:9000;background:var(--bg-card);border:1px solid rgba(124,111,255,0.3);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);backdrop-filter:blur(16px);padding:6px;animation:ctxIn .15s var(--spring);min-width:150px;display:none}
.context-menu.show{display:block}
.ctx-item{padding:8px 14px;border-radius:6px;font-size:.8rem;cursor:pointer;color:var(--text-primary);transition:background .15s}
.ctx-item:hover{background:rgba(124,111,255,0.15)}
.ctx-item.danger{color:var(--accent-pink)}
@keyframes ctxIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* CONFETTI */
.confetti-piece{position:fixed;width:8px;height:8px;z-index:9500;border-radius:2px;pointer-events:none;animation:confettiFall var(--dur) linear forwards}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}

/* RESPONSIVE */
@media(max-width:1024px){
#app{grid-template-columns:60px 4px 1fr!important}
.sidebar{padding:8px;align-items:center}
.panel-title,.form-row,.stat-row,.form-label,.slider-row label,.mode-btn span:not(.mode-icon){display:none}
.mode-btn{padding:10px 4px}
.btn span{display:none}
}
@media(max-width:768px){
#app{grid-template-columns:1fr!important;grid-template-rows:auto 1fr auto auto!important}
.sidebar{grid-column:1/-1;grid-row:4;flex-direction:row;overflow-x:auto;overflow-y:hidden;border-top:1px solid rgba(124,111,255,0.1);height:auto;max-height:200px}
.panel-section{min-width:200px}
.resizer-v,.resizer-h{display:none}
}

/* Inline error */
.inline-error{color:var(--accent-pink);font-size:.72rem;margin-top:4px;display:none}
.inline-error.show{display:block}