:root{
  --bg:#030611;--panel:rgba(8,16,35,.84);--panel2:rgba(11,24,47,.72);--line:rgba(91,185,255,.24);
  --cyan:#64dfff;--blue:#678eff;--violet:#bd78ff;--pink:#ff61b2;--text:#e9f6ff;--muted:#91a8bc;
  --danger:#ff657c;--ok:#6affc0;--shadow:0 14px 48px rgba(0,0,0,.45)
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;font-size:13px}
button,input,select{font:inherit;color:inherit}button,select,input[type=text],input:not([type]){border:1px solid var(--line);background:rgba(8,22,44,.9);border-radius:8px}
button{padding:8px 11px;cursor:pointer;transition:.16s ease}button:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(100,223,255,.18);transform:translateY(-1px)}button:active{transform:none}
button.primary{background:linear-gradient(135deg,#176e98,#493ca4);border-color:#69dbff;font-weight:700}.hidden{display:none!important}.muted,.small-note{color:var(--muted);line-height:1.45}.small-note{font-size:12px}.check{display:flex!important;align-items:center;gap:8px}
#mode-selection-screen{position:fixed;inset:0;z-index:500;display:grid;place-items:center;overflow:auto;background:
 radial-gradient(circle at 50% 35%,rgba(48,91,181,.28),transparent 32%),radial-gradient(circle at 12% 80%,rgba(156,74,217,.2),transparent 30%),#030611}
#mode-selection-screen:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(100,220,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(100,220,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle,#000 35%,transparent 90%)}
.start-shell{position:relative;width:min(1180px,94vw);padding:48px 34px}.start-kicker{text-align:center;color:var(--cyan);letter-spacing:.32em;font-size:11px}.start-shell h1{text-align:center;margin:12px 0 4px;font-size:clamp(32px,5vw,66px);letter-spacing:.04em;text-shadow:0 0 35px rgba(92,211,255,.42)}.start-subtitle{text-align:center;color:#a9bad0;letter-spacing:.17em;margin-bottom:34px}.start-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}.mode-card{padding:24px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(14,29,57,.92),rgba(6,13,28,.86));box-shadow:var(--shadow);min-height:320px}.active-mode{border-color:rgba(100,223,255,.64);box-shadow:0 0 42px rgba(71,197,255,.17)}.mode-icon{font-size:46px;color:var(--cyan)}.mode-card h2{font-size:24px;margin:10px 0}.mode-card ul{padding-left:20px;line-height:1.8;color:#b8ccdf}.mode-card .primary{width:100%;margin-top:15px;padding:12px}.future-mode{opacity:.72}.future-tag{display:inline-block;padding:5px 8px;border:1px solid var(--line);border-radius:99px;color:var(--violet)}.start-options{display:flex;justify-content:center;align-items:center;gap:30px;margin-top:22px}.start-options label{display:flex;gap:10px;align-items:center}.start-options select{padding:8px}
.input-blocker{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(1,4,12,.82);backdrop-filter:blur(8px);pointer-events:all}.loading-card,.error-card{width:min(520px,90vw);padding:30px;border:1px solid var(--line);border-radius:18px;background:rgba(6,14,31,.96);box-shadow:var(--shadow);text-align:center}.progress{height:9px;border-radius:99px;background:#101c34;overflow:hidden}.progress div{width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .2s}.atom-spinner{position:relative;width:90px;height:90px;margin:auto}.atom-spinner b{position:absolute;left:35px;top:35px;width:20px;height:20px;border-radius:50%;background:var(--cyan);box-shadow:0 0 25px var(--cyan)}.atom-spinner i{position:absolute;inset:12px;border:1px solid rgba(106,224,255,.55);border-radius:50%;animation:orbit 1.6s linear infinite}.atom-spinner i:nth-child(2){transform:rotateX(65deg);animation-duration:2.2s}.atom-spinner i:nth-child(3){transform:rotateY(65deg);animation-duration:1.9s}@keyframes orbit{to{transform:rotate(360deg)}}.error-card pre{white-space:pre-wrap;text-align:left;max-height:45vh;overflow:auto;color:#ffbdc8}
#main-ui{position:fixed;inset:0;background:#020510}
#molecule-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;z-index:1;background:transparent}
#quantum-volume-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;image-rendering:auto}
#atom-label-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.atom-label{position:absolute;transform:translate(-50%,-50%);font-weight:800;font-size:18px;line-height:1;color:#dff8ff;text-shadow:0 2px 3px #000,0 0 7px #000,0 0 12px currentColor;will-change:transform;white-space:nowrap}
#header-panel{position:absolute;left:0;right:0;top:0;height:50px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:linear-gradient(180deg,rgba(7,15,34,.95),rgba(7,15,34,.72));border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:9px;letter-spacing:.05em}.brand-icon{font-size:23px;color:var(--cyan)}.badge{padding:3px 7px;border:1px solid var(--line);border-radius:99px;color:#9ec8e7;font-size:10px}.badge.accent{color:#dfb1ff;border-color:rgba(191,118,255,.4)}.header-actions{display:flex;gap:6px}.header-actions button{padding:6px 8px;background:rgba(13,26,49,.72)}
.glass-panel{background:linear-gradient(145deg,rgba(8,17,36,.92),rgba(5,11,25,.82));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(13px)}#left-panel,#right-panel{position:absolute;z-index:15;top:60px;bottom:64px;width:310px;overflow:auto;border-radius:12px}#left-panel{left:10px}#right-panel{right:10px;width:300px;padding:10px}.panel-section{border-bottom:1px solid rgba(91,185,255,.13)}.section-title{width:100%;border:0;border-radius:0;background:rgba(13,28,53,.68);display:flex;justify-content:space-between;padding:11px 12px;font-weight:700;text-align:left}.section-title:hover{transform:none}.section-body{display:none;padding:11px}.panel-section.open .section-body{display:block}.section-body>label{display:block;margin:7px 0}.section-body input[type=text],.section-body input:not([type]),.section-body select{width:100%;padding:8px;margin-top:4px}.section-body input[type=range]{width:100%;accent-color:var(--cyan)}.button-row{display:flex;gap:7px;margin-top:9px}.button-row>*{flex:1}.button-row.compact button,.file-button{font-size:11px;padding:7px}.file-button{display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:rgba(8,22,44,.9);cursor:pointer}.file-button input{display:none}.segmented{display:flex;margin:7px 0}.segmented button{flex:1;border-radius:0}.segmented button:first-child{border-radius:8px 0 0 8px}.segmented button:last-child{border-radius:0 8px 8px 0}.segmented button.active{background:#195b81;color:#fff}.notice{padding:8px;margin-top:8px;border-left:3px solid #ffd45a;background:rgba(98,68,12,.25);color:#ffe8a1}.layer-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:5px}.panel-section:not(.open) .layer-grid{display:none!important}.layer-grid label{font-size:11px;margin:0;padding:5px;border-radius:6px;background:rgba(18,33,57,.5)}.layer-grid input{accent-color:var(--cyan)}
.info-card{padding:12px;margin-bottom:10px;border:1px solid rgba(91,185,255,.14);border-radius:10px;background:rgba(9,19,38,.62)}.info-card h3{margin:0 0 9px;color:#a9eaff}.info-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:7px}.info-card dl{display:grid;grid-template-columns:1fr auto;gap:5px 10px;margin:8px 0}.info-card dt{color:var(--muted)}.info-card dd{margin:0;color:#dff8ff}.spectrum-card canvas{width:100%;height:170px;border-radius:8px;background:#030713}
#bottom-bar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:25;min-width:min(900px,calc(100vw - 650px));height:48px;border-radius:12px;padding:7px 10px;display:flex;align-items:center;gap:8px}#bottom-bar label{display:flex;align-items:center;gap:7px}#bottom-bar input{width:135px}.round{border-radius:50%;width:34px;height:34px;padding:0}.bottom-stats{margin-left:auto;display:flex;gap:10px;color:#9fc1dc;font-size:11px}
#object-tooltip{position:fixed;z-index:40;pointer-events:none;max-width:260px;padding:8px 10px;border:1px solid rgba(100,223,255,.5);border-radius:8px;background:rgba(4,10,23,.94);box-shadow:var(--shadow);font-size:12px}#profiler-panel{position:absolute;z-index:40;top:58px;right:320px;width:260px;padding:12px;border-radius:10px}#profiler-panel pre{font-size:11px;color:#a9d9ff;white-space:pre-wrap}.ui-hidden #left-panel,.ui-hidden #right-panel,.ui-hidden #bottom-bar{display:none}.ui-hidden #profiler-panel{right:10px}
@media(max-width:1050px){.start-grid{grid-template-columns:1fr}.future-mode{display:none}#right-panel{display:none}#bottom-bar{min-width:calc(100vw - 340px);left:330px;transform:none}.bottom-stats{display:none}}@media(max-width:720px){#left-panel{width:calc(100vw - 20px)}#bottom-bar{left:10px;right:10px;min-width:0;width:auto}.brand b{display:none}.layer-grid{grid-template-columns:1fr}}
.layer-bulk-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:4px}
.layer-bulk-actions button{padding:7px 8px;font-size:11px}
.danger-soft{width:100%;margin-top:10px;border-color:rgba(255,101,124,.45);color:#ffd9df;background:linear-gradient(135deg,rgba(88,20,36,.82),rgba(45,17,40,.85))}
.danger-soft:hover{border-color:#ff657c;box-shadow:0 0 20px rgba(255,101,124,.18)}
#object-tooltip[data-priority="high"]{border-color:rgba(106,255,192,.65);box-shadow:0 0 22px rgba(106,255,192,.16),var(--shadow)}
#object-tooltip[data-priority="medium"]{border-color:rgba(100,223,255,.55)}
.cache-button{width:100%;margin-top:9px}
.layer-science-note{grid-column:1/-1;margin:5px 1px 0;padding:8px;border-left:2px solid rgba(100,223,255,.55);background:rgba(7,22,43,.55);color:#9fc0d7;font-size:10.5px;line-height:1.45}
.button-row .danger-soft{width:auto;margin-top:0}

/* QuantumVerse 4.0 — compact information layout and quantum editor */
#right-panel{width:335px;padding:8px;scrollbar-gutter:stable}
.compact-info-card{padding:10px;margin-bottom:7px}
.compact-info-card .info-title{font-size:16px;margin-bottom:4px}
.compact-info-card .small-note{font-size:11px;line-height:1.28}
.compact-info-card dl{gap:3px 8px;margin:6px 0;font-size:11px}
.card-heading-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-heading-row h3{margin:0 0 6px}
.compact-spectrum-card{padding:9px;margin-bottom:7px}
.compact-spectrum-card canvas{height:128px}
.selection-card{padding:10px;margin-bottom:7px}
.selection-card .info-title{font-size:15px}
.selection-card dl{gap:3px 8px;font-size:11px}
.editor-mode-toggle{width:100%;margin-bottom:7px;border-color:rgba(100,223,255,.4)}
.editor-mode-toggle.active{background:linear-gradient(135deg,#1c755e,#3349a4);border-color:#78ffd1;box-shadow:0 0 20px rgba(106,255,192,.18)}
#editor-section.editor-active{outline:1px solid rgba(106,255,192,.38);box-shadow:inset 0 0 26px rgba(106,255,192,.055)}
.editor-grid{display:grid;grid-template-columns:1.45fr .75fr;gap:7px}
.editor-grid label{display:block;margin:5px 0}
.editor-grid select{width:100%;padding:8px;margin-top:4px}
.editor-inline-check{padding:6px 7px;margin-top:5px!important;border-radius:7px;background:rgba(22,55,62,.34)}
.editor-slots{display:flex;justify-content:space-between;gap:8px;margin:8px 0;padding:7px 9px;border:1px solid rgba(106,255,192,.2);border-radius:7px;background:rgba(7,35,37,.45)}
#btn-relax-geometry{width:100%;margin-top:7px}
#atom-label-layer.editor-active .atom-label{box-shadow:0 0 0 1px rgba(106,255,192,.35),0 0 14px rgba(106,255,192,.18)}
@media(max-width:1050px){#right-panel{width:320px}}

/* v4.5 calibrated unified playback control */
#bottom-bar{min-width:min(1040px,calc(100vw - 650px))}
#bottom-bar .time-control{display:flex;align-items:center;gap:6px;min-width:430px;flex:1}
#bottom-bar .time-control #time-scale{width:min(360px,28vw);min-width:190px}
#bottom-bar .time-control #val-time-scale{min-width:150px;color:#bfeeff;font-size:11px;white-space:nowrap}
#bottom-bar .time-label{font-weight:700;color:#dff8ff}
#bottom-bar .time-step,#bottom-bar .time-real{padding:5px 8px;min-width:38px}
#bottom-bar .time-real{border-color:rgba(106,255,192,.45);color:#caffea}
@media(max-width:1050px){#bottom-bar .time-control{min-width:300px}#bottom-bar .time-control #time-scale{width:190px}#bottom-bar .time-control #val-time-scale{display:none}}

.selection-mode-toggle.active{background:linear-gradient(135deg,#9c7b12,#245aa0)!important;border-color:#ffe06a!important;box-shadow:0 0 20px rgba(255,224,106,.28)!important}
.selection-mode-active #molecule-canvas{cursor:crosshair}

/* QuantumVerse 5.0 — the selection control is always the same bulb icon.
   State is conveyed by luminance/glow, never by swapping the glyph. */
.selection-mode-toggle{
  filter:grayscale(1) brightness(.52);
  opacity:.62;
  text-shadow:none;
  transition:filter .18s ease,opacity .18s ease,box-shadow .18s ease,background .18s ease;
}
.selection-mode-toggle.active{
  filter:none;
  opacity:1;
  color:#fff6a8;
  text-shadow:0 0 7px rgba(255,238,126,.95),0 0 15px rgba(255,203,71,.72);
}

/* QuantumVerse 5.0 — CellVerse-style scrollbars and full-height side panels */
*{
  scrollbar-width:thin;
  scrollbar-color:rgba(91,185,255,.42) rgba(9,20,39,.72);
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(9,20,39,.72);border-radius:8px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(86,166,225,.48),rgba(122,89,204,.48));border:1px solid rgba(113,210,255,.22);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(99,217,255,.72),rgba(181,106,255,.68));border-color:rgba(146,231,255,.48)}
::-webkit-scrollbar-corner{background:transparent}

#left-panel,#right-panel{bottom:10px}
#bottom-bar{
  width:min(1040px,calc(100vw - 690px));
  min-width:310px;
  max-width:calc(100vw - 24px);
}
@media(max-width:1050px){
  #left-panel{bottom:64px}
  #bottom-bar{width:auto;min-width:0}
}

/* The same bulb is used in both states: dim/off versus luminous/on. */
.selection-mode-toggle{font-family:"Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* Persistent selected-object halo. */
.selected-object-active #molecule-canvas{cursor:crosshair}

/* QuantumVerse Ultra 5.0 release — responsive control deck */
:root{--left-panel-w:325px;--right-panel-w:350px}
.start-shell h1{margin-top:0}
.preset-filter-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:7px;margin-bottom:7px}
.preset-filter-grid label{display:block;margin:0}
.preset-filter-grid select,.preset-filter-grid input{width:100%;padding:8px;margin-top:4px}
input[type=search]::-webkit-search-cancel-button{filter:invert(1);opacity:.55}
#left-panel{width:var(--left-panel-w)}
#right-panel{width:var(--right-panel-w)}
#left-panel,#right-panel{bottom:10px;scrollbar-gutter:stable}
#bottom-bar{
  left:calc(10px + var(--left-panel-w) + 14px);
  right:calc(10px + var(--right-panel-w) + 14px);
  bottom:8px;
  width:auto;max-width:none;min-width:0;height:auto;min-height:52px;
  transform:none;padding:7px 9px;
  display:grid;grid-template-columns:max-content minmax(330px,1fr) max-content;
  align-items:center;gap:10px;
}
.transport-controls{display:flex;align-items:center;gap:6px;white-space:nowrap}
.transport-controls>button{flex:0 0 auto;white-space:nowrap}
#bottom-bar .time-control{display:flex;align-items:center;gap:5px;min-width:0;width:100%}
#bottom-bar .time-control>*{flex:0 0 auto}
#bottom-bar .time-control #time-scale{flex:1 1 220px;width:auto;min-width:120px;margin:0}
#bottom-bar .time-label{font-weight:700;color:#dff8ff;white-space:nowrap}
#bottom-bar .time-step,#bottom-bar .time-real{padding:5px 7px;min-width:34px;white-space:nowrap}
#bottom-bar .time-real{border-color:rgba(106,255,192,.45);color:#caffea}
#bottom-bar .time-manual{width:82px;padding:6px 7px;text-align:center;border-color:rgba(100,223,255,.34);font-variant-numeric:tabular-nums}
#bottom-bar .time-manual.invalid{border-color:#ff657c;box-shadow:0 0 12px rgba(255,101,124,.25)}
#bottom-bar .time-control #val-time-scale{min-width:112px;max-width:144px;color:#bfeeff;font-size:10.5px;line-height:1.1;white-space:normal}
.bottom-stats{margin:0;display:grid;grid-template-columns:auto auto;gap:2px 8px;color:#9fc1dc;font-size:10.5px;white-space:nowrap;text-align:right}
#btn-selection-mode{font-family:"Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:15px;filter:grayscale(1) brightness(.50);opacity:.62;text-shadow:none;transition:.18s ease}
#btn-selection-mode.active{filter:none;opacity:1;color:#fff6a8;background:linear-gradient(135deg,rgba(156,123,18,.72),rgba(36,90,160,.78))!important;border-color:#ffe06a!important;text-shadow:0 0 7px rgba(255,238,126,.95),0 0 15px rgba(255,203,71,.72);box-shadow:0 0 20px rgba(255,224,106,.28)!important}
@media(max-width:1500px){#stat-triangles{display:none}.bottom-stats{grid-template-columns:auto}}
@media(max-width:1280px){
  :root{--left-panel-w:300px;--right-panel-w:320px}
  #bottom-bar{grid-template-columns:max-content minmax(260px,1fr);right:calc(10px + var(--right-panel-w) + 12px)}
  .bottom-stats{display:none}
  #bottom-bar .time-control #val-time-scale{display:none}
  #bottom-bar .time-manual{width:72px}
}
@media(max-width:1050px){
  #right-panel{display:none}
  #left-panel{bottom:64px}
  #bottom-bar{left:calc(10px + var(--left-panel-w) + 12px);right:10px;grid-template-columns:max-content minmax(220px,1fr)}
  #bottom-bar .time-label{display:none}
}
@media(max-width:820px){
  #bottom-bar{left:10px;right:10px;grid-template-columns:1fr;gap:5px}
  .transport-controls{justify-content:center}
  #bottom-bar .time-control{justify-content:center}
  #left-panel{width:calc(100vw - 20px);bottom:112px}
  #bottom-bar .time-control #time-scale{min-width:100px}
}

/* QuantumVerse Ultra 5.0 FINAL — scalable two-row control deck.
   The previous one-row flex/grid compressed controls at 1600 px and caused
   stats, labels and icons to overlap. */
#bottom-bar{
  left:calc(10px + var(--left-panel-w) + 14px);
  right:calc(10px + var(--right-panel-w) + 14px);
  bottom:8px;
  width:auto;max-width:none;min-width:0;
  height:auto;min-height:82px;
  transform:none;
  padding:7px 10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) max-content;
  grid-template-areas:
    "transport stats"
    "time time";
  align-items:center;
  column-gap:12px;row-gap:6px;
}
#bottom-bar .transport-controls{grid-area:transport;display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
#bottom-bar .bottom-stats{grid-area:stats;margin:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;color:#9fc1dc;font-size:10.5px;white-space:nowrap}
#bottom-bar .time-control{grid-area:time;display:grid;grid-template-columns:max-content max-content max-content minmax(180px,1fr) max-content max-content max-content 88px minmax(104px,140px);align-items:center;gap:6px;min-width:0;width:100%}
#bottom-bar .time-control #time-scale{width:100%;min-width:0;margin:0}
#bottom-bar .time-control #val-time-scale{min-width:0;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bottom-bar .time-manual{width:88px;min-width:88px}
#bottom-bar .time-step,#bottom-bar .time-real{min-width:36px;padding:5px 7px}
@media(max-width:1700px){
  #bottom-bar .bottom-stats{gap:7px;font-size:10px}
  #bottom-bar .time-control{grid-template-columns:max-content max-content max-content minmax(150px,1fr) max-content max-content max-content 78px minmax(92px,118px);gap:5px}
  #bottom-bar .time-manual{width:78px;min-width:78px}
}
@media(max-width:1380px){
  :root{--left-panel-w:300px;--right-panel-w:320px}
  #bottom-bar .time-label,#bottom-bar .time-control #val-time-scale{display:none}
  #bottom-bar .time-control{grid-template-columns:max-content max-content minmax(130px,1fr) max-content max-content max-content 74px}
  #bottom-bar .time-manual{width:74px;min-width:74px}
  #stat-triangles{display:none}
}
@media(max-width:1050px){
  #right-panel{display:none}
  #left-panel{bottom:96px}
  #bottom-bar{left:calc(10px + var(--left-panel-w) + 12px);right:10px}
}
@media(max-width:820px){
  #bottom-bar{left:10px;right:10px;min-height:106px;grid-template-columns:1fr;grid-template-areas:"transport" "time" "stats"}
  #bottom-bar .transport-controls,#bottom-bar .bottom-stats{justify-content:center}
  #bottom-bar .time-control{grid-template-columns:max-content max-content minmax(100px,1fr) max-content max-content max-content 70px}
  #left-panel{width:calc(100vw - 20px);bottom:120px}
}

/* QuantumVerse v5.0 R7: visible and focusable preset search */
#preset-search{width:100%;box-sizing:border-box;padding:8px 10px;margin-top:4px;border:1px solid rgba(91,185,255,.34);border-radius:7px;background:rgba(6,16,34,.94);color:#e8f6ff;caret-color:#67dcff;outline:none}
#preset-search::placeholder{color:#7f97b4}
#preset-search:focus{border-color:#5ad9ff;box-shadow:0 0 0 2px rgba(72,205,255,.16)}