:root{
    --bg:#12171d;
    --panel:#1a212a;
    --panel-2:#212a34;
    --line:#2c3742;
    --chalk:#eef1ee;
    --chalk-dim:#9aa7b2;
    --amber:#f2c14e;
    --amber-dim:#8a6f2e;

    --c-other:#9aa5b1;
    --c-metalloid:#c9cf5c;
    --c-carbon:#6fcf97;
    --c-pnictogen:#a794f7;
    --c-chalcogen:#56c2d6;
    --c-halogen:#ef8467;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--chalk);
    font-family:'IBM Plex Sans',sans-serif;}
  h1,h2,h3{font-family:'IBM Plex Serif',serif;margin:0;}
  .mono{font-family:'IBM Plex Mono',monospace;}

  .wrap{max-width:1180px;margin:0 auto;padding:22px 18px 60px;}

  .top{display:flex;align-items:baseline;justify-content:space-between;
    flex-wrap:wrap;gap:10px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px;}
  .top h1{font-size:2rem;font-weight:600;letter-spacing:.2px;}
  .top .subtitle{color:var(--chalk-dim);font-size:1.25rem;margin-top:2px;}

  .mode-toggle{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);
    border-radius:8px;padding:4px;}
  .mode-toggle button{background:transparent;border:none;color:var(--chalk-dim);
    font-family:inherit;font-size:1.25rem;font-weight:600;padding:7px 14px;border-radius:6px;cursor:pointer;}
  .mode-toggle button.active{background:var(--amber);color:#1b1406;}

  .layout{display:grid;grid-template-columns:150px 1fr 220px;gap:16px;}
  @media (max-width:900px){.layout{grid-template-columns:1fr;} }

  .panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;}
  .panel h3{font-size:1.25rem;text-transform:uppercase;letter-spacing:.09em;
    color:var(--chalk-dim);margin-bottom:10px;font-family:'IBM Plex Sans',sans-serif;font-weight:600;}

  #palette{display:flex;flex-direction:column;gap:8px;}
  .tile{display:flex;align-items:center;gap:8px;background:var(--panel-2);
    border:1px solid var(--line);border-radius:8px;padding:7px 9px;cursor:grab;user-select:none;}
  .tile:active{cursor:grabbing;}
  .tile .sym{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.25rem;
    color:#10151a;flex-shrink:0;}
  .tile .lbl{font-size:1.1rem;color:var(--chalk-dim);line-height:1.15;}
  .tile .lbl b{color:var(--chalk);display:block;font-size:1.25rem;}

  #board-wrap{position:relative;height:520px;overflow:hidden;background:
    radial-gradient(circle at 20px 20px, #202a34 1px, transparent 1px) 0 0/22px 22px, var(--panel);
  }
  #board{position:absolute;inset:0;}
  svg#bonds{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
  .bond-hit{stroke:transparent;stroke-width:14px;pointer-events:stroke;cursor:pointer;}
  .bond-line{stroke:var(--chalk);stroke-width:2.2px;}
  .bond-electron{fill:#8fd0e8;opacity:.9;}
  .temp-wire{stroke:var(--amber);stroke-width:2px;stroke-dasharray:5 4;opacity:.85;}

  @keyframes wiggle{
    0%,100%{transform:rotate(0deg) scale(1);}
    25%{transform:rotate(-2deg) scale(1.012);}
    50%{transform:rotate(0deg) scale(0.99);}
    75%{transform:rotate(2deg) scale(1.012);}
  }
  @keyframes dotJitter{
    0%,100%{transform:translate(-50%,-50%) translate(0,0);}
    50%{transform:translate(-50%,-50%) translate(1.3px,-1.3px);}
  }

  .atom{position:absolute;width:52px;height:52px;transform:translate(-50%,-50%);z-index:2;}
  .atom-core{
    position:relative;overflow:hidden;
    width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.25rem;color:#10151a;
    cursor:grab;user-select:none;
    box-shadow:
      inset -7px -8px 14px rgba(0,0,0,.45),
      inset 5px 5px 9px rgba(255,255,255,.35),
      0 5px 3px rgba(0,0,0,.2),
      0 7px 14px rgba(0,0,0,.4);
    animation:wiggle 3.6s ease-in-out infinite;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  }
  .atom-core.dragging{cursor:grabbing;animation:none;transition:none;}
  .atom-core::before{
    content:'';position:absolute;top:10%;left:16%;width:52%;height:42%;
    background:radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 72%);
    border-radius:50%;pointer-events:none;filter:blur(0.5px);
  }
  .atom-core::after{
    content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle at 68% 78%, rgba(0,0,0,.4), transparent 58%);
  }
  .atom-symbol{position:relative;z-index:2;text-shadow:0 1px 1px rgba(255,255,255,.25);}

  .radical-ring{
    position:absolute;inset:-2px;border-radius:50%;pointer-events:none;display:none;z-index:1;
    box-shadow:0 0 0 2px rgba(240,120,120,.7);
    animation:radicalPulse 1.6s ease-in-out infinite;
  }
  .radical-ring.show{display:block;}
  @keyframes radicalPulse{
    0%,100%{box-shadow:0 0 0 2px rgba(240,120,120,.35);}
    50%{box-shadow:0 0 0 4px rgba(240,120,120,.75);}
  }

  .atom .fc-badge{position:absolute;top:-12px;right:-12px;background:var(--bg);
    border:1px solid var(--line);border-radius:50%;width:23px;height:23px;
    display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:600;
    font-family:'IBM Plex Mono',monospace;color:var(--chalk);z-index:4;cursor:help;}

  .atom .e-btn{position:absolute;left:-11px;width:18px;height:18px;border-radius:50%;
    background:var(--panel-2);border:1px solid var(--line);color:var(--chalk);
    display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;
    line-height:1;cursor:pointer;z-index:5;opacity:.55;transition:opacity .15s;user-select:none;}
  .atom:hover .e-btn{opacity:1;}
  .atom .e-btn.plus{top:-8px;}
  .atom .e-btn.minus{bottom:-8px;}

  .atom.drop-hover .atom-core{box-shadow:
      inset -7px -8px 14px rgba(0,0,0,.45),
      inset 5px 5px 9px rgba(255,255,255,.35),
      0 0 0 3px rgba(191,232,255,.7),
      0 7px 14px rgba(0,0,0,.4);}

  .dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--amber);
    transform:translate(-50%,-50%);z-index:3;cursor:pointer;box-shadow:0 0 3px rgba(242,193,78,.6);
    animation:dotJitter 2.6s ease-in-out infinite;}
  .dot.selected{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35);}
  .dot.origin-drag{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.35);}
  .dot.drop-hover{background:#bfe8ff;box-shadow:0 0 0 5px rgba(191,232,255,.45);}

  .hint{color:var(--chalk-dim);font-size:1.25rem;line-height:1.5;}

  #side{display:flex;flex-direction:column;gap:12px;}
  .btnrow{display:flex;flex-direction:column;gap:8px;}
  button.action{background:var(--panel-2);border:1px solid var(--line);color:var(--chalk);
    font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:1.25rem;
    padding:9px 10px;border-radius:7px;cursor:pointer;text-align:left;}
  button.action:hover{border-color:var(--amber-dim);}
  button.action.primary{background:var(--amber);color:#1b1406;border-color:var(--amber);}

  #formula-target{font-family:'IBM Plex Mono',monospace;font-size:2rem;color:var(--amber);}
  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
  .chip{background:var(--panel-2);border:1px solid var(--line);border-radius:20px;
    padding:3px 9px;font-size:1.25rem;font-family:'IBM Plex Mono',monospace;}

  #molecule-select{width:100%;background:var(--panel-2);color:var(--chalk);border:1px solid var(--line);
    border-radius:7px;padding:7px;font-family:inherit;font-size:1.25rem;}

  #status{font-size:1.25rem;line-height:1.5;padding:9px 10px;border-radius:7px;
    background:var(--panel-2);border:1px solid var(--line);min-height:18px;}
  #status.ok{border-color:#3f8c5f;color:#8fe3ab;}
  #status.bad{border-color:#8c3f3f;color:#f0a5a5;}

  #charge-total{font-size:1.25rem;color:var(--chalk-dim);}