/* style.css */
:root{
  color-scheme:dark;
  --bg:#09101f;
  --bg-deep:#050a14;
  --panel:rgba(17,29,53,.84);
  --panel-solid:#121f39;
  --text:#f3f7ff;
  --muted:#a3b3d1;
  --faint:#71819f;
  --line:rgba(171,196,242,.15);
  --line-bright:rgba(145,183,255,.27);
  --blue:#7caeff;
  --cyan:#5be0d1;
  --gold:#ffc96b;
  --coral:#ff927c;
  --green:#86e7b0;
  --shadow:0 22px 68px rgba(0,0,0,.28);
  --radius:20px;
}

@media (prefers-color-scheme:light){
  :root:not(.light-forced){
    color-scheme:light;
    --bg:#f0f5ff;
    --bg-deep:#e6efff;
    --panel:rgba(255,255,255,.86);
    --panel-solid:#ffffff;
    --text:#13203c;
    --muted:#60718d;
    --faint:#8190a6;
    --line:rgba(31,61,112,.14);
    --line-bright:rgba(38,111,216,.27);
    --blue:#286fd8;
    --cyan:#008e87;
    --gold:#a86600;
    --coral:#b94637;
    --green:#18794c;
    --shadow:0 16px 48px rgba(44,74,123,.12);
  }
}

:root.light-forced{
  color-scheme:light;
  --bg:#f0f5ff;
  --bg-deep:#e6efff;
  --panel:rgba(255,255,255,.86);
  --panel-solid:#ffffff;
  --text:#13203c;
  --muted:#60718d;
  --faint:#8190a6;
  --line:rgba(31,61,112,.14);
  --line-bright:rgba(38,111,216,.27);
  --blue:#286fd8;
  --cyan:#008e87;
  --gold:#a86600;
  --coral:#b94637;
  --green:#18794c;
  --shadow:0 16px 48px rgba(44,74,123,.12);
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  min-width:320px;
  min-height:100vh;
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 88% -8%,rgba(73,116,225,.22),transparent 32rem),
    radial-gradient(circle at -8% 31%,rgba(47,202,174,.10),transparent 27rem),
    linear-gradient(145deg,var(--bg),var(--bg-deep) 130%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

button,input,select{font:inherit}
button,select{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{
  outline:3px solid rgba(116,170,255,.68);
  outline-offset:3px;
}
button{touch-action:manipulation}
::selection{background:rgba(91,224,209,.25);color:var(--text)}

.app-shell{
  width:min(1200px,calc(100% - 28px));
  margin:auto;
  padding:16px 0 42px;
}

.topbar{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--text);
  text-decoration:none;
  font-size:1.17rem;
  font-weight:850;
  letter-spacing:-.75px;
}

.brand>span:last-child span{color:var(--cyan)}
.brand-mark{
  width:31px;
  height:31px;
  display:inline-flex;
  align-items:end;
  gap:3px;
  padding:5px;
  border-radius:10px;
  background:linear-gradient(140deg,var(--blue),#6e75e9);
  box-shadow:0 7px 19px rgba(75,111,224,.36);
}
.brand-mark i{display:block;width:5px;border-radius:5px;background:#fff}
.brand-mark i:nth-child(1){height:9px;opacity:.8}
.brand-mark i:nth-child(2){height:16px}
.brand-mark i:nth-child(3){height:12px;opacity:.9}

.topbar-actions{display:flex;align-items:center;gap:10px}
.save-status{min-width:44px;color:var(--faint);font-size:.73rem;text-align:right}
.icon-button{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  background:var(--panel);
  box-shadow:0 5px 16px rgba(0,0,0,.08);
  transition:transform .18s ease,border-color .18s ease,color .18s ease;
}
.icon-button:hover{transform:translateY(-1px);border-color:var(--line-bright);color:var(--blue)}
.icon-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.hero{
  display:grid;
  gap:27px;
  padding:54px 0 36px;
}
.hero-copy-wrap{max-width:800px}
.eyebrow,.section-kicker{
  margin:0 0 10px;
  color:var(--cyan);
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.14em;
}
.eyebrow span{color:var(--faint);padding:0 2px}
.hero h1{
  max-width:790px;
  margin:0;
  font-size:clamp(2.25rem,7vw,4.65rem);
  line-height:1.015;
  letter-spacing:-2.15px;
}
.hero h1 em{
  color:var(--blue);
  font-style:normal;
  text-shadow:0 0 28px rgba(124,174,255,.12);
}
.hero-copy{
  max-width:630px;
  margin:19px 0 0;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.68;
}
.recipe-note{
  display:flex;
  align-items:flex-start;
  gap:11px;
  max-width:350px;
  padding:14px 16px;
  border:1px solid rgba(255,201,107,.17);
  border-left:2px solid var(--gold);
  border-radius:0 13px 13px 0;
  color:var(--muted);
  background:rgba(255,196,99,.055);
  font-size:.81rem;
  line-height:1.5;
}
.recipe-note strong{color:var(--gold)}
.recipe-dot{
  width:8px;
  height:8px;
  flex:0 0 auto;
  margin-top:5px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(255,201,107,.1);
}

.workspace{display:grid;gap:16px}
.panel,.learn-card,.periodic-section{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.panel{padding:clamp(18px,4vw,30px)}
.panel-heading,.periodic-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
}
.panel h2,.learn-card h2,.periodic-section h2{
  margin:0;
  font-size:clamp(1.18rem,3vw,1.54rem);
  letter-spacing:-.65px;
}
.example-picker{
  max-width:225px;
  color:var(--faint);
  font-size:.68rem;
  font-weight:750;
}
.example-picker select{margin-top:5px}

label{
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:.74rem;
  font-weight:750;
  letter-spacing:.01em;
}

input,select{
  width:100%;
  min-height:44px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  background:rgba(7,16,34,.31);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
:root.light-forced input,:root.light-forced select{background:#fff}
@media (prefers-color-scheme:light){
  :root:not(.light-forced) input,:root:not(.light-forced) select{background:#fff}
}
input:hover,select:hover{border-color:var(--line-bright)}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(124,174,255,.12)}
input::placeholder{color:var(--faint)}
select{text-overflow:ellipsis}

.equation-entry{
  display:grid;
  gap:10px;
  margin-top:22px;
}
.equation-entry input{
  min-height:53px;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.94rem;
}
.primary-button{
  min-height:53px;
  padding:11px 17px;
  border:0;
  border-radius:11px;
  color:#07132a;
  background:linear-gradient(135deg,#79e1d4,#7ba6ff);
  box-shadow:0 9px 23px rgba(85,164,224,.2);
  font-weight:850;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.primary-button span{margin-left:4px;font-size:1.1em}
.primary-button:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 28px rgba(85,164,224,.29)}
.primary-button:active{transform:translateY(0)}

.input-help{
  margin:10px 0 0;
  color:var(--faint);
  font-size:.75rem;
  line-height:1.55;
}
kbd,code{color:var(--blue);font-family:ui-monospace,monospace;font-size:.87em}
.message{min-height:0;margin-top:14px;font-size:.8rem;line-height:1.45}
.message:empty{display:none}
.message.success{color:var(--green)}
.message.error{color:var(--coral)}

.balanced-display-wrap{
  margin-top:21px;
  padding:16px;
  border:1px solid rgba(116,170,255,.18);
  border-radius:14px;
  background:linear-gradient(112deg,rgba(72,121,225,.1),rgba(52,133,157,.045));
}
.balanced-topline{display:flex;justify-content:space-between;align-items:center;gap:10px}
.display-label,.answer-label,.card-step{
  display:block;
  color:var(--faint);
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.12em;
}
.balanced-badge{
  padding:4px 7px;
  border:1px solid rgba(134,231,176,.19);
  border-radius:999px;
  color:var(--green);
  background:rgba(134,231,176,.08);
  font-size:.56rem;
  font-weight:850;
  letter-spacing:.09em;
}
.balanced-equation{
  margin:8px 0 14px;
  overflow-wrap:anywhere;
  font-size:clamp(1.12rem,4vw,1.6rem);
  font-weight:820;
}
sub{font-size:.63em;vertical-align:-.25em}
small{font-size:.72em}
.atom-check{display:flex;flex-wrap:wrap;gap:7px}
.atom-pill{
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:7px;
  color:var(--muted);
  background:rgba(255,255,255,.055);
  font-size:.72rem;
}
.atom-pill b{color:var(--cyan)}

.live-chip{
  display:none;
  color:var(--cyan);
  font-size:.7rem;
  font-weight:800;
}
.live-chip span{
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:4px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(85,223,208,.12);
  animation:pulse 2.1s ease-in-out infinite;
}

.conversion-flow{
  display:grid;
  gap:13px;
  margin-top:22px;
}
.conversion-card{
  display:grid;
  gap:12px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:14px;
}
.known-card{background:linear-gradient(145deg,rgba(116,170,255,.1),rgba(116,170,255,.035))}
.target-card{background:linear-gradient(145deg,rgba(85,223,208,.08),rgba(85,223,208,.025))}
.card-step{color:var(--blue)}
.target-card .card-step{color:var(--cyan)}
.value-row{display:grid;grid-template-columns:1fr 1.28fr;gap:10px}
.ratio-arrow{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  color:var(--faint);
  font-size:.64rem;
  font-weight:800;
  text-align:center;
}
.ratio-arrow b{color:var(--gold);font-size:1.35rem}
.hidden{display:none!important}

.result-panel{
  margin-top:18px;
  overflow:hidden;
  border:1px solid rgba(130,227,170,.21);
  border-radius:15px;
  background:linear-gradient(110deg,rgba(68,155,128,.16),rgba(61,106,190,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.result-empty{padding:18px;color:var(--muted);font-size:.85rem}
.answer-main{padding:21px 18px 18px}
.answer-main strong{
  display:block;
  margin:6px 0 4px;
  color:var(--green);
  font-size:clamp(1.75rem,7vw,2.5rem);
  font-weight:850;
  line-height:1.04;
  letter-spacing:-1.25px;
}
.answer-main strong small{color:var(--green);font-weight:700}
.answer-sub{color:var(--muted);font-size:.78rem}
.math-trail{
  display:grid;
  border-top:1px solid var(--line);
  background:rgba(3,12,28,.08);
}
.math-trail div{display:grid;gap:3px;padding:11px 17px}
.math-trail span{
  color:var(--faint);
  font-size:.61rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.math-trail b{color:var(--text);font-size:.78rem;font-weight:650}
.math-trail i{display:none}
.mass-facts{display:flex;flex-wrap:wrap;gap:8px;padding:11px 17px 16px}
.mass-facts span{
  padding:5px 7px;
  border-radius:6px;
  color:var(--muted);
  background:rgba(255,255,255,.055);
  font-size:.68rem;
}
.mass-facts b{margin-left:3px;color:var(--text);font-weight:700}

.muted{margin:11px 0 0;color:var(--muted);font-size:.8rem;line-height:1.55}
.extent-readout{min-width:94px;color:var(--muted);text-align:right}
.extent-readout span{display:block;color:var(--gold);font-size:1.15rem;font-variant-numeric:tabular-nums}
.range{
  min-height:auto;
  margin:23px 0 18px;
  padding:0;
  accent-color:var(--gold);
  background:transparent;
}
.reaction-table{display:grid;gap:8px}
.species-row{
  display:grid;
  grid-template-columns:52px minmax(58px,.65fr) 1.4fr .92fr;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  transition:transform .17s ease,border-color .17s ease,background .17s ease;
}
.species-row:hover{transform:translateX(2px);border-color:var(--line-bright);background:rgba(255,255,255,.045)}
.species-side{color:var(--blue);font-size:.57rem;font-weight:900;letter-spacing:.08em}
.species-row.product .species-side{color:var(--cyan)}
.species-formula{font-size:.92rem;font-weight:800}
.species-bar{height:7px;overflow:hidden;border-radius:7px;background:rgba(255,255,255,.075)}
.species-bar i{display:block;height:100%;border-radius:inherit;background:var(--blue);transition:width .25s ease}
.species-row.product .species-bar i{background:var(--cyan)}
.species-stat{display:grid;text-align:right}
.species-stat b{font-size:.71rem;white-space:nowrap}
.species-stat span{color:var(--faint);font-size:.61rem}
.desktop-stat{display:none}

.learn-grid{display:grid;gap:16px;margin-top:16px}
.learn-card{padding:22px}
.learn-card h2{margin-bottom:15px}
.scoop-diagram{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:98px;
  overflow-x:auto;
  padding:5px 0;
}
.scoop{
  display:grid;
  min-width:57px;
  min-height:59px;
  padding:6px;
  border-radius:11px;
  align-content:center;
  justify-items:center;
}
.scoop b{font-size:1.35rem;line-height:1}
.scoop span{margin-top:3px;font-size:.72rem;font-weight:800}
.scoop.reactant{color:#b9d4ff;border:1px solid rgba(116,170,255,.3);background:rgba(116,170,255,.17)}
.scoop.product{color:#b8ffee;border:1px solid rgba(85,223,208,.3);background:rgba(85,223,208,.14)}
.plus-sign,.diagram-arrow{color:var(--faint);font-weight:800}
.diagram-arrow{margin:0 3px;color:var(--gold);font-size:1.35rem}
.diagram-card p:last-child{margin:10px 0 0;color:var(--muted);font-size:.81rem;line-height:1.58}
.bridge-steps{display:grid;gap:14px;padding:0;margin:0;list-style:none}
.bridge-steps li{display:grid;grid-template-columns:28px 1fr;gap:10px}
.bridge-steps li>span{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#06162b;
  background:var(--gold);
  box-shadow:0 3px 10px rgba(255,201,107,.15);
  font-size:.75rem;
  font-weight:900;
}
.bridge-steps strong{display:block;font-size:.83rem}
.bridge-steps small{display:block;margin-top:3px;color:var(--muted);font-size:.75rem;line-height:1.42}

.periodic-section{margin-top:16px;padding:clamp(18px,4vw,28px)}
.search-elements{width:min(240px,50%)}
.element-results{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:19px;
}
.element-card{
  display:grid;
  grid-template-columns:30px 1fr;
  column-gap:7px;
  align-items:center;
  min-width:0;
  padding:9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  transition:transform .16s ease,border-color .16s ease;
}
.element-card:hover{transform:translateY(-1px);border-color:var(--line-bright)}
.element-card b{color:var(--blue);font-size:1rem}
.element-card span{
  overflow:hidden;
  color:var(--muted);
  font-size:.7rem;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.element-card small{grid-column:2;color:var(--faint);font-size:.62rem}

footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:25px 4px 0;
  color:var(--faint);
  font-size:.7rem;
  line-height:1.45;
}
.text-button{
  min-width:72px;
  min-height:44px;
  border:0;
  border-radius:9px;
  color:var(--blue);
  background:transparent;
  font-weight:800;
  transition:background .16s ease;
}
.text-button:hover{background:rgba(116,170,255,.09)}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.62;transform:scale(.86)}
}

@media (min-width:620px){
  .app-shell{width:min(1200px,calc(100% - 48px))}
  .hero{grid-template-columns:1fr auto;align-items:end}
  .equation-entry{grid-template-columns:1fr auto}
  .primary-button{min-width:162px}
  .live-chip{display:block}
  .conversion-flow{grid-template-columns:1fr 88px 1fr;align-items:center}
  .ratio-arrow{grid-template-columns:1fr}
  .ratio-arrow span{display:none}
  .ratio-arrow b{font-size:2.1rem}
  .math-trail{grid-template-columns:1fr 19px 1.25fr 19px 1fr;align-items:stretch}
  .math-trail i{display:grid;place-items:center;color:var(--gold);font-style:normal}
  .math-trail div{padding:13px}
  .desktop-stat{display:grid}
  .species-row{grid-template-columns:55px minmax(75px,.7fr) 1.7fr .72fr .72fr}
  .learn-grid{grid-template-columns:1fr 1fr}
  .element-results{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:940px){
  .workspace{grid-template-columns:1fr 1fr;align-items:start}
  .reaction-panel{grid-column:1/-1}
  .element-results{grid-template-columns:repeat(6,1fr)}
  .element-card{grid-template-columns:1fr}
  .element-card small{grid-column:1}
  .element-card span{margin-top:2px}
}

@media (max-width:430px){
  .panel-heading,.periodic-heading{gap:11px}
  .example-picker{max-width:145px}
  .example-picker span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .search-elements{width:46%}
  .species-row{grid-template-columns:45px minmax(46px,.65fr) 1.15fr .9fr;gap:6px;padding:8px}
  .species-side{font-size:.52rem}
  .species-formula{font-size:.84rem}
  footer{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}