*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#020408;--s1:#060c18;--s2:#0c1424;--s3:#142030;--b:#1a2844;--t:#e8ecf4;--td:#5a6c8a;--a:#00e5a0;--a2:#00ccff;--gold:#ffd666;--red:#ff4466;--purple:#9966ff;--r:12px;--glow:0 0 20px rgba(0,229,160,.08)}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--t);height:100vh;overflow:hidden}
canvas#particles{position:fixed;inset:0;z-index:0;pointer-events:none}
.app{position:relative;z-index:1;display:grid;grid-template-columns:420px 1fr;grid-template-rows:52px 1fr 44px;height:100vh;gap:0}

/* ═══ TOP BAR ═══ */
.top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:linear-gradient(180deg,rgba(6,12,24,.98),rgba(2,4,8,.95));border-bottom:1px solid rgba(0,229,160,.06);box-shadow:0 1px 30px rgba(0,0,0,.5);z-index:10}
.logo{display:flex;align-items:center;gap:10px}
.logo svg{width:24px;height:24px;filter:drop-shadow(0 0 6px rgba(0,229,160,.4))}
.logo h1{font-size:16px;font-weight:800;letter-spacing:-.3px;background:linear-gradient(135deg,#00e5a0 0%,#00ccff 50%,#9966ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.logo .ver{font-size:8px;padding:2px 7px;border-radius:10px;background:rgba(0,229,160,.08);color:var(--a);font-family:'JetBrains Mono';font-weight:500;border:1px solid rgba(0,229,160,.12)}
.ctrls{display:flex;gap:5px;align-items:center}
select,button,.toggle{font-family:'Inter';font-size:10px;border-radius:8px;padding:7px 11px;border:none;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);letter-spacing:.2px}
select{background:rgba(12,20,36,.9);color:var(--t);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5' fill='%235a6c8a'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:22px}
select:hover{border-color:rgba(0,229,160,.2);box-shadow:0 0 12px rgba(0,229,160,.06)}
select:focus{outline:none;border-color:rgba(0,229,160,.3)}
.btn-go{background:linear-gradient(135deg,#00e5a0,#00bb88);color:#000;font-weight:700;font-size:10px;letter-spacing:.5px;box-shadow:0 2px 16px rgba(0,229,160,.2),inset 0 1px 0 rgba(255,255,255,.15);text-transform:uppercase}
.btn-go:hover{box-shadow:0 4px 24px rgba(0,229,160,.35),inset 0 1px 0 rgba(255,255,255,.2);transform:translateY(-1px)}
.btn-go:active{transform:translateY(0);box-shadow:0 1px 8px rgba(0,229,160,.2)}
.btn-rst{background:rgba(12,20,36,.8);color:var(--td);border:1px solid rgba(255,255,255,.05);font-size:12px;padding:7px 10px}
.btn-rst:hover{border-color:rgba(255,255,255,.12);color:var(--t)}
.toggle{background:rgba(12,20,36,.8);color:var(--td);border:1px solid rgba(255,255,255,.05);font-size:9px;display:flex;align-items:center;gap:5px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.toggle.on{border-color:rgba(0,229,160,.25);color:var(--a);background:rgba(0,229,160,.04);box-shadow:0 0 12px rgba(0,229,160,.06)}
.toggle .dot{width:5px;height:5px;border-radius:50%;background:var(--td);transition:all .3s}
.toggle.on .dot{background:var(--a);box-shadow:0 0 8px var(--a)}
.status{font-size:9px;color:var(--td);font-family:'JetBrains Mono';font-weight:500;display:flex;align-items:center;gap:6px}
.status .pulse{width:6px;height:6px;border-radius:50%;background:var(--a);box-shadow:0 0 8px var(--a);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 8px var(--a)}50%{opacity:.3;box-shadow:0 0 4px var(--a)}}

/* ═══ LEFT - ENV ═══ */
.left{background:var(--bg);display:flex;flex-direction:column;overflow:hidden;border-right:1px solid rgba(255,255,255,.03);position:relative}
.left::after{content:'';position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(0,229,160,.08),transparent)}
.left canvas{flex:1;width:100%;display:block}

/* ═══ RIGHT - DASHBOARD ═══ */
.right{background:var(--bg);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:180px 1fr 148px;gap:0;overflow:hidden}
.card{background:rgba(6,12,24,.85);backdrop-filter:blur(12px);padding:10px 14px;position:relative;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.02);transition:border-color .3s}
.card:hover{border-color:rgba(0,229,160,.06)}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,229,160,.1),rgba(0,204,255,.06),transparent)}
.card::after{content:'';position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(0,229,160,.06),transparent)}
.card h4{font-size:9px;font-weight:700;color:var(--td);text-transform:uppercase;letter-spacing:1.8px;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.card h4 i{font-style:normal;font-size:11px}
.card-wide{grid-column:1/-1}
.card canvas{flex:1;width:100%;border-radius:6px}

/* ═══ MEMORY FEED ═══ */
.mem-feed{flex:1;overflow-y:auto;font-size:10px;font-family:'JetBrains Mono'}
.mem-feed::-webkit-scrollbar{width:2px}
.mem-feed::-webkit-scrollbar-track{background:transparent}
.mem-feed::-webkit-scrollbar-thumb{background:rgba(0,229,160,.15);border-radius:2px}
.mem-item{padding:5px 8px;margin-bottom:2px;border-radius:6px;border-left:2px solid rgba(255,255,255,.04);background:rgba(255,255,255,.008);display:flex;gap:6px;align-items:flex-start;animation:fadeSlide .4s cubic-bezier(.4,0,.2,1);line-height:1.35}
.mem-item.good{border-left-color:var(--a);background:rgba(0,229,160,.02)}
.mem-item.bad{border-left-color:var(--red);background:rgba(255,68,102,.02)}
.mem-item.info{border-left-color:var(--a2);background:rgba(0,204,255,.015)}
.mem-item .time{color:var(--td);font-size:8px;min-width:34px;opacity:.6}
.mem-item .msg{flex:1}
@keyframes fadeSlide{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* ═══ REFLECTION ═══ */
.refl-feed{flex:1;overflow-y:auto;font-family:'JetBrains Mono';font-size:10px;color:var(--a2);background:rgba(0,0,0,.25);border-radius:8px;padding:8px 10px;border:1px solid rgba(0,204,255,.04)}
.refl-feed::-webkit-scrollbar{width:2px}
.refl-feed::-webkit-scrollbar-thumb{background:rgba(0,204,255,.15);border-radius:2px}
.refl-line{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.015);line-height:1.4;animation:fadeSlide .4s}
.refl-line::before{content:'❯ ';color:var(--purple);font-weight:700;font-size:9px}

/* ═══ METRICS ═══ */
.metrics{display:flex;gap:0}
.met{flex:1;text-align:center;padding:10px 4px;position:relative;border-right:1px solid rgba(255,255,255,.02)}
.met:last-child{border-right:none}
.met::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:20px;height:1px;background:rgba(0,229,160,.15)}
.met .v{font-size:15px;font-weight:800;font-family:'JetBrains Mono';background:linear-gradient(135deg,var(--a),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.3px}
.met .l{font-size:7px;color:var(--td);text-transform:uppercase;letter-spacing:.8px;margin-top:2px;font-weight:500}

/* ═══ PHASE BAR ═══ */
.phase-bar{display:flex;gap:3px;margin-top:6px}
.phase-seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.03);position:relative;overflow:hidden;transition:all .5s}
.phase-seg.active{background:var(--a);box-shadow:0 0 10px rgba(0,229,160,.3)}
.phase-seg.active::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.phase-seg.done{background:var(--a);opacity:.5}
.phase-labels{display:flex;justify-content:space-between;font-size:7px;color:var(--td);margin-top:3px;font-weight:500;letter-spacing:.3px}
.phase-labels span.active{color:var(--a);font-weight:700;text-shadow:0 0 8px rgba(0,229,160,.3)}

/* ═══ BOTTOM ═══ */
.bottom{grid-column:1/-1;display:flex;background:linear-gradient(0deg,rgba(2,4,8,.98),rgba(6,12,24,.95));border-top:1px solid rgba(0,229,160,.04);box-shadow:0 -1px 20px rgba(0,0,0,.4)}
.stat{flex:1;text-align:center;padding:7px 0;position:relative}
.stat::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.03)}
.stat:last-child::after{display:none}
.stat .v{font-size:14px;font-weight:800;font-family:'JetBrains Mono';background:linear-gradient(135deg,var(--a),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.3px}
.stat .l{font-size:7px;color:var(--td);text-transform:uppercase;letter-spacing:1px;font-weight:500}