:root{
      --bg:#0b1020;
      --text:#e7ecff;
      --muted:#9aa6d6;
      --good:#2dd4bf;
      --bad:#fb7185;
      --warn:#fbbf24;
      --slotFill: rgba(255,255,255,.03);
      --slotStroke: rgba(255,255,255,.06);
      --outlineBad: rgba(251,113,133,.55);
      --outlineWarn: rgba(251,191,36,.55);
      --outlineGood: rgba(45,212,191,.55);
    }
    *{box-sizing:border-box}

    .app{
      width:min(1100px, 100%);
      background: rgba(17,26,51,.72);
      border:1px solid rgba(255,255,255,.08);
      border-radius:16px;
      box-shadow: 0 20px 60px rgba(0,0,0,.45);
      overflow:hidden;
    }
    header{
      padding:16px 18px;
      display:flex;
      gap:14px;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
      flex-wrap:wrap;
    }
    header .left{display:flex; flex-direction:column; gap:2px; min-width: 260px}
    header h1{color: white; font-size:16px; margin:0; letter-spacing:.2px}
    header .sub{font-size:12px; color:var(--muted)}
    header .right{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

    button{
      appearance:none;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color:var(--text);
      border-radius:12px;
      padding:10px 12px;
      cursor:pointer;
      font-weight:800;
      font-size:13px;
    }
    button:hover{background: rgba(255,255,255,.10)}
    button:disabled{opacity:.45; cursor:not-allowed}

    .pill{
      font-size:12px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      color:var(--muted);
      display:flex;
      gap:8px;
      align-items:center;
      white-space:nowrap;
    }
    .pill b{color:var(--text)}
    .status{
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:900;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
    }
    .status.good{color:var(--good); border-color: rgba(45,212,191,.35)}
    .status.bad{color:var(--bad); border-color: rgba(251,113,133,.35)}
    .status.warn{color:var(--warn); border-color: rgba(251,191,36,.35)}

    main{padding:18px}
    .board{
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.20);
      padding:12px;
    }
    .hint{
      margin-top:12px;
      font-size:12px;
      color:var(--muted);
      line-height:1.45;
    }
    .hint code{
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      padding:2px 6px;
      border-radius:8px;
      color:var(--text);
    }

    svg{width:100%; height:auto; display:block; user-select:none; touch-action:none}

    .slot{
      fill: var(--slotFill);
      stroke: var(--slotStroke);
      stroke-width: 1;
    }
    .slotCellOutline{
      fill: transparent;
      stroke: rgba(255,255,255,.06);
      stroke-width: 1;
      rx: 16; ry: 16;
    }
    .cellHighlight.bad{ stroke: var(--outlineBad); stroke-width: 3; }
    .cellHighlight.warn{ stroke: var(--outlineWarn); stroke-width: 3; }
    .cellHighlight.good{ stroke: var(--outlineGood); stroke-width: 3; }

    .match{
      cursor: grab;
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
    }
    .match:active{cursor: grabbing}
    .match line{
      stroke: #f6d365;
      stroke-width: 10;
      stroke-linecap: round;
    }
    .match .head{
      fill: #ff6b6b;
      opacity:.95;
    }
    .dragging{
      filter: drop-shadow(0 12px 18px rgba(0,0,0,.55));
    }

    .app .pill,
.app .pill b {
  color: #000 !important;
}