:root{--bg:#020a0d;--bg2:#071519;--surface:rgba(8,25,30,0.85);--border:rgba(67,225,177,0.25);--border-bright:rgba(67,225,177,0.6);--teal:#43e1b1;--teal-dim:#2a9070;--teal-glow:#7ee6c5;--ink:#e5fff8;--ink-dim:#8aafa5;--orange:#ff7b00;--purple:#8b5cf6;--red:#ff4444;--blue:#4a9eff;--gold:#ffc857;--creative:#e040fb}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--ink);height:100vh;overflow:hidden;display:flex;flex-direction:column}
header{background:var(--surface);border-bottom:1px solid var(--border-bright);padding:12px 24px;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(12px);z-index:100;flex-shrink:0}
.logo{display:flex;align-items:center;gap:12px}
.logo h1{font-size:1.4rem;font-weight:700;letter-spacing:.08em;background:linear-gradient(135deg,var(--teal-glow),var(--teal),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo-dot{width:10px;height:10px;background:var(--teal);border-radius:50%;box-shadow:0 0 12px var(--teal),0 0 24px rgba(67,225,177,.3);animation:pulse-dot 3s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 12px var(--teal),0 0 24px rgba(67,225,177,.3)}50%{box-shadow:0 0 20px var(--teal),0 0 40px rgba(67,225,177,.5)}}
.hud-stats{display:flex;gap:24px;align-items:center}
.stat-chip{display:flex;flex-direction:column;align-items:flex-end}
.stat-chip .label{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim);font-family:'JetBrains Mono',monospace}
.stat-chip .value{font-size:1.2rem;font-weight:700;color:var(--teal);font-family:'JetBrains Mono',monospace}
.rank-badge{background:linear-gradient(135deg,rgba(67,225,177,.15),rgba(139,92,246,.15));border:1px solid var(--border);padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;color:var(--teal-glow)}
.main-container{flex:1;display:flex;overflow:hidden;position:relative}
.pond-area{flex:1;position:relative;overflow:hidden;background:radial-gradient(ellipse at 30% 50%,rgba(67,225,177,.04) 0%,transparent 60%),radial-gradient(ellipse at 70% 30%,rgba(139,92,246,.03) 0%,transparent 50%),var(--bg)}
.pond-area::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(67,225,177,.012) 2deg,transparent 4deg);animation:ripple-rotate 120s linear infinite}
@keyframes ripple-rotate{to{transform:rotate(360deg)}}
.lily-pad{position:absolute;border-radius:50%;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .4s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(4px)}
.lily-pad:hover{transform:scale(1.12);z-index:20}
.lily-pad .pad-name{font-size:.75rem;font-weight:600;letter-spacing:.05em;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.lily-pad .pad-count{font-size:.6rem;opacity:.7;font-family:'JetBrains Mono',monospace}
.lily-pad.ash{width:140px;height:140px;top:35%;left:25%;background:radial-gradient(circle at 40% 40%,rgba(255,200,87,.3),rgba(67,225,177,.2) 60%,rgba(67,225,177,.05));border:2px solid rgba(255,200,87,.5);box-shadow:0 0 40px rgba(255,200,87,.2),0 0 80px rgba(67,225,177,.1);animation:float-ash 8s ease-in-out infinite}
.lily-pad.blue{width:100px;height:100px;top:18%;left:55%;background:radial-gradient(circle at 40% 40%,rgba(74,158,255,.3),rgba(74,158,255,.05));border:2px solid rgba(74,158,255,.4);box-shadow:0 0 30px rgba(74,158,255,.15);animation:float-1 7s ease-in-out infinite}
.lily-pad.red{width:90px;height:90px;top:65%;left:45%;background:radial-gradient(circle at 40% 40%,rgba(255,68,68,.3),rgba(255,68,68,.05));border:2px solid rgba(255,68,68,.4);box-shadow:0 0 30px rgba(255,68,68,.15);animation:float-2 9s ease-in-out infinite}
.lily-pad.green{width:85px;height:85px;top:50%;left:70%;background:radial-gradient(circle at 40% 40%,rgba(67,225,177,.3),rgba(67,225,177,.05));border:2px solid rgba(67,225,177,.4);box-shadow:0 0 30px rgba(67,225,177,.15);animation:float-3 6s ease-in-out infinite}
.lily-pad.gold{width:80px;height:80px;top:25%;left:35%;background:radial-gradient(circle at 40% 40%,rgba(255,200,87,.25),rgba(255,200,87,.05));border:2px solid rgba(255,200,87,.35);box-shadow:0 0 25px rgba(255,200,87,.1);animation:float-1 10s ease-in-out infinite reverse}
@keyframes float-ash{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-8px) rotate(1deg)}66%{transform:translateY(4px) rotate(-.5deg)}}
@keyframes float-1{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes float-2{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-6px) translateX(4px)}}
@keyframes float-3{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.orb{position:absolute;border-radius:50%;pointer-events:none;opacity:.6}
.brain-cortex{position:absolute;bottom:16px;left:16px;width:240px;height:240px;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;backdrop-filter:blur(12px);z-index:30}
.brain-cortex .brain-title{position:absolute;top:8px;left:12px;font-size:.7rem;font-family:'JetBrains Mono',monospace;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.1em;z-index:2}
#brainCanvas{width:100%;height:100%}
.sidebar{width:380px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;backdrop-filter:blur(12px);flex-shrink:0;z-index:50}
.tab-bar{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.tab-btn{flex:1;padding:12px 8px;background:none;border:none;color:var(--ink-dim);font-family:'JetBrains Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{color:var(--teal);border-bottom-color:var(--teal)}
.tab-content{flex:1;overflow-y:auto;display:none}
.tab-content.active{display:flex;flex-direction:column}
.console{padding:16px;border-bottom:1px solid var(--border);flex-shrink:0}
.console textarea{width:100%;background:rgba(0,0,0,.4);color:var(--ink);border:1px solid var(--border);border-radius:10px;padding:12px;font-family:'Outfit',sans-serif;font-size:.9rem;resize:none;height:80px;transition:border-color .3s}
.console textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 20px rgba(67,225,177,.1)}
.console-controls{display:flex;gap:8px;margin-top:10px}
.console-controls select{flex:1;background:rgba(0,0,0,.4);color:var(--ink);border:1px solid var(--border);border-radius:8px;padding:8px;font-family:'Outfit',sans-serif;font-size:.8rem}
.btn-reflect{background:linear-gradient(135deg,var(--teal),var(--teal-dim));color:var(--bg);border:none;padding:8px 20px;border-radius:8px;font-weight:700;font-size:.8rem;cursor:pointer;letter-spacing:.05em;transition:all .3s;white-space:nowrap}
.btn-reflect:hover{box-shadow:0 0 20px rgba(67,225,177,.4);transform:translateY(-1px)}
.search-bar{padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.search-bar input{width:100%;background:rgba(0,0,0,.3);color:var(--ink);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-family:'Outfit',sans-serif;font-size:.85rem}
.search-bar input:focus{outline:none;border-color:var(--teal)}
.feed{flex:1;overflow-y:auto;padding:8px}
.feed::-webkit-scrollbar{width:4px}
.feed::-webkit-scrollbar-track{background:transparent}
.feed::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.ref-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px;margin-bottom:6px;cursor:pointer;transition:all .2s}
.ref-card:hover{background:rgba(67,225,177,.06);border-color:var(--border)}
.ref-card .ref-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ref-card .ref-mood{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.ref-card .ref-rc{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--gold)}
.ref-card .ref-lilly{font-size:.65rem;color:var(--ink-dim);font-family:'JetBrains Mono',monospace}
.ref-card .ref-snippet{font-size:.82rem;line-height:1.4;color:var(--ink);opacity:.85}
.ref-card .ref-time{font-size:.65rem;color:var(--ink-dim);margin-top:6px;font-family:'JetBrains Mono',monospace}
.mood-positive{background:var(--teal);box-shadow:0 0 6px var(--teal)}
.mood-calm{background:var(--blue);box-shadow:0 0 6px var(--blue)}
.mood-stress{background:var(--red);box-shadow:0 0 6px var(--red)}
.mood-breakthrough{background:var(--orange);box-shadow:0 0 6px var(--orange)}
.mood-creative{background:var(--creative);box-shadow:0 0 6px var(--creative)}
.mood-focused{background:var(--purple);box-shadow:0 0 6px var(--purple)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}
.stat-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:14px;text-align:center}
.stat-card .sc-value{font-size:1.6rem;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--teal)}
.stat-card .sc-label{font-size:.7rem;color:var(--ink-dim);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.mood-bar-container{padding:0 16px 16px}
.mood-bar{display:flex;height:24px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.mood-bar div{transition:width .5s;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-family:'JetBrains Mono',monospace;color:var(--bg);font-weight:600}
.lilly-list{padding:16px}
.lilly-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;margin-bottom:6px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .2s}
.lilly-item:hover{border-color:var(--border)}
.lilly-item .li-name{font-weight:600;font-size:.85rem}
.lilly-item .li-stats{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--ink-dim)}
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);padding:12px 28px;border-radius:10px;font-weight:600;z-index:9000;opacity:0;transition:all .3s;font-size:.9rem;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{background:linear-gradient(135deg,var(--teal),var(--teal-dim));color:var(--bg);box-shadow:0 4px 30px rgba(67,225,177,.4)}
.toast.error{background:linear-gradient(135deg,var(--red),#c20);color:#fff}
.detail-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:8000;justify-content:center;align-items:center;backdrop-filter:blur(6px)}
.detail-overlay.show{display:flex}
.detail-card{background:var(--bg2);border:1px solid var(--border-bright);border-radius:16px;padding:24px;max-width:520px;width:90%;max-height:80vh;overflow-y:auto}
.detail-card h3{color:var(--teal);margin-bottom:12px;font-size:1rem}
.detail-card .dt-text{font-size:.9rem;line-height:1.6;margin-bottom:16px;white-space:pre-wrap}
.detail-card .dt-meta{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--ink-dim);display:flex;flex-wrap:wrap;gap:16px}
.detail-card .dt-close{background:none;border:1px solid var(--border);color:var(--ink-dim);padding:6px 16px;border-radius:6px;cursor:pointer;margin-top:16px;font-family:'Outfit',sans-serif}
.detail-card .dt-close:hover{border-color:var(--teal);color:var(--teal)}
.detail-neighbours{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.detail-neighbours h4{font-size:.75rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.neighbour-item{padding:6px 0;font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer}
.neighbour-item:hover{color:var(--teal)}
.empty-state{text-align:center;padding:40px 20px;color:var(--ink-dim)}
.empty-state .es-icon{font-size:3rem;margin-bottom:12px}
@media(max-width:768px){.main-container{flex-direction:column}.sidebar{width:100%;height:50vh}.pond-area{height:50vh}.brain-cortex{width:160px;height:160px}.hud-stats{gap:12px}.stat-chip .value{font-size:.9rem}.lily-pad.ash{width:100px;height:100px}.lily-pad.blue,.lily-pad.red,.lily-pad.green,.lily-pad.gold{width:65px;height:65px}.lily-pad .pad-name{font-size:.6rem}}