/* style.css - PromptCrafter Styling (Bento Grid + Scroll Refinements) - Modernized */

@layer reset, theme, base, layout, components, utilities;

@layer theme {
    /* --- Font Import (Assumed in HTML via CDN like Google Fonts) ---
    @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400..800&family=Syne:wght@400..800&family=Inter:wght@400..800&display=swap');
    */

    /* --- Variables --- */
    :root {
        /* Font Stacks */
        --font-sans: 'Syne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-heading: 'Syne', var(--font-sans);
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

        /* Core Palette - Framer-inspired Orange */
        --color-primary-hue: 20;
        --color-primary-saturation: 100%;
        --color-primary-lightness: 50%; /* For #ff5001 */
        
        --color-primary: hsl(var(--color-primary-hue) var(--color-primary-saturation) var(--color-primary-lightness));
        --color-primary-dark: hsl(var(--color-primary-hue) var(--color-primary-saturation) calc(var(--color-primary-lightness) - 10%)); /* ~#d13f00 */
        --color-primary-light: hsl(var(--color-primary-hue) var(--color-primary-saturation) calc(var(--color-primary-lightness) + 10%)); /* ~#ff7a3a */

        --color-primary-bg-l-saturation: 100%;
        --color-primary-bg-l-lightness: 97%; /* For #fff7f3 */
        --color-primary-bg-l: hsl(var(--color-primary-hue) var(--color-primary-bg-l-saturation) var(--color-primary-bg-l-lightness));
        
        /* Accents */
        --color-accent: var(--color-primary-light);
        --color-accent-dark: var(--color-primary);
        --color-accent-light: hsl(var(--color-primary-hue) var(--color-primary-saturation) calc(var(--color-primary-lightness) + 20%)); /* ~#ffb899 */

        /* Light Theme Specifics */
        --color-bg-base-start-l-hsl: hsl(var(--color-primary-hue) var(--color-primary-bg-l-saturation) var(--color-primary-bg-l-lightness)); /* #fff7f3 */
        --color-bg-base-end-l-hsl: hsl(0 0% 100%); /* #fff */
        --color-bg-base-l: linear-gradient(135deg, var(--color-bg-base-start-l-hsl) 0%, var(--color-bg-base-end-l-hsl) 100%);
        --color-bg-solid-l: var(--color-bg-base-end-l-hsl); /* Solid color for body transition */

        --color-bg-panel-l-rgb: 255 247 243; /* from #fff7f3 */
        --color-bg-panel-l: rgb(var(--color-bg-panel-l-rgb) / 0.92);
        --color-bg-panel-alt-l-rgb: 255 255 255;
        --color-bg-panel-alt-l: rgb(var(--color-bg-panel-alt-l-rgb) / 0.98);
        --color-bg-input-l: var(--color-primary-bg-l);
        --color-bg-code-l: var(--color-primary-bg-l);
        --color-bg-selected-l: hsl(var(--color-primary-hue) 100% 90%); /* #ffe5d6 */

        --color-text-base-l-rgb: 26 18 13; /* #1a120d */
        --color-text-base-l: rgb(var(--color-text-base-l-rgb));
        --color-text-muted-l: hsl(var(--color-primary-hue) 35% 45%); /* #a36a4f */
        --color-text-subtle-l: hsl(var(--color-primary-hue) 40% 65%); /* #d6a88a */
        --color-text-accent-l: var(--color-primary);
        --color-text-inverted-l: #fff;
        --color-text-code-l: var(--color-text-base-l);

        --color-border-base-l: var(--color-bg-selected-l);
        --color-border-input-l: hsl(var(--color-primary-hue) 100% 85%); /* #ffd1b3 */
        --color-border-accent-l: var(--color-primary);
        --color-border-selected-l: var(--color-primary);
        --color-border-focus-l: var(--color-accent);
        --color-border-code-l: var(--color-border-input-l);

        --glass-bg-l-rgb: var(--color-bg-panel-l-rgb);
        --glass-bg-l: rgb(var(--glass-bg-l-rgb) / 0.75);
        --glass-border-l: 1.5px solid hsl(var(--color-primary-hue) var(--color-primary-saturation) var(--color-primary-lightness) / 0.1);

        /* Semantic Colors (Mostly theme-agnostic, but can be overridden) */
        --color-bg-accent-grad: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
        --color-bg-accent-hover-grad: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-accent) 100%);
        --color-bg-success: #2cb67d;
        --color-bg-success-hover: #249e6b;
        --color-bg-warning: #fbbf24;
        --color-bg-danger: #ff5470;
        --color-bg-danger-hover: #ff204e;
        --color-text-danger: var(--color-bg-danger);
        --color-text-success: var(--color-bg-success);
        --color-text-warning: var(--color-bg-warning);
        
        /* Shadows */
        --shadow-color-hsl: var(--color-primary-hue) 100% 50%;
        --shadow-sm: 0 2px 8px 0 hsl(var(--shadow-color-hsl) / 0.07);
        --shadow: 0 4px 16px 0 hsl(var(--shadow-color-hsl) / 0.10);
        --shadow-md: 0 8px 24px 0 hsl(var(--shadow-color-hsl) / 0.12);
        --shadow-lg: 0 16px 32px 0 hsl(var(--shadow-color-hsl) / 0.15);

        /* Radii & Spacing */
        --radius-xs: 0.25rem;
        --radius-sm: 0.5rem;
        --radius-md: 0.75rem;
        --radius-lg: 1.25rem;
        --radius-xl: 1.5rem;
        --radius-full: 9999px;

        --spacing-unit: 0.25rem; /* 4px */
        --spacing-xs: calc(1 * var(--spacing-unit));
        --spacing-sm: calc(2 * var(--spacing-unit));
        --spacing-md: calc(4 * var(--spacing-unit));
        --spacing-lg: calc(6 * var(--spacing-unit));
        --spacing-xl: calc(8 * var(--spacing-unit));

        --header-height: 4rem; /* 64px */
        --panel-padding: var(--spacing-xl);
        --grid-gap: var(--spacing-lg);
        --control-gap: var(--spacing-md);

        /* Effects */
        --glass-blur: blur(10px);
        --transition-fast: 150ms ease-out;
        --transition-std: 250ms ease-out;
        --transition-slow: 500ms cubic-bezier(.4,0,.2,1);

        /* Assign default (light theme) values to generic vars */
        --color-bg-base: var(--color-bg-base-l);
        --color-bg-solid: var(--color-bg-solid-l);
        --color-bg-panel: var(--color-bg-panel-l);
        --color-bg-panel-alt: var(--color-bg-panel-alt-l);
        --color-bg-input: var(--color-bg-input-l);
        --color-bg-code: var(--color-bg-code-l);
        --color-bg-selected: var(--color-bg-selected-l);
        --color-text-base: var(--color-text-base-l);
        --color-text-muted: var(--color-text-muted-l);
        --color-text-subtle: var(--color-text-subtle-l);
        --color-text-accent: var(--color-text-accent-l);
        --color-text-inverted: var(--color-text-inverted-l);
        --color-text-code: var(--color-text-code-l);
        --color-border-base: var(--color-border-base-l);
        --color-border-input: var(--color-border-input-l);
        --color-border-accent: var(--color-border-accent-l);
        --color-border-selected: var(--color-border-selected-l);
        --color-border-focus: var(--color-border-focus-l);
        --color-border-code: var(--color-border-code-l);
        --glass-bg: var(--glass-bg-l);
        --glass-border: var(--glass-border-l);
    }

    /* Dark Theme Variables */
    .dark {
        --color-primary-bg-d-saturation: 77%; /* For #2a1207 based on H20 */
        --color-primary-bg-d-lightness: 8%;   /* For #2a1207 based on H20 */
        --color-primary-bg-d: hsl(var(--color-primary-hue) var(--color-primary-bg-d-saturation) var(--color-primary-bg-d-lightness));

        --color-bg-base-start-d-hsl: hsl(var(--color-primary-hue) 77% 8%);   /* #2a1207 */
        --color-bg-base-end-d-hsl: hsl(var(--color-primary-hue) 17% 9%);     /* #1a120d */
        --color-bg-base-d: linear-gradient(135deg, var(--color-bg-base-start-d-hsl) 0%, var(--color-bg-base-end-d-hsl) 100%);
        --color-bg-solid-d: var(--color-bg-base-end-d-hsl);

        --color-bg-panel-d-rgb: 42 18 7; /* from #2a1207 */
        --color-bg-panel-d: rgb(var(--color-bg-panel-d-rgb) / 0.92);
        --color-bg-panel-alt-d-rgb: 26 18 13; /* from #1a120d */
        --color-bg-panel-alt-d: rgb(var(--color-bg-panel-alt-d-rgb) / 0.98);
        --color-bg-input-d: var(--color-primary-bg-d);
        --color-bg-code-d: var(--color-primary-bg-d);
        --color-bg-selected-d: hsl(var(--color-primary-hue) 60% 12%); /* #3d1a0a */

        --color-text-base-d-rgb: 255 247 243; /* #fff7f3 */
        --color-text-base-d: rgb(var(--color-text-base-d-rgb));
        --color-text-muted-d: hsl(var(--color-primary-hue) 100% 85%); /* #ffb899 */
        --color-text-subtle-d: hsl(var(--color-primary-hue) 35% 45%); /* #a36a4f */
        --color-text-accent-d: var(--color-accent); /* Brighter accent for dark mode */
        --color-text-inverted-d: rgb(var(--color-text-base-l-rgb)); /* Dark text on light accent bg */
        --color-text-code-d: var(--color-text-base-d);

        --color-border-base-d: var(--color-bg-selected-d);
        --color-border-input-d: var(--color-bg-selected-d);
        --color-border-accent-d: var(--color-primary);
        --color-border-selected-d: var(--color-primary);
        --color-border-focus-d: var(--color-accent);
        --color-border-code-d: var(--color-border-input-d);

        --glass-bg-d-rgb: var(--color-bg-panel-d-rgb);
        --glass-bg-d: rgb(var(--glass-bg-d-rgb) / 0.75);
        --glass-border-d: 1.5px solid hsl(var(--color-primary-hue) var(--color-primary-saturation) var(--color-primary-lightness) / 0.18);

        /* Override generic vars for dark theme */
        --color-bg-base: var(--color-bg-base-d);
        --color-bg-solid: var(--color-bg-solid-d);
        --color-bg-panel: var(--color-bg-panel-d);
        --color-bg-panel-alt: var(--color-bg-panel-alt-d);
        --color-bg-input: var(--color-bg-input-d);
        --color-bg-code: var(--color-bg-code-d);
        --color-bg-selected: var(--color-bg-selected-d);
        --color-text-base: var(--color-text-base-d);
        --color-text-muted: var(--color-text-muted-d);
        --color-text-subtle: var(--color-text-subtle-d);
        --color-text-accent: var(--color-text-accent-d);
        --color-text-inverted: var(--color-text-inverted-d);
        --color-text-code: var(--color-text-code-d);
        --color-border-base: var(--color-border-base-d);
        --color-border-input: var(--color-border-input-d);
        --color-border-accent: var(--color-border-accent-d);
        --color-border-selected: var(--color-border-selected-d);
        --color-border-focus: var(--color-border-focus-d);
        --color-border-code: var(--color-border-code-d);
        --glass-bg: var(--glass-bg-d);
        --glass-border: var(--glass-border-d);
    }
}

@layer reset {
    *, *::before, *::after { 
        box-sizing: border-box; 
        margin: 0; 
        padding: 0; 
    }
    html { 
        font-size: 100%; 
        scroll-behavior: smooth; 
        -webkit-tap-highlight-color: transparent;
    }
    body { 
        font-family: var(--font-sans); 
        background-color: var(--color-bg-solid); 
        color: var(--color-text-base); 
        line-height: 1.65; 
        -webkit-font-smoothing: antialiased; 
        -moz-osx-font-smoothing: grayscale; 
        transition: background-color var(--transition-slow), color var(--transition-std); 
        min-height: 100vh;
        overflow-x: hidden;
    }
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background-image: var(--color-bg-base);
        transition: background-image var(--transition-slow);
    }
    img, picture, video, canvas, svg { 
        display: block; 
        max-width: 100%; 
    }
    button, input, select, textarea { 
        font: inherit; 
    }
    textarea {
        resize: vertical;
    }
}

@layer base {
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        font-weight: 700;
        color: var(--color-text-accent);
        letter-spacing: -0.01em;
        line-height: 1.2;
        margin-block-start: 1.5em;
        margin-block-end: 0.75em;
    }
    h1 { font-size: clamp(1.8rem, 1.5143rem + 1.1429vw, 2.5rem); }
    h2 { font-size: clamp(1.4rem, 1.2286rem + 0.6857vw, 1.8rem); }
    h3 { font-size: clamp(1.1rem, 1.0000rem + 0.4000vw, 1.3rem); }
    
    p { 
        font-size: 1rem;
        color: var(--color-text-muted); 
        line-height: 1.7;
        max-width: 70ch;
    }
    p:not(:last-child) { margin-block-end: 1em; }

    a { 
        color: var(--color-text-accent); 
        text-decoration: none; 
        transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
        text-decoration-thickness: 0.125em;
        text-underline-offset: 0.15em;
    }
    a:hover, a:focus-visible { 
        text-decoration: underline; 
        text-decoration-color: var(--color-accent-light);
        color: var(--color-accent); 
    }

    pre, code {
        font-family: var(--font-mono);
        font-size: 0.9em;
        background-color: var(--color-bg-code);
        border: 1px solid var(--color-border-code);
        border-radius: var(--radius-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    pre {
        padding: var(--spacing-md);
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
}

@layer layout {
    .app-container { 
        display: flex; 
        flex-direction: column; 
        height: 100vh; 
        overflow: hidden;
    }
    .app-header { 
        height: var(--header-height); 
        padding-inline: var(--panel-padding); 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        border-block-end: 1px solid var(--color-border-base); 
        background-color: rgb(var(--color-bg-panel-alt-l-rgb) / 0.7);
        backdrop-filter: var(--glass-blur); 
        -webkit-backdrop-filter: var(--glass-blur); 
        z-index: 30; 
        flex-shrink: 0; 
        transition: background-color var(--transition-std), border-color var(--transition-std); 
    }
    .dark .app-header { 
        background-color: rgb(var(--color-bg-panel-alt-d-rgb) / 0.7);
    }
    .app-main { 
        flex-grow: 1; 
        display: flex; 
        overflow: hidden; 
        height: calc(100vh - var(--header-height)); 
    }
    .panel { 
        height: 100%; 
        overflow: hidden; 
        display: flex; 
        flex-direction: column; 
        padding: var(--panel-padding); 
        background: var(--glass-bg); 
        backdrop-filter: var(--glass-blur); 
        -webkit-backdrop-filter: var(--glass-blur);
        border: var(--glass-border); 
        box-shadow: var(--shadow);
        transition: background-color var(--transition-std), border-color var(--transition-std), box-shadow var(--transition-std);
    }
    .panel-left { 
        width: 70%; 
        flex-shrink: 0; 
        border-inline-end: 1px solid var(--color-border-base); 
    }
    .panel-right { 
        width: 40%; 
        flex-shrink: 1;
    }
    
    @media (max-width: 768px) { 
        .app-main { flex-direction: column; } 
        .panel { 
            width: 100%; 
            height: 50%;
            border-inline-end: none; 
            border-block-end: 1px solid var(--color-border-base); 
        } 
        .panel-right { border-block-end: none; } 
    }

    .panel-header { 
        display: none !important;
    }

    .scrollable-content {
        flex-grow: 1;
        overflow: hidden; 
        position: relative;
        overscroll-behavior: contain;
    }

    .bento-grid { 
        display: grid; 
        grid-template-columns: repeat(3, minmax(220px, 1fr));
        gap: calc(var(--grid-gap) * 1); 
        padding: var(--spacing-md); 
        width: 100%; 
        grid-auto-rows: minmax(180px, auto);
        align-items: stretch;
    }
    /* @media (max-width: 1024px) { .bento-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } */
    /* @media (max-width: 640px) { .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } */
}

@layer components {
    /* --- Simplebar --- */
    [data-simplebar] { position: relative; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; }
    [data-simplebar] .simplebar-scrollbar::before { 
        background: var(--color-text-subtle); 
        border-radius: var(--radius-full); 
        opacity: 0.6; 
        transition: opacity var(--transition-fast); 
    }
    [data-simplebar]:hover .simplebar-scrollbar::before,
    [data-simplebar].simplebar-visible .simplebar-scrollbar::before { 
        opacity: 0.8; 
    }
    .simplebar-track.simplebar-vertical { width: 10px; }
    .simplebar-track.simplebar-horizontal { height: 10px; }
    .simplebar-track.simplebar-vertical .simplebar-scrollbar::before { inset-inline-start: 2px; inset-inline-end: 2px; }
    .simplebar-track.simplebar-horizontal .simplebar-scrollbar::before { inset-block-start: 2px; inset-block-end: 2px; }
    .simplebar-sm .simplebar-track.simplebar-vertical { width: 6px; }
    .simplebar-sm .simplebar-track.simplebar-horizontal { height: 6px; }


    /* --- Controls --- */
    .control-input, .control-select { 
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius-md); 
        border: 1.5px solid var(--color-border-input);
        background-color: var(--color-bg-input); 
        color: var(--color-text-base); 
        font-size: 0.9rem;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast); 
        line-height: 1.5;
    }
    .control-input:focus, .control-select:focus { 
        border-color: var(--color-border-focus); 
        /* Focus ring handled by global :focus-visible */
    }
    .control-select { 
        padding-inline-end: calc(var(--spacing-md) + 1.5rem);
        background-size: 1rem; 
        appearance: none; 
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(var(--color-text-base-l-rgb))' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 
        background-position: right var(--spacing-md) center; 
        background-repeat: no-repeat; 
    }
    .dark .control-select { 
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(var(--color-text-base-d-rgb))' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); 
    }

    .control-button { 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        padding: var(--spacing-sm);
        border: none; 
        background-color: transparent; 
        color: var(--color-text-muted); 
        border-radius: var(--radius-md); 
        cursor: pointer; 
        transition: background-color var(--transition-fast), color var(--transition-fast); 
    }
    .control-button:hover { 
        background-color: var(--color-border-base);
        color: var(--color-text-base); 
    }
    .control-button svg { width: 1.125rem; height: 1.125rem; }


    .filter-dropdown { 
        position: absolute; 
        z-index: 30; 
        margin-block-start: var(--spacing-xs); 
        inset-inline-end: 0; 
        width: 18rem; 
        border-radius: var(--radius-lg); 
        background-color: var(--color-bg-panel); 
        box-shadow: var(--shadow-lg); 
        border: 1px solid var(--color-border-base); 
        padding: var(--spacing-md); 
        display: none;
    }
    .filter-tag-button { 
        padding: 0.3em 1em;
        font-size: 0.8rem; 
        border-radius: var(--radius-full); 
        border: none; 
        cursor: pointer; 
        transition: all var(--transition-fast); 
        background-image: var(--color-bg-accent-grad); 
        color: var(--color-text-inverted); 
        font-weight: 600; 
        box-shadow: var(--shadow-sm); 
        letter-spacing: 0.01em; 
    }
    .filter-tag-button:hover { 
        background-image: var(--color-bg-accent-hover-grad); 
        transform: translateY(-1px);
    }
    .filter-tag-button.active { 
        background-image: var(--color-bg-accent-hover-grad); 
        box-shadow: var(--shadow);
    }
    #clear-tags-button { 
        color: var(--color-text-danger); 
        background: none; 
        border: none; 
        padding: 0; 
        font-size: 0.8rem; 
        margin-block-start: var(--spacing-sm); 
    }
    #clear-tags-button:hover { text-decoration: underline; }


    /* --- Component Cards --- */
    .component-card, .prompt-card { 
        background: var(--glass-bg); 
        border-radius: var(--radius-lg); 
        box-shadow: var(--shadow);
        border: var(--glass-border); 
        padding: var(--spacing-md); /* Smaller padding */
        min-width: 0;
        min-height: 180px;
        height: auto;
        max-width: 100%; /* Allow natural width */
        display: flex; 
        flex-direction: column; 
        align-items: stretch;
        overflow: hidden; 
        cursor: pointer; 
        transition: box-shadow var(--transition-std), transform var(--transition-std), border-color var(--transition-std); 
        position: relative; 
        grid-column: span 1; 
        grid-row: span 1; 
    }
    .component-card:hover { 
        box-shadow: var(--shadow-md);
        transform: translateY(-4px);
        border-color: hsl(var(--color-primary-hue) var(--color-primary-saturation) var(--color-primary-lightness) / 0.3);
    }
    .component-card.selected { 
        border: 1.5px solid var(--color-border-selected);
        box-shadow: 0 0 0 4px var(--color-border-selected);
        animation: cardAddedBorder 0.5s cubic-bezier(.4,0,.2,1);
    }
    @keyframes cardAddedBorder {
        0% { box-shadow: 0 0 0 0 var(--color-border-selected); }
        60% { box-shadow: 0 0 0 8px var(--color-border-selected); }
        100% { box-shadow: 0 0 0 4px var(--color-border-selected); }
    }
    .dark .component-card.selected {
        background: linear-gradient(120deg, var(--color-bg-selected) 0%, var(--color-primary-bg-d) 100%);
    }

    .bento-span-col-2 { grid-column: span 2; }
    .bento-span-row-2 { grid-row: span 2; }
    @media (max-width: 600px) { /* Example: make col-2 span full width on very small screens if grid becomes 1 column */
      .bento-grid { grid-template-columns: minmax(0, 1fr); } /* If it becomes 1 col */
      .bento-span-col-2 { grid-column: span 1; }
    }

    .component-card .card-content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
    .component-card h3 { 
        font-weight: 600; 
        margin-block-end: var(--spacing-sm); 
        padding-inline-end: 2rem;
        line-height: 1.35; 
        display: -webkit-box; 
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        min-height: calc(1.35em * 2); 
        font-size: 1.1rem;
        color: var(--color-text-accent); /* Ensure heading color */
    }
    .component-card p { 
        flex-grow: 1; 
        margin-block-end: var(--spacing-md); 
        display: -webkit-box; 
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        font-size: 0.875rem;
        line-height: 1.6; 
        color: var(--color-text-muted); 
        max-width: none; /* Override base p max-width */
    }
    .bento-span-col-2 h3, .bento-span-row-2 h3 { -webkit-line-clamp: 3; min-height: calc(1.35em * 3); font-size: 1.2rem; }
    .bento-span-col-2 p, .bento-span-row-2 p { -webkit-line-clamp: 5; }

    .component-card .card-footer { 
        margin-block-start: auto; 
        padding-block-start: var(--spacing-md); 
        border-block-start: 1px solid var(--color-border-base); 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        flex-shrink: 0; 
    }
    .card-complexity { 
        padding: 0.15rem 0.5rem; 
        border-radius: var(--radius-sm); 
        color: #fff; 
        font-size: 0.7rem; 
        font-weight: 700; 
        text-transform: uppercase; 
        line-height: 1.2; 
    }
    .complexity-easy { background-color: var(--color-bg-success); } 
    .complexity-medium { background-color: var(--color-bg-warning); } 
    .complexity-hard { background-color: var(--color-bg-danger); } 
    .complexity-unknown { background-color: #6b7280; }

    .component-card .details-button { 
        font-size: 0.8rem; 
        color: var(--color-text-accent); 
        background: none; 
        border: none; 
        padding: 0; 
        cursor: pointer; 
    }
    .component-card .details-button:hover { text-decoration: underline; }

    .card-add-button { 
        position: absolute; 
        inset-block-start: var(--spacing-sm); 
        inset-inline-end: var(--spacing-sm); 
        padding: var(--spacing-xs); 
        border-radius: var(--radius-full); 
        background-color: rgb(var(--color-bg-panel-alt-l-rgb) / 0.6); 
        border: 1px solid var(--color-border-base); 
        color: var(--color-text-muted); 
        cursor: pointer; 
        transition: all var(--transition-fast); 
        opacity: 0; 
        transform: scale(0.8) translateY(2px); 
    }
    .dark .card-add-button { 
        background-color: rgb(var(--color-bg-panel-alt-d-rgb) / 0.6); 
    }
    .component-card:hover .card-add-button,
    .component-card:focus-within .card-add-button {
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
    .component-card.selected .card-add-button { opacity: 1; transform: scale(1); }
    .card-add-button:hover { 
        background-image: var(--color-bg-accent-grad); 
        color: var(--color-text-inverted); 
        border-color: transparent; 
    }
    .component-card.selected .card-add-button { 
        background-color: var(--color-bg-success); 
        color: var(--color-text-inverted); 
        border-color: transparent; 
    }
    .component-card.selected .card-add-button svg { color: var(--color-text-inverted); }
    .card-add-button svg { width: 1rem; height: 1rem; display: block; }

    /* Prompt/Notes block modern style */
    .prompt-block, .notes-block {
        background: var(--glass-bg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        padding: 1.2rem 1rem 1rem 1rem;
        margin-bottom: 1.2rem;
        border: 1.5px solid var(--color-border-base);
    }
    .prompt-label {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--color-text-accent);
        margin-bottom: 0.5rem;
        letter-spacing: 0.01em;
    }
    .prompt-output {
        min-height: 100px;
        background: var(--color-bg-code);
        border-radius: var(--radius-md);
        padding: 1rem;
        font-family: var(--font-sans); /* Use Syne */
        font-size: 1.01rem;
        color: var(--color-text-base);
        border: 1.5px solid var(--color-border-code);
        box-shadow: var(--shadow-xs);
    }
    .notes-editor {
        min-height: 70px;
        background: var(--color-bg-input);
        border-radius: var(--radius-md);
        padding: 1rem;
        font-family: var(--font-sans); /* Use Syne */
        font-size: 1rem;
        color: var(--color-text-base);
        border: 1.5px solid var(--color-border-input);
        box-shadow: var(--shadow-xs);
    }

    /* --- Right Panel Styling --- */
    .selected-items-area { 
        flex-shrink: 0; 
        margin-block-end: var(--spacing-md); 
        padding: var(--spacing-md); 
        border-radius: var(--radius-md); 
        background-color: var(--color-bg-input);
        min-height: 52px; 
        border: 1px solid var(--color-border-base); 
        overflow-y: auto; 
        max-height: 180px; 
        scrollbar-width: thin;
        scrollbar-color: var(--color-text-subtle) transparent;
    }
    .selected-items-area::-webkit-scrollbar { width: 6px; }
    .selected-items-area::-webkit-scrollbar-thumb { background-color: var(--color-text-subtle); border-radius: var(--radius-full); }

    .selected-items-list { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
    .selected-chip { 
        display: inline-flex; 
        align-items: center; 
        background-image: var(--color-bg-accent-grad); 
        color: var(--color-text-inverted); 
        font-size: 0.8rem; 
        font-weight: 500; 
        padding: var(--spacing-xs) var(--spacing-md); 
        border-radius: var(--radius-full); 
        cursor: grab; 
        box-shadow: var(--shadow-sm); 
    }
    .selected-chip span { margin-inline-end: var(--spacing-sm); line-height: 1; }
    .selected-chip button { 
        margin-inline-start: var(--spacing-xs); 
        padding: var(--spacing-xs); 
        border: none; 
        background: rgb(0 0 0 / 0.15); 
        color: inherit; 
        border-radius: 50%; 
        cursor: pointer; 
        display: inline-flex; 
        opacity: 0.8; 
        transition: opacity var(--transition-fast), background-color var(--transition-fast); 
    }
    .selected-chip button:hover { opacity: 1; background: rgb(0 0 0 / 0.25); }
    .selected-chip button svg { width: 0.75rem; height: 0.75rem; }
    .selected-chip.sortable-ghost { opacity: 0.4; background-color: var(--color-border-accent); }

    .prompt-area { 
        flex-grow: 1; 
        display: flex; 
        flex-direction: column; 
        gap: var(--spacing-md); 
        overflow: hidden; 
    }
    .prompt-area label { 
        display: block; 
        font-size: 0.875rem; 
        font-weight: 600; 
        color: var(--color-text-muted); 
        margin-block-end: var(--spacing-xs); 
        flex-shrink: 0; 
    }
    #custom-notes {
        min-height: 70px;
        flex-shrink: 0;
        font-size: 0.9rem;
        background-color: var(--color-bg-input);
        color: var(--color-text-base);
        border: 1.5px solid var(--color-border-input);
        border-radius: var(--radius-md);
        padding: var(--spacing-sm) var(--spacing-md);
        transition: background-color var(--transition-std), color var(--transition-std), border-color var(--transition-std), height var(--transition-std);
        max-height: 200px;
        line-height: 1.5;
    }
    #custom-notes:focus {
        border-color: var(--color-border-focus);
    }

    #generated-prompt {
        flex-grow: 1;
        font-family: var(--font-mono);
        line-height: 1.5;
        color: var(--color-text-code);
        background-color: var(--color-bg-code);
        border: 1.5px solid var(--color-border-code);
        font-size: 0.9rem;
        white-space: pre-wrap;
        word-wrap: break-word;
        min-height: 120px;
        overflow: auto;
        border-radius: var(--radius-md);
        padding: var(--spacing-md);
        transition: background var(--transition-std), color var(--transition-std), border-color var(--transition-std);
        scrollbar-width: thin;
        scrollbar-color: var(--color-text-subtle) transparent;
    }
    #generated-prompt::-webkit-scrollbar { width: 6px; }
    #generated-prompt::-webkit-scrollbar-thumb { background-color: var(--color-text-subtle); border-radius: var(--radius-full); }
    #generated-prompt:focus {
        border-color: var(--color-border-focus);
    }
    
    .action-buttons { 
        display: flex; 
        flex-wrap: wrap; 
        gap: var(--spacing-sm); 
        padding-block-start: var(--spacing-lg); 
        border-block-start: 1px solid var(--color-border-base); 
        flex-shrink: 0; 
        margin-block-start: auto;
    }
    .action-button { 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        padding: 0.7rem 1.5rem;
        background-image: var(--color-bg-accent-grad); 
        color: var(--color-text-inverted); 
        font-family: var(--font-heading); 
        font-weight: 600;
        font-size: 0.95rem;
        border-radius: var(--radius-full); 
        box-shadow: var(--shadow-sm); 
        border: none; 
        cursor: pointer; 
        transition: background-image var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); 
        text-align: center;
        text-decoration: none; /* For <a> tags styled as buttons */
    }
    .action-button:hover { 
        background-image: var(--color-bg-accent-hover-grad); 
        box-shadow: var(--shadow-md); 
        transform: translateY(-2px) scale(1.02);
    }
    .action-button:active { transform: translateY(0px) scale(0.98); }
    .action-button svg { width: 1rem; height: 1rem; margin-inline-end: var(--spacing-sm); }
    
    #copy-button { background-image: none; background-color: var(--color-bg-success); } 
    #copy-button:hover { background-image: none; background-color: var(--color-bg-success-hover); }
    #export-button { background-image: none; background-color: #4f46e5; } 
    #export-button:hover { background-image: none; background-color: #4338ca; }
    #random-recipe-button { background-image: none; background-color: #7c3aed; } 
    #random-recipe-button:hover { background-image: none; background-color: #6d28d9; }


    /* --- Saved Presets Dropdown --- */
    .presets-dropdown { 
        position: absolute; 
        z-index: 40; 
        margin-block-start: var(--spacing-xs); 
        inset-inline-end: 0; 
        width: 16rem; 
        border-radius: var(--radius-lg); 
        background-color: var(--color-bg-panel); 
        box-shadow: var(--shadow-lg); 
        border: 1px solid var(--color-border-base); 
        max-height: 75vh; 
        overflow-y: auto; 
        display: none;
        scrollbar-width: thin;
        scrollbar-color: var(--color-text-subtle) transparent;
    }
    .presets-dropdown::-webkit-scrollbar { width: 6px; }
    .presets-dropdown::-webkit-scrollbar-thumb { background-color: var(--color-text-subtle); border-radius: var(--radius-full); }

    .presets-dropdown .p-2 { padding: var(--spacing-sm); } 
    .presets-dropdown .border-b { border-block-end: 1px solid var(--color-border-base); }
    .presets-dropdown input { font-size: 0.875rem; padding: var(--spacing-xs) var(--spacing-sm); } 
    .presets-dropdown button { font-size: 0.8rem; padding: var(--spacing-xs) var(--spacing-sm); }
    .presets-dropdown .py-1 { padding-block: var(--spacing-xs); }
    .preset-item { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: var(--spacing-sm) var(--spacing-md); 
        font-size: 0.9rem; 
        color: var(--color-text-base); 
        cursor: pointer; 
        transition: background-color var(--transition-fast); 
        border-radius: var(--radius-sm);
        margin: var(--spacing-xs);
    }
    .preset-item:hover { 
        background-color: var(--color-bg-panel-alt); 
    } 
    .preset-item span .text-xs { font-size: 0.75rem; color: var(--color-text-subtle); }
    .delete-preset-btn { 
        background: none; 
        border: none; 
        padding: var(--spacing-xs); 
        cursor: pointer; 
        color: var(--color-text-subtle); 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        transition: color var(--transition-fast), background-color var(--transition-fast);
        border-radius: var(--radius-full);
    }
    .delete-preset-btn:hover { color: var(--color-text-danger); background-color: hsl(var(--color-primary-hue) 10% 50% / 0.1); } 
    .delete-preset-btn svg { width: 0.875rem; height: 0.875rem; }

    /* --- Modal Styling --- */
    .modal-backdrop { 
        position: fixed; 
        inset: 0; 
        background-color: rgb(17 24 39 / 0.65); 
        backdrop-filter: blur(5px);
        z-index: 40; 
        opacity: 0; 
        pointer-events: none; 
        transition: opacity var(--transition-std); 
    }
    .modal-backdrop.active { opacity: 1; pointer-events: auto; }
    .modal-content { 
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%) scale(0.95); 
        background: var(--glass-bg); 
        padding: var(--panel-padding);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg); 
        z-index: 50; 
        opacity: 0; 
        pointer-events: none; 
        max-width: min(90vw, 42rem);
        width: 100%; 
        max-height: 85vh; 
        display: flex; 
        flex-direction: column; 
        transition: opacity var(--transition-std), transform var(--transition-std); 
        border: var(--glass-border); 
    }
    .modal-content.active { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
    .modal-header { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding-block-end: var(--spacing-lg); 
        border-block-end: 1px solid var(--color-border-base); 
        flex-shrink: 0; 
    }
    .modal-header h2 { 
        margin-block-end: 0; 
        color: var(--color-text-base); 
        font-size: 1.3rem; 
        font-family: var(--font-heading); 
        font-weight: 700;
    }
    #modal-close { /* Assumed to be a .control-button */
        padding: var(--spacing-xs);
    }

    .modal-body-container { 
        flex-grow: 1; 
        overflow: hidden; 
        padding-block: var(--spacing-lg); 
        font-size: 0.9rem; 
    }
    #modal-body p { 
        color: var(--color-text-muted); 
        margin-block-end: 1em; 
        font-size: 0.95rem; 
        line-height: 1.65; 
        max-width: none; /* Override base p max-width */
    }
    .modal-section { 
        margin-block-start: var(--spacing-lg); 
        padding-block-start: var(--spacing-lg); 
        border-block-start: 1px solid var(--color-border-base); 
    }
    .modal-section:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: none; }
    .modal-section h5 { 
        font-size: 0.8rem; 
        font-weight: 600; 
        color: var(--color-text-subtle); 
        text-transform: uppercase; 
        letter-spacing: 0.05em; 
        margin-block-end: var(--spacing-md); 
    }
    .modal-section .filter-tag-button { font-size: 0.75rem; padding: 0.15rem 0.6rem; }
    .modal-list { list-style: none; margin: 0; }
    .modal-list li { margin-block-end: var(--spacing-sm); font-size: 0.9rem; }
    .modal-list a { font-weight: 500; }
    .modal-complexity { /* Re-uses .card-complexity styles */
        padding: 0.15rem 0.5rem; 
        border-radius: var(--radius-sm); 
        color: #fff; 
        font-size: 0.7rem; 
        font-weight: 700; 
        text-transform: uppercase; 
        line-height: 1.2; 
    }
    .modal-footer { 
        padding-block-start: var(--panel-padding); 
        border-block-start: 1px solid var(--color-border-base); 
        display: flex; 
        flex-wrap: wrap; 
        gap: var(--spacing-md); 
        justify-content: flex-end; 
        flex-shrink: 0; 
    }
    .modal-footer .action-button { 
        font-size: 0.875rem; 
        padding: 0.6rem 1.2rem;
    }
    .modal-footer .action-button svg { width: 0.9rem; height: 0.9rem; }
    .modal-add-button i { transition: none !important; }


    /* QL Editor (Quill) */
    .ql-editor {
        min-height: 100%;
        font-size: 0.9rem;
        line-height: 1.6;
    }
    .ql-editor p { max-width: none; }


    /* Prompt Card Specific Styles (If different from .component-card) */
    .prompt-card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    .prompt-card-tag {
        border: none;
        background-image: var(--color-bg-accent-grad);
        color: var(--color-text-inverted);
        padding: 0.08em 0.4em;
        border-radius: var(--radius-full);
        font-size: 0.68rem;
        font-weight: 400;
        line-height: 1.3;
        display: inline-block;
        box-shadow: var(--shadow-sm);
        letter-spacing: 0.01em;
        transition: background-image var(--transition-fast), color var(--transition-fast);
    }
    .prompt-card-tag.active, .prompt-card-tag:hover {
        background-image: var(--color-bg-accent-hover-grad);
    }
    /* .prompt-card-button might be an instance of .action-button or .control-button */
    /* This rule seems redundant if .action-button covers its use case */
    /* .prompt-card-button { ... } */
    /* .prompt-card-button i, .prompt-card-button svg { ... } */

    /* Off-Canvas Filter Panel Styles */
    .off-canvas-filter {
        position: fixed;
        inset-block-start: 0;
        inset-inline-end: -100%;
        width: min(90vw, 320px);
        height: 100%;
        background-color: var(--color-bg-panel);
        box-shadow: var(--shadow-lg);
        transition: inset-inline-end var(--transition-std);
        z-index: 100;
        display: flex;
        flex-direction: column;
    }
    .off-canvas-filter.active {
        inset-inline-end: 0;
    }
    .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-lg);
        border-block-end: 1px solid var(--color-border-base);
        flex-shrink: 0;
    }
    .filter-header h2 {
        font-size: 1.2rem;
        font-weight: 600;
        margin:0;
        color: var(--color-text-base);
    }
    .filter-content {
        padding: var(--spacing-lg);
        flex-grow: 1;
        overflow-y: auto;
    }
    .filter-section {
        margin-block-end: var(--spacing-lg);
    }
    .filter-section:last-child { margin-block-end: 0; }
    .filter-section h3 {
        font-size: 1rem;
        margin-block-end: var(--spacing-md);
        color: var(--color-text-accent);
        font-weight: 600;
    }

    /* Detailed Prompt Card (if exists as a separate component type) */
    .prompt-card { /* This selector was duplicated, assuming it's for a specific detailed card */
        display: flex;
        flex-direction: column;
        background: var(--glass-bg);
        border: var(--glass-border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        box-shadow: var(--shadow);
        transition: transform var(--transition-std), box-shadow var(--transition-std);
    }
    .prompt-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }
    .prompt-card-header {
        display: flex;
        align-items: center;
        margin-block-end: var(--spacing-md);
    }
    .prompt-card-icon {
        width: 40px; height: 40px;
        margin-inline-end: var(--spacing-md);
        color: var(--color-text-accent) !important;
        flex-shrink: 0;
    }
    .prompt-card-icon-large {
        width: 56px !important; height: 56px !important;
        min-width: 56px; min-height: 56px;
        color: var(--color-text-accent) !important;
        margin-inline-end: var(--spacing-lg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .prompt-card-title {
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--color-text-accent);
        line-height: 1.25;
        letter-spacing: 0.01em;
    }
    .prompt-card-body {
        flex-grow: 1;
        margin-block-end: var(--spacing-md);
    }
    .prompt-card-description {
        display: block;
        font-size: 0.95rem;
        color: var(--color-text-muted);
        margin-block-end: var(--spacing-md);
        max-width: none;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
    }
    .prompt-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-block-start: auto;
        padding-block-start: var(--spacing-md);
        border-block-start: 1px solid var(--color-border-base);
    }

    /* Admin specific styles */
    .admin-glass {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: var(--glass-border);
        box-shadow: var(--shadow-md);
        border-radius: var(--radius-lg);
        padding: var(--panel-padding);
        margin-block-end: var(--panel-padding);
    }
    .admin-table {
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: var(--glass-border);
        box-shadow: var(--shadow);
        border-radius: var(--radius-lg);
        overflow: hidden;
        width: 100%;
        border-collapse: collapse;
    }
    .admin-table th, .admin-table td {
        padding: var(--spacing-md) var(--spacing-lg);
        text-align: left;
        border-block-end: 1px solid var(--color-border-base);
    }
    .admin-table th {
        font-weight: 600;
        color: var(--color-text-muted);
        font-size: 0.9rem;
    }
    .admin-table tr:last-child td {
        border-block-end: none;
    }
    .admin-table tr:hover {
        background-color: hsl(var(--color-primary-hue) 20% 50% / 0.05);
    }
    .admin-btn, .admin-btn:visited { /* Align with .action-button */
        composes: action-button; /* If CSS Modules were used, or copy styles */
        /* For plain CSS, ensure properties match .action-button or create a shared class */
        /* Example: make .admin-btn an .action-button with potential modifiers */
    }
    .admin-toggle {
        composes: control-button;
        color: var(--color-text-accent);
        font-size: 1.2rem;
        margin-inline-start: var(--spacing-md);
    }
    .admin-toggle:hover { color: var(--color-bg-danger); background-color: hsl(var(--color-primary-hue) 20% 50% / 0.1); }
    
    @media (max-width: 800px) {
        .admin-glass, .add-form, .edit-form { padding: var(--spacing-lg); }
        .admin-table, table { font-size: 0.9rem; }
        .admin-table th, .admin-table td { padding: var(--spacing-sm) var(--spacing-md); }
    }
    @media (max-width: 600px) {
        .admin-glass, .add-form, .edit-form { padding: var(--spacing-md); }
        .admin-table, table { font-size: 0.85rem; }
        .admin-table th, .admin-table td { padding: var(--spacing-xs) var(--spacing-sm); }
    }
}

@layer utilities {
    .hidden { display: none !important; }
    .sr-only { 
        position: absolute; 
        width: 1px; height: 1px; 
        padding: 0; margin: -1px; 
        overflow: hidden; 
        clip: rect(0, 0, 0, 0); 
        white-space: nowrap; 
        border-width: 0; 
    }
    *:focus:not(:focus-visible) {
        outline: none;
    }
    *:focus-visible { 
        outline: 2px solid var(--color-border-focus); 
        outline-offset: 2px;
        box-shadow: 0 0 0 4px hsl(var(--color-primary-hue) var(--color-primary-saturation) var(--color-primary-lightness) / 0.2);
        border-radius: var(--radius-sm); 
    }

    #granim-canvas {
        position: fixed;
        z-index: -2;
        inset: 0;
        pointer-events: none;
        opacity: 0.65;
    }
}
.os-content{
    padding: 0.3rem;
}