.workspace-message {
  min-height: 2.1rem;
  margin-top: .55rem;
  padding: .45rem .7rem;
  border-right: 2px solid #7edcff;
  border-radius: 5px;
  color: #c9dce9;
  background: rgba(126, 220, 255, .08);
  font-size: .78rem;
  line-height: 1.35;
}

.periodic-table { margin-top: 0; }
.material-tabs { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.7rem; }.material-tabs button { border:1px solid rgba(126,220,255,.25); border-radius:999px; padding:.38rem .65rem; color:#b8d3e6; background:rgba(20,52,78,.55); cursor:pointer; font:600 .7rem Arial,sans-serif; }.material-tabs button.active { color:#fff; background:#27617f; border-color:#7ee0ff; }.shelf-panel { display:none; height:calc(100% - 4.9rem); overflow:auto; }.shelf-panel.active { display:block; }.material-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.5rem; }.material-card { min-height:60px; border:1px solid rgba(126,220,255,.2); border-radius:9px; padding:.5rem; color:#e2f1fb; background:rgba(255,255,255,.04); text-align:left; cursor:pointer; }.material-card strong,.material-card span { display:block; }.material-card span { margin-top:.18rem; color:#9ec1d8; font-size:.68rem; }.empty-shelf { color:#92adbf; font-size:.78rem; }.formulae-reference { color:#dbeef8; }.formulae-note { margin:0 0 .55rem; color:#a7c7d9; font-size:.72rem; line-height:1.45; }.formulae-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.45rem; }.formulae-row { min-height:54px; padding:.45rem .55rem; border:1px solid rgba(185,159,255,.2); border-radius:9px; background:rgba(145,111,220,.08); }.formulae-row strong,.formulae-row span { display:block; }.formulae-row strong { color:#f0eaff; }.formulae-row span { margin-top:.15rem; color:#b9acd9; font-size:.66rem; }.formulae-source { display:block; margin-top:.65rem; color:#bdaeff; font-size:.68rem; }
.material-tabs button[data-shelf="acids"] { border-color:#d75a66; color:#ffb1b8; }.material-tabs button[data-shelf="bases"] { border-color:#5f9dff; color:#b6d1ff; }.material-tabs button[data-shelf="carbonates"] { border-color:#53c7c1; color:#a6f3ee; }.material-tabs button[data-shelf="common"] { border-color:#62c5e8; color:#b9efff; }.material-tabs button[data-shelf="gases"] { border-color:#aa80e4; color:#dfc9ff; }.material-tabs button[data-shelf="metals"] { border-color:#9baeba; color:#d5e0e7; }.material-tabs button[data-shelf="oxides"] { border-color:#69b57f; color:#b6edc4; }.material-tabs button[data-shelf="salts"] { border-color:#d9b85c; color:#ffe7a1; }.material-tabs button[data-shelf="other"] { border-color:#71879a; color:#b6c5cf; }.material-tabs button[data-shelf="produced"] { border-color:#65d89b; color:#c1f7d7; }.material-tabs button[data-shelf="formulae"] { border-color:#b99fff; color:#e4daff; }.material-tabs button[data-shelf="acids"].active { background:#8e3540; }.material-tabs button[data-shelf="bases"].active { background:#345fa8; }.material-tabs button[data-shelf="carbonates"].active { background:#267b77; }.material-tabs button[data-shelf="common"].active { background:#267c9e; }.material-tabs button[data-shelf="gases"].active { background:#68439a; }.material-tabs button[data-shelf="metals"].active { background:#536b7a; }.material-tabs button[data-shelf="oxides"].active { background:#397a4d; }.material-tabs button[data-shelf="salts"].active { background:#8c6d20; }.material-tabs button[data-shelf="other"].active { background:#4c6070; }.material-tabs button[data-shelf="produced"].active { background:#318459; }.material-tabs button[data-shelf="formulae"].active { background:#68509d; }

.ball-label { direction: ltr; }
.atom-ball, .atom-ball.molecule { width:68px; height:68px; font-size:1rem; }
.atom-ball.chemical-alkali { background:radial-gradient(circle at 30% 25%,#ffb47a,#b6522d 68%); }.atom-ball.chemical-alkaline { background:radial-gradient(circle at 30% 25%,#ffd68a,#a47721 68%); }.atom-ball.chemical-metal,.atom-ball.chemical-lanthanide,.atom-ball.chemical-actinide { background:radial-gradient(circle at 30% 25%,#a9c2d8,#46647d 68%); }.atom-ball.chemical-halogen { background:radial-gradient(circle at 30% 25%,#d9a2ff,#7440a1 68%); }.atom-ball.chemical-noble { background:radial-gradient(circle at 30% 25%,#91f2ef,#237d87 68%); }.atom-ball.chemical-metalloid { background:radial-gradient(circle at 30% 25%,#b7e58a,#4c8a39 68%); }.atom-ball.chemical-nonmetal { background:radial-gradient(circle at 30% 25%,#9de5ff,#24627a 68%); }.atom-ball.chemical-acid { background:radial-gradient(circle at 30% 25%,#ff9b9b,#a8323c 68%); }.atom-ball.chemical-base { background:radial-gradient(circle at 30% 25%,#8dbbff,#3158a6 68%); }.atom-ball.chemical-salt { background:radial-gradient(circle at 30% 25%,#ffe58b,#9c7522 68%); }.atom-ball.chemical-oxide { background:radial-gradient(circle at 30% 25%,#a1e5ad,#3f8b57 68%); }.atom-ball.chemical-gas { background:radial-gradient(circle at 30% 25%,#d4a6ff,#75459a 68%); }.atom-ball.chemical-other { background:radial-gradient(circle at 30% 25%,#c7d5df,#5d7280 68%); }

.workspace-actions { display: flex; align-items: center; gap: .7rem; }
.undo-button { border: 1px solid rgba(126, 220, 255, .45); border-radius: 999px; padding: .42rem .7rem; color: #dff5ff; background: rgba(44, 93, 126, .5); cursor: pointer; font: 600 .72rem Tahoma, Arial, sans-serif; }
.undo-button:hover { background: rgba(74, 141, 183, .65); }

.condition-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; color: #94b7ca; font: 600 .66rem Arial, sans-serif; }
.condition-toolbar button { border: 1px solid rgba(126,220,255,.24); border-radius: 999px; padding: .28rem .52rem; color: #dcecf7; background: rgba(42,76,105,.42); font: inherit; }
.condition-toolbar button.active-condition { color:#fff; box-shadow:0 0 14px currentColor; }.condition-toolbar button.active-condition[data-condition="heat"],.condition-toolbar button.active-condition[data-condition="spark"] { background:#b95920; border-color:#ffc07a; }.condition-toolbar button.active-condition[data-condition="water"] { background:#2177a3; border-color:#8cddff; }.condition-toolbar button.active-condition[data-condition="light"] { background:#a88318; border-color:#ffe58a; }.condition-toolbar button.active-condition[data-condition="electricity"] { background:#6b45af; border-color:#c6a8ff; }.condition-toolbar button.active-condition[data-condition="catalyst"] { background:#397d58; border-color:#a5f1be; }.condition-toolbar button.active-condition[data-condition="pressure"] { background:#526b83; border-color:#d1e1ef; }

.workspace { position: relative; padding-right: calc(clamp(1rem, 5vw, 4rem) + min(30vw, 290px) + .8rem); }
.work-area { display: flex; flex: 1; min-height: 0; margin-top: .7rem; }
.work-area .workspace-canvas { flex: 1; margin-top: 0; }
.trash-actions { position: absolute; bottom: 1rem; left: 1rem; display: grid; gap: .35rem; justify-items: center; }
.trash-actions .trash-bin { position: static; }
.clear-button { border: 1px solid rgba(255,255,255,.22); border-radius: 7px; padding: .28rem .45rem; color: #e7f2fc; background: rgba(70, 37, 53, .75); cursor: pointer; font: 600 .65rem Tahoma, Arial, sans-serif; }
.reaction-explorer { position: absolute; top: 7.45rem; right: clamp(1rem, 5vw, 4rem); bottom: clamp(1rem, 2.5vw, 2rem); width: min(30vw, 290px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(126,220,255,.2); border-radius: 14px; background: rgba(4,17,30,.62); }
.reaction-library-controls { position:relative; padding: .25rem .7rem .45rem; border-bottom: 1px solid rgba(126,220,255,.14); }
.reaction-filter { padding-top: .45rem; color: #8bb9d4; font-size: .68rem; line-height: 1.35; }
.reaction-category-label { display: block; padding: .25rem 0 .15rem; color: #8bb9d4; font: 700 .62rem Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.reaction-category { width: 100%; padding: .4rem .45rem; border: 1px solid rgba(126,220,255,.22); border-radius: 7px; color: #dff6ff; background: #102238; font: .68rem Arial, sans-serif; }
.material-search { width:100%; margin-top:.45rem; padding:.4rem .45rem; border:1px solid rgba(126,220,255,.22); border-radius:7px; color:#dff6ff; background:#102238; font:.68rem Arial,sans-serif; }
.material-results { position:absolute; z-index:5; top:5.2rem; left:.7rem; right:.7rem; display:grid; gap:.25rem; max-height:8rem; overflow:auto; padding:.3rem; border-radius:7px; background:#0b1c2e; box-shadow:0 8px 22px rgba(0,0,0,.4); }
.material-results:empty { display:none; }
.material-results button { border:1px solid rgba(126,220,255,.15); border-radius:6px; padding:.3rem .4rem; color:#dbe9f4; background:rgba(255,255,255,.04); text-align:left; cursor:pointer; font:.67rem Arial,sans-serif; }
.reaction-list { overflow: auto; padding: 0 .55rem .55rem; }
.reaction-item { margin-top: .35rem; padding: .5rem; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #dbe9f4; background: rgba(255,255,255,.035); font: .68rem Arial, sans-serif; line-height: 1.45; }
.reaction-section { margin-top: .7rem; color: #7ee0ff; font: 700 .63rem Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.reaction-item.ready { border-color: rgba(131,239,173,.55); background: rgba(46,120,77,.2); }.reaction-ready { display: block; margin-top: .15rem; color: #8ff2b1; font-size: .61rem; }
.reference-reaction { color: #c7d2de; }.reaction-reference { display: block; margin-top: .15rem; color: #7fa1b9; font-size: .61rem; }
@media (max-width: 760px) { .workspace { padding-right: clamp(1rem, 5vw, 4rem); } .reaction-explorer { position: static; width: 100%; min-height: 140px; max-height: 180px; margin-top: .65rem; } .workspace-actions { gap: .35rem; } .status { display: none; } }
.formulae-row small { display:block; margin-top:.16rem; color:#8b80a5; font-size:.58rem; }

@media (min-width: 761px) {
  .periodic-panel { padding-right:calc(clamp(1rem, 5vw, 4rem) + min(30vw, 290px) + .8rem); }
  .reaction-explorer { position:fixed; top:7.45rem; right:clamp(1rem, 5vw, 4rem); bottom:1rem; }
}