:root{
    --bg:#f6f8ff;
    --panel:#ffffff;
    --text:#0e1a2b;
    --muted:#51607a;
    --line:#e6ecf8;
  
    --accent:#2563eb;
    --accent2:#7c3aed;
    --mint:#06b6d4;
    --heat:#f59e0b;
    --danger:#ef4444;
    --good:#16a34a;
  
    --shadow: 0 18px 50px rgba(15, 23, 42, .10);
    --radius: 18px;
  
    --topbarH: 56px;
    --ec-pl-w: 250px;
    --ec-pr-w: 250px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    min-height:100dvh;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color:var(--text);
    background:
      radial-gradient(1200px 700px at 15% 10%, rgba(37,99,235,.10), transparent),
      radial-gradient(900px 520px at 85% 30%, rgba(124,58,237,.10), transparent),
      radial-gradient(900px 520px at 55% 85%, rgba(6,182,212,.08), transparent),
      var(--bg);
    overflow:hidden;
  }
  
  /* TOP BAR */
  .topbar{
    height: var(--topbarH);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(8px);
  }
  .brand h1{
    margin:0;
    font-size:16px;
    letter-spacing:.2px;
  }
  .brand p{
    margin:2px 0 0;
    font-size:12px;
    color: var(--muted);
  }
  
  /* MAIN LAYOUT: panouri fixe stânga/dreapta, simulator centrat */
  .layout{
    position:relative;
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    height:calc(100vh - var(--topbarH));
    height:calc(100dvh - var(--topbarH));
  }

  .ecStageShell{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  
  /* PANELS */
  .panel{
    position:fixed;
    top:var(--topbarH);
    bottom:0;
    width:var(--ec-pl-w);
    max-width:100%;
    background: linear-gradient(180deg, #ffffff, #fbfcff);
    border:1px solid var(--line);
    box-shadow: var(--shadow);
    overflow:auto;
    padding: 10px;
    z-index:150;
    transition:transform 0.28s ease;
    -webkit-overflow-scrolling:touch;
  }
  .panel.left{
    left:0;
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff, #fbfcff);
    box-shadow: 8px 0 24px rgba(15, 23, 42, .08);
  }
  .panel.right{
    right:0;
    width:var(--ec-pr-w);
    border-left: 1px solid var(--line);
    box-shadow: -8px 0 24px rgba(15, 23, 42, .08);
  }
  .panel.left.hidden{
    transform:translateX(-100%);
    pointer-events:none;
  }
  .panel.right.hidden{
    transform:translateX(100%);
    pointer-events:none;
  }

  .ec-toggle{
    position:fixed;
    z-index:210;
    top:calc(var(--topbarH) + 8px);
    width:44px;
    height:44px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:1px solid #c7d2fe;
    cursor:pointer;
    font-size:20px;
    line-height:1;
    font-weight:800;
    box-shadow:0 4px 16px rgba(15, 23, 42, .12);
    transition:left 0.28s ease, right 0.28s ease, transform 0.15s ease;
  }
  .ec-toggle:hover{ transform:translateY(-1px); }
  .ec-toggle-left{
    background:linear-gradient(180deg, #eef2ff, #e0e7ff);
    color:var(--text);
  }
  .ec-toggle-right{
    background:linear-gradient(180deg, #f5f3ff, #ede9fe);
    color:var(--text);
  }
  
  .panelHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .panelHeader h2{margin:0; font-size:16px}
  h3{margin:12px 0 8px; font-size:14px; color: var(--text)}
  
  /* CANVAS STAGE */
  .stage{
    position:relative;
    flex:1;
    min-height:0;
    width: 100%;
    background: #ffffff;
  }
  canvas{
    display:block;
    width:100%;
    height:100%;
    background:
      radial-gradient(700px 420px at 25% 20%, rgba(37,99,235,.09), transparent),
      radial-gradient(600px 360px at 75% 55%, rgba(124,58,237,.08), transparent),
      #ffffff;
  }
  
  /* Controls UI */
  .row{
    display:grid;
    grid-template-columns: 1fr 1fr 74px;
    gap:10px;
    align-items:center;
    margin:8px 0;
  }
  .row label{color:var(--muted); font-size:13px}
  .row input[type="range"]{width:100%}
  .val{
    text-align:right;
    font-variant-numeric: tabular-nums;
    color:var(--text);
  }
  
  .btnRow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
  
  .btn, .iconBtn{
    border:1px solid #dbe4ff;
    background: #eef2ff;
    color: var(--text);
    padding:10px 12px;
    border-radius:14px;
    cursor:pointer;
    font-weight:800;
    transition: transform .08s ease, filter .2s ease, background .2s ease;
  }
  .btn:hover, .iconBtn:hover{filter:brightness(.98)}
  .btn:active, .iconBtn:active{transform: translateY(1px)}
  .btn.ghost{background: #f7f9ff}
  .iconBtn.small{padding:8px 10px; border-radius:12px; font-weight:900}
  #switch.btn.on{
    background: linear-gradient(180deg, rgba(6,182,212,.18), rgba(37,99,235,.12));
    border-color: rgba(6,182,212,.45);
  }
  #switch.btn.off{
    background: linear-gradient(180deg, rgba(239,68,68,.10), rgba(124,58,237,.06));
    border-color: rgba(239,68,68,.25);
  }
  
  .divider{height:1px;background:var(--line); margin:14px 0}
  
  /* stats */
  .stats{
    display:grid;
    gap:10px;
    margin-top:10px;
  }
  .stat{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fbfcff;
  }
  .stat span{color:var(--muted); font-size:13px}
  .stat b{font-variant-numeric: tabular-nums}
  
  /* formula */
  .formula{ display:grid; gap:10px; }
  .f{
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
    background: #fbfcff;
  }
  .f span{display:block;color:var(--muted); font-size:13px; margin-bottom:6px}
  .f code{
    display:block;
    padding:8px 10px;
    border-radius:12px;
    border:1px solid #e9eeff;
    background:#f3f6ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size:13px;
  }
  .f small{display:block;color:var(--muted); margin-top:6px}
  
  .facts{
    margin:10px 0 0;
    padding-left:18px;
    color:var(--muted);
    line-height:1.45;
    font-size:13px;
  }
  .facts code{
    background:#f3f6ff;
    border:1px solid #e9eeff;
    padding:2px 6px;
    border-radius:8px;
  }
  
  .status{
    border-radius:14px;
    padding:10px 12px;
    border:1px solid var(--line);
    background:#fbfcff;
    font-weight:800;
  }
  .status.ok{border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.06)}
  .status.warn{border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10)}
  .status.bad{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10)}
  
  .note{
    margin-top:10px;
    color:var(--muted);
    font-size:12.5px;
    line-height:1.45;
  }

  @media (max-width: 1400px) {
    :root {
      --ec-pl-w: 220px;
      --ec-pr-w: 220px;
    }
  }

  @media (max-width: 1200px) {
    :root {
      --ec-pl-w: 190px;
      --ec-pr-w: 190px;
    }
  }

  @media (max-width: 1024px) {
    :root { --ec-pl-w: min(86vw, 280px); --ec-pr-w: min(86vw, 280px); }
    /* Mai mult spațiu vertical pentru canvas când panourile sunt retrase */
    .ecStageShell{
      min-height:min(58vh, 560px);
    }
  }

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