:root {
  --game-surface: #ffffff;
  --game-surface-muted: #f8f9fa;
  --game-border-neutral: #dee2e6;
  --game-border-subtle: #e2e8f0;
  --game-radius-control: 12px;
  --game-focus-ring-color: var(--focus, #667eea);
  --game-focus-ring-width: 3px;
  --game-focus-ring-offset: 2px;
}

  .toast-container.svelte-cqwvc2 { position: fixed; top: 1rem; right: 1rem; z-index: 1000; display: flex; flex-direction: column; gap: .65rem; width: min(360px, calc(100vw - 2rem)); pointer-events: none; }
  .toast.svelte-cqwvc2 { display: flex; align-items: center; gap: .65rem; padding: .8rem .85rem; border-radius: 10px; color: #25324a; background: white; box-shadow: 0 5px 18px #1f2a4433; border-left: 4px solid #667eea; pointer-events: auto; }
  .toast.success.svelte-cqwvc2 { border-left-color: #1a9b5f; }
  .toast.error.svelte-cqwvc2 { border-left-color: #d14343; }
  .toast-icon.svelte-cqwvc2 { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; flex: 0 0 1.35rem; border-radius: 50%; color: white; background: #667eea; font-weight: 800; font-size: .85rem; }
  .toast.success.svelte-cqwvc2 .toast-icon:where(.svelte-cqwvc2) { background: #1a9b5f; }
  .toast.error.svelte-cqwvc2 .toast-icon:where(.svelte-cqwvc2) { background: #d14343; }
  .toast-content.svelte-cqwvc2 { flex: 1; min-width: 0; }
  .toast-message.svelte-cqwvc2 { display: block; font-size: .9rem; line-height: 1.35; }
  .support-reference.svelte-cqwvc2 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .45rem; color: #526078; font-size: .78rem; }
  .support-reference.svelte-cqwvc2 code:where(.svelte-cqwvc2) { color: #25324a; font-size: .76rem; overflow-wrap: anywhere; }
  .copy-reference.svelte-cqwvc2 { flex: 0 0 auto; padding: .25rem .45rem; border: 1px solid #dce1ef; border-radius: 6px; color: #35456a; background: #f7f8fc; font-size: .75rem; }
  .toast-close.svelte-cqwvc2 { padding: .1rem .35rem; color: #718096; background: transparent; font-size: 1.25rem; line-height: 1; }
  .toast-close.svelte-cqwvc2:hover { color: #25324a; opacity: 1; }
  @media (max-width: 600px) { .toast-container.svelte-cqwvc2 { top: .75rem; right: .75rem; width: calc(100vw - 1.5rem); } }


    :root {
        --primary: #667eea;
        --background: #ffffff;
        --background-secondary: #f9fafb;
        --background-tertiary: #f9f9f9;
        --background-hover: #f3f3f3;
        --border: #d1d5db;
        --focus: #667eea;
        --text: #111827;
        --text-secondary: #718096;
        --textlight: #444;
        --hover: #e5e7eb;

        /* Radius */
        --radius: 0.5rem;
        --radius-lg: 12px;
        --radius-xl: 16px;

        /* Spacing */
        --spacing: 1rem;
        --spacing-sm: 0.5rem;
        --spacing-lg: 1.5rem;

        /* Font */
        --font: 'Nunito', sans-serif;

        /* Gradients */
        --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --gradient-primary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        --gradient-secondary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

        /* Shadows */
        --shadow-sm: 0 2px 8px rgba(79, 70, 229, 0.2);
        --shadow-md: 0 4px 12px rgba(79, 70, 229, 0.3);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.05);

        /* Transitions */
        --transition-fast: 0.2s ease;
        --transition-normal: 0.3s ease;

        /* Responsive layout */
        --page-gutter: clamp(0.75rem, 2.5vw, 2rem);
        --content-gap: clamp(0.75rem, 2vw, 1.5rem);
        --shell-standard-max-width: 832px;
    }

    * {
        font-family: 'Nunito', sans-serif;
    }

    body {
        background: var(--gradient-bg);
        transition: background 0.3s ease;
        margin: 0;
        min-width: 0;
    }

    html {
        min-width: 0;
        overflow-x: hidden;
    }

    .form {
        margin: auto;
        padding: var(--spacing);
        background: var(--background);
        border-radius: var(--radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        .group {
            margin-bottom: var(--spacing);
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 0.5rem;
            color: var(--text);
            font-weight: 500;
        }
        input, select, textarea {
            padding: 0.75rem;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 1rem;
            color: var(--text);
            background-color: var(--background-secondary);
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--focus);
        }
    }

    *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    *::-webkit-scrollbar-track {
        background: var(--background-secondary);
        border-radius: 4px;
    }
    *::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
    }
    *::-webkit-scrollbar-thumb:hover {
        background: var(--primary);
    }

    button {
        padding: 0.75rem 1.25rem;
        background-color: var(--primary);
        color: white;
        font-weight: 600;
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        transition: all 0.2s ease;
        &.toggle {
            background-color: var(--hover);
            color: var(--textlight);
            font-weight: bold;
            &:hover {
                background-color: var(--primary);
                color: white;
            }
            &.active {
                background-color: var(--primary);
                color: white;
                font-weight: bold;
            }
        }
        &:hover {
            opacity: 0.9;
        }
        &.big {
            padding: 16px 24px;
            font-size: 18px;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
            }
        }
        &.secondary {
            flex: 1;
            background: var(--background);
            color: var(--primary);
            border: 2px solid var(--primary);
            padding: 12px 16px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 8px;
            &:hover {
                background: var(--primary);
                color: white;
                transform: translateY(-1px);
            }
        }

    }

    button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        [role='button']:focus-visible {
        outline: var(--game-focus-ring-width) solid var(--game-focus-ring-color) !important;
        outline-offset: var(--game-focus-ring-offset) !important;
    }

    main {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: var(--page-gutter);
        background-color: var(--background-tertiary);
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .app-shell.svelte-12qhfyh {
        box-sizing: border-box;
        width: min(100%, var(--shell-standard-max-width));
        min-height: 100dvh;
        margin: 0 auto;
        padding: 0 var(--page-gutter);
        display: flex;
        flex-direction: column;
        background-color: var(--background-tertiary);
    }

    .app-shell.full-width.svelte-12qhfyh {
        max-width: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .app-shell:has(> .home-container) {
        max-width: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .app-shell.full-width.svelte-12qhfyh > *,
    .app-shell:has(> .home-container) > * {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .app-shell.full-width.svelte-12qhfyh > .header,
    .app-shell.full-width.svelte-12qhfyh > footer,
    .app-shell:has(> .home-container) > .header,
    .app-shell:has(> .home-container) > footer {
        width: min(100%, var(--shell-standard-max-width));
        max-width: var(--shell-standard-max-width);
        margin-inline: auto;
    }

    footer.svelte-12qhfyh {
        margin-top: auto;
        text-align: center;
        font-size: 0.9rem;
        color: var(--text-secondary);
        opacity: 0.7;
        padding: 1rem 0;
    }