/* synthbench-ui.css — grammaire visuelle commune RC4.4 / atelier ILMAC
   Additif : aucune logique applicative, seulement présentation. */

.sb-module-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:.9rem 1rem;margin:0 0 .8rem;}
.sb-module-intro h2{margin:.08rem 0 .28rem;font-size:1.18rem;line-height:1.2;color:var(--fg);}
.sb-module-intro p{margin:0;max-width:68ch;color:var(--muted);font-size:.82rem;line-height:1.5;}
.sb-eyebrow{font-size:.66rem;line-height:1;font-weight:800;letter-spacing:.08em;color:var(--accent);}
.sb-module-badge{flex:none;border-radius:999px;padding:.22rem .55rem;background:var(--accent-light);color:var(--accent);font-size:.65rem;font-weight:800;white-space:nowrap;}
.sb-inline-status{margin:-.15rem 0 .55rem;color:var(--accent);font-size:.76rem;min-height:1em;}
.sb-loadbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:center;margin-bottom:.2rem;}
.sb-load-msg{font-size:.78rem;color:var(--muted);min-height:1em;margin:.2rem 0 .55rem;}
.sb-editor-presets{display:grid;gap:.45rem;margin-bottom:.75rem;}
.sb-workstation{border:1px solid var(--line);border-radius:15px;background:var(--card);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.035);}
.sb-workstation-head{display:flex;align-items:center;justify-content:space-between;gap:.9rem;padding:.68rem .78rem;border-bottom:1px solid var(--line);background:var(--surface);}
.sb-workstation-title{font-size:.88rem;font-weight:800;color:var(--fg);}
.sb-workstation-meta{margin-top:.08rem;font-size:.68rem;line-height:1.35;color:var(--muted);}
.sb-workstation-full{display:inline-flex;align-items:center;gap:.35rem;flex:none;border:1px solid var(--accent);border-radius:999px;background:var(--bg);color:var(--accent);padding:.38rem .64rem;font:inherit;font-size:.73rem;font-weight:700;cursor:pointer;}
.sb-workstation-full:hover{background:var(--accent-light);}
.sb-workstation-full span:first-child{font-size:.9rem;line-height:1;}
.sb-workstation-body{padding:.65rem;background:var(--bg);}
.sb-editor-canvas{width:100%;min-height:320px;border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.82rem;text-align:center;padding:1rem;overflow:hidden;background:var(--bg);}
.sb-workstation-actions{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.68rem .78rem;border-top:1px solid var(--line);background:var(--surface);}
.sb-workstation-hint{font-size:.68rem;line-height:1.35;color:var(--muted);}
.sb-editor-read{flex:none;}

@media (min-width:1100px){
  #draw{max-width:none;}
  .sb-editor-screen .sb-module-intro,.sb-editor-screen>.sb-inline-status,.sb-editor-screen>.sb-loadbar,.sb-editor-screen>.sb-load-msg,.sb-editor-screen>.sb-editor-presets{max-width:900px;margin-left:auto;margin-right:auto;}
  .sb-workstation{margin-top:.85rem;}
  .sb-workstation-body{padding:.78rem;}
  .sb-editor-canvas{min-height:390px;}
}

@media (max-width:700px){
  .sb-module-intro{padding:.78rem .82rem;border-radius:13px;}
  .sb-module-badge{display:none;}
  .sb-workstation-head{align-items:flex-start;}
  .sb-workstation-meta,.sb-workstation-hint{display:none;}
  .sb-workstation-actions{justify-content:stretch;}
  .sb-editor-read{width:100%;}
  .sb-workstation-full span:last-child{display:none;}
}

/* Réactions — même grammaire que l'Accueil et l'Éditeur, sans toucher au moteur. */
.sb-reactions-screen .sb-module-intro{margin-bottom:.7rem;}
.sb-reactions-screen .rxn-templates{display:block;margin:.55rem 0 1rem;}
.rxn-library-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.05rem 0 .5rem;padding:0 .05rem;}
.rxn-library-title{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.rxn-library-meta{font-size:.76rem;color:var(--muted);margin-top:.12rem;}
.rxn-library-meta b{color:var(--fg);font-weight:700;}
.rxn-library-badge{flex:none;border-radius:999px;padding:.2rem .5rem;background:var(--accent-light);color:var(--accent);font-size:.62rem;font-weight:800;}
.rxn-search-wrap{position:relative;margin:0 0 .8rem;}
.rxn-search-wrap .rxn-search-icon{position:absolute;left:.82rem;top:50%;transform:translateY(-51%);color:var(--muted);font-size:.95rem;pointer-events:none;}
.sb-reactions-screen .rxn-search{margin:0;padding:.67rem .85rem .67rem 2.1rem;background:var(--bg);border-radius:11px;}
#rxn-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;align-items:start;}
.sb-reactions-screen .rxn-cat{margin:0;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:.68rem .72rem .72rem;box-shadow:0 1px 3px rgba(0,0,0,.02);}
.sb-reactions-screen .rxn-cat-wide{grid-column:1/-1;}
.rxn-cat-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.48rem;}
.sb-reactions-screen .rxn-cat-title{margin:0;font-size:.68rem;letter-spacing:.055em;color:var(--muted);}
.rxn-cat-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.45rem;height:1.2rem;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--muted);font-size:.59rem;font-weight:800;padding:0 .3rem;}
.sb-reactions-screen .rxn-cat-chips{gap:.34rem;}
.sb-reactions-screen .rxn-chip{background:var(--bg);padding:.38rem .62rem;border-radius:999px;transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease;}
.sb-reactions-screen .rxn-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);transform:translateY(-1px);}

@media (max-width:760px){
  #rxn-cats{grid-template-columns:1fr;}
  .sb-reactions-screen .rxn-cat-wide{grid-column:auto;}
  .rxn-library-badge{display:none;}
}

/* Prédiction — hiérarchie visuelle commune, logique moteur inchangée. */
.sb-predict-screen .sb-module-intro{margin-bottom:.72rem;}
.predict-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.72rem;align-items:stretch;}
.predict-panel{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:.78rem .82rem .82rem;box-shadow:0 1px 3px rgba(0,0,0,.02);}
.predict-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding-bottom:.58rem;margin-bottom:.62rem;border-bottom:1px solid var(--line);}
.predict-panel-kicker{font-size:.61rem;line-height:1;font-weight:800;letter-spacing:.075em;color:var(--accent);}
.predict-panel-title{margin-top:.18rem;font-size:.9rem;font-weight:800;color:var(--fg);}
.predict-panel-meta{flex:none;border:1px solid var(--line);border-radius:999px;background:var(--bg);padding:.18rem .48rem;color:var(--muted);font-size:.61rem;font-weight:700;white-space:nowrap;}
.predict-field-title{font-size:.76rem;font-weight:700;color:var(--fg);margin:0 0 .34rem;}
.predict-field-title span{font-weight:400;color:var(--muted);}
.predict-solvent-title{margin-top:.72rem;}
.sb-predict-screen .predict-row{gap:.38rem;margin-bottom:.36rem;}
.sb-predict-screen .predict-smi-input,.sb-predict-screen .predict-solv-input{background:var(--bg);border-radius:10px;padding:.52rem .68rem;}
.predict-add-btn{margin-top:.28rem;width:auto;padding:.36rem .7rem;font-size:.76rem;}
.predict-conditions-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.55rem .62rem;}
.predict-conditions-grid label{display:block;font-size:.7rem;color:var(--muted);margin-bottom:.14rem;font-weight:600;}
.sb-predict-screen .predict-select{margin-top:0;background:var(--bg);border-radius:10px;padding:.5rem .58rem;}
.predict-context-hint{font-size:.72rem;color:var(--accent);margin-top:.62rem;padding:.48rem .68rem;background:var(--accent-light);border:1px solid color-mix(in srgb, var(--accent) 16%, transparent);border-radius:10px;line-height:1.45;min-height:1em;}
.predict-run-btn{margin-top:.7rem;font-size:.93rem;min-height:2.65rem;}
.predict-advanced{margin-top:.65rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;}
.predict-advanced summary{display:flex;align-items:center;justify-content:space-between;gap:.8rem;cursor:pointer;padding:.62rem .72rem;color:var(--accent);font-size:.76rem;font-weight:800;list-style-position:inside;}
.predict-advanced summary span{color:var(--muted);font-size:.66rem;font-weight:500;}
.predict-advanced[open] summary{border-bottom:1px solid var(--line);}
.predict-advanced-body{display:grid;grid-template-columns:1fr 1fr;gap:.58rem;padding:.7rem .72rem .76rem;}
.predict-advanced-body label{display:block;font-size:.7rem;color:var(--muted);margin-bottom:.18rem;font-weight:600;}
.predict-advanced-body input{margin:0;background:var(--bg);}
.predict-stoichio-block{grid-column:1/-1;}
#predict-stoichio-rows{margin-top:.12rem;}
.predict-help{font-size:.66rem;color:var(--muted);margin-top:.15rem;}
.predict-output{margin-top:.85rem;}

@media (max-width:820px){
  .predict-form-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .predict-conditions-grid,.predict-advanced-body{grid-template-columns:1fr;}
  .predict-stoichio-block{grid-column:auto;}
  .predict-advanced summary span,.predict-panel-meta{display:none;}
}

/* Pass global ILMAC — uniformisation des écrans restants sans toucher à leur logique. */
.sb-standard-screen > .sb-module-intro{margin-bottom:.82rem;}

/* Analyse (Rétro / Mésomérie) : formulaire court, dense et lisible. */
.sb-analysis-screen > label{font-size:.72rem;color:var(--muted);font-weight:700;}
.sb-analysis-screen > input{margin-top:.16rem;background:var(--surface);border-radius:11px;padding:.62rem .72rem;}
.sb-analysis-screen > div[style*="display:flex"]{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:.58rem .62rem;}
.sb-analysis-screen #retro-out,.sb-analysis-screen #meso-out{margin-top:.8rem!important;}

/* Expérience : faire lire la page comme une paillasse, pas comme une pile de formulaires. */
.sb-experience-screen .manipbar{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:.72rem;}
.sb-experience-screen .fiche-h{margin:1rem 0 .42rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800;}
.sb-experience-screen .row-add,.sb-experience-screen .prod{border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:.68rem;}
.sb-experience-screen #reagents-list:not(:empty),.sb-experience-screen #cards:not(:empty){margin-top:.55rem;}
.sb-experience-screen #ghs-btn,.sb-experience-screen button[onclick="reagentsToExtract()"],.sb-experience-screen button[onclick="ficheToCarnet()"]{background:var(--surface);}

/* Produits personnels. */
.sb-custom-screen > input,.sb-custom-screen > div > div > input{background:var(--surface);border-radius:10px;}
.sb-custom-screen h3{font-size:.72rem!important;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800;}

/* TLC : garder le geste photo comme point focal. */
.sb-tlc-screen .tlc-capture-zone{background:var(--surface);border-width:1.5px;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.sb-tlc-screen .tlc-controls{border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:.68rem;}
.sb-tlc-screen details{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:.62rem .72rem;}

/* Outils : bibliothèque compacte au-dessus de la zone active. */
.sb-tools-screen #tools-nav{display:flex;flex-wrap:wrap;gap:.38rem;margin:.55rem 0 .8rem;padding:.68rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);}
.sb-tools-screen #tools-nav .rxn-chip{margin:0;background:var(--bg);}
.sb-tools-screen .tool{border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.02);}
.sb-tools-screen .tool .note:first-child{margin-top:0;}

/* Dilution : deux calculs, deux stations clairement séparées. */
.sb-dilution-screen{counter-reset:sb-calc;}
.sb-dilution-screen > hr{margin:1rem 0!important;border-top-color:var(--line)!important;}
.sb-dilution-screen > h3{font-size:.82rem!important;letter-spacing:.035em;color:var(--fg);margin:.15rem 0 .35rem!important;}
.sb-dilution-screen > input,.sb-dilution-screen > div[style*="display:flex"] input{background:var(--surface);border-radius:10px;}
.sb-dilution-screen .dilout{border:1px solid var(--line);}

/* Abonnements : intro commune, les cartes tarifaires existantes restent la vedette. */
.sb-about-screen #current-tier-block{border-radius:13px!important;margin-top:.15rem;}
.sb-about-screen .tier-card{box-shadow:0 1px 3px rgba(0,0,0,.02);}

@media (min-width:1100px){
  #fiche,#tlc,#tools,#dilution{max-width:none;}
  .sb-analysis-screen{max-width:900px;margin-left:auto;margin-right:auto;}
  .sb-experience-screen .manipbar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.2fr);gap:.55rem .65rem;align-items:center;}
  .sb-experience-screen .manipbar-btns{grid-column:1/-1;display:grid;grid-template-columns:2fr 1fr 1fr;gap:.45rem;}
}

@media (max-width:700px){
  .sb-experience-screen .manipbar{padding:.62rem;}
  .sb-tools-screen #tools-nav{padding:.55rem;}
}

/* Outils : raccourcis de paillasse regroupés ici plutôt que dans la nav principale. */
.sb-tool-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:.2rem 0 1rem;}
.sb-tool-shortcut{appearance:none;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:.8rem .9rem;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;text-align:left;color:var(--fg);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;}
.sb-tool-shortcut:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 5px 18px rgba(0,0,0,.05);}
.sb-tool-shortcut-icon{width:2.15rem;height:2.15rem;border-radius:10px;background:var(--accent-light);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:1rem;}
.sb-tool-shortcut b{display:block;font-size:.88rem;margin-bottom:.1rem;}
.sb-tool-shortcut small{display:block;color:var(--muted);font-size:.74rem;line-height:1.35;}
.sb-tool-shortcut i{font-style:normal;color:var(--accent);font-size:.74rem;font-weight:700;white-space:nowrap;}
.sb-tools-subtitle{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 .45rem;}
@media (max-width:700px){.sb-tool-shortcuts{grid-template-columns:1fr}.sb-tool-shortcut{grid-template-columns:auto 1fr}.sb-tool-shortcut i{display:none}}

/* ===== Flux universel Module → Éditeur → retour ===== */
.sb-editor-selection[hidden]{display:none!important}
.sb-editor-selection{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:.8rem 0 1rem;padding:.85rem 1rem;border:1px solid rgba(15,110,86,.28);
  border-radius:14px;background:rgba(15,110,86,.045)
}
.sb-editor-selection-copy{min-width:240px;flex:1}
.sb-editor-selection-kicker{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.sb-editor-selection-msg{font-size:.78rem;line-height:1.5;color:var(--muted);margin-top:.2rem}
.sb-editor-selection-msg.is-error{color:var(--err,#b00020)}
.sb-editor-selection-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.sb-editor-selection-actions .btn{width:auto;margin:0}
@media (max-width:640px){
  .sb-editor-selection-actions{width:100%}
  .sb-editor-selection-actions .btn{flex:1}
}