:root{
    --atom-pl-w: 300px;
    --atom-pr-w: 320px;
    --atom-stage-ml: 300px;
    --atom-stage-mr: 320px;

    --bg0:#1f1f22;
    --bg1:#2a2a2f;
    --card:#fbf0cf;
    --card2:#f6e6b2;
  
    --pink:#f39aa0;
    --blue:#0b78b6;
    --green:#57b566;
  
    --ink:#1f1f22;
    --muted:rgba(0,0,0,.55);
  
    --shadow: 0 10px 30px rgba(0,0,0,.25);
    --radius: 18px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: linear-gradient(180deg, #141417, #101014);
    color:#f3f3f3;
    overflow:hidden;
  }
  
  .app{
    position:relative;
    height:100vh;
    height:100dvh;
    min-height:0;
  }

  .panel{
    position:fixed;
    top:0;
    bottom:0;
    height:100vh;
    height:100dvh;
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px 12px;
    min-height:0;
    z-index:150;
    transition:transform 0.28s ease;
    -webkit-overflow-scrolling:touch;
  }

  .panel.left{
    left:0;
    width:var(--atom-pl-w);
    transform:translateX(0);
    background: #f69697;
    border-right: 2px solid rgba(255,255,255,.25);
    box-shadow: 8px 0 28px rgba(0,0,0,.22);
  }

  .panel.right{
    right:0;
    width:var(--atom-pr-w);
    transform:translateX(0);
    background: #5dbb64;
    border-left: 2px solid rgba(255,255,255,.25);
    box-shadow: -8px 0 28px rgba(0,0,0,.22);
  }

  .panel.left.hidden{
    transform:translateX(-100%);
    pointer-events:none;
  }
  .panel.right.hidden{
    transform:translateX(100%);
    pointer-events:none;
  }

  .atom-toggle{
    position:fixed;
    z-index:210;
    top:max(10px, env(safe-area-inset-top, 0px));
    width:44px;
    height:44px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:2px solid rgba(255,255,255,.45);
    cursor:pointer;
    font-size:20px;
    line-height:1;
    font-weight:800;
    box-shadow:0 4px 18px rgba(0,0,0,.35);
    transition:left 0.28s ease, right 0.28s ease, transform 0.15s ease;
  }
  .atom-toggle:hover{ transform:translateY(-1px); }
  .atom-toggle-left{
    background:linear-gradient(180deg, #ff9aa2, #e86870);
    color:#111;
  }
  .atom-toggle-right{
    background:linear-gradient(180deg, #6fcf7a, #3fa84a);
    color:#111;
  }
  
  .panelHeader{
    border-radius: var(--radius);
    padding:10px 12px;
    color:#111;
    box-shadow: var(--shadow);
    border: 2px solid rgba(255,255,255,.35);
    margin-bottom:8px;
    flex-shrink:0;
  }
  .panelHeader.pink{ background: rgba(251, 238, 193, .75); }
  .panelHeader.green{ background: rgba(251, 238, 193, .75); }
  .panelHeader h2{margin:0 0 4px 0}
  .small{font-size:12.5px; line-height:1.35}
  .muted{opacity:.8}
  
  .card{
    background: rgba(251,240,207,.90);
    color:#111;
    border-radius: var(--radius);
    padding:10px 12px;
    margin-bottom:8px;
    box-shadow: var(--shadow);
    border: 2px solid rgba(255,255,255,.35);
  }
  .card.blue{
    background: #f5e4c8;
    color:#000000;
  }
  .card.mini{ padding:10px 12px; }

  .card h3{margin:0 0 8px 0; font-size:1rem;}
  .list{margin:0; padding-left:16px; font-size:0.9rem;}
  .list li{margin:4px 0}
  .formula{
    font-size:13px;
    line-height:1.5;
    user-select:text;
  }
  .formula .mjx-chtml{ font-size:inherit; }
  .formula .MathJax{ color:inherit; }
  .formula hr{
    border:none;
    border-top:1px solid rgba(255,255,255,.35);
    margin:8px 0;
  }
  .formula > div{margin:4px 0}
  
  .legend{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
  }
  .chip{
    width:18px; height:10px; border-radius:6px; display:inline-block;
    border:1px solid rgba(0,0,0,.25);
  }
  .chip.emit{ background: linear-gradient(90deg, #ff3b3b, #ffd23b, #3bff8a, #3bd8ff, #a93bff); }
  .chip.abs{ background: rgba(0,0,0,.55); }
  
  .stage{
    margin-left:var(--atom-stage-ml);
    margin-right:var(--atom-stage-mr);
    height:100vh;
    height:100dvh;
    transition:margin-left 0.28s ease, margin-right 0.28s ease;
    box-sizing:border-box;
    background: radial-gradient(1100px 700px at 50% 25%, rgba(90,90,120,.25), transparent 60%),
                linear-gradient(180deg, var(--bg1), var(--bg0));
    display:flex;
    flex-direction:column;
    padding:8px 12px 10px 12px;
    position:relative;
    min-height:0;
  }
  
  .stageTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:4px 0 8px 0;
    flex-shrink:0;
  }
  .stageTop h1{
    margin:0;
    font-size:clamp(1.25rem, 2.2vw + 0.8rem, 1.75rem);
    letter-spacing:.02em;
    text-shadow: 0 4px 12px rgba(0,0,0,.35);
    line-height:1.2;
  }
  
  .tabs{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
    flex-shrink:0;
  }
  .tab{
    padding:6px 12px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.10);
    color:#fff;
    cursor:pointer;
    font-weight:700;
    font-size:0.85rem;
  }
  .tab.active{
    background: rgba(251,240,207,.92);
    color:#111;
    border-color: rgba(255,255,255,.35);
  }

  /* Mobil / ecran îngust: titlu pe un rând (nu sub butoanele ☰), taburi pe rândul 2 */
  @media (max-width: 1024px){
    .stageTop{
      flex-direction:column;
      align-items:stretch;
      gap:10px;
      padding:6px 0 10px 0;
    }
    .stageTop h1{
      order:0;
      width:100%;
      max-width:100%;
      padding:0 54px;
      box-sizing:border-box;
      text-align:center;
      font-size:clamp(0.82rem, 3.4vw, 1.05rem);
      line-height:1.25;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .tabs{
      order:1;
      width:100%;
      justify-content:center;
      flex-wrap:wrap;
      gap:8px;
    }
    .tab{
      flex:1 1 calc(50% - 6px);
      min-width:min(140px, 42vw);
      text-align:center;
      padding:8px 10px;
      font-size:0.78rem;
    }
    .stageBottom{
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
    }
    .readouts{
      justify-content:flex-start;
      width:100%;
    }
  }
  
  .canvasWrap{
    position:relative;
    flex:1;
    min-height:0;
    border-radius: 18px;
    overflow:hidden;
    border:2px solid rgba(255,255,255,.20);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
  }
  #scene{
    width:100%;
    height:100%;
    display:block;
    background:
      radial-gradient(800px 400px at 50% 40%, rgba(255,255,255,.06), transparent 70%),
      linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.35));
  }
  .hint{
    position:absolute;
    left:10px;
    bottom:10px;
    background: rgba(0,0,0,.5);
    border:1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.95);
    padding:8px 12px;
    border-radius: 12px;
    font-size:12px;
    backdrop-filter: blur(8px);
    max-width:85%;
  }
  
  .stageBottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:8px 0 0 0;
    flex-shrink:0;
  }
  .readouts{ font-size:12px; }
  .badge{
    background: rgba(251,240,207,.92);
    color:#111;
    border-radius: 999px;
    padding:6px 10px;
    font-weight:800;
    font-size:0.8rem;
    border:1px solid rgba(255,255,255,.25);
    white-space:nowrap;
  }
  .readouts{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
    opacity:.95;
  }
  .k{opacity:.7}
  
  .controls{
    color:#111;
  }
  
  .row{
    background: rgba(251,240,207,.86);
    border-radius: 14px;
    padding:8px 10px;
    margin-bottom:6px;
    border:2px solid rgba(255,255,255,.35);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
  }
  .row label{
    display:block;
    font-weight:800;
    margin-bottom:4px;
    font-size:0.88rem;
  }
  .inline{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .pill{
    background: rgba(0,0,0,.10);
    border:1px solid rgba(0,0,0,.20);
    border-radius: 999px;
    padding:4px 8px;
    font-weight:800;
    min-width:56px;
    text-align:center;
    font-size:0.85rem;
  }
  input[type="range"]{ width:100%; max-width:140px; }
  
  select{
    width:100%;
    padding:10px 10px;
    border-radius: 12px;
    border:1px solid rgba(0,0,0,.18);
    background: rgba(255,255,255,.70);
    font-weight:700;
  }
  
  .btnStack{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    margin: 6px 0 8px 0;
  }
  .btn{
    padding:10px 12px;
    border-radius: 14px;
    font-size:0.9rem;
    border:2px solid rgba(255,255,255,.45);
    background: rgba(251,240,207,.92);
    cursor:pointer;
    font-weight:900;
    box-shadow: var(--shadow);
  }
  .btn:hover{ filter: brightness(1.03); }
  .btn.danger{
    background: rgba(240,90,90,.92);
    color:#111;
  }
  .btn.accent{
    background: linear-gradient(90deg, rgba(255,215,87,.95), rgba(87,181,102,.95));
  }
  .btnGrid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  .btn.ghost{
    background: rgba(255,255,255,.55);
    border:1px solid rgba(0,0,0,.18);
    box-shadow:none;
    border-radius: 14px;
  }
  .btn.ghost.active{
    background: rgba(11,120,182,.85);
    color:#f4fbff;
    border-color: rgba(255,255,255,.3);
  }
  
  #spectrum{
    width:100%;
    height:auto;
    max-height:120px;
    border-radius: 12px;
    border:1px solid rgba(0,0,0,.18);
    background: rgba(0,0,0,.06);
  }
  .controls .small{ font-size:11px; margin-top:4px; }
  
  @media (max-width: 1024px){
    :root{
      --atom-pl-w: min(86vw, 320px);
      --atom-pr-w: min(86vw, 320px);
    }
    .stage .canvasWrap{
      min-height:min(52vh, 480px);
    }
  }

  @media (prefers-reduced-motion: reduce){
    .panel,
    .stage,
    .atom-toggle{ transition:none; }
  }