:root{
    --bg:#0b1020;
    --panel:#0f1630;
    --ink:#eaf0ff;
    --muted:#a9b4d6;
    --line:#283358;
    --accent:#7aa7ff;
    --good:#3ee98a;
    --warn:#ffcc66;
    --bad:#ff5f6d;
    --card:rgba(255,255,255,.06);
    --shadow: 0 18px 50px rgba(0,0,0,.35);
    --radius: 16px;
  }
  
  *{box-sizing:border-box}
  
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    color:var(--ink);
    background:
      radial-gradient(1200px 700px at 70% -10%, rgba(122,167,255,.28), transparent 55%),
      linear-gradient(180deg, var(--bg), #070a14 70%);
    min-height: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    display:flex;
    flex-direction: column;
    align-items:stretch;
    width: 100%;
    padding:0;
  }
  
  .app{
    width:min(1200px, 100%);
    display:grid;
    grid-template-columns: 360px 260px 1fr;
    gap:14px;
  }
  
  .panel{
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.10);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding:14px;
    backdrop-filter: blur(10px);
  }
  
  .title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }
  .title h1{
    font-size:16px;
    line-height:1.2;
    margin:0;
    letter-spacing:.2px;
  }
  .title p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:12px;
  }
  
  .pill{
    font-size:11px;
    color:rgba(234,240,255,.9);
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(122,167,255,.10);
    white-space:nowrap;
    user-select:none;
  }
  
  .controls{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:10px;
  }
  
  .group{
    background: rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    padding:10px;
  }
  
  .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
  }
  .row:last-child{margin-bottom:0}
  
  .mt10{ margin-top:10px; }
  
  .label{
    font-size:12px;
    color:var(--muted);
  }
  
  .value{
    font-variant-numeric: tabular-nums;
    font-size:12px;
    padding:4px 8px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.15);
  }
  
  input[type="range"]{
    width:100%;
    accent-color: var(--accent);
  }
  
  .toggles{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  
  .btn{
    cursor:pointer;
    user-select:none;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--ink);
    padding:10px 12px;
    border-radius: 14px;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:8px;
    transition: transform .08s ease, background .15s ease, border-color .15s ease;
  }
  .btn:active{transform: translateY(1px)}
  .btn.primary{
    background: rgba(122,167,255,.14);
    border-color: rgba(122,167,255,.28);
  }
  .btn.good{
    background: rgba(62,233,138,.12);
    border-color: rgba(62,233,138,.28);
  }
  
  .readout{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  
  .card{
    background: var(--card);
    border:1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding:10px;
  }
  .card h3{
    margin:0 0 6px;
    font-size:12px;
    color:rgba(234,240,255,.95);
    letter-spacing:.2px;
  }
  .card .kv{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:6px 10px;
    font-size:12px;
    color:var(--muted);
  }
  .kv b{
    color:var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight:600;
  }
  
  .status{
    font-size:12px;
    padding:10px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.15);
    color: var(--muted);
  }
  .status b{color:var(--ink)}
  .status.good{border-color: rgba(62,233,138,.28); background: rgba(62,233,138,.08)}
  .status.warn{border-color: rgba(255,204,102,.28); background: rgba(255,204,102,.08)}
  .status.bad{border-color: rgba(255,95,109,.28); background: rgba(255,95,109,.08)}
  
  canvas{
    width:100%;
    height:100%;
    display:block;
    border-radius: var(--radius);
  }
  
  .hint{
    position:absolute;
    left:12px;
    bottom:12px;
    right:12px;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:8px;
    pointer-events:none;
    color: rgba(234,240,255,.85);
    font-size:11px;
  }
  
  .hint span{
    background: rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.10);
    padding:8px 10px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
  }
  
  /* Layout full screen */
html, body {
  height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

/* container mare */
.layout{
  width: 100%;
  flex: 1 1 auto;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  padding: 12px;
  box-sizing: border-box;
}

/* Sidebar */
.sidebar{
  position: relative;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sidebar-top{
  position: absolute;
  top: 10px;
  right: -12px;
  z-index: 5;
}

.collapse-btn{
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: var(--ink);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.sidebar-inner{
  height: 100%;
  overflow: auto;            /* scroll doar în panou */
  padding: 10px;
}

/* Stage wrapper */
.stageWrap{
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Stage (canvas) pe toată înălțimea */
.stage{
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: hidden;
}

canvas{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius);
  background: #070a14;
  touch-action: none;
  cursor: grab;
}

canvas:active{
  cursor: grabbing;
}

/* Peek button când panoul e retras */
.peek-btn{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  display: none; /* apare doar când sidebar e retras */
}

/* collapsed state (desktop) */
.layout.is-collapsed{
  grid-template-columns: 0px 1fr;
}

@media (max-width: 980px){
  .layout.is-collapsed{
    grid-template-columns: 1fr;
  }
}

.layout.is-collapsed .sidebar{
  width: 0;
  overflow: hidden;
}

.layout.is-collapsed .sidebar-top{
  display: none;
}

.layout.is-collapsed .peek-btn{
  display: inline-flex;
}

/* Mobile: canvas sus, ocupă tot spațiul până la panou; panou scrollabil jos */
@media (max-width: 980px){
  .layout{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 100dvh;
    min-height: 100svh;
    padding: 8px;
    gap: 10px;
  }

  /* DOM: sidebar, stageWrap — pe mobil vrem scena sus */
  .stageWrap{
    grid-row: 1;
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
  }

  .sidebar{
    grid-row: 2;
    min-height: 0;
    max-height: min(42vh, 520px);
  }

  .sidebar-inner{
    max-height: min(38vh, 480px);
  }

  .layout.is-collapsed{
    grid-template-rows: minmax(0, 1fr) 0px;
  }

  .layout.is-collapsed .sidebar{
    width: auto;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border: none;
  }

  .layout.is-collapsed .sidebar-inner{
    max-height: 0;
    overflow: hidden;
  }

  .sidebar-top{
    right: 12px;
    left: auto;
  }

  .stage{
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }
}
/* Formula rail (în sidebar) */
.formula-rail{
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }  
  
  .formula-card{
    pointer-events: auto;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 12px;
    font-size: 12px;
    color: var(--muted);
    backdrop-filter: blur(8px);
  }
  
  .formula-card h4{
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--ink);
    letter-spacing: .3px;
  }
  
  .formula{
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    margin-bottom: 6px;
  }
  
  .formula .sym{
    color: var(--accent);
    font-weight: 600;
  }
  
  .formula .eq{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--ink);
  }
  
  .formula-card ul{
    margin: 0;
    padding-left: 14px;
  }
  
  .formula-card li{
    margin-bottom: 4px;
  }