:root {
      --bg: #0b0f19;
      --card-start: rgba(255,255,255,.06);
      --card-end: rgba(255,255,255,.04);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.66);
      --stroke: rgba(255,255,255,.12);
      --shadow: 0 20px 50px rgba(0,0,0,.45);
      --radius: 18px;
      --vn-red: rgba(218, 41, 28, 1);
      --vn-yellow: rgba(255, 205, 0, 1);
      
      --ball-bg: radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), rgba(255,255,255,.06));
      --ball-border: rgba(255,255,255,.12);
      --ball-power-bg: radial-gradient(circle at 30% 25%, rgba(236,72,153,.35), rgba(255,255,255,.06));
      --ball-power-border: rgba(236,72,153,.65);
      
      --btn-bg: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      --btn-primary-bg: linear-gradient(180deg, rgba(99,102,241,.35), rgba(255,255,255,.04));
      --btn-primary-border: rgba(99,102,241,.55);
      --btn-danger-bg: linear-gradient(180deg, rgba(239,68,68,.22), rgba(255,255,255,.04));
      --btn-danger-border: rgba(239,68,68,.55);
      
      --code-bg: rgba(0,0,0,.22);
      --item-bg: rgba(255,255,255,.04);
      --chip-bg: rgba(255,255,255,.05);
      --chip-power-bg: rgba(236,72,153,.18);
      
      --body-grad: 
        radial-gradient(1000px 700px at 20% 10%, rgba(99,102,241,.33), transparent 60%),
        radial-gradient(900px 600px at 80% 30%, rgba(34,197,94,.20), transparent 55%),
        radial-gradient(900px 700px at 50% 90%, rgba(236,72,153,.16), transparent 55%),
        radial-gradient(1200px 900px at 55% 20%, rgba(218, 41, 28, .16), transparent 62%);

      --star-color: rgba(255, 205, 0, .12);
      --star-blend: screen;
      
      --switch-bg: rgba(255,255,255,.15);
      --switch-on: #818cf8;
      --switch-knob: #fff;
    }

    [data-theme="light"] {
      --bg: #f3f4f6;
      --card-start: rgba(255, 255, 255, 0.85);
      --card-end: rgba(255, 255, 255, 0.4);
      --text: #111827;
      --muted: #4b5563;
      --stroke: rgba(0,0,0,.08);
      --shadow: 0 10px 25px rgba(0,0,0,.06);
      
      --ball-bg: radial-gradient(circle at 30% 25%, #ffffff, #e5e7eb);
      --ball-border: rgba(0,0,0,.1);
      --ball-power-bg: radial-gradient(circle at 30% 25%, #fce7f3, #fbcfe8);
      --ball-power-border: #f472b6;
      
      --btn-bg: #fff;
      --btn-primary-bg: #e0e7ff;
      --btn-primary-border: #818cf8;
      --btn-danger-bg: #fee2e2;
      --btn-danger-border: #fca5a5;
      
      --code-bg: rgba(255,255,255,.6);
      --item-bg: rgba(255,255,255,.6);
      --chip-bg: rgba(0,0,0,.05);
      --chip-power-bg: #fce7f3;
      
      --body-grad: 
        radial-gradient(1000px 700px at 20% 10%, rgba(99,102,241,.12), transparent 60%),
        radial-gradient(900px 600px at 80% 30%, rgba(34,197,94,.08), transparent 55%),
        radial-gradient(900px 700px at 50% 90%, rgba(236,72,153,.08), transparent 55%),
        radial-gradient(1200px 900px at 55% 20%, rgba(218, 41, 28, .06), transparent 62%);

      --star-color: rgba(218, 165, 32, 0.2);
      --star-blend: multiply;
      
      --switch-bg: #cbd5e1;
      --switch-on: #6366f1;
      --switch-knob: #fff;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
      color: var(--text);
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding: 22px;
      position: relative;
      overflow-x: hidden;

      background:
        var(--body-grad),
        var(--bg);
    }

    /* ---------- Vietnam flag background (premium) ---------- */
    body::before{
      content:"";
      position:absolute; inset:-2px;
      background: linear-gradient(180deg, rgba(218, 41, 28, .16), rgba(218, 41, 28, .06));
      pointer-events:none;
      z-index:0;
    }

    /* Big star watermark center */
    body::after{
      content:"";
      position:absolute;
      inset:-140px -140px;
      pointer-events:none;
      z-index:0;
      background: var(--star-color);
      clip-path: polygon(
        50% 8%,
        61% 38%,
        93% 38%,
        67% 56%,
        78% 88%,
        50% 70%,
        22% 88%,
        33% 56%,
        7% 38%,
        39% 38%
      );
      transform: rotate(-14deg);
      filter: blur(.2px);
      opacity: .55;
      mix-blend-mode: var(--star-blend);
    }

    /* Small emblem star top-left */
    .flag-emblem{
      position: fixed;
      left: 22px;
      top: 18px;
      width: 64px;
      height: 64px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), rgba(255,255,255,.06)),
        linear-gradient(180deg, rgba(218, 41, 28, .55), rgba(218, 41, 28, .25));
      box-shadow: 0 16px 35px rgba(0,0,0,.45);
      backdrop-filter: blur(8px);
      z-index: 3;
      display:grid;
      place-items:center;
      overflow:hidden;
    }
    .flag-emblem::before{
      content:"";
      width: 36px;
      height: 36px;
      background: rgba(255, 205, 0, .95);
      clip-path: polygon(
        50% 6%,
        61% 36%,
        93% 36%,
        67% 55%,
        78% 92%,
        50% 72%,
        22% 92%,
        33% 55%,
        7% 36%,
        39% 36%
      );
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
    }
    .flag-emblem::after{
      content:"VN";
      position:absolute;
      bottom:6px;
      right:8px;
      font-size:10px;
      letter-spacing:.8px;
      color: rgba(255,255,255,.75);
    }

    .wrap {
      width: min(980px, 100%);
      display: grid;
      gap: 16px;
      grid-template-columns: 1.2fr .8fr;
      align-items: start;
      position: relative;
      z-index: 1;
    }
    @media (max-width: 900px) {
      .wrap { grid-template-columns: 1fr; }
      body::after{ inset:-170px -170px; }
      .flag-emblem{ left: 14px; top: 12px; width: 56px; height: 56px; border-radius: 16px; }
      .flag-emblem::before{ width: 32px; height: 32px; }
    }

    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .input-field {
      appearance: none;
      width: 100%;
      background: var(--code-bg);
      border: 1px solid var(--stroke);
      border-radius: 10px;
      padding: 10px 12px;
      color: var(--text);
      font-family: inherit;
      font-size: 14px;
      transition: border-color .15s ease, background .15s ease;
    }
    .input-field:focus {
      outline: none;
      border-color: var(--switch-on);
      background: var(--item-bg);
    }
    textarea.input-field {
      resize: vertical;
      min-height: 80px;
    }

    .card {
      background: linear-gradient(180deg, var(--card-start), var(--card-end));
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(10px);
    }
    .header {
      padding: 18px 18px 14px;
      border-bottom: 1px solid var(--stroke);
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }
    .title {
      font-size: 18px;
      letter-spacing: -.2px;
      margin: 0;
      line-height: 1.2;
    }
    .subtitle {
      margin: 6px 0 0;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
    }
    .content { padding: 18px; }
    .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

    .btn {
      appearance: none;
      border: 1px solid var(--stroke);
      background: var(--btn-bg);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 14px;
      cursor: pointer;
      font-weight: 700;
      letter-spacing: -.1px;
      transition: transform .06s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
      user-select: none;
      white-space: nowrap;
    }
    .btn:hover { border-color: rgba(255,255,255,.22); }
    .btn:active { transform: translateY(1px); }
    .btn:disabled { opacity: .55; cursor: not-allowed; }

    .btn.primary {
      border-color: var(--btn-primary-border);
      background: var(--btn-primary-bg);
    }
    .btn.danger {
      border-color: var(--btn-danger-border);
      background: var(--btn-danger-bg);
    }

    .toggle {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--stroke);
      border-radius: 14px;
      background: var(--item-bg);
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }
    .toggle input { accent-color: #818cf8; }

    /* Custom Switch Style */
    .switch {
      position: relative;
      display: inline-block;
      width: 32px;
      height: 18px;
    }
    .switch input { 
      opacity: 0; 
      width: 0; 
      height: 0; 
    }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: var(--switch-bg);
      transition: .3s;
      border-radius: 34px;
    }
    .slider:before {
      position: absolute;
      content: "";
      height: 14px;
      width: 14px;
      left: 2px;
      bottom: 2px;
      background-color: var(--switch-knob);
      transition: .3s;
      border-radius: 50%;
    }
    input:checked + .slider {
      background-color: var(--switch-on);
    }
    input:checked + .slider:before {
      transform: translateX(14px);
    }

    .soundToggle{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:10px 12px;
      border:1px solid var(--stroke);
      border-radius:14px;
      background: var(--item-bg);
      color: var(--muted);
      font-size:12px;
      white-space: nowrap;
    }
    .soundToggle input { accent-color: #facc15; }

    .balls {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      padding: 14px 0 6px;
      align-items: center;
    }

    .ball {
      width: 52px; height: 52px;
      border-radius: 999px;
      display: grid; place-items: center;
      border: 1px solid var(--stroke);
      background: var(--ball-bg);
      font-size: 18px;
      font-weight: 900;
      letter-spacing: -.3px;
      box-shadow: 0 10px 20px rgba(0,0,0,.25);
      transition: transform .25s ease, opacity .25s ease;
    }
    .ball.power {
      border-color: var(--ball-power-border);
      background: var(--ball-power-bg);
    }

    .divider {
      height: 34px; width: 1px;
      background: rgba(255,255,255,.14);
      margin: 0 2px;
    }

    .meta {
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      background: var(--code-bg);
      border: 1px solid var(--stroke);
      border-radius: 14px;
      padding: 10px 12px;
      color: var(--text);
      width: 100%;
      overflow: auto;
      white-space: pre-wrap;
    }

    .list {
      max-height: 420px;
      overflow: auto;
      padding-right: 6px;
    }
    .item {
      border: 1px solid var(--stroke);
      border-radius: 14px;
      background: var(--item-bg);
      padding: 12px 12px;
      display: grid;
      gap: 8px;
      margin-bottom: 10px;
    }
    .item .top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
      flex-wrap: wrap;
    }
    .mini {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }
    .mini .chip {
      padding: 6px 8px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: var(--chip-bg);
      font-weight: 800;
      font-size: 12px;
      color: var(--text);
    }
    .mini .chip.power {
      border-color: var(--ball-power-border);
      background: var(--chip-power-bg);
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.9);
      padding: 10px 12px;
      border-radius: 999px;
      font-size: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      box-show: 0 14px 30px rgba(0,0,0,.45);
      z-index: 10;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

    a { color: var(--text); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* ---------- dramatic animation ---------- */
    .ball.revealing { transform: scale(1.35); opacity: 0.2; }
    .ball.show { transform: scale(1); opacity: 1; }

    @keyframes shuffle {
      0% { transform: translateY(-6px); }
      50% { transform: translateY(6px); }
      100% { transform: translateY(-6px); }
    }
    .shuffling { animation: shuffle .08s linear infinite; }

    /* subtle “finish” pulse */
    @keyframes pulse {
      0% { transform: scale(1); }
      35% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }
    .pulse { animation: pulse .35s ease; }