@scope (.omni-generatory-rebus) {
    /* Zmienne CSS dla motywu ciemnego panelu i jasnej karty */
    :scope {
      --bg-dark: #ffffff;
      --bg-dark-panel: rgba(255, 255, 255, 0.75);
      --border-dark: hsl(220, 15%, 88%);
      --text-light: hsl(220, 30%, 15%);
      --text-muted: hsl(220, 12%, 42%);
      
      --accent: #4f883d;
      --accent-hover: #5a9b46;
      --accent-rgb: 79, 136, 61;
      
      --card-bg-1: linear-gradient(135deg, hsl(340, 85%, 60%), hsl(360, 85%, 55%));
      --card-bg-2: linear-gradient(135deg, hsl(210, 85%, 60%), hsl(230, 85%, 55%));
      --card-bg-3: linear-gradient(135deg, hsl(150, 80%, 45%), hsl(170, 80%, 40%));
      --card-bg-4: linear-gradient(135deg, hsl(45, 90%, 55%), hsl(30, 90%, 50%));
      --card-bg-5: linear-gradient(135deg, hsl(280, 80%, 60%), hsl(260, 80%, 55%));
      
      --sheet-bg: #ffffff;
      --sheet-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
      --line-blue: #a3c4f3;
      --line-red: #ffadad;
      
      --panel-width: 300px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :scope {
      font-family: 'Outfit', sans-serif;
      background-color: hsl(220, 20%, 96%);
      color: hsl(220, 30%, 15%);
      overflow: hidden;
      min-height: 900px;
      display: flex;
    }

    /* Główny kontener aplikacji */
    #app-container {
      display: flex;
      width: 100%;
      min-height: 900px;
      position: relative;
    }

    /* ==========================================
       PANEL USTAWIEŃ (LEWY)
       ========================================== */
    #settings-panel {
      width: var(--panel-width);
      background-color: var(--bg-dark);
      background-image: radial-gradient(at 0% 0%, rgba(var(--accent-rgb), 0.05) 0px, transparent 50%),
                        radial-gradient(at 100% 100%, rgba(79, 136, 61, 0.02) 0px, transparent 50%);
      border-right: 1px solid var(--border-dark);
      color: var(--text-light);
      display: flex;
      flex-direction: column;
      height: 100%;
      z-index: 10;
      flex-shrink: 0;
      box-shadow: 5px 0 20px rgba(0, 0, 0, 0.05);
    }

    #panel-header {
      padding: 18px;
      border-bottom: 1px solid var(--border-dark);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    #panel-header h1 {
      font-family: 'Fredoka', sans-serif;
      font-size: 21px;
      font-weight: 600;
      background: linear-gradient(135deg, var(--text-light) 30%, var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #panel-header .badge {
      background: rgba(var(--accent-rgb), 0.2);
      border: 1px solid rgba(var(--accent-rgb), 0.4);
      color: hsl(250, 100%, 80%);
      padding: 4px 8px;
      border-radius: 99px;
      font-size: 11px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    #settings-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* Customowy scrollbar dla panelu */
    #settings-scroll::-webkit-scrollbar {
      width: 8px;
    }
    #settings-scroll::-webkit-scrollbar-track {
      background: transparent;
    }
    #settings-scroll::-webkit-scrollbar-thumb {
      background: hsl(220, 10%, 80%);
      border-radius: 4px;
    }
    #settings-scroll::-webkit-scrollbar-thumb:hover {
      background: hsl(220, 10%, 70%);
    }

    .setting-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .setting-label {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .setting-info {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* Stylizacja Inputów i Textarea */
    input[type="text"], textarea, select {
      background: #ffffff;
      border: 1px solid var(--border-dark);
      border-radius: 12px;
      color: var(--text-light);
      padding: 10px 12px;
      font-family: inherit;
      font-size: 14px;
      transition: all 0.2s ease;
      width: 100%;
    }

    input[type="text"]:focus, textarea:focus, select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
      background: #ffffff;
    }

    input::placeholder, textarea::placeholder {
      color: hsl(220, 10%, 65%);
    }

    textarea {
      resize: vertical;
      min-height: 72px;
    }

    /* Przełączniki i Checkboxy premium */
    .toggle-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .checkbox-btn {
      position: relative;
    }

    .checkbox-btn input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .checkbox-btn label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 9px 8px;
      background: hsl(220, 20%, 97%);
      border: 1px solid var(--border-dark);
      border-radius: 10px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      transition: all 0.2s ease;
      user-select: none;
    }

    .checkbox-btn input[type="checkbox"]:checked + label {
      background: rgba(var(--accent-rgb), 0.08);
      border-color: var(--accent);
      color: var(--accent);
      font-weight: 600;
    }

    .checkbox-btn label:hover {
      border-color: rgba(var(--accent-rgb), 0.3);
      color: var(--text-light);
    }

    /* Stopka panelu z przyciskiem drukowania */
    #panel-footer {
      padding: 20px 24px;
      border-top: 1px solid var(--border-dark);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .btn-primary {
      background: var(--accent);
      border: none;
      border-radius: 12px;
      color: #fff;
      font-family: inherit;
      font-size: 16px;
      font-weight: 600;
      padding: 14px 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.25);
      transition: all 0.2s ease;
      width: 100%;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.35);
      background: var(--accent-hover);
    }

    .btn-primary:active {
      transform: translateY(0);
    }

    .btn-primary:disabled {
      cursor: wait;
      opacity: 0.75;
      transform: none;
    }

    /* ==========================================
       OBSZAR PODGLĄDU (PRAWY)
       ========================================== */
    #preview-container {
      flex: 1;
      min-width: 0;
      height: 100%;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-direction: column;
      padding: 0;
      background-color: var(--sheet-bg);
      position: relative;
    }

    .preview-toolbar {
      width: min(210mm, 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: #f4f7f5;
      border-bottom: 1px solid var(--border-dark);
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 600;
      position: sticky;
      top: 0;
      z-index: 2;
    }

    .preview-toolbar .btn-primary {
      width: auto;
      padding: 8px 13px;
      font-size: 14px;
    }

    /* Wirtualny arkusz A4 */
    #worksheet-sheet {
      width: min(210mm, calc(100% - 24px));
      min-height: 0;
      aspect-ratio: 210 / 297;
      background-color: var(--sheet-bg);
      box-shadow: none;
      padding: 15mm 15mm;
      display: flex;
      flex-direction: column;
      position: relative;
      transform-origin: top center;
    }

    /* NAGŁÓWEK KARTY PRACY */
    .sheet-header {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      column-gap: 30px;
      row-gap: 15px;
      margin-bottom: 25px;
      font-size: 13px;
    }

    .header-field {
      display: flex;
      align-items: flex-end;
      gap: 6px;
    }

    .header-field span {
      font-weight: 500;
      color: #555;
      white-space: nowrap;
    }

    .header-field .line {
      flex: 1;
      border-bottom: 1px solid #777;
      margin-bottom: 3px;
    }

    .sheet-divider {
      border: none;
      border-top: 2px solid #333;
      margin-bottom: 30px;
    }

    /* TYTUŁ I INSTRUKCJE */
    .sheet-title {
      font-family: 'Fredoka', sans-serif;
      font-size: 26px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 12px;
      text-decoration: underline;
      text-underline-offset: 6px;
      color: #111;
    }

    .sheet-instructions {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 30px;
      color: #222;
    }

    /* SIATKA/GRID REBUSU */
    .rebus-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex-grow: 1;
      justify-content: flex-start;
      margin-top: 10px;
    }

    .rebus-row {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 7mm;
      flex-wrap: wrap;
    }

    /* POJEDYNCZY KAFELEK REBUSU */
    .rebus-item {
      display: flex;
      flex-direction: column;
      width: 28mm;
      height: 55mm;
      background: #fff;
      border: 1px solid #222;
      overflow: hidden;
      flex-shrink: 0;
    }

    .rebus-image-box {
      width: 100%;
      height: 48%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2mm;
      border-bottom: 1px solid #222;
      position: relative;
    }

    .rebus-image-box img {
      width: 90%;
      height: 90%;
      object-fit: contain;
    }

    .rebus-answer-lines {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 2mm 4mm;
    }

    .rebus-answer-lines span {
      display: block;
      border-bottom: 1.5px solid #20bdf1;
    }

    /* Tryb karty tekstowej (np. dla Y) */
    .text-letter-card {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .text-letter-circle {
      width: 16mm;
      height: 16mm;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      font-size: 26px;
      box-shadow: inset 0 -3px 8px rgba(0,0,0,0.2), 0 3px 6px rgba(0,0,0,0.1);
    }

    /* KLOSEK DLA SPACJI */
    .rebus-space {
      width: 12mm;
      height: 48mm;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .rebus-space-indicator {
      width: 2px;
      height: 15mm;
      border-left: 2px dotted #ccc;
    }

    /* Stopka znaku wodnego */
    .sheet-footer {
      margin-top: auto;
      display: flex;
      justify-content: center;
      font-size: 10px;
      color: #999;
      padding-top: 15px;
      border-top: 1px solid #eee;
      text-align: center;
    }

    /* ==========================================
       RESPONSYWNOŚĆ (UKŁAD PIONOWY < 850px)
       ========================================== */
    @media (max-width: 850px) {
      :scope {
        overflow: auto;
        height: auto;
      }
      
      #app-container {
        flex-direction: column;
        height: auto;
      }
      
      #settings-panel {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-dark);
      }
      
      #settings-scroll {
        max-height: 500px;
        overflow-y: auto;
      }

      #preview-container {
        padding: 0;
        height: auto;
        min-height: 100vh;
      }

      #worksheet-sheet {
        transform: scale(1) !important;
        width: 100%;
        max-width: 210mm;
        aspect-ratio: 210 / 297;
      }
    }

    /* ==========================================
       DRUKOWANIE (@media print)
       ========================================== */
    @media print {
      :scope {
        background: #fff;
        color: #000;
        width: 210mm;
        height: 297mm;
        overflow: visible;
      }

      #app-container {
        display: block;
        height: auto;
      }

      #settings-panel {
        display: none !important;
      }

      #preview-container {
        padding: 0 !important;
        background: none !important;
        display: block !important;
        overflow: visible !important;
      }

      #worksheet-sheet {
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        width: 210mm !important;
        height: 297mm !important;
        padding: 10mm 10mm !important;
        page-break-after: avoid;
        page-break-inside: avoid;
      }
      
      .rebus-item {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }
      
      .text-letter-circle {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }
    }
}