.dark {
      --bg: #0b1220;
      --card: #111827;
      --text: #e5e7eb;
      --muted: #9ca3af;
      --brand: #60a5fa;
      --brand-2: #34d399;
      --accent: #fbbf24;
      --danger: #f87171;
      --grid: #1f2a44;
    }
.title {
      display: flex; align-items: center; gap: 12px;
      font-weight: 600; font-size: clamp(18px, 2.3vw, 28px);
    }
    .title .logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--accent)); display:grid; place-items:center; color:white; font-weight:900; }
    .h1-title{margin-left:25px;font-size: clamp(18px, 2.3vw, 28px);}
	.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top:10px; margin-left:25px;}
    .btn, select, input[type="number"], .chip {
      border: 0; background: var(--card); color: var(--text);
      padding: 10px 14px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.06);
      outline: 2px solid transparent; outline-offset: 2px; transition: .2s ease;
      font-weight: 700;
    }
    .btn:hover, select:hover { transform: translateY(-1px); }
    .btn.primary { background: linear-gradient(180deg, var(--brand), #1d4ed8); color: #fff; }
    .success-b { background: linear-gradient(180deg, var(--brand), #1d4ed8); color:#fff; }
    .btn.warning { background: linear-gradient(180deg, var(--accent), #d97706); color:#0b1020; }
    .btn.ghost { background: transparent; border: 2px dashed var(--grid); }
    .switch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--card); cursor: pointer; }
    .switch input { display:none; }
    .switch .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); transition:.2s; }
    .switch input:checked + .dot { transform: translateX(20px); background: #fff; box-shadow: inset 0 0 0 10px var(--brand); }

    main { display: grid; grid-template-columns: 320px 1fr; gap: 16px; padding: 0 clamp(16px, 4vw, 28px) 28px; }
    @media (max-width: 980px) { main { grid-template-columns: 1fr; } }

    .panel { background: var(--card); padding: 16px; border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
    .panel h2 { margin: 0 0 10px; font-size: 18px; }

    .list { display: grid; gap: 8px; max-height: 380px; overflow:auto; font-size: 14px; }
    .chip { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .chip small { color: var(--muted); font-weight: 700; }

    .grid { background: var(--card); padding: 10px; border-radius: 16px; box-shadow: inset 0 0 0 2px var(--grid); display:inline-block; }
    .row { display:flex; }
    .cell { position:relative; width: clamp(28px, 5vw, 42px); height: clamp(28px, 5vw, 42px); border: 1px solid var(--grid); display:grid; place-items:center; font-weight:900; border-radius: 6px; margin: 2px; overflow: hidden; }
    .cell.block { background: repeating-conic-gradient(from 45deg, #0000 0 25%, rgba(0,0,0,.05) 0 50%); }
    .cell input { width:100%; height:100%; border:0; outline: none; text-transform: uppercase; text-align:center; font: inherit; background: transparent; color: var(--text); caret-color: var(--brand); }
    .number { position:absolute; top:3px; left:5px; font-size: 10px; color: var(--muted); font-weight:900; }
    .cell.selected { box-shadow: 0 0 0 2px var(--accent) inset; }
    .cell.highlight { background: rgba(34,197,94,.15); }
    .cell.mistake { background: rgba(239,68,68,.18); }

    .status { border-radius:12px;display:flex; gap:5px; align-items:center; flex-wrap:wrap; margin-top: 10px; background-color: orange;padding:8px; }
    .badge { font-size:12px;background: var(--card); padding: 5px 7px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.06); font-weight:800; }

    .modal {width: 100%; position: fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.35); padding: 20px; }
    .modal.open { display:flex; }
    .modal .box { background: var(--card); color: var(--text); max-width: 520px; width: 100%; border-radius: 20px; padding: 18px; box-shadow: 0 20px 40px rgba(0,0,0,.25); }
    .box h3 { margin: 0 0 6px; }
    .box p { margin: 6px 0; color: var(--muted); }

    details { background: var(--card); border-radius: 14px; padding: 10px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
    summary { cursor: pointer; font-weight: 800; }
    .editor { display:none; margin-top: 10px; }
    .editor textarea { width: 100%; min-height: 180px; border-radius: 10px; padding: 10px; background: #0b102005; border: 1px solid var(--grid); color: var(--text); }
    .editor.open { display:block; }

    .note { font-size: 12px; color: var(--muted); }