:root {
    --primary: #ffffff;
    --primary-light: #f3f4f6;
    --secondary: #d1d5db;
    --bg-dark: #000000;
    --bg-darker: #050505;
    --bg-secondary: #0a0a0a;
    --bg-card: #111111;
    --bg-input: rgba(255, 255, 255, 0.06);
    --bg-hover: rgba(255, 255, 255, 0.08);
    --text: #ffffff;
    --text-dim: #a1a1aa;
    --text-muted: #71717a;
    --border: #333333;
    --border-light: rgba(255, 255, 255, 0.12);
    --glass-bg: rgba(0, 0, 0, 0.9);
    --sidebar: clamp(220px, 18vw, 280px);
    --inner-sidebar-width: clamp(300px, 28vw, 520px);
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --transition: 0.15s ease;
}

/* ... existing reset ... */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #F3EDE2 var(--bg-dark);
}

/* ... animations ... */

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-darker);
    color: var(--text);
    overflow: hidden;
    min-width: 0;
    height: 100vh;
    zoom: 1;
    /* Zoom: 1 prevents calculation mismatches in autoFitCanvas. Use browser zoom if needed. */
}

#geminiPresetChatLauncher {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 10020;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 118px;
    height: 38px;
    padding: 0 13px 0 8px;
    border: 1px solid rgba(96, 165, 250, 0.58);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
    color: #eff6ff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), 0 0 20px rgba(59, 130, 246, 0.22);
}

#geminiPresetChatLauncher:hover {
    border-color: rgba(147, 197, 253, 0.95);
    transform: translateY(-1px);
}

#geminiPresetChatLauncher .ai-help-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: white;
    font-size: 10px;
    font-weight: 900;
}

#geminiPresetChatPanel {
    position: relative;
    z-index: 8;
    width: auto;
    max-width: none;
    height: auto;
    max-height: calc(100vh - 90px);
    display: none;
    flex-direction: column;
    margin: 8px 8px 0;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(10, 14, 24, 0.98), rgba(2, 6, 14, 0.98));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden auto;
    font-family: 'Montserrat', sans-serif;
}

#geminiPresetChatPanel.ai-help-floating-fallback {
    position: fixed;
    right: 18px;
    top: 72px;
    width: 372px;
    max-width: calc(100vw - 24px);
    height: min(560px, calc(100vh - 96px));
    margin: 0;
    border-radius: 16px;
    z-index: 10021;
}

#geminiPresetChatPanel.open {
    display: flex;
}

.ai-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    background: #050505;
}

.ai-help-title {
    color: #f8fafc;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ai-help-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    opacity: 0.65;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.ai-model-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: color 0.15s;
}
.ai-model-toggle:hover {
    color: rgba(255,255,255,0.75);
}
.ai-model-toggle input {
    accent-color: #7c3aed;
    cursor: pointer;
}
.ai-model-toggle:has(input:checked) {
    color: #c4b5fd;
}

.ai-help-modebar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(2, 6, 23, 0.92);
}

.ai-help-mode {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    padding: 8px 10px;
    color: #dbeafe;
    background: rgba(30, 41, 59, 0.82);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.ai-help-mode.is-edit {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(20, 83, 45, 0.34);
}

.ai-help-mode.is-edit.active {
    border-color: rgba(34, 197, 94, 0.95);
    background: linear-gradient(135deg, #15803d, #22c55e);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18), 0 10px 26px rgba(34, 197, 94, 0.20), 0 0 14px rgba(34, 197, 94, 0.25);
}

.ai-help-mode.is-new {
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(29, 78, 216, 0.32);
}

.ai-help-mode.is-new.active {
    border-color: rgba(96, 165, 250, 0.95);
    background: linear-gradient(135deg, #1d4ed8, #38bdf8);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18), 0 10px 26px rgba(56, 189, 248, 0.22), 0 0 14px rgba(56, 189, 248, 0.25);
}

.ai-help-redesign {
    border: 1px solid rgba(245, 158, 11, 0.40);
    border-radius: 10px;
    padding: 8px 6px;
    color: #fbbf24;
    background: rgba(180, 83, 9, 0.28);
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.2s ease;
}
.ai-help-redesign:hover {
    border-color: rgba(245, 158, 11, 0.85);
    background: linear-gradient(135deg, #b45309, #f59e0b);
    color: #1c1917;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.22), 0 8px 22px rgba(245, 158, 11, 0.14);
}

.ai-help-photo-btn {
    display: block;
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    padding: 6px 8px;
    color: #94a3b8;
    background: rgba(30, 41, 59, 0.55);
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
    transition: all 0.2s ease;
}
.ai-help-photo-btn:hover {
    border-color: rgba(96, 165, 250, 0.65);
    background: rgba(29, 78, 216, 0.35);
    color: #93c5fd;
}
.ai-help-photo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-help-close {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    cursor: pointer;
    font-weight: 800;
}

.ai-help-options {
    display: flex;
    gap: 14px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(2, 6, 23, 0.85);
    flex-wrap: wrap;
}

.ai-help-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.ai-help-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #38bdf8;
    cursor: pointer;
    margin: 0;
}

.ai-help-checkbox:hover {
    color: #f1f5f9;
}

.ai-opt-v2 {
    border-left: 2px solid rgba(167, 139, 250, 0.4);
    padding-left: 10px;
}
.ai-opt-v2:hover {
    border-left-color: rgba(167, 139, 250, 0.7);
}

.ai-help-messages {
    flex: 1;
    min-height: 150px;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
}

.ai-help-message {
    max-width: 92%;
    padding: 9px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.ai-help-message.assistant {
    align-self: flex-start;
    background: rgba(30, 41, 59, 0.88);
    color: #dbeafe;
    border: 1px solid rgba(96, 165, 250, 0.16);
}

.ai-help-message.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #2563eb, #0891b2);
    color: white;
}

.ai-help-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(2, 6, 23, 0.88);
}

.ai-help-form textarea {
    flex: 1;
    resize: none;
    min-height: 42px;
    max-height: 92px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.95);
    color: #f8fafc;
    padding: 9px 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    outline: none;
}

.ai-help-form textarea:focus {
    border-color: rgba(125, 211, 252, 0.85);
}

.ai-help-form button {
    min-width: 70px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.ai-help-form.loading button {
    opacity: 0.62;
    pointer-events: none;
}

.app-container {
    display: flex;
    width: 100%;
    /* Standard width */
    height: 100%;
    /* Standard height */
    overflow: hidden;
    min-width: 0;
}

.sidebar {
    width: var(--sidebar);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-right: 1px solid var(--border);
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 20;
    scrollbar-width: thin;
    scrollbar-color: #F3EDE2 transparent;
    /* align-self: stretch (default) — sidebar fills full app-container height */
    /* No explicit height — correct height comes from flex stretch, not 100vh */
    min-height: 0;
    flex-shrink: 0;
}

.left-sidebar {
    transition: width 0.22s ease;
}

/* Sidebar children must not shrink — otherwise flex algorithm fits everything
   inside the constrained height and overflow-y scroll never triggers */
.sidebar > * {
    flex-shrink: 0;
}

/* templates-section was designed for the right sidebar template panel;
   in the left sidebar it causes flex:1 + overflow:hidden = black clipping box */
.sidebar .templates-section {
    flex: none;
    overflow: visible;
    display: block;
    min-height: auto;
}

.sidebar::-webkit-scrollbar {
    width: 3px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #F3EDE2;
    border-radius: 3px;
}

.right-sidebar {
    border-right: none;
    border-left: 1px solid var(--border);
    width: clamp(220px, 16vw, 240px);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.inner-sidebar {
    width: var(--inner-sidebar-width);
    min-width: 280px;
    max-width: min(520px, 40vw);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 5;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.inner-sidebar::-webkit-scrollbar {
    display: none;
}

#sidebarPhotosGrid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

#sidebarPhotosGrid.searching {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

#sidebarPhotosGrid .photo-load-more-btn:hover {
    background: var(--accent, #2874c2) !important;
    color: #fff !important;
    border-color: rgba(154,206,255,0.7) !important;
}

#sidebarPhotosGrid .photo-load-more-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

#sidebarPhotosGrid .photo-item {
    border-radius: 6px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: #10141f !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

#sidebarPhotosGrid .photo-item img {
    display: block;
    aspect-ratio: 1 / 1;
}

@media (max-width: 1500px) {
    :root {
        --inner-sidebar-width: clamp(280px, 24vw, 420px);
    }
}

@media (max-width: 1280px) {
    :root {
        --sidebar: clamp(210px, 20vw, 250px);
        --inner-sidebar-width: clamp(260px, 26vw, 340px);
    }

    .canvas-wrapper {
        padding: 24px 12px;
    }
}

.sidebar-header {
    padding: 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.sidebar-header h2,
.sidebar-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.sidebar-toggle-wrap {
    padding: 2px 10px 4px;
}

.sidebar-toggle-btn {
    width: 100%;
    padding: 2px 10px;
    border-radius: 5px;
    border: 1px solid rgba(30,80,180,0.4);
    background: rgba(13,71,161,0.45);
    color: #ffffff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .15s;
}

.sidebar-toggle-arrow {
    font-size: 13px;
    transition: transform .2s;
}

.format-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.format-orientation-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 8px;
    line-height: 1.6;
}

.quick-tools-panel {
    display: none;
    padding: 10px 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.2);
}

#textQuickTools,
#imageQuickTools {
    box-sizing: border-box;
}

.quick-tools-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.38);
    margin-bottom: 8px;
}

.quick-mini-actions {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 2px;
    justify-content: space-between;
}

.quick-mini-btn {
    flex: 1;
    height: 28px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.quick-mini-btn.mono {
    font-size: 11px;
    font-weight: 700;
    font-family: monospace;
}

.quick-mini-btn.danger {
    color: #ef5350;
}

.quick-inline-panel {
    display: none;
    padding: 8px 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.25);
    max-height: 320px;
    overflow-y: auto;
}

.quick-inline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.quick-inline-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.38);
}

.quick-inline-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
}

.quick-inline-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.tool-section {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.tool-section.compact {
    padding: 8px 10px;
}

.tool-section h3 {
    font-size: 11px;
    margin-bottom: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.canvas-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.preset-btn {
    padding: 6px 4px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    border-radius: 8px;
    /* Większe zaokrąglenie */
    cursor: pointer;
    font-size: 10px;
    transition: all .25s;
    /* Płynniejsza animacja */
}

.preset-btn:hover,
.preset-btn.active {
    filter: brightness(1.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

.icon-flex-row {
    display: flex;
    gap: 4px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.background-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bg-row,
.gradient-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

.gradient-opacity-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gradient-opacity-row label {
    font-size: 10px;
    color: var(--text-dim);
}

.gradient-opacity-row input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
}

.bg-row input[type="color"],
.gradient-row input[type="color"] {
    width: 36px;
    height: 28px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.bg-row button,
.gradient-row button {
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all .25s;
}

.bg-row button:hover,
.gradient-row button:hover {
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.icon-grid.four-col {
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.icon-grid.three-col {
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 2px;
}

.icon-item span {
    font-size: 9px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.1;
}

.custom-format-size-row {
    display: grid;
    grid-template-columns: 38px auto 38px auto;
    gap: 3px;
    align-items: center;
    justify-content: start;
}

.custom-format-size-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 2px 3px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 10px;
}

.custom-format-size-separator {
    color: rgba(255,255,255,0.4);
    font-size: 10px;
    line-height: 1;
}

.custom-format-size-apply {
    background: #2196f3;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 3px 7px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.custom-format-size-apply:hover {
    background: #1976d2;
}

.options-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
    margin-bottom: 8px;
    justify-items: stretch;
}

.options-icon-item {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* All option labels share the same metrics so rows are perfectly aligned.
   Single line + ellipsis prevents "BG Presets" / "Social Icons" from
   wrapping to two rows and shifting the icons in row 3 down. */
.options-icon-item span {
    width: 100%;
    color: #ffffff;
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* All option buttons share the same 56×56 footprint so labels line up perfectly.
   Buttons themselves are transparent (the icon IS the visual). */
.options-icon-item .graphical-btn {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.options-icon-item .graphical-btn:hover {
    transform: translateY(-2px) scale(1.06);
    filter: brightness(1.1);
}

/* Inner icon — leaves a small visual margin inside the 56px tile so all icons
   share the same optical size regardless of their internal padding. */
.options-icon-item .graphical-btn > img,
.options-icon-item .graphical-btn > svg {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain;
    overflow: visible;
    display: block;
}

/* BG Color rainbow IS the icon — no inner img/svg. Make the whole 56×56
   button BE the rainbow circle so it visually weighs the same as every
   other tile. Subtle white ring keeps it from looking floating on dark bg. */
.options-icon-item .graphical-btn.bg-color-rainbow {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.15) !important;
    /* Override the .graphical-btn `background: transparent !important` rule —
       inline conic-gradient on the button alone wouldn't beat that !important.
       Keep the gradient here so the rainbow shows through. */
    background: conic-gradient(
        #ff0000 0deg, #ff0000 45deg,
        #ff8800 45deg, #ff8800 90deg,
        #ffdd00 90deg, #ffdd00 135deg,
        #44bb00 135deg, #44bb00 180deg,
        #0066ff 180deg, #0066ff 225deg,
        #2200cc 225deg, #2200cc 270deg,
        #8800aa 270deg, #8800aa 315deg,
        #ff0044 315deg, #ff0044 360deg
    ) !important;
}
.options-icon-item .graphical-btn.bg-color-rainbow:hover {
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.icon-item input[type="color"],
.icon-item button {
    width: 40px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.icon-item input[type="color"]:hover,
.icon-item button:hover {
    border-color: var(--primary-light);
    background: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Custom icon buttons: no dark background, no border, no box-shadow */
.custom-tool-btn .graphical-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.custom-tool-btn .graphical-btn:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.custom-tool-btn .graphical-btn:hover img {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)) !important;
}

.add-elements {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.add-btn {
    padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all .25s;
}

.add-btn:hover {
    background: var(--primary);
    border-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.templates-section {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.template-categories {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
}

.template-category {
    margin-bottom: 6px;
}

.template-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    background: var(--bg-card);
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all .2s;
}

.template-category-header:hover {
    background: #334155;
}

.template-category-header .arrow {
    font-size: 10px;
    transition: transform .2s;
}

.template-category.open .arrow {
    transform: rotate(90deg);
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px 0;
}

.template-item {
    aspect-ratio: 1/1;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: all .25s;
    position: relative;
}

.template-item:hover {
    border-color: var(--primary-light);
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
}

.template-item canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* History Section - zachowane z ulepszeniami */
.history-section {
    flex-shrink: 0;
    flex-grow: 0;
    padding: 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

.history-section h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.history-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    max-height: 150px;
    overflow-y: auto;
    padding: 4px;
}

.history-item {
    aspect-ratio: 9/16;
    width: 100%;
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.25s ease;
    position: relative;
    background: var(--bg-card);
}

.history-item:hover {
    border-color: var(--primary-light);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.history-item.active {
    border-color: var(--secondary);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.history-item canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.history-item .history-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 8px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.history-item:hover .history-delete {
    display: flex;
}

.history-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-dim);
    font-size: 10px;
    padding: 12px 0;
    font-style: italic;
}

/* Main Canvas Area */
.canvas-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #181920;
    position: relative;
    overflow: hidden;
    padding: 0;
    gap: 0;
    min-height: 0;
    min-width: 0;
}

/* Hide scrollbars completely in this area */
.canvas-area::-webkit-scrollbar {
    display: none;
}

/* Presentation Mode Styles */
#canvasWrapper.presentation-mode .main-canvas,
#canvasWrapper.presentation-mode canvas {
    box-shadow: none;
    border: none;
    outline: none;
}

#canvasWrapper.presentation-mode .photo-zone {
    border-color: transparent;
}

#canvasWrapper.presentation-mode .pz-inner:not([data-has-image="true"]) {
    border: none !important;
    background: transparent !important;
}

#canvasWrapper.presentation-mode .page-margin-layer {
    display: none !important;
}

#canvasWrapper.presentation-mode {
    background-color: white;
    /* Fallback */
}

/* ROBUST FULLSCREEN OVERRIDES */
#canvasWrapper:fullscreen {
    padding: 0 !important;
    background-image: none !important;
}

#canvasWrapper:fullscreen .canvas-container {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Hide selection UI in fullscreen */
#canvasWrapper:fullscreen .canvas-element.selected {
    outline: none !important;
}

#canvasWrapper:fullscreen .resize-handle,
#canvasWrapper:fullscreen .rotate-handle,
#canvasWrapper:fullscreen .handles-overlay {
    display: none !important;
}

@keyframes textWave {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-4px) rotate(-2deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(4px) rotate(2deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes textFlag {
    0% {
        transform: skewX(0deg) scaleX(1);
    }

    25% {
        transform: skewX(8deg) scaleX(1.02);
    }

    50% {
        transform: skewX(0deg) scaleX(1);
    }

    75% {
        transform: skewX(-8deg) scaleX(0.98);
    }

    100% {
        transform: skewX(0deg) scaleX(1);
    }
}

@keyframes textPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes textShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px) rotate(-3deg);
    }

    75% {
        transform: translateX(3px) rotate(3deg);
    }
}

@keyframes textBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes textJiggle {
    0% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(1.1, 0.9);
    }

    50% {
        transform: scale(0.9, 1.1);
    }

    75% {
        transform: scale(1.05, 0.95);
    }

    100% {
        transform: scale(1, 1);
    }
}

/* Visual Warp Grid */
.visual-warp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 20px;
}

.warp-btn.visual {
    width: 100%;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    background: #ffffff;
    color: #1e1e2d;
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: all 0.2s;
}

.warp-btn.visual:hover,
.warp-btn.visual.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.warp-preview-text {
    display: inline-block;
    white-space: nowrap;
    transform-origin: center;
    pointer-events: none;
    line-height: 1;
}

/* Group Titles */
.warp-group-title {
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 15px 0 5px 0;
    font-weight: 600;
}

/* Preview Effects */
.wp-wave {
    animation: textWave 1.5s ease-in-out infinite alternate;
}

@keyframes textWave {
    0% {
        transform: translateY(0px) scale(1);
    }

    100% {
        transform: translateY(-5px) scale(1.05);
    }
}

@keyframes textFlag {
    0% {
        transform: translateY(0px) skewY(0deg);
    }

    25% {
        transform: translateY(-3px) skewY(-5deg);
    }

    75% {
        transform: translateY(3px) skewY(5deg);
    }

    100% {
        transform: translateY(0px) skewY(0deg);
    }
}

@keyframes textPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
        text-shadow: 0 0 10px rgba(78, 168, 214, 0.5);
    }
}

@keyframes textShake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-2px) rotate(-2deg);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(2px) rotate(2deg);
    }
}

@keyframes textBounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

@keyframes textJiggle {
    0% {
        transform: rotate(-2deg) scale(1);
    }

    50% {
        transform: rotate(2deg) scale(1.1);
    }

    100% {
        transform: rotate(-2deg) scale(1.05);
    }
}

/* Crazy Animations */
@keyframes textTornado {
    0% {
        transform: rotateY(0deg) rotateX(0deg) scale(1);
    }

    50% {
        transform: rotateY(180deg) rotateX(45deg) scale(1.2) translateY(-20px);
        letter-spacing: 5px;
        filter: hue-rotate(90deg);
    }

    100% {
        transform: rotateY(360deg) rotateX(0deg) scale(1);
    }
}

@keyframes textMatrix {
    0% {
        transform: scaleY(1);
        color: #0f0;
        filter: drop-shadow(0 0 5px #0f0);
    }

    50% {
        transform: scaleY(0.1) translateY(10px);
        color: #fff;
        filter: drop-shadow(0 0 10px #0f0) blur(1px);
        letter-spacing: -2px;
    }

    100% {
        transform: scaleY(1);
        color: #0f0;
        filter: drop-shadow(0 0 5px #0f0);
    }
}

@keyframes textSpring {
    0% {
        transform: scaleY(1) scaleX(1) translateY(0);
    }

    30% {
        transform: scaleY(0.5) scaleX(1.2) translateY(5px);
        color: #ff0055;
    }

    50% {
        transform: scaleY(1.5) scaleX(0.8) translateY(-20px);
    }

    70% {
        transform: scaleY(0.9) scaleX(1.1) translateY(0);
        color: #00eeff;
    }

    100% {
        transform: scaleY(1) scaleX(1) translateY(0);
    }
}

.wp-wave-container {
    display: inline-block;
}

.wp-wave-container span {
    display: inline-block;
    animation: textWave 1.2s ease-in-out infinite alternate;
}

/* Delays for "Hey!" */
.wp-wave-container span:nth-child(1) {
    animation-delay: 0s;
}

.wp-wave-container span:nth-child(2) {
    animation-delay: 0.1s;
}

.wp-wave-container span:nth-child(3) {
    animation-delay: 0.2s;
}

.wp-wave-container span:nth-child(4) {
    animation-delay: 0.3s;
}

/* Improved Arc approximations for preview */
.wp-arc-up {
    transform: translateY(4px) scaleY(0.9);
    border-bottom: 2px solid transparent;
    border-radius: 50%;
}

.wp-arc-down {
    transform: translateY(-4px) scaleY(0.9);
}

.wp-skew-left {
    transform: skewX(-20deg);
}

.wp-skew-right {
    transform: skewX(20deg);
}

.wp-pers-left {
    transform: perspective(50px) rotateY(15deg);
}

.wp-pers-right {
    transform: perspective(50px) rotateY(-15deg);
}

.wp-bulge {
    transform: scale(1.15);
}

.wp-pinch {
    transform: scale(0.85);
}

.wp-flag {
    animation: textFlag 1.5s ease-in-out infinite;
}

.wp-fish {
    transform: scale(0.9) skewX(10deg);
}

/* New Animations */
.wp-pulse {
    animation: textPulse 1s infinite;
}

.wp-shake {
    animation: textShake 0.4s infinite;
}

.wp-bounce {
    animation: textBounce 0.8s infinite;
}

.wp-jiggle {
    animation: textJiggle 1s infinite;
}


/* Zoom Input */
.zoom-input {
    width: 60px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 6px;
    padding: 4px 8px;
    text-align: center;
    font-size: 14px;
}

/* Fixed Top Toolbar (relative to canvas layout) */
.fixed-top-toolbar {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    min-height: 40px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
}

.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 10px;
    gap: 8px;
}

.toolbar-opacity-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 250px;
}

.toolbar-opacity-group label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.toolbar-slider {
    flex: 1;
    height: 4px;
    accent-color: var(--primary);
    cursor: pointer;
}

.toolbar-value-display {
    min-width: 35px;
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
    text-align: right;
}

.canvas-toolbar-float {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
    z-index: 500;
    backdrop-filter: blur(10px);
    cursor: default;
}

.canvas-toolbar-float.pinned {
    top: 10px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
}

.toolbar-drag-handle {
    cursor: move;
    padding: 4px 8px;
    color: var(--text-dim);
    font-size: 14px;
    user-select: none;
    border-right: 1px solid var(--border);
    margin-right: 4px;
}

.canvas-toolbar-float button {
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all .25s;
}

.canvas-toolbar-float button:hover {
    background: #334155;
    border-color: var(--primary-light);
    transform: translateY(-2px);
}

.canvas-toolbar-float button.active {
    background: var(--primary);
    border-color: var(--primary-light);
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
}

#zoomLevel {
    padding: 0 6px;
    color: var(--text-dim);
    font-size: 12px;
    min-width: 45px;
    text-align: center;
}

.canvas-wrapper {
    flex: 1;
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
    min-height: 0;
    min-width: 0;
    padding: 40px 20px;
    box-sizing: border-box;
    background: radial-gradient(circle at center, rgba(99, 102, 241, .1) 0%, transparent 70%), repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(255, 255, 255, .02) 19px, rgba(255, 255, 255, .02) 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(255, 255, 255, .02) 19px, rgba(255, 255, 255, .02) 20px);
}

.canvas-container {
    position: relative;
    width: 540px;
    height: 960px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    transition: width .3s, height .3s;
    overflow: hidden;
    margin: 0 auto;
}

.canvas-container.background-hovered,
.canvas-container.background-selected,
.canvas-container.background-editing {
    outline: 2px solid rgba(59, 130, 246, 0.95);
    outline-offset: 5px;
}

.canvas-container.background-hovered {
    outline-color: rgba(96, 165, 250, 0.72);
}

.canvas-container.background-editing {
    outline-color: rgba(245, 158, 11, 0.9);
    /* Soft breathing halo so the user always knows the canvas is in
       background-fit mode — gentle, never aggressive. */
    animation: bgEditGlow 2.6s ease-in-out infinite;
}

@keyframes bgEditGlow {
    0%, 100% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, .5),
                    0 0 16px 2px rgba(245, 158, 11, 0.22);
    }
    50% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, .5),
                    0 0 30px 7px rgba(245, 158, 11, 0.42);
    }
}

/* Respect reduced-motion: keep a static soft glow instead of pulsing. */
@media (prefers-reduced-motion: reduce) {
    .canvas-container.background-editing {
        animation: none;
        box-shadow: 0 10px 40px rgba(0, 0, 0, .5),
                    0 0 24px 4px rgba(245, 158, 11, 0.34);
    }
}

.canvas-container.background-selected {
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(59, 130, 246, 0.35);
}

.bg-image-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}

.bg-image-layer.draggable {
    pointer-events: auto;
    cursor: default;
}

.gradient-overlay-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Polished sliders for BG Presets (Size / Opacity) */
.bgpm-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, rgba(33,150,243,0.55) 0%, rgba(33,150,243,0.9) var(--bgpm-fill, 50%), rgba(255,255,255,0.08) var(--bgpm-fill, 50%), rgba(255,255,255,0.08) 100%);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: filter 0.15s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
}
.bgpm-slider:hover { filter: brightness(1.08); }
.bgpm-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border-radius: 6px;
}
.bgpm-slider::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 6px;
    border: none;
}
.bgpm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e7eefc 60%, #b4c4e0 100%);
    border: 1.5px solid #2196f3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
    cursor: grab;
    margin-top: -4px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bgpm-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(33,150,243,0.6), inset 0 1px 0 rgba(255,255,255,0.7); }
.bgpm-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.bgpm-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e7eefc 60%, #b4c4e0 100%);
    border: 1.5px solid #2196f3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.55);
    cursor: grab;
    transition: transform 0.12s ease;
}
.bgpm-slider::-moz-range-thumb:hover { transform: scale(1.15); }

.canvas-element {
    position: absolute;
    cursor: default;
    user-select: none;
    animation: fadeIn .15s;
    z-index: 2;
}

.canvas-element.selected {
    outline: none;
    pointer-events: auto !important;
}

.canvas-element.selected:not(.has-handles) {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
}

.canvas-element[data-locked="true"].selected,
.canvas-element[data-locked="true"].selected:not(.has-handles) {
    outline: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.text-element.selected {
    overflow: visible !important;
}

/* When exporting/capturing canvas: hide all selection chrome */
.canvas.is-exporting .canvas-element,
.canvas.is-exporting .canvas-element.selected,
.canvas.is-exporting .canvas-element.selected:not(.has-handles),
.canvas.is-exporting .canvas-element:hover,
#canvas.is-exporting .canvas-element,
#canvas.is-exporting .canvas-element.selected,
#canvas.is-exporting .canvas-element.selected:not(.has-handles) {
    outline: none !important;
    box-shadow: none !important;
}
.canvas.is-exporting .selection-handle,
.canvas.is-exporting .resize-handle,
.canvas.is-exporting .rotation-handle,
.canvas.is-exporting .handle,
#canvas.is-exporting .selection-handle,
#canvas.is-exporting .resize-handle,
#canvas.is-exporting .rotation-handle,
#canvas.is-exporting .handle {
    display: none !important;
}

.canvas-element.has-handles {
    overflow: visible !important;
}

.group-element {
    outline: none;
}

.group-element.selected {
    outline: 2px dashed #3b82f6;
    outline-offset: 3px;
}

.resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid #2563eb;
    border-radius: 3px;
    z-index: 100;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.18);
    box-sizing: border-box;
    transition: transform 0.1s, box-shadow 0.1s;
}

.resize-handle:hover {
    transform: scale(1.3) !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.3), 0 2px 8px rgba(0,0,0,0.25);
}

.resize-handle.nw {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.resize-handle.ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

/* --- Smart Guides --- */
.smart-guide {
    position: absolute;
    background-color: #2196f3;
    /* Blue */
    z-index: 9999;
    pointer-events: none;
    display: none;
    opacity: 0.8;
}

.smart-guide.vertical {
    width: 2px;
    height: 100%;
    top: 0;
}

.smart-guide.horizontal {
    height: 2px;
    width: 100%;
    left: 0;
}

/* (handled below) */

.page-frame-element .resize-handle,
.page-frame-element .rotate-handle {
    pointer-events: auto !important;
}

.canvas-element[data-locked="true"] .resize-handle,
.canvas-element[data-locked="true"] .rotate-handle {
    display: none !important;
}

.page-frame-element .inner-dummy-handle {
    display: none !important;
}

.page-frame-element.selected .inner-dummy-handle {
    display: block !important;
}

.resize-handle.sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}

.resize-handle.se {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}

.resize-handle.w {
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.resize-handle.e {
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.resize-handle.n {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.resize-handle.s {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.resize-handle.circle {
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.resize-handle.square {
    border-radius: 2px;
}


/* Selection border on overlay */
.handles-overlay {
    border: 1.5px solid #2563eb;
    border-radius: 1px;
}

.rotate-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: grab;
    z-index: 100;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.18);
    transition: transform 0.1s, box-shadow 0.1s;
}

.rotate-handle:hover {
    transform: translateX(-50%) scale(1.3);
    box-shadow: 0 0 0 2px rgba(245,158,11,0.3), 0 2px 8px rgba(0,0,0,0.25);
}

.text-element {
    /* Tighten selection box */
    width: fit-content;
    height: fit-content;
}

.text-element .text-content {
    outline: none;
    word-break: break-word;
}

.image-element {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-element img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Fitting mode: user drags image within container */
.canvas-element.fitting-mode {
    outline: 3px dashed #1d4ed8 !important;
    outline-offset: 2px;
    cursor: move;
}

.canvas-element.fitting-mode::after {
    content: '↕↔ Drag image to adjust • Enter = confirm • Esc = cancel';
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    color: #fff;
    background: rgba(29, 78, 216, 0.85);
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
}

/* Alt+Click: select-through mode visual hint */
.alt-select-mode .canvas-element {
    cursor: crosshair !important;
}

.alt-select-mode .canvas-element::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px dashed rgba(99, 102, 241, 0.45);
    border-radius: 3px;
    pointer-events: none;
    z-index: 99999;
}

.canvas-element.fitting-mode img {
    cursor: move;
    pointer-events: auto;
}

.shape-element {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shape-element.circle {
    border-radius: 50%;
}

.line-element {
    height: 4px;
    background: #000;
    min-width: 80px;
}

.property-section {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.property-section h4 {
    font-size: 12px;
    margin-bottom: 8px;
    color: var(--primary);
}

.property-section p {
    color: var(--text-dim);
    font-size: 11px;
    text-align: center;
    padding: 10px 0;
}

.property-section .hint {
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.property-group {
    margin-bottom: 8px;
}

.property-group label {
    display: block;
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.property-group input[type="text"],
.property-group input[type="number"],
.property-group textarea,
.property-group select {
    width: 100%;
    padding: 6px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 4px;
    font-size: 12px;
}

.property-group textarea {
    resize: vertical;
    min-height: 40px;
}

.property-group input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
}

.property-group input[type="color"] {
    width: 36px;
    height: 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.property-group.inline {
    display: flex;
    gap: 6px;
    align-items: center;
}

.property-group.inline label {
    margin-bottom: 0;
    white-space: nowrap;
}

.shadow-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

.small-btn {
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    width: 100%;
    transition: all .2s;
}

.small-btn:hover {
    background: var(--primary);
}

.font-select {
    font-size: 12px;
    flex: 1;
}

.font-select option {
    padding: 4px;
}

.font-select-wrapper {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.preset-btn {
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    content-visibility: auto;
    contain-intrinsic-size: 100px 100px;
    contain: layout style;
    transform: translate3d(0,0,0);
    will-change: transform;
}

.font-preview {
    width: 50px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text);
}

/* Stickers Section */
.stickers-section {
    padding: 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

.stickers-section h4 {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text);
}

.stickers-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.sticker-tab {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: 6px;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.25s ease;
}

.sticker-tab:hover {
    border-color: var(--primary-light);
    background: var(--primary);
    color: var(--bg-dark);
}

.sticker-tab.active {
    background: var(--primary);
    border-color: var(--primary-light);
    color: var(--bg-dark);
}

.stickers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-height: 160px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg-dark);
    border-radius: 6px;
}

.sticker-item {
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.25s ease;
    overflow: hidden;
}

.sticker-item:hover {
    border-color: var(--primary-light);
    box-shadow: 0 6px 14px rgba(99, 102, 241, 0.25);
}

.sticker-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

/* Creative Texts Section */
.creative-texts-section {
    padding: 10px;
    border-top: 1px solid var(--border);
}

.creative-texts-section h4 {
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.creative-texts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg-dark);
    border-radius: 6px;
}

.creative-text-item {
    background: #f0f0f0;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    padding: 10px 8px;
    text-align: center;
    transition: all 0.25s ease;
    font-size: 12px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.creative-text-item:hover {
    border-color: var(--primary-light);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
    transform: scale(1.03);
}

.creative-text-item .text-preview {
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

.creative-text-item-bg {
    position: relative;
}

.creative-twist-checkbox {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(0, 0, 0, 0.45);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    z-index: 5;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.creative-twist-checkbox:hover {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.creative-twist-checkbox[data-checked="true"] {
    background: #6366f1;
    border-color: #4f46e5;
}

.creative-twist-checkbox[data-checked="true"]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.creative-text-item.twist-active {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.45);
}

/* --- Selection Box Marquee --- */
.selection-box {
    position: absolute;
    border: 1px dashed #2196f3;
    background-color: rgba(33, 150, 243, 0.1);
    pointer-events: none;
    z-index: 99999;
}

/* Text Warp Section */
.text-warp-section {
    padding: 10px;
    border-top: 1px solid var(--border);
}

.text-warp-section h4 {
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.text-warp-section .hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.warp-effects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.warp-btn {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 4px;
    font-size: 10px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.warp-btn:hover {
    border-color: var(--primary-light);
    background: rgba(99, 102, 241, 0.1);
}

.warp-btn.active {
    border-color: var(--primary-light);
    background: var(--primary);
    color: #fff;
}

.warp-intensity {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.warp-intensity label {
    font-size: 11px;
    color: var(--text-secondary);
}

.warp-intensity input[type="range"] {
    width: 100%;
}

.export-section {
    padding: 10px;
    margin-top: auto;
    background: var(--bg-card);
}

.export-section h4 {
    font-size: 12px;
    margin-bottom: 8px;
    color: var(--secondary);
}

.export-btn {
    width: 48%;
    padding: 8px;
    margin: 2px 1%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: all .25s;
    display: inline-block;
}

.export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
    background: #F3EDE2;
    border-radius: 3px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.float-font-select {
    width: 100px;
    padding: 3px 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 3px;
    font-size: 10px;
}

.float-font-select option {
    font-size: 12px;
    padding: 2px;
}

/* Main Canvas Area - consolidated (see primary definition above) */

/* Toolbar Groups */
.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Separator between groups */
.toolbar-separator {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 6px;
    flex-shrink: 0;
}

/* Floating Text Toolbar - Stacked ABOVE Canvas */
.floating-toolbar-top {
    order: 1;
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 36px;
    height: auto;
    transform: none;
    display: none;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    overflow: visible;
    white-space: nowrap;
    gap: 3px;
    padding: 8px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 100;
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.floating-toolbar-top button,
.floating-toolbar-top select,
.floating-toolbar-top input {
    padding: 4px 5px;
    font-size: 11px;
    min-width: 26px;
    flex-shrink: 0;
}

.floating-toolbar-top.visible {
    display: flex;
}

/* .canvas-wrapper order/flex consolidated into primary rule above */

/* Canvas Toolbar (Bottom) - Stacked BELOW Canvas */
.canvas-toolbar {
    order: 3;
    position: relative;
    width: auto;
    max-width: 100%;
    min-height: 38px;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 100;
    backdrop-filter: blur(8px);
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 8px;
    gap: 4px;
}

.canvas-toolbar button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.canvas-toolbar button:hover {
    background: var(--primary);
    border-color: var(--primary-light);
    transform: scale(1.05);
}

.canvas-toolbar .toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
}

/* FLOATING TOOLBAR - Complete Rewrite (zachowane z ulepszeniami) */
.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.toolbar-separator {
    display: flex;
    /* Zachowane, ale widoczne */
}

.toolbar-select {
    height: 30px;
    padding: 0 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    min-width: 100px;
}

.toolbar-select-small {
    min-width: 60px;
    width: 60px;
}

.toolbar-select:hover {
    border-color: var(--primary-light);
}

.toolbar-input {
    height: 30px;
    width: 62px;
    padding: 0 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
}

.toolbar-input-small {
    width: 52px;
}

.toolbar-input:hover {
    border-color: var(--primary-light);
}

.toolbar-color {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 2px;
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    background: var(--bg-card);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.25s ease;
}

.toolbar-color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.toolbar-color::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

.toolbar-color::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}

.toolbar-color:hover {
    border-color: var(--primary-light);
    transform: scale(1.1);
}

.fd-color-trigger {
    --fd-color-value: #000000;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 6px;
    background: var(--fd-color-value);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.fd-color-trigger::after {
    content: '';
    width: 54%;
    height: 54%;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.fd-color-trigger:hover {
    border-color: var(--primary-light);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 8px rgba(78, 168, 214, 0.35);
}

.toolbar-color.fd-color-trigger {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    background: var(--fd-color-value);
}

.property-color-trigger {
    width: 34px;
    height: 24px;
    min-width: 34px;
    min-height: 24px;
}

.effect-color-trigger {
    min-height: 24px;
    background: var(--fd-color-value) !important;
}

/* Color swatch tag (C / S / G1 / G2 overlays) */
.color-swatch-tag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 4px;
    padding: 1px 3px;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}
.color-swatch-tag-double {
    font-size: 11px;
    padding: 1px 3px;
    letter-spacing: 0;
}
.color-swatch-wrap:hover .color-swatch-tag {
    transform: translate(-50%, -50%) scale(1.08);
}

/* Custom Graphical Tool Buttons */
.custom-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Increased gap to prevent overlap */
    margin-bottom: 5px;
}

.graphical-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    width: 56px;
    /* Slightly smaller to fit grid better */
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.graphical-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.graphical-btn:hover {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.2);
}

.graphical-btn:active {
    transform: scale(0.95);
}

.custom-tool-btn span {
    font-size: 10px;
    color: #ffffff;
    /* Pure white */
    font-weight: 600;
    text-transform: uppercase;
    /* ALL CAPS */
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    /* Better readability */
}

.toolbar-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.toolbar-btn-text {
    width: auto;
    padding: 0 8px;
}

.toolbar-btn:hover {
    background: var(--primary);
    border-color: var(--primary-light);
    transform: scale(1.05);
}

.toolbar-btn.active {
    background: var(--primary);
    border-color: var(--primary-light);
}

.toolbar-preview {
    width: 36px;
    height: 30px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text);
}

/* Context Menu */
/* ===== CONTEXT MENU ===== */
.context-menu {
    position: absolute;
    z-index: 10000;
    min-width: 230px;
    background: #232323;
    border: 1px solid #393939;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    animation: ctxFadeIn 0.1s ease-out;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

@keyframes ctxFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.context-menu button {
    background: none;
    border: none;
    color: #e8e8e8;
    padding: 8px 16px;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1;
    transition: none;
    white-space: nowrap;
}

.context-menu button:hover:not(:disabled) {
    background: #fff;
    color: #111;
}

.context-menu button:hover:not(:disabled) svg {
    stroke: #111;
}

.context-menu button:disabled {
    color: #707070;
    cursor: default;
}

.context-menu button:disabled svg {
    stroke: #707070;
}

.context-menu button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: #bbb;
}

/* Keyboard shortcuts */
.context-menu button kbd {
    margin-left: auto;
    font-family: inherit;
    font-size: 11px;
    color: #666;
    font-weight: 400;
    pointer-events: none;
    background: none;
    border: none;
    padding: 0;
}

.context-menu button:hover:not(:disabled) kbd {
    color: #888;
}

.context-menu button .ctx-chevron {
    width: 10px;
    height: 10px;
    margin-left: auto;
    stroke: #666;
}

.context-menu button:hover:not(:disabled) .ctx-chevron {
    stroke: #444;
}

/* Separator */
.ctx-sep,
.context-separator {
    height: 1px;
    background: #393939;
    margin: 4px 0;
}

/* Lock — yellow/amber accent */
.context-menu button.ctx-lock svg {
    stroke: #f0b429;
}
.context-menu button.ctx-lock:hover:not(:disabled) svg {
    stroke: #8a6800;
}

/* Set as background — blue accent */
.context-menu button.ctx-setbg svg {
    stroke: #4ea8f0;
}
.context-menu button.ctx-setbg:hover:not(:disabled) svg {
    stroke: #1a5a8a;
}

/* Delete — red accent */
.context-menu button.ctx-delete,
.context-menu button.delete {
    color: #e85555;
}
.context-menu button.ctx-delete svg,
.context-menu button.delete svg {
    stroke: #e85555;
}
.context-menu button.ctx-delete:hover:not(:disabled),
.context-menu button.delete:hover:not(:disabled) {
    background: #e85555;
    color: #fff;
}
.context-menu button.ctx-delete:hover:not(:disabled) svg,
.context-menu button.delete:hover:not(:disabled) svg {
    stroke: #fff;
}
.context-menu button.ctx-delete kbd,
.context-menu button.delete kbd {
    color: #a44;
}
.context-menu button.ctx-delete:hover:not(:disabled) kbd,
.context-menu button.delete:hover:not(:disabled) kbd {
    color: rgba(255,255,255,0.6);
}

/* Submenu */
.context-submenu-container {
    position: relative;
    width: 100%;
}

.context-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -6px;
    min-width: 185px;
    background: #232323;
    border: 1px solid #393939;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    padding: 6px 0;
    flex-direction: column;
    z-index: 10001;
}

.context-submenu-container:hover > .context-submenu {
    display: flex;
}

/* Variant: submenu opens to the LEFT of its parent button instead of the
   default right. Used when the parent menu is anchored on the right side of
   the screen (e.g., page-context-menu in the right sidebar) where opening to
   the right would clip off-screen. */
.context-submenu.open-left {
    left: auto;
    right: 100%;
}

.context-submenu button {
    padding: 7px 16px;
    font-size: 13px;
}

.context-submenu button svg {
    width: 15px;
    height: 15px;
}

.ctx-submenu-label,
.context-submenu-title {
    padding: 6px 16px 3px;
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
    font-weight: 600;
}

/* Custom expand row */
.ctx-custom-expand {
    display: flex;
    gap: 4px;
    padding: 5px 16px;
    align-items: center;
}
.ctx-custom-expand select,
.ctx-custom-expand input {
    padding: 3px 5px;
    border-radius: 4px;
    border: 1px solid #444;
    background: #2e2e2e;
    color: #ddd;
    font-size: 11px;
    font-family: inherit;
}
.ctx-custom-expand input { width: 42px; text-align: center; }
.ctx-unit { color: #666; font-size: 11px; }
#contextMenu .ctx-apply-btn {
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #555;
    background: #3a3a3a;
    color: #ddd;
    font-size: 11px;
    cursor: pointer;
    min-width: auto;
    width: auto;
}
#contextMenu .ctx-apply-btn:hover { background: #fff; color: #111; }
/* ===== END CONTEXT MENU ===== */

/* PPA Settings Toolbar - Repositioned to Right */
.ppa-settings-toolbar {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: rgba(30, 30, 45, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    /* Vertical layout for right side */
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 1100;
    color: white;
}


.ppa-settings-toolbar select,
.ppa-settings-toolbar input {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.ppa-settings-toolbar .setting-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ppa-settings-toolbar .setting-item label {
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.7;
    font-weight: bold;
}

.ppa-settings-toolbar .toolbar-divider {
    width: 24px;
    height: 1px;
    background: var(--border);
}


/* End of PPA Settings */

/* ===== ANIMATION PANEL (Sidebar Left) ===== */
.anim-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}

.anim-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    width: 100%;
}

.anim-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    padding: 7px 4px 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: center;
    min-height: 58px;
}
.anim-card:hover {
    background: rgba(100,181,246,0.12);
    border-color: rgba(100,181,246,0.35);
}
.anim-card.active {
    background: rgba(100,181,246,0.18);
    border-color: #64b5f6;
}

.anim-card-icon {
    font-size: 18px;
    line-height: 1;
}
.anim-card-preset .anim-card-icon {
    font-size: 20px;
}

.anim-card-name {
    font-size: 9px;
    color: rgba(255,255,255,0.65);
    line-height: 1.2;
    word-break: break-word;
    text-align: center;
}
.anim-card.active .anim-card-name {
    color: #90caf9;
}

/* Settings bar */
.anim-settings-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 8px;
    margin-top: 12px;
    padding: 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.07);
}
.anim-setting {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.anim-setting label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.38);
    font-weight: 700;
}
.anim-setting input,
.anim-setting select {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 11px;
    width: 100%;
    box-sizing: border-box;
}
.anim-unit {
    font-size: 9px;
    color: rgba(255,255,255,0.35);
    margin-top: -1px;
}

/* Settings bar — no top margin since it's now in sticky bottom */
.anim-settings-bar { margin-top: 0 !important; }

/* Action buttons */
.anim-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 6px;
}
.anim-btn {
    padding: 6px 4px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.anim-btn:hover { opacity: 0.85; }
.anim-btn-preview { background: rgba(46,204,113,0.2); color: #2ecc71; border: 1px solid rgba(46,204,113,0.35); }
.anim-btn-apply   { background: #1976d2; color: #fff; border: none; }
.anim-btn-remove  { background: rgba(255,80,80,0.15); color: #ff6b6b; border: 1px solid rgba(255,80,80,0.3); }
.anim-btn-close   { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.12); }
.anim-btn-close:hover { background: rgba(255,255,255,0.1) !important; opacity: 1 !important; }

/* Open button hover */
#openAnimPanel:hover {
    background: rgba(100,181,246,0.15) !important;
}
/* ===== END ANIMATION PANEL ===== */



/* Expand To Presets */
.expand-preset-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 12px;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s;
}

.expand-preset-btn:hover {
    background: rgba(29, 78, 216, 0.2) !important;
}

.expand-icon {
    width: 36px;
    height: 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.expand-region {
    position: absolute;
    background: rgba(29, 78, 216, 0.5);
    border: 1px solid rgba(29, 78, 216, 0.8);
    border-radius: 1px;
}

.expand-submenu {
    min-width: 220px;
}

/* Visual Feedback */
.canvas-element:hover,
.canvas-element.ce-hover {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
    cursor: default;
}

.canvas-element.selected.has-handles:hover,
.canvas-element.selected.has-handles.ce-hover {
    outline: none;
}

.canvas-element[data-locked="true"]:hover,
.canvas-element[data-locked="true"].ce-hover {
    outline: 2px solid #ef4444;
}

/* Text Editing Cursor */
.text-content {
    caret-color: var(--primary);
    outline: none;
}

.text-content[contenteditable='true'],
.text-content[contenteditable='true']:focus {
    cursor: text;
    caret-color: #2196f3;
    outline: none !important;
}

.text-content:focus {
    outline: none;
}

/* Format Templates */
.template-formats {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.template-formats h4 {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.formats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.format-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    padding: 0 !important;
    font-size: 11px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    text-align: center;
    box-shadow: 0 0 0 transparent;
    /* Lock dimensions so other classes (e.g. .preset-btn padding) can't grow the tile. */
    height: 110px;
    min-height: 110px;
    max-height: 110px;
    box-sizing: border-box;
    overflow: hidden;
}

.format-btn .fmt-img-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    position: relative;
}

.format-btn span {
    flex-shrink: 0;
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 2px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.format-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transform: scale(1.6);
}

/* Per-icon focal points */
.format-btn.fmt-magazine img { object-position: 55% 15%; transform: scale(2.0); }
.format-btn.fmt-cv img { object-position: center 18%; transform: scale(1.8); }
.format-btn.fmt-bizcard img { object-position: 45% 45%; transform: scale(1.8); }
.format-btn.fmt-brochure img { object-position: 25% 25%; transform: scale(1.9); }
.format-btn.fmt-www img { object-fit: contain !important; object-position: center !important; transform: scale(1.0) !important; padding: 8px; background: #f4f3ee; border-radius: 4px; }

.format-btn:hover {
    transform: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.28);
}

.format-btn:hover img {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.format-btn.fmt-magazine:hover img { transform: scale(2.0); }
.format-btn.fmt-cv:hover img { transform: scale(1.8); }
.format-btn.fmt-bizcard:hover img { transform: scale(1.8); }
.format-btn.fmt-brochure:hover img { transform: scale(1.9); }
.format-btn.fmt-www:hover img { transform: scale(1.05) !important; }

.format-btn.active {
    transform: translate(-3px, -3px);
    box-shadow: 3px 3px 0px rgba(255,255,255,0.3), 0 0 0 2px rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.35);
}

/* Default UI Scale */
body {
    zoom: 0.71;
}

/* Fix for UI Scale 70% */
body {
    zoom: 0.71;
    height: 141vh;
    width: 141vw;
    overflow: hidden;
}

.app-container {
    height: 100%;
}

/* --- Multi-page & Gallery Styles --- */

/* Top Page Controls */
.top-page-controls {
    display: flex;
    justify-content: center;
    padding: 10px 0 5px 0;
    z-index: 20;
}

.add-page-btn {
    background: #7f8c8d;
    /* Gray */
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid #95a5a6;
}

.add-page-btn:hover {
    background: #95a5a6;
    transform: translateY(-1px);
}

/* Canvas Navigation Wrapper */
.canvas-navigation-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.page-nav-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid #2ecc71;
    /* Green outline/box */
    color: #2ecc71;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
    margin: 0 10px;
}

.page-nav-btn:hover {
    background: #2ecc71;
    color: white;
}

/* Page Thumbnails Strip */
.page-thumbnails-strip {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--border);
    margin-top: auto;
    /* Push to bottom */
}

.thumbnails-container {
    display: flex;
    gap: 10px;
    max-width: 600px;
    overflow: hidden;
    scroll-behavior: smooth;
    padding: 4px;
}

.page-thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    border: 2px solid #3498db;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
    overflow: hidden;
}

.page-thumbnail.active {
    border-color: #f1c40f;
    box-shadow: 0 0 0 2px #f1c40f;
    z-index: 2;
}

.page-thumbnail canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumb-nav-arrow {
    width: 20px;
    height: 40px;
    background: #2ecc71;
    /* Green small rectangles */
    border: none;
    color: white;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumb-nav-arrow:hover {
    background: #27ae60;
}

/* Photos Section */
.photos-section .photo-category-header {
    background: rgba(230, 126, 34, 0.1);
    color: #e67e22;
    padding: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.photo-grid {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.photo-grid.open {
    display: grid;
}

/* Scoped reset for photo sections — use specific selectors to avoid !important */
.photos-section-right,
#photosGrid_Women,
.photos-section-right .photo-category,
.photos-section-right .photo-category-header {
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 2px;
}

.photo-item {
    aspect-ratio: 1;
    cursor: grab;
    border-radius: 4px;
    overflow: hidden;
    border: none !important;
    background: transparent !important;
    position: relative;
    z-index: 10;
}

/* Ensure no pseudo-elements create overlays */
.photos-section-right::before,
.photos-section-right::after,
#photosGrid_Women::before,
#photosGrid_Women::after {
    content: none !important;
    display: none !important;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.photo-item:hover img {
    transform: scale(1.1);
}


/* --- Consolidated Layout Rules --- */
#canvasArea {
    flex: 1;
    min-width: 0;
    min-height: 0;
    /* Critical for container.clientHeight to be constrained by window height */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #181924;
}

.canvas-navigation-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: visible;
    position: relative;
}

/* Page Margin Guidelines Layer */
.page-margin-layer {
    pointer-events: none;
    position: absolute;
    /* Inset will be set via javascript based on calculated margin */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    border: 1px dashed rgba(52, 152, 219, 0.8);
    /* Light blue, thin 1px line */
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.03);
    /* Slight overlay outside the safe zone */
}

/* Professional Margins Dropdown Menu */
/* Professional Margins Dropdown Menu - Premium Dark Theme & Glassmorphism */
.margins-dropdown-container {
    position: relative;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.margins-dropdown {
    position: fixed;
    width: 280px;
    background: rgba(30, 30, 35, 0.9) !important;
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    z-index: 2147483647 !important; /* Make sure it stays on top of all canvas layers */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 80vh;
    overflow-y: auto;
    padding: 6px 0;
    box-sizing: border-box;
    animation: dropdownFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.margins-dropdown-container.open .margins-dropdown {
    display: flex !important;
}

.margin-option {
    display: flex;
    padding: 8px 12px;
    gap: 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s, border-color 0.2s;
    align-items: center;
    margin: 2px 8px;
    border-radius: 6px;
    box-sizing: border-box;
}

.margin-option:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.margin-option:active {
    transform: scale(0.97);
}

.margin-option:last-child {
    border-bottom: none;
}

.margin-icon {
    width: 32px;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 4px;
    transition: border-color 0.2s;
}

.margin-option:hover .margin-icon {
    border-color: rgba(0, 188, 212, 0.6);
}

.margin-icon-inner {
    position: absolute;
    border: 1px dashed #00bcd4; /* Neon cyan active marker */
    pointer-events: none;
    box-sizing: border-box;
}

.margin-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.margin-title {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
    transition: color 0.2s;
}

.margin-option:hover .margin-title {
    color: #00bcd4; /* Vibrant brand highlight */
}

.margin-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 9px;
    color: #aaaaaa;
    gap: 1px 4px;
}

.margin-section-sep {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 6px 0;
}

.margin-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.38);
    padding: 6px 14px 4px;
}

.margin-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 8px;
    color: #cccccc;
    font-size: 11px;
}

.margin-custom-row input {
    width: 65px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    padding: 4px 6px;
    font-size: 11px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    outline: none;
}

.margin-custom-row input:focus {
    border-color: #00bcd4;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.25);
}

.margin-custom-row button {
    background: #00bcd4;
    border: none;
    border-radius: 6px;
    color: #0d1117;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.margin-custom-row button:hover {
    background: #33c9dc;
    box-shadow: 0 0 8px rgba(0, 188, 212, 0.4);
}

.margin-custom-row button:active {
    transform: scale(0.95);
}

.margin-apply-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 6px;
}

.margin-apply-row input {
    flex: 1;
    background: #1a1a2e;
    border: 1px solid #444;
    border-radius: 4px;
    color: #fff;
    padding: 3px 6px;
    font-size: 11px;
}

.margin-apply-row button {
    background: #3a3a5a;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ccc;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}

.margin-apply-row button:hover {
    background: #1976d2;
    color: #fff;
    border-color: #1976d2;
}

.margin-more-frames-toggle {
    padding: 7px 10px;
    color: #8b9dc3;
    font-size: 11px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    margin: 4px 8px;
    text-align: center;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}

.margin-more-frames-toggle:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #c0cde0;
}

.margin-frame-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 4px 8px 10px;
}

.frame-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    transition: background 0.15s;
}

.frame-opt:hover {
    background: rgba(33, 150, 243, 0.25);
}

.frame-opt.active {
    background: rgba(33, 150, 243, 0.35);
    outline: 1px solid #2196f3;
}

.frame-prev {
    width: 40px;
    height: 28px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

#moreFramesPanel .margin-frame-grid {
    grid-template-columns: repeat(5, 1fr);
}

.frame-opt span {
    font-size: 9px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 44px;
    text-align: center;
}


.inner-sidebar {
    height: 100%;
    overflow-y: auto;
    z-index: 50;
}

.page-nav-btn {
    flex-shrink: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background for visibility */
}

/* Fix inner sidebar to stay on right */
.inner-sidebar {
    height: 100vh;
    flex-shrink: 0;
}

/* Adjust toolbar position */
.canvas-toolbar {
    gap: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--border);
    margin-top: auto;
    /* Push to bottom */
}

.thumbnails-container {
    display: flex;
    gap: 10px;
    max-width: 600px;
    overflow: hidden;
    scroll-behavior: smooth;
    padding: 4px;
}

.page-thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    border: 2px solid #3498db;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
    overflow: hidden;
}

.page-thumbnail.active {
    border-color: #f1c40f;
    box-shadow: 0 0 0 2px #f1c40f;
    z-index: 2;
}

.page-thumbnail canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumb-nav-arrow {
    width: 20px;
    height: 40px;
    background: #2ecc71;
    /* Green small rectangles */
    border: none;
    color: white;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumb-nav-arrow:hover {
    background: #27ae60;
}

/* Photos Section */
.photos-section .photo-category-header {
    background: rgba(230, 126, 34, 0.1);
    color: #e67e22;
    padding: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.photo-grid {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.photo-grid.open {
    display: grid;
}

.photo-item {
    aspect-ratio: 1;
    cursor: grab;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.photo-item:hover img {
    transform: scale(1.1);
}


/* Layout fixes consolidated above */



/* Duplicate layout rules removed - see consolidated rules above */

.page-nav-btn {
    flex-shrink: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.5);
}

/* --- Final Visual Refinements --- */

/* Sidebar page thumbnails — same size logic as template items */
.page-thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 4px;
    margin: 0;
    overflow: hidden;
}

/* Add Page Button in Strip */
.add-page-strip-btn {
    background: #34495e;
    color: #ecf0f1;
    border: 1px solid #4e5d6c;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 8px;
    /* Spacing */
}

.add-page-strip-btn:hover {
    background: #2c3e50;
    transform: scale(1.1);
    color: #fff;
    border-color: #fff;
}

/* FIX FOR WEB COMPONENTS ARCHITECTURE */
/* 
   These custom elements act as wrappers. We use 'display: contents' 
   to "unwrap" them so their children participate directly in the 
   .app-container Flexbox layout, creating the same structure as before.
*/
sidebar-left,
main-canvas,
sidebar-right,
sidebar-inner,
context-menu {
    display: contents;
}

@media print {
    /* Hide everything */
    body * {
        visibility: hidden !important;
    }

    /* Show only the canvas container and its contents */
    #canvasContainer,
    #canvasContainer * {
        visibility: visible !important;
    }

    /* Position canvas at top-left corner of printed page */
    #canvasContainer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        zoom: 1 !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        overflow: hidden !important;
    }

    /* Remove page header/footer added by browser */
    @page {
        margin: 0;
    }
}

/* FULLSCREEN OVERLAY STYLES */
.selection-overlay {
    position: fixed;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 1.15vw, 18px);
    box-sizing: border-box;
    overflow: visible;
    background: rgba(6, 7, 10, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: fadeIn 0.18s ease-out;
}

.selection-overlay.fullbleed {
    padding: clamp(8px, 1vw, 14px);
}

.selection-overlay-panel {
    width: min(100%, 1380px);
    height: min(100%, 770px);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid #333640;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 20%),
        linear-gradient(145deg, rgba(21,23,29,0.97), #0b0d12);
    box-shadow:
        0 36px 90px rgba(0,0,0,.62),
        inset 0 1px 0 rgba(255,255,255,.055);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.selection-overlay-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent),
        radial-gradient(circle at 48% 40%, rgba(255,255,255,0.08), transparent 33%);
    opacity: 0.42;
    z-index: 0;
}

.selection-overlay.fullbleed .selection-overlay-panel {
    width: min(100%, 1660px);
    height: min(100%, 930px);
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px 12px 18px;
    border-bottom: 1px solid rgba(51, 54, 64, 0.72);
    background:
        linear-gradient(180deg, rgba(21,23,29,0.88), rgba(11,13,18,0.88));
    backdrop-filter: blur(18px);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.overlay-header h2 {
    color: #fafafa;
    margin: 0;
    font-size: clamp(18px, 1.5vw, 25px);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    line-height: 1;
}

.overlay-header h2 .overlay-title-text {
    display: inline;
}

.close-overlay-btn {
    width: 52px;
    height: 30px;
    border: 1px solid rgba(51, 54, 64, 0.82);
    border-radius: 0;
    color: #fafafa;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
    font: 700 11px/1 'Inter','Montserrat',sans-serif;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.15);
    transition: all 0.15s;
}

.close-overlay-btn:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
    transform: translateY(-1px);
}

.overlay-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: #F3EDE2 transparent;
    position: relative;
    z-index: 1;
}

.overlay-content::-webkit-scrollbar {
    width: 10px;
}

.overlay-content::-webkit-scrollbar-track {
    background: transparent;
}

.overlay-content::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 99px;
    background-clip: padding-box;
    background-color: #F3EDE2;
}

/* Overlay Grids */
.overlay-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    align-content: start;
    padding: 15px 14px 36px;
}

/* Premium grid card (photos, templates, layouts) */
.overlay-grid > div[style*="aspect-ratio"],
.overlay-grid .photo-item,
.layout-card {
    border-radius: 6px;
    border: 1px solid rgba(51, 54, 64, 0.74);
    background:
        linear-gradient(45deg, rgba(255,255,255,.03), transparent 40%),
        linear-gradient(135deg, rgba(32,34,42,0.84), rgba(16,18,24,0.88));
    box-shadow:
        0 10px 18px rgba(0,0,0,.32),
        inset 0 0 0 1px rgba(255,255,255,.035);
    position: relative;
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease;
}
.overlay-grid > div[style*="aspect-ratio"]:hover,
.overlay-grid .photo-item:hover,
.layout-card:hover {
    border-color: rgba(166, 169, 177, 0.6);
    transform: translateY(-2px);
}
.overlay-grid > div[style*="aspect-ratio"]::before,
.overlay-grid .photo-item::before,
.layout-card .layout-card-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.06));
    opacity: 0.42;
}

/* Sticky toolbar in overlays */
.selection-overlay .layouts-toolbar,
.selection-overlay .photo-search-wrap,
.selection-overlay [style*="sticky"] {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 12px 14px 11px;
    border-bottom: 1px solid rgba(51, 54, 64, 0.72);
    background:
        linear-gradient(180deg, rgba(21,23,29,0.95), rgba(21,23,29,0.84)),
        linear-gradient(90deg, rgba(255,255,255,0.04), transparent 52%);
    backdrop-filter: blur(24px) saturate(1.18);
    box-shadow: 0 18px 32px rgba(0,0,0,.16);
}

/* Sticky search row */
.selection-overlay input[type="text"][placeholder*="Search"],
.selection-overlay input[type="text"][placeholder*="Enter"],
.selection-overlay input[type="text"][placeholder*="search"] {
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.12);
    padding: 8px 14px;
    color: #fafafa;
    font: 600 13px/1 'Inter','Montserrat',sans-serif;
}

/* Chip/tab buttons in overlays */
.selection-overlay button[class*="tab"],
.selection-overlay .layout-tab,
.selection-overlay .sb-tab-btn,
.selection-overlay .warp-overlay-tab {
    border: 1px solid rgba(51, 54, 64, 0.76);
    border-radius: 0;
    color: #a0a2aa;
    background: rgba(255,255,255,.05);
    font: 800 10px/1 'Inter','Montserrat',sans-serif;
    letter-spacing: .01em;
    padding: 5px 10px;
    height: 25px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: all 0.15s;
}
.selection-overlay button[class*="tab"].active,
.selection-overlay .layout-tab.active,
.selection-overlay .sb-tab-btn[style*="var(--accent)"],
.selection-overlay .warp-overlay-tab.active {
    color: #07080a;
    border-color: rgba(255,255,255,.52);
    background: linear-gradient(135deg, #ffffff, #a6a9b1);
    box-shadow: 0 10px 18px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.12);
}

.overlay-grid.photos-grid {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
}

.overlay-photo-item {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.overlay-photo-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.warp-grid .warp-btn.large {
    height: 120px;
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    color: #1e1e2d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.warp-grid .warp-btn.large:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(78, 168, 214, 0.3);
}

.warp-grid .warp-btn.large .warp-label {
    font-size: 0.9rem;
    margin-top: 10px;
    color: #666666;
    font-weight: 500;
}

.stickers-grid .sticker-item.large {
    font-size: 4rem;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
}

.stickers-grid .sticker-item.large:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.presets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
}

.template-btn.large {
    height: 150px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.template-btn.large:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-color: var(--primary);
}

.template-btn.large .tpl-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    font-size: 1rem;
    text-align: center;
}

.layouts-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
}

.layouts-toolbar {
    position: sticky;
    top: -10px;
    z-index: 8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(86, 149, 224, 0.34);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(9, 25, 48, 0.98), rgba(5, 13, 27, 0.98));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.layouts-tabs,
.layout-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.layout-tab {
    min-width: 82px;
    padding: 7px 12px;
    border: 1px solid rgba(96, 165, 250, 0.34);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.86);
    color: #dbeafe;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.layout-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(147, 197, 253, 0.72);
}

.layout-tab.active {
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    border-color: #93c5fd;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.28) inset;
}

.layout-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.72);
    color: #e5eefb;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.layout-option input {
    accent-color: #38bdf8;
}

.layouts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    align-content: start;
}

.layout-card {
    display: flex;
    flex-direction: column;
    min-height: 188px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 12px;
    overflow: hidden;
    background: #10141d;
    color: #e5eefb;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.layout-card:hover {
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.86);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.45);
}

.layout-card-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f8fafc;
}

.layout-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px 12px;
}

.layout-card-body strong {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 900;
}

.layout-card-body span {
    color: rgba(226, 232, 240, 0.68);
    font-size: 11px;
    line-height: 1.35;
}

.layout-slot-element {
    box-sizing: border-box;
}

.layout-photo-zone .pz-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(15, 23, 42, 0.62);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.layout-photo-zone .pz-upload-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    padding: 8px 12px;
    border: 1px solid rgba(37, 99, 235, 0.4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #1e3a8a;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.layout-photo-zone .pz-upload-btn:hover {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.82);
}

.layout-frame-slot {
    min-width: 12px;
    min-height: 12px;
}

.layout-guide-layer {
    position: absolute;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
}

.layout-guide-slot {
    position: absolute;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 6px;
    border: 2px dashed rgba(56, 189, 248, 0.9);
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.06);
    color: #38bdf8;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ── Layouts Sidebar Panel ────────────────────────────── */
.left-sidebar.layouts-open {
    width: 380px !important;
    flex-shrink: 0;
}

.left-sidebar.layouts-open > :not(#layoutsPanel) {
    display: none;
}

.layouts-sidebar-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.layouts-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(86, 149, 224, 0.25);
    background: linear-gradient(180deg, rgba(9, 25, 48, 0.98), rgba(5, 13, 27, 0.98));
    flex-shrink: 0;
}

.layouts-back-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid rgba(96, 165, 250, 0.34);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.86);
    color: #dbeafe;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.layouts-back-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(147, 197, 253, 0.72);
}

.layouts-sidebar-title {
    color: #ffffff;
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.layouts-sidebar-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(86, 149, 224, 0.15);
    background: rgba(9, 17, 32, 0.92);
    flex-shrink: 0;
}

.layouts-sidebar-grid {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px 14px;
    scrollbar-width: thin;
    scrollbar-color: #F3EDE2 transparent;
}

.layouts-sidebar-grid::-webkit-scrollbar {
    width: 3px;
}

.layouts-sidebar-grid::-webkit-scrollbar-thumb {
    background: #F3EDE2;
    border-radius: 3px;
}

.layouts-sidebar-separator {
    padding: 8px 4px 2px;
    border-top: 1px solid rgba(56, 189, 248, 0.18);
    margin-top: 4px;
}

.layouts-sidebar-separator:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.layouts-sidebar-separator span {
    color: rgba(186, 230, 253, 0.72);
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.layout-card-sidebar {
    min-height: 200px;
}

.layout-card-sidebar .layout-card-preview {
    aspect-ratio: 16 / 9;
    min-height: 130px;
}

.layout-card-sidebar .layout-card-body strong {
    font-size: 14px;
}

.layout-card-sidebar .layout-card-body span {
    font-size: 11px;
}

/* ── Photo Zone Action Buttons ──────────────────────────── */
.pz-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pz-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    white-space: nowrap;
    min-width: 140px;
}

.pz-action-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(56, 189, 248, 0.7);
    background: rgba(30, 58, 138, 0.55);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================
   BLACK & WHITE ANIMATED BUTTON STYLES
   ========================= */

.animated-button1 {
    position: relative;
    display: block;
    /* changed from inline-block to block for sidebar */
    padding: 15px 10px;
    /* adjusted padding */
    margin: 10px 0;
    /* adjusted margin */
    overflow: hidden;

    background: linear-gradient(-30deg, #1a1a1a 50%, #000 50%);
    color: #fff;

    font-family: 'Poppins', sans-serif;
    /* Keep app font */
    font-size: 14px;
    /* adjusted font size */
    font-weight: bold;
    letter-spacing: 1.5px;
    /* adjusted letter spacing */
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    border-radius: 6px;
    /* added border radius match app style */

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* adjusted shadow */
    transition: transform 0.2s;
}

.animated-button1:hover {
    transform: translateY(-2px);
}

/* hover overlay */
.animated-button1::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.animated-button1:hover::before {
    opacity: 0.08;
}

/* spans */
.animated-button1 span {
    position: absolute;
    display: block;
}

/* TOP */
.animated-button1 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
    animation: animateTop 2s linear infinite;
}

/* RIGHT */
.animated-button1 span:nth-child(2) {
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0), #fff);
    animation: animateRight 2s linear -1s infinite;
}

/* BOTTOM */
.animated-button1 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    animation: animateBottom 2s linear infinite;
}

/* LEFT */
.animated-button1 span:nth-child(4) {
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    animation: animateLeft 2s linear -1s infinite;
}

/* =========================
   KEYFRAMES
   ========================= */

@keyframes animateTop {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes animateRight {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(-100%);
    }
}

@keyframes animateBottom {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes animateLeft {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

/* BW BUTTON STYLE */
.bw-button {
    box-sizing: border-box;
    border: 0;
    -webkit-appearance: button;
    appearance: button;
    -webkit-tap-highlight-color: transparent;

    background: #000;
    color: #fff;
    cursor: pointer;
    border: 1px solid #fff;

    font-family: 'Bebas Neue', ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica Neue, Arial,
        sans-serif;

    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.2;

    padding: 0.8rem 1rem;
    margin: 0;
    position: relative;

    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    display: block;
    transition: all 0.2s ease;
}

.bw-button:hover {
    background: #fff;
    color: #000;
}

.bw-button *,
.bw-button:before,
.bw-button:after {
    box-sizing: border-box;
    border: 0;
}

/* REMOVE OVERLAY */
.bw-button:before {
    content: none;
}

/* TEXT */
.bw-button .text-container {
    display: block;
}

.bw-button .text {
    display: block;
    color: #fff;
    mix-blend-mode: normal;
}

/* NO HOVER ANIMATION */
.bw-button:hover {
    background: #000;
    color: #fff;
}

.bw-button:hover .text {
    animation: none;
}

/* === BW Toolbar Buttons === */
.bw-toolbar-btn {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 4px 14px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 11px;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.bw-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.bw-toolbar-btn span {
    font-size: 13px;
}

/* === Shapes Dropdown === */
.shape-option-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.05);
}

.shape-option-btn:active {
    transform: scale(0.95);
}

/* Canvas Area no scroll - consolidated into primary .canvas-area rule */

/* === New Warp Animations === */
@keyframes wp-typewriter {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.wp-typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: wp-typewriter 2s steps(20) infinite alternate;
    border-right: 2px solid currentColor;
}

@keyframes wp-glitch {

    0%,
    100% {
        transform: translate(0);
        text-shadow: none;
    }

    20% {
        transform: translate(-2px, 2px);
        text-shadow: 2px 0 #ff0000, -2px 0 #00ff00;
    }

    40% {
        transform: translate(2px, -2px);
        text-shadow: -2px 0 #0000ff, 2px 0 #ff0000;
    }

    60% {
        transform: translate(-1px, 1px);
        text-shadow: 1px 0 #00ff00, -1px 0 #0000ff;
    }

    80% {
        transform: translate(1px, -1px);
        text-shadow: -1px 0 #ff0000, 1px 0 #00ff00;
    }
}

.wp-glitch {
    animation: wp-glitch 0.5s infinite;
}

@keyframes wp-neon-flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        text-shadow: 0 0 7px currentColor, 0 0 10px currentColor, 0 0 21px currentColor;
        opacity: 1;
    }

    20%,
    24%,
    55% {
        text-shadow: none;
        opacity: 0.6;
    }
}

.wp-neon-flicker {
    animation: wp-neon-flicker 1.5s infinite;
}

@keyframes wp-rubber-band {
    0% {
        transform: scaleX(1) scaleY(1);
    }

    30% {
        transform: scaleX(1.25) scaleY(0.75);
    }

    40% {
        transform: scaleX(0.75) scaleY(1.25);
    }

    50% {
        transform: scaleX(1.15) scaleY(0.85);
    }

    65% {
        transform: scaleX(0.95) scaleY(1.05);
    }

    75% {
        transform: scaleX(1.05) scaleY(0.95);
    }

    100% {
        transform: scaleX(1) scaleY(1);
    }
}

.wp-rubber-band {
    animation: wp-rubber-band 1s infinite;
}

@keyframes wp-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.wp-spin {
    animation: wp-spin 3s linear infinite;
}

@keyframes wp-fade-in {

    0%,
    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.wp-fade-in {
    animation: wp-fade-in 2s ease infinite;
}

@keyframes wp-slide-up {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }

    50% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-10px);
        opacity: 0;
    }
}

.wp-slide-up {
    animation: wp-slide-up 2s ease infinite;
}

@keyframes wp-zoom-bounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

.wp-zoom-bounce {
    animation: wp-zoom-bounce 1s ease infinite;
}

/* ============================
   RAINBOW GLOW BUTTON
   ============================ */
.rainbow-glow-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    background: #1a1a2e;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    letter-spacing: 0.5px;
    box-shadow: 0 0 15px rgba(255, 0, 128, 0.3), 0 0 30px rgba(0, 200, 255, 0.15);
    animation: rainbowGlow 3s linear infinite;
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 1;
}

.rainbow-glow-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(255, 0, 128, 0.5), 0 0 40px rgba(0, 200, 255, 0.3), 0 0 60px rgba(128, 0, 255, 0.2);
}

@keyframes rainbowGlow {
    0% {
        box-shadow: 0 0 12px rgba(255, 0, 0, 0.4), 0 0 25px rgba(255, 0, 0, 0.15);
    }

    16% {
        box-shadow: 0 0 12px rgba(255, 165, 0, 0.4), 0 0 25px rgba(255, 165, 0, 0.15);
    }

    33% {
        box-shadow: 0 0 12px rgba(255, 255, 0, 0.4), 0 0 25px rgba(255, 255, 0, 0.15);
    }

    50% {
        box-shadow: 0 0 12px rgba(0, 200, 80, 0.4), 0 0 25px rgba(0, 200, 80, 0.15);
    }

    66% {
        box-shadow: 0 0 12px rgba(0, 150, 255, 0.4), 0 0 25px rgba(0, 150, 255, 0.15);
    }

    83% {
        box-shadow: 0 0 12px rgba(180, 0, 255, 0.4), 0 0 25px rgba(180, 0, 255, 0.15);
    }

    100% {
        box-shadow: 0 0 12px rgba(255, 0, 0, 0.4), 0 0 25px rgba(255, 0, 0, 0.15);
    }
}

/* Rainbow animated border spans */
.rainbow-glow-btn span {
    position: absolute;
    display: block;
}

.rainbow-glow-btn span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00cc55, #0088ff, #aa00ff, #ff0088);
    background-size: 200% 100%;
    animation: animateTop 2s linear infinite, rainbowShift 3s linear infinite;
}

.rainbow-glow-btn span:nth-child(2) {
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, #ff0000, #ff8800, #ffff00, #00cc55, #0088ff, #aa00ff, #ff0088);
    background-size: 100% 200%;
    animation: animateRight 2s linear -1s infinite, rainbowShiftV 3s linear infinite;
}

.rainbow-glow-btn span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #ff0088, #aa00ff, #0088ff, #00cc55, #ffff00, #ff8800, #ff0000);
    background-size: 200% 100%;
    animation: animateBottom 2s linear infinite, rainbowShift 3s linear -1.5s infinite;
}

.rainbow-glow-btn span:nth-child(4) {
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, #ff0088, #aa00ff, #0088ff, #00cc55, #ffff00, #ff8800, #ff0000);
    background-size: 100% 200%;
    animation: animateLeft 2s linear -1s infinite, rainbowShiftV 3s linear -1.5s infinite;
}

@keyframes rainbowShift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@keyframes rainbowShiftV {
    0% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 50% 200%;
    }
}

/* ---- CRITICAL UI FIX FOR WHITE-ON-WHITE ICONS ---- */
.toolbar-btn:hover,
.toolbar-btn.active,
.add-btn:hover,
.icon-item button:hover,
.bg-row button:hover,
.gradient-row button:hover,
.canvas-toolbar button:hover,
.canvas-toolbar-float button:hover,
.canvas-toolbar-float button.active {
    color: var(--bg-dark) !important;
}

/* Invert nested SVG images when button is hovered or active */
.toolbar-btn:hover img,
.toolbar-btn.active img,
.add-btn:hover img,
.icon-item button:hover img,
.canvas-toolbar button:hover img,
.canvas-toolbar-float button:hover img,
.canvas-toolbar-float button.active img {
    filter: invert(1) !important;
}

/* ===== SHAPED PHOTO ZONE PICKER ===== */

.pzsp-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.pzsp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 6px 2px;
    border-radius: 8px;
    transition: background 0.15s;
}

.pzsp-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.pzsp-preview {
    width: 40px;
    height: 40px;
    transition: transform 0.15s;
}

.pzsp-item:hover .pzsp-preview {
    transform: scale(1.15);
}

.pzsp-item span {
    font-size: 8px;
    color: #aaa;
    text-align: center;
    white-space: nowrap;
}

/* Shaped photo zone on canvas */
.shaped-photo-zone {
    transition: box-shadow 0.2s;
}

.shaped-photo-zone:hover {
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.4);
}

/* Photo zone dashed borders: visible only when selected or hovered */
.photo-zone {
    border-color: transparent !important;
}

.photo-zone:hover {
    border-color: rgba(153, 153, 153, 0.7) !important;
}

.shaped-photo-zone:not(.selected) .pz-inner:not([data-has-image="true"]) {
    border-color: transparent !important;
    background: rgba(200, 200, 200, 0.05) !important;
}

/* ---------------------------------------------------- */

/* ===================================================
   EFFECTS PANEL (left sidebar)
   =================================================== */
#effectsPanel input[type="range"] {
    height: 3px;
    accent-color: #2196f3;
    cursor: pointer;
}

#effectsPanel input[type="color"] {
    border-radius: 4px;
    border: 1px solid #333;
    cursor: pointer;
    background: none;
    padding: 1px;
}

.retro-preset-opt:hover {
    border-color: #2196f3 !important;
}

.ep-pm-btn:hover {
    color: #fff !important;
}

.filter-opt:hover {
    border-color: rgba(33,150,243,0.5) !important;
}

/* =====================================================
   MENU BAR — pasek menu (plany 01–05)
   ===================================================== */

/* Body: kolumnowy flex, żeby menu-bar było na górze */
body {
    display: flex;
    flex-direction: column;
}

/* App-container zajmuje resztę wysokości */
.app-container {
    flex: 1;
    min-height: 0;
    height: auto !important;
}

/* Pasek menu — cały komponent */
menu-bar {
    flex-shrink: 0;
    display: block;
    position: relative;
    z-index: 99999;
}

#menuBar {
    display: flex;
    align-items: center;
    height: 28px;
    background: #111;
    border-bottom: 1px solid #222;
    user-select: none;
    flex-shrink: 0;
}

.menu-cat {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    font-size: 13px;
    font-family: 'Inter', 'Poppins', sans-serif;
    color: #bbb;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}

.menu-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 14px 0 10px;
    margin-right: 4px;
}
.menu-brand {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
}

.menu-cat:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.menu-cat.active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Dropdown */
#menuDropdown {
    position: fixed;
    background: #1a1a1a;
    border: 1px solid #2d2d2d;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    min-width: 253px;
    z-index: 99999;
    padding: 4px 0;
    font-family: 'Inter', 'Poppins', sans-serif;
}

.menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 10px;
    cursor: pointer;
    transition: all 0.1s ease;
    min-height: 34px;
}

.menu-row.disabled {
    opacity: 0.25;
    filter: grayscale(1);
    pointer-events: none;
    cursor: default;
}

.menu-check {
    width: 16px;
    font-size: 11px;
    color: #34D399;
    flex-shrink: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.menu-row:hover:not(.disabled) .menu-icon {
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(255,255,255,0.4));
    transform: scale(1.15) rotate(2deg);
}

.menu-label {
    flex: 1;
    font-size: 13px;
    color: #e5e7eb;
    font-weight: 500;
}

.menu-row:hover:not(.disabled) .menu-label {
    color: #fff;
    text-shadow: 0 0 5px rgba(255,255,255,0.2);
}

.menu-shortcut {
    font-size: 12px;
    color: #555;
    margin-left: auto;
    padding-left: 16px;
    white-space: nowrap;
}

.menu-separator {
    height: 1px;
    background: #2a2a2a;
    margin: 3px 0;
}

/* Siatka canvas (toggleGrid) */
#canvasContainer.grid-visible::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 1;
}

/* Linijki */
.ruler-h {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
}

.ruler-v {
    position: absolute;
    top: 0;
    left: -20px;
    width: 20px;
    bottom: 0;
    background: #1a1a1a;
    border-right: 1px solid #333;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
}

.ruler-tick {
    position: absolute;
    background: #555;
}

.ruler-h .ruler-tick {
    width: 1px;
    bottom: 0;
}

.ruler-v .ruler-tick {
    height: 1px;
    right: 0;
}

.ruler-label {
    position: absolute;
    font-size: 8px;
    color: #666;
    font-family: monospace;
}

/* ========================================
   RIBBON TOOLBAR
   ======================================== */

.ribbon-tab-bar {
    display: flex;
    gap: 0;
    padding: 0 8px;
    background: #0a0a0a;
    border-bottom: 1px solid #222;
}

.ribbon-tab {
    padding: 6px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #888;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Poppins', sans-serif;
}

.ribbon-tab:hover {
    color: #ccc;
    background: rgba(255, 255, 255, 0.04);
}

.ribbon-tab.active {
    color: #fff;
    border-bottom-color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Ribbon Panels */
#topToolbar .ribbon-panel {
    display: none !important;
    flex-direction: row;
    align-items: stretch;
    padding: 6px 10px;
    gap: 0;
    background: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid #222;
    min-height: 52px;
    flex-wrap: wrap; /* Changed from nowrap to prevent overlap */
}

#topToolbar .ribbon-panel.active {
    display: flex !important;
}

/* Ribbon Sections (groups with label at bottom) */
.ribbon-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 10px;
    min-width: 0;
}

.ribbon-section-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    flex: 1;
    flex-wrap: wrap; /* Allow content inside section to wrap if needed */
}

.ribbon-section-label {
    font-size: 11px;
    color: #b8b8c0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 3px;
    border-top: 1px solid #1a1a1a;
    margin-top: 4px;
    font-weight: 500;
}

/* Properties panel sub-tabs */
.ribbon-subtab-bar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #222;
    padding: 2px 4px;
    gap: 2px;
    align-self: stretch;
    justify-content: center;
}

.ribbon-subtab {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #888;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
}

.ribbon-subtab:hover {
    color: #ccc;
    background: rgba(255,255,255,0.05);
}

.ribbon-subtab.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

.ribbon-subpanel {
    display: none;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
}

.ribbon-subpanel.active {
    display: flex;
}

/* Narrow section (e.g. single icon button) */
.ribbon-section-narrow {
    padding: 0 6px;
}

/* Ribbon Icon Button (e.g. Add Text) */
.ribbon-icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s;
}

/* Explicit style for replace image icon button */
.replace-image-btn {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}
.replace-image-btn svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Replace Image Dropdown Styles */
/* Replace Image Dropdown Styles - Premium Dark Theme & Glassmorphism */
#_replaceImgDropdown {
    background: rgba(30, 30, 35, 0.9) !important;
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: dropdownFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.replace-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    background: transparent !important;
    border: none !important;
    color: #eeeeee !important;
    text-align: left !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-family: inherit !important;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s, transform 0.15s !important;
}

.replace-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #00bcd4 !important; /* Neon cyan active text */
}

.replace-dropdown-item:active {
    transform: scale(0.97) !important;
}

.replace-dropdown-item span.icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #00bcd4; /* Neon cyan icons */
}

.ribbon-icon-btn:hover {
    background: #333;
    color: #fff;
    border-color: #444;
    transform: scale(1.05);
}

/* Mini separator inside a section (thin dot) */
.ribbon-mini-sep {
    width: 1px;
    height: 18px;
    background: #333;
    flex-shrink: 0;
    margin: 0 2px;
}

/* Effect buttons in Effects tab */
.ribbon-effect-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(78,168,214,0.1));
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 8px;
    color: #ccc;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
}

.ribbon-effect-btn:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.35), rgba(78,168,214,0.25));
    border-color: #2196f3;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}

.ribbon-effect-btn svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.ribbon-effect-btn:hover svg {
    opacity: 1;
}

/* Compact font dropdown (max 10 chars visible) */
.ribbon-font-compact {
    min-width: 110px !important;
    max-width: 110px !important;
    width: 110px !important;
    font-size: 11px !important;
    padding: 0 4px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Preview strip for creative texts in Effects tab */
.ribbon-preview-strip {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Carousel row: [‹] [4 cards] [›] */
.ribbon-carousel-row {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;
    overflow: hidden;
}

.ribbon-ct-nav-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.13);
    color: #aaa;
    width: 14px;
    height: 42px;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.15s;
}
.ribbon-ct-nav-btn:hover:not(:disabled) {
    border-color: #2196f3;
    color: #fff;
    background: rgba(99,102,241,0.18);
}
.ribbon-ct-nav-btn:disabled {
    opacity: 0.2;
    cursor: default;
}

/* 4-item single row */
.ribbon-ct-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.ribbon-ct-preview {
    padding: 4px 3px;
    border-radius: 5px;
    border: 1px solid rgba(15,23,42,0.12);
    background: #ffffff;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s;
    height: 42px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    position: relative;
}
.ribbon-ct-preview:hover {
    border-color: #2196f3;
    box-shadow: 0 0 0 1px #2196f3;
    transform: scale(1.04);
}

.ribbon-ct-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1;
}

/* Ribbon Divider (vertical line between sections) */
.ribbon-divider {
    width: 1px;
    background: #222;
    align-self: stretch;
    margin: 2px 0;
    flex-shrink: 0;
}

/* Compact controls for Img Properties tab */
.ribbon-slider-compact {
    height: 14px !important;
    margin: 0 !important;
}

.ribbon-slider-compact::-webkit-slider-runnable-track {
    height: 3px !important;
}

.ribbon-slider-compact::-webkit-slider-thumb {
    width: 10px !important;
    height: 10px !important;
    margin-top: -3.5px !important;
}

.toolbar-input-small {
    padding: 2px 4px !important;
    font-size: 10px !important;
    height: 18px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: 3px !important;
    text-align: center;
}

.toolbar-input-small:focus {
    border-color: #2196f3 !important;
    background: rgba(255,255,255,0.1) !important;
    outline: none;
}

/* Undo/Redo disabled state */
#undo:disabled, #redo:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Keyboard shortcuts modal kbd style */
#shortcutsModal kbd {
    display: inline-block;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: monospace;
    color: #ddd;
}


.ribbon-effect-inactive,
.ribbon-section .toolbar-btn:not(.active),
.toolbar-color:not(.ribbon-color-active) {
    opacity: 0.9 !important;
    filter: saturate(0.9) !important;
    transition: all 0.2s ease;
}

.toolbar-color.fd-color-trigger:not(.ribbon-color-active) {
    background: var(--fd-color-value) !important;
}

/* "Burning white" for B/I/U */
.ribbon-section .toolbar-btn.active.ribbon-text-active {
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    filter: saturate(1.2) !important;
}

/* Glowing border for color icons */
.toolbar-color.ribbon-color-active {
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important;
    outline: none !important;
    opacity: 1 !important;
}



.ribbon-effect-active {
    opacity: 1 !important;
    filter: saturate(1.2) !important;
    transition: all 0.2s ease;
}



/* Quick Text Tools Sidebar */
.quick-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.quick-tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    aspect-ratio: 1 / 1;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-sizing: border-box;
    overflow: hidden;
}


.quick-tool-item:hover {
    background: rgba(78, 168, 214, 0.15);
    border-color: rgba(78, 168, 214, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.quick-tool-item:active {
    transform: translateY(0);
}

.quick-tool-item.effect-active {
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

.quick-tool-item.effect-active .quick-tool-label {
    color: rgba(255, 255, 255, 0.9);
}

.quick-tool-icon {
    font-size: 20px;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}


.quick-tool-label {
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}


.quick-tool-item:hover .quick-tool-label {
    color: #fff;
}



/* Creative Texts Inline Section */
#creativeTextsInline::-webkit-scrollbar {
    width: 4px;
}
#creativeTextsInline::-webkit-scrollbar-thumb {
    background: #F3EDE2;
    border-radius: 4px;
}
#creativeTextsInline::-webkit-scrollbar-track {
    background: transparent;
}
.creative-inline-item:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Creative Texts Enhancements */
.creative-texts-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg-card);
}

.creative-nav-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar for clean look */
}

.creative-nav-sticky::-webkit-scrollbar {
    display: none;
}

.creative-tab-btn {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.creative-tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(-1px);
}

.creative-tab-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(78, 168, 214, 0.3);
}

.creative-sections-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    scroll-behavior: smooth;
}

.creative-cat-section {
    margin-bottom: 30px;
}

.creative-cat-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.creative-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.creative-text-item {
    background: #ffffff; /* Default for BW presets */
    border-radius: 12px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.creative-text-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: var(--accent);
    z-index: 10;
}

.creative-text-item .text-preview {
    width: 100%;
    text-align: center;
    pointer-events: none;
    line-height: 1.2;
    word-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; /* Scaled down for grid */
}

/* Specific styling for colored bg items is handled via JS inline styles */

/* === Creative Text Renderer — uniform preview scaling ===
   The preview node is absolutely centered in its parent card so the natural
   layout box does not push siblings around. fitPreviewNode() then applies
   transform: translate(-50%, -50%) scale(s) where s fits the card. */
.creative-text-renderer-preview {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    display: inline-block;
    max-width: none;
    width: auto;
    pointer-events: none;
    text-align: center;
}
.creative-text-renderer-preview.creative-text-renderer-modular {
    /* Modular previews use a 2-layer structure: the outer wrapper carries the
       .bg-N class and FILLS the card (so the bg pattern is the card's background).
       The inner .creative-text-renderer-modular-text carries the .type-N class
       and gets scaled-down by fitPreviewNode() to fit nicely inside. */
    position: absolute;
    inset: 0;
    left: 0; top: 0;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    overflow: hidden;
    display: block;
    text-align: left;
}
.creative-text-renderer-modular-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    display: inline-block;
    width: max-content;
    max-width: none;
    pointer-events: none;
}
.creative-text-renderer-preview > * {
    pointer-events: none;
}

/* === Modular type-N on canvas: em-relative cascade ===
   Source .type-N rules use font-size: clamp(rem, vw, rem) which is
   viewport-bound and produces 80–160px text regardless of element context.
   On canvas we want the user's font-size to drive the cascade so resizing
   the text element actually scales the modular layout. We override font-size
   to em-multipliers ONLY for elements that have .text-element (i.e. live on
   canvas). Preview cards never get .text-element, so their original clamp()
   look is preserved. */
.text-element[class*="type-"] > .text-content { font-size: 1em; line-height: inherit; }
.text-element[class*="type-"] > .text-content > strong { font-size: 2.6em !important; }
.text-element[class*="type-"] > .text-content > span { font-size: 1.5em !important; }
.text-element[class*="type-"] > .text-content > em { font-size: 0.7em !important; }
/* Some type-N rules use very large rem values; clamp resulting renders so
   even direct .type-N rules below match the em cascade we set above. */
.text-element[class*="type-"][class*="bg-"] {
    width: fit-content !important;
    height: fit-content !important;
    max-width: 95%;
}

/* All Presets overlay button */
.creative-text-btn {
    position: relative;
    height: 140px;
    width: 100%;
    border-radius: 12px;
    border: 2px solid transparent;
    background: #ffffff;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    padding: 0;
}
.creative-text-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
    border-color: var(--accent);
    z-index: 5;
}
.creative-text-btn.has-dark-bg {
    background: var(--ct-bg, #1a1a1a);
}
.creative-text-btn.has-light-bg {
    background: var(--ct-bg, #ffffff);
}

/* --- Rainbow Color Button --- */
.bg-color-rainbow {
    border-radius: 50% !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.bg-color-rainbow:hover {
    border: none !important;
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(255,255,255,0.35) !important;
}

/* --- Custom Tooltip --- */
#customTooltip {
    position: fixed;
    z-index: 999999;
    background: #0d47a1;
    color: #ffffff;
    font-family: monospace;
    font-size: 15px;
    padding: 8px 18px;
    border-radius: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
    max-width: 350px;
    border: 1px solid rgba(100,180,255,0.25);
    box-sizing: border-box;
    line-height: 1.4;
}

/* Lazy-loading shimmering placeholder */
@keyframes shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}
.sidebar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #111 8%, #222 18%, #111 33%);
    background-size: 800px 104px;
    animation: shimmer 1.5s linear infinite forwards;
    contain: strict;
    transform: translate3d(0,0,0);
}
/* E-Mail Marketing Styles */
.format-btn.fmt-email:hover {
    border-color: #6c5ce7;
    background: rgba(108, 92, 231, 0.05);
}

.email-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-action-btn.primary {
    background: #6c5ce7;
    color: #fff;
}

.email-action-btn.primary:hover {
    background: #5b4bc4;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
}

.email-action-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.email-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.email-export-modal pre::-webkit-scrollbar {
    height: 4px;
}

.email-export-modal pre::-webkit-scrollbar-thumb {
    background: #F3EDE2;
    border-radius: 2px;
}

.ribbon-warp-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.ribbon-warp-tab {
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    border: 1px solid rgba(87, 123, 176, 0.34);
    background: rgba(14, 23, 36, 0.82);
    color: #dbe8f8;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.ribbon-warp-tab.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.88));
    border-color: rgba(167, 212, 255, 0.82);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.15);
}

.ribbon-warp-preview-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 4px 3px;
}

.ribbon-warp-preview-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    overflow: visible;
}

.ribbon-warp-label {
    display: block;
    font-size: 8px;
    line-height: 1.1;
    color: #6b7280;
    font-weight: 700;
    text-align: center;
}

.text-warp-preview-node {
    display: block;
    width: 100%;
    min-height: 24px;
    overflow: hidden;
}

.text-warp-preview-viewport {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.text-warp-preview-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    overflow: visible;
}

.text-warp-preview-sample {
    display: inline-block;
    text-align: center;
    white-space: pre;
    max-width: 100%;
}

.text-warp-preview-sample .tw-char {
    will-change: transform;
}

.warp-overlay-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 4px 14px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(11,22,39,0.98) 0%, rgba(11,22,39,0.92) 100%);
    border-bottom: 1px solid rgba(71,132,196,0.35);
}

.warp-overlay-toprow,
.warp-overlay-tabs,
.warp-overlay-category-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.warp-overlay-toprow {
    justify-content: space-between;
}

.warp-overlay-tabs,
.warp-overlay-category-tabs {
    flex-wrap: wrap;
}

.warp-overlay-tab,
.warp-overlay-category-tab,
.warp-overlay-stop {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(83, 116, 171, 0.35);
    background: rgba(11, 21, 34, 0.78);
    color: #d9e5f3;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.warp-overlay-category-tab {
    height: 28px;
    font-size: 10px;
    padding: 0 10px;
}

.warp-overlay-tab.active,
.warp-overlay-category-tab.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(99, 102, 241, 0.9));
    border-color: rgba(191, 219, 254, 0.82);
    color: #fff;
}

.warp-overlay-stop {
    width: 32px;
    min-width: 32px;
    padding: 0;
    justify-content: center;
    display: inline-flex;
    align-items: center;
}

.warp-overlay-stop svg {
    display: block;
}

.warp-overlay-tab:hover,
.warp-overlay-category-tab:hover,
.warp-overlay-stop:hover {
    border-color: rgba(147, 197, 253, 0.82);
}

.warp-overlay-section {
    margin-bottom: 16px;
}

.warp-overlay-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.72);
    padding: 8px 0 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 8px;
}

.warp-overlay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 10px;
}

.warp-overlay-card {
    min-height: 124px;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1px solid rgba(83, 116, 171, 0.26);
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(244,247,251,0.96) 100%);
    color: #111827;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.warp-overlay-card:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.7);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

.warp-overlay-card-preview {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 4px 6px;
}

.warp-overlay-card-label {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    color: #334155;
    text-align: center;
}

.tw-anim-typewriter {
    display: inline-block;
}

@keyframes twWaveChar {
    from { transform: translateY(-4px); }
    to { transform: translateY(4px); }
}

@keyframes twPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(var(--tw-scale, 1.1)); }
}

@keyframes twHeartBeat {
    0%, 100% { transform: scale(1); }
    20% { transform: scale(1.08); }
    40% { transform: scale(1.16); }
    60% { transform: scale(1.04); }
}

@keyframes twBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(var(--tw-shift-y, -8px)); }
}

@keyframes twJiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}

@keyframes twSpring {
    0%, 100% { transform: scale(1); }
    20% { transform: scale(1.15, 0.9); }
    60% { transform: scale(0.94, 1.05); }
}

@keyframes twZoomBounce {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(var(--tw-scale, 1.16)); }
    60% { transform: scale(0.94); }
}

@keyframes twGlitch {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(1px, -1px); }
    40% { transform: translate(-2px, 1px); }
    60% { transform: translate(2px, 1px); }
    80% { transform: translate(-1px, -1px); }
}

@keyframes twShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(calc(var(--tw-shake-x, 2px) * -1)) rotate(calc(var(--tw-rotate, 1deg) * -1)); }
    50% { transform: translateX(var(--tw-shake-x, 2px)) rotate(var(--tw-rotate, 1deg)); }
    75% { transform: translateX(calc(var(--tw-shake-x, 2px) * -1)) rotate(calc(var(--tw-rotate, 1deg) * -1)); }
}

@keyframes twScan {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.75; filter: brightness(1.2); }
}

@keyframes twJitter {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(calc(var(--tw-shake-x, 1.5px) * -1)); }
    40% { transform: translateX(var(--tw-shake-x, 1.5px)); }
    60% { transform: translateX(calc(var(--tw-shake-x, 1.5px) * -0.5)); }
    80% { transform: translateX(calc(var(--tw-shake-x, 1.5px) * 0.5)); }
}

@keyframes twBlink {
    0%, 45%, 100% { opacity: 1; }
    50%, 55% { opacity: 0; }
}

@keyframes twSlice {
    0%, 100% { transform: translateY(0); clip-path: inset(0 0 0 0); }
    50% { transform: translateY(-2px); clip-path: inset(10% 0 35% 0); }
}

@keyframes twMatrix {
    0%, 100% { opacity: 1; text-shadow: 0 0 8px currentColor; }
    50% { opacity: 0.82; text-shadow: 0 0 16px currentColor; }
}

@keyframes twNeonFlicker {
    0%, 18%, 22%, 62%, 100% { opacity: 1; }
    20%, 24%, 58% { opacity: 0.35; }
}

@keyframes twGlowPulse {
    0%, 100% { filter: saturate(1); }
    50% { filter: saturate(1.35) brightness(1.12); }
}

@keyframes twHalo {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: 0.9; }
}

@keyframes twLaser {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes twShimmer {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

@keyframes twSpark {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.08); filter: brightness(1.35); }
}

@keyframes twFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes twFlag {
    0%, 100% { transform: skewX(0deg) rotate(0deg); }
    25% { transform: skewX(8deg) rotate(1deg); }
    75% { transform: skewX(-8deg) rotate(-1deg); }
}

@keyframes twFadeSoft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@keyframes twRise {
    0%, 100% { transform: translateY(var(--tw-shift-y, 10px)); opacity: 0.55; }
    50% { transform: translateY(0); opacity: 1; }
}

@keyframes twDrop {
    0%, 100% { transform: translateY(calc(var(--tw-shift-y, 10px) * -1)); opacity: 0.55; }
    50% { transform: translateY(0); opacity: 1; }
}

@keyframes twSlideLeft {
    0%, 100% { transform: translateX(var(--tw-shift-x, 16px)); opacity: 0.55; }
    50% { transform: translateX(0); opacity: 1; }
}

@keyframes twSlideRight {
    0%, 100% { transform: translateX(calc(var(--tw-shift-x, 16px) * -1)); opacity: 0.55; }
    50% { transform: translateX(0); opacity: 1; }
}

@keyframes twRevealUp {
    0%, 100% { clip-path: inset(100% 0 0 0); opacity: 0.5; }
    50% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes twRevealDown {
    0%, 100% { clip-path: inset(0 0 100% 0); opacity: 0.5; }
    50% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes twTypewriter {
    0%, 100% { width: 0; }
    45%, 80% { width: 100%; }
}

@keyframes twSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes twWobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(var(--tw-rotate, 4deg)); }
    75% { transform: rotate(calc(var(--tw-rotate, 4deg) * -1)); }
}

@keyframes twSwing {
    0%, 100% { transform: rotate(0deg); transform-origin: top center; }
    25% { transform: rotate(var(--tw-rotate, 7deg)); transform-origin: top center; }
    75% { transform: rotate(calc(var(--tw-rotate, 7deg) * -1)); transform-origin: top center; }
}

@keyframes twPendulum {
    0%, 100% { transform: rotate(calc(var(--tw-rotate, 9deg) * -1)); transform-origin: top center; }
    50% { transform: rotate(var(--tw-rotate, 9deg)); transform-origin: top center; }
}

@keyframes twOrbit {
    0% { transform: translate(0, 0); }
    25% { transform: translate(var(--tw-shift-x, 6px), 0); }
    50% { transform: translate(var(--tw-shift-x, 6px), var(--tw-shift-y, 8px)); }
    75% { transform: translate(0, var(--tw-shift-y, 8px)); }
    100% { transform: translate(0, 0); }
}

@keyframes twTornado {
    0% { transform: rotate(0deg) translateY(0); }
    50% { transform: rotate(180deg) translateY(var(--tw-shift-y, 8px)); }
    100% { transform: rotate(360deg) translateY(0); }
}

@keyframes twRubberBand {
    0%, 100% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.2, 0.8, 1); }
    40% { transform: scale3d(0.8, 1.2, 1); }
    60% { transform: scale3d(1.08, 0.94, 1); }
}

@keyframes twFloatSoft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(calc(var(--tw-shift-y, 6px) * -1)); }
}

@keyframes twFloatWide {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(calc(var(--tw-shift-x, 6px) * -1), calc(var(--tw-shift-y, 10px) * -0.45)); }
    75% { transform: translate(var(--tw-shift-x, 6px), calc(var(--tw-shift-y, 10px) * -1)); }
}

@keyframes twDriftLeft {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(calc(var(--tw-shift-x, 8px) * -1)); opacity: 0.88; }
}

@keyframes twDriftRight {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(var(--tw-shift-x, 8px)); opacity: 0.88; }
}

@keyframes twHoverArc {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(calc(var(--tw-shift-y, 7px) * -1)) rotate(var(--tw-rotate, 4deg)); }
}

@keyframes twBobbleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(calc(var(--tw-shift-y, 8px) * -0.6)) rotate(calc(var(--tw-rotate, 3deg) * -1)); }
    75% { transform: translateY(calc(var(--tw-shift-y, 8px) * -1)) rotate(var(--tw-rotate, 3deg)); }
}

@keyframes twFeatherDrift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(calc(var(--tw-shift-x, 5px) * -1), calc(var(--tw-shift-y, 6px) * -0.5)) rotate(calc(var(--tw-rotate, 2deg) * -1)); }
    50% { transform: translate(0, calc(var(--tw-shift-y, 6px) * -1)) rotate(0deg); }
    75% { transform: translate(var(--tw-shift-x, 5px), calc(var(--tw-shift-y, 6px) * -0.25)) rotate(var(--tw-rotate, 2deg)); }
}

@keyframes twBuoyPop {
    0%, 100% { transform: translateY(0) scale(1); }
    40% { transform: translateY(calc(var(--tw-shift-y, 8px) * -1)) scale(var(--tw-scale, 1.06)); }
    60% { transform: translateY(calc(var(--tw-shift-y, 8px) * -0.45)) scale(0.98); }
}

@keyframes twCloudGlide {
    0%, 100% { transform: translateX(0); opacity: 0.92; }
    50% { transform: translateX(var(--tw-shift-x, 12px)); opacity: 1; }
}

@keyframes twSignalFlicker {
    0%, 100% { opacity: 1; }
    8% { opacity: 0.55; }
    12% { opacity: 1; }
    52% { opacity: 0.35; }
    58% { opacity: 1; }
}

@keyframes twRadarSweep {
    0%, 100% { filter: brightness(1) saturate(1); transform: scale(1); }
    50% { filter: brightness(1.28) saturate(1.25); transform: scale(1.03); }
}

@keyframes twPulseLine {
    0%, 100% { letter-spacing: 0; transform: scaleX(1); }
    50% { letter-spacing: 0.08em; transform: scaleX(1.06); }
}

@keyframes twChromaShift {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}

@keyframes twAlertFlash {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.08); }
}

@keyframes twStaticBuzz {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(calc(var(--tw-shake-x, 1.2px) * -1)); }
    40% { transform: translateX(var(--tw-shake-x, 1.2px)); }
    60% { transform: translateY(1px); }
    80% { transform: translateY(-1px); }
}

@keyframes twDecode {
    0%, 100% { letter-spacing: 0; opacity: 1; }
    35% { letter-spacing: 0.14em; opacity: 0.7; }
    70% { letter-spacing: -0.02em; opacity: 1; }
}

@keyframes twBeacon {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.82; filter: brightness(1.35); }
}

@keyframes twAccordion {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(var(--tw-scale, 1.06)); }
}

@keyframes twAccordionWide {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(var(--tw-scale, 1.12)) scaleY(0.94); }
}

@keyframes twStretchPop {
    0%, 100% { transform: scale(1, 1); }
    40% { transform: scale(var(--tw-scale, 1.14), 0.92); }
    60% { transform: scale(0.98, 1.05); }
}

@keyframes twSqueezePop {
    0%, 100% { transform: scale(1, 1); }
    40% { transform: scale(0.9, var(--tw-scale, 1.14)); }
    60% { transform: scale(1.03, 0.97); }
}

@keyframes twSlinky {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(calc(var(--tw-shift-y, 9px) * -1)) scaleY(1.08); }
}

@keyframes twSlinkyTall {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(calc(var(--tw-shift-y, 12px) * -1)) scaleY(1.14); }
}

@keyframes twElasticSkew {
    0%, 100% { transform: skewX(0deg); }
    40% { transform: skewX(var(--tw-rotate, 7deg)); }
    60% { transform: skewX(calc(var(--tw-rotate, 7deg) * -0.5)); }
}

@keyframes twElasticSkewWide {
    0%, 100% { transform: skewX(0deg) scaleX(1); }
    40% { transform: skewX(var(--tw-rotate, 10deg)) scaleX(1.08); }
    60% { transform: skewX(calc(var(--tw-rotate, 10deg) * -0.45)) scaleX(0.96); }
}

@keyframes twBreatheWide {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    50% { transform: scaleX(var(--tw-scale, 1.08)); opacity: 0.92; }
}

@keyframes twSnapback {
    0%, 100% { transform: scale(1); }
}

/* --- Creative Social Media Presets --- */

/* --- Gazeta z innej planety --- */
.type-2 { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; max-width: 460px; }
.type-2 span { display: inline-block; padding: .18em .32em; color: #f8f3df; background: #111; font-size: clamp(1.8rem, 4.5vw, 4.2rem); line-height: .9; box-shadow: 6px 6px 0 rgba(255,59,119,.8); }
.type-2 span:nth-child(1) { font-family: 'UnifrakturMaguntia', cursive; transform: rotate(-4deg); background: #ff3b77; }
.type-2 span:nth-child(2) { font-family: 'Staatliches', sans-serif; transform: rotate(2deg); }
.type-2 span:nth-child(3) { font-family: 'Special Elite', cursive; transform: rotate(-1deg); background: #2b225f; }
.type-2 span:nth-child(4) { font-family: 'Titan One', cursive; transform: rotate(3deg); background: #007a6d; }
.bg-2 { background: linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px), linear-gradient(#f3e5b5, #f8edc8); background-size: 18px 100%, auto; width: 100%; height: 100%; }

/* --- Płynny metal --- */
.type-7 { font-family: 'Bebas Neue', sans-serif; text-align: center; line-height: .78; }
.type-7 span { display: block; font-size: clamp(2.7rem, 6vw, 5rem); color: #d7dde8; letter-spacing: .08em; }
.type-7 strong { display: block; font-size: clamp(4.5rem, 11vw, 9rem); background: linear-gradient(90deg, #ffffff, #7f8999 20%, #ffffff 43%, #2e3440 60%, #f5f7fb 78%, #6b7280); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.5); filter: drop-shadow(0 18px 10px rgba(0,0,0,.5)); }
.type-7 em { color: #aeb8c7; font-style: normal; letter-spacing: .15em; text-transform: uppercase; }
.bg-7 { background: radial-gradient(circle at 50% 0, #3a4250, transparent 35%), linear-gradient(145deg, #050608, #171b21 58%, #050608); width: 100%; height: 100%; }

/* --- Nie dotykać rutyny --- */
.type-9 { font-family: 'Permanent Marker', cursive; text-align: center; color: #121212; line-height: .85; transform: rotate(-3deg); }
.type-9 span { display: inline-block; font-size: 1.35rem; background: #fff; padding: .2em .55em; border: 4px solid #121212; }
.type-9 strong { display: block; font-size: clamp(3.8rem, 9vw, 8rem); color: #ffef00; -webkit-text-stroke: 3px #121212; text-shadow: 8px 8px 0 #ff2e63; }
.type-9 em { display: inline-block; font-style: normal; font-size: 1.4rem; color: #fff; background: #121212; padding: .1em .55em; }
.bg-9 { background: radial-gradient(circle, rgba(0,0,0,.16) 0 2px, transparent 3px), #ffef00; background-size: 22px 22px; width: 100%; height: 100%; }

/* --- Cisza jest luksusem --- */
.type-11 { font-family: 'Cormorant Garamond', serif; color: #efe5d2; line-height: .92; }
.type-11 span { display: block; font-size: clamp(4rem, 9vw, 8rem); font-weight: 300; letter-spacing: -.08em; }
.type-11 em { display: block; margin-left: 2.2rem; font-size: clamp(1.9rem, 4vw, 3.6rem); color: #c7a15f; font-style: italic; }
.bg-11 { background: linear-gradient(135deg, #0d0c0b, #31251b 58%, #0d0c0b); width: 100%; height: 100%; position: relative; }
.bg-11::after { content: ''; position: absolute; inset: 2rem; border: 1px solid rgba(199,161,95,.42); pointer-events: none; }

/* --- Mniej hałasu, więcej fal --- */
.type-12 { font-family: 'Playfair Display', serif; color: #0b2b3a; line-height: .98; }
.type-12 strong { display: block; max-width: 460px; font-size: clamp(3.2rem, 7vw, 6.4rem); font-weight: 800; letter-spacing: -.07em; }
.type-12 span { display: inline-block; margin-top: .45rem; font-family: 'Dancing Script', cursive; font-size: clamp(2.2rem, 5vw, 4rem); color: #10788e; transform: rotate(-2deg); }
.bg-12 { background: radial-gradient(ellipse at 50% 130%, rgba(16,120,142,.35), transparent 45%), linear-gradient(180deg, #eaf9fa, #b8e4e4); width: 100%; height: 100%; position: relative; overflow: hidden; }
.bg-12::after { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at 50% 120%, transparent 0 18px, rgba(16,120,142,.24) 19px 21px); pointer-events: none; }

/* --- Szept złota --- */
.type-15 { font-family: 'Fraunces', serif; text-align: center; line-height: .86; color: #f7ead2; }
.type-15 span { display: block; font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 200; font-style: italic; }
.type-15 strong { display: block; font-size: clamp(4rem, 9vw, 8rem); font-weight: 950; color: #d8b15e; letter-spacing: -.08em; }
.type-15 em { display: block; font-family: 'Montserrat', sans-serif; font-style: normal; font-size: .9rem; letter-spacing: .2em; text-transform: uppercase; }
.bg-15 { background: radial-gradient(circle at 50% 50%, rgba(216,177,94,.18), transparent 35%), linear-gradient(135deg, #20140f, #4b3323 60%, #120b08); width: 100%; height: 100%; }

/* --- Szkło mówi szeptem --- */
.type-16 { font-family: 'Raleway', sans-serif; text-align: center; color: rgba(255,255,255,.88); line-height: .9; padding: 2rem; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.16); box-shadow: inset 0 0 35px rgba(255,255,255,.12); }
.type-16 strong { display: block; font-size: clamp(4rem, 9vw, 8rem); font-weight: 100; letter-spacing: -.08em; }
.type-16 span { font-size: clamp(1.4rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.bg-16 { background: linear-gradient(135deg, #90a8c2, #e9eff5 45%, #6c8298); width: 100%; height: 100%; }

/* --- Zero grzeczności --- */
.type-19 { font-family: 'Montserrat', sans-serif; text-transform: uppercase; color: #111; line-height: .8; }
.type-19 span { display: block; font-size: clamp(5rem, 12vw, 10rem); font-weight: 1000; letter-spacing: -.12em; }
.type-19 strong { display: inline-block; font-size: clamp(2.2rem, 5vw, 4.6rem); font-weight: 1000; background: #111; color: #fff; padding: .08em .16em; transform: rotate(-2deg); }
.type-19 em { display: block; margin-top: .9rem; font-style: normal; font-weight: 900; letter-spacing: .22em; }
.bg-19 { background: linear-gradient(90deg, #f2f2ee 0 62%, #ff3b30 62% 100%); width: 100%; height: 100%; }

/* --- Głośniej niż myśl --- */
.type-20 { font-family: 'Staatliches', sans-serif; color: #101010; text-align: center; line-height: .82; }
.type-20 strong { display: block; font-size: clamp(4.2rem, 10vw, 8.8rem); letter-spacing: .02em; text-shadow: 7px 7px 0 #fff; }
.type-20 span { display: inline-block; font-size: clamp(2.4rem, 5vw, 4.8rem); color: #fff; background: #101010; padding: .05em .35em; }
.bg-20 { background: radial-gradient(circle, #101010 0 2px, transparent 3px), #ffcb05; background-size: 18px 18px; width: 100%; height: 100%; }

/* --- Ładnie? Nie. --- */
.type-23 { font-family: 'Permanent Marker', cursive; color: #101010; text-align: center; line-height: .8; transform: rotate(-2deg); }
.type-23 span { display: block; font-size: clamp(2.5rem, 6vw, 5rem); }
.type-23 strong { display: block; font-size: clamp(5rem, 12vw, 10rem); color: #fff; -webkit-text-stroke: 4px #101010; text-shadow: 8px 8px 0 #00d084; }
.type-23 em { display: inline-block; font-style: normal; background: #101010; color: #fff; padding: .18em .55em; }
.bg-23 { background: linear-gradient(90deg, #ff2d55 0 33%, #ffd60a 33% 66%, #00d084 66% 100%); width: 100%; height: 100%; }

/* --- Wytnij nudę --- */
.type-24 { font-family: 'Poppins', sans-serif; text-transform: uppercase; line-height: .82; color: #1b1b1b; }
.type-24 strong { display: inline-block; font-size: clamp(3.6rem, 8vw, 7rem); font-weight: 1000; background: #fff; padding: .05em .2em; box-shadow: 14px 14px 0 #1b1b1b; transform: rotate(-3deg); }
.type-24 span { display: block; margin-top: .35em; font-size: clamp(4rem, 9vw, 8rem); font-weight: 1000; color: #fff; text-shadow: 8px 8px 0 #1b1b1b; }
.type-24 em { display: inline-block; font-style: normal; background: #1b1b1b; color: #fff; padding: .2em .7em; }
.bg-24 { background: linear-gradient(135deg, #f6efe2 0 50%, #ff6f61 50% 100%); width: 100%; height: 100%; }

/* --- Budujemy ciszę --- */
.type-33 { font-family: 'Oswald', sans-serif; color: #d9f2ff; text-transform: uppercase; line-height: .95; }
.type-33 span { display: inline-block; font-size: .9rem; letter-spacing: .25em; border: 1px solid #d9f2ff; padding: .25em .6em; margin-bottom: 1rem; }
.type-33 strong { display: block; max-width: 460px; font-size: clamp(3rem, 7vw, 6.4rem); letter-spacing: -.05em; }
.type-33 em { display: inline-block; margin-top: .7rem; font-style: normal; font-size: 1rem; letter-spacing: .18em; }
.bg-33 { background: linear-gradient(rgba(217,242,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(217,242,255,.16) 1px, transparent 1px), #0c3b5d; background-size: 32px 32px; width: 100%; height: 100%; }

/* --- sudo make magic --- */
.type-34 { font-family: 'Special Elite', monospace; color: #9cffb5; line-height: 1; }
.type-34 span { display: block; font-size: clamp(1.3rem, 3vw, 2.4rem); color: #6be389; }
.type-34 strong { display: block; margin-top: .35rem; font-size: clamp(3.4rem, 8vw, 7rem); color: #e8ffe8; text-shadow: 0 0 18px rgba(156,255,181,.45); }
.type-34 em { display: block; margin-top: .8rem; color: #6be389; font-style: normal; letter-spacing: .08em; }
.bg-34 { background: linear-gradient(rgba(156,255,181,.08) 50%, transparent 50%), #07120b; background-size: 100% 10px; width: 100%; height: 100%; }

/* --- Czarny prostokąt wie --- */
.type-35 { font-family: 'Inter', 'Montserrat', sans-serif; color: #f3f0e8; line-height: .9; }
.type-35 strong { display: block; font-size: clamp(4rem, 10vw, 8.7rem); font-weight: 950; letter-spacing: -.1em; }
.type-35 span { display: inline-block; font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 900; background: #f3f0e8; color: #121212; padding: .06em .3em; }
.type-35 em { display: block; margin-top: .9rem; font-style: normal; color: #8c8c8c; text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; }
.bg-35 { background: linear-gradient(135deg, #111 0 72%, #f3f0e8 72%); width: 100%; height: 100%; }

/* --- Piasek pamięta --- */
.type-40 { font-family: 'Prata', serif; color: #5a341d; line-height: .92; }
.type-40 strong { display: block; font-size: clamp(4rem, 9vw, 8rem); font-weight: 400; }
.type-40 span { display: block; margin-left: 1.4rem; font-family: 'Caveat', cursive; font-size: clamp(2.5rem, 5vw, 4.8rem); color: #a55e2a; }
.type-40 em { display: inline-block; margin-top: .65rem; font-style: normal; font-family: 'Montserrat', sans-serif; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; font-size: .8rem; }
.bg-40 { background: radial-gradient(circle, rgba(90,52,29,.14) 0 1px, transparent 2px), linear-gradient(135deg, #f3d39a, #ddaa66); background-size: 13px 13px, auto; width: 100%; height: 100%; }

/* --- List do jutra --- */
.type-44 { font-family: 'Special Elite', cursive; color: #2c2217; line-height: 1; }
.type-44 strong { display: block; font-size: clamp(4rem, 9vw, 8rem); font-weight: 400; }
.type-44 span { display: block; font-size: clamp(2.3rem, 5vw, 4.4rem); color: #764c29; }
.type-44 em { display: inline-block; margin-top: 1rem; font-style: normal; border-bottom: 2px solid #764c29; }
.bg-44 { background: linear-gradient(rgba(118,76,41,.12) 1px, transparent 1px), #f4ead9; background-size: 100% 34px; width: 100%; height: 100%; }

/* --- Kakao dla wampira --- */
.type-50 { position: relative; font-family: 'Kanit', sans-serif; color: #001219; line-height: .86; text-align: left; padding: 1.2rem; border: .28rem solid #001219; background: #e9d8a6; box-shadow: .8rem .8rem 0 #0a9396; transform: rotate(-1.6deg); }
.type-50 span { display: block; font-size: clamp(1.2rem, 2.6vw, 2.2rem); font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: #0a9396; }
.type-50 strong { display: block; font-size: clamp(3.2rem, 7.5vw, 7rem); letter-spacing: -.08em; }
.type-50 em { display: block; margin-top: .45rem; font-family: 'Fredoka', sans-serif; font-style: italic; font-size: clamp(1.2rem, 2.6vw, 2rem); color: #001219; }
.bg-50 { background: repeating-linear-gradient(-45deg, #e9d8a6 0 18px, #ee9b00 18px 21px, #e9d8a6 21px 38px), linear-gradient(135deg, #e9d8a6, #0a9396); width: 100%; height: 100%; }

/* --- Sztorm w filiżance --- */
.type-54 { font-family: 'Abril Fatface', serif; text-align: center; color: #2d1e2f; line-height: .9; padding: 1.4rem; border-radius: 2rem; background: rgba(255,255,255,.68); box-shadow: inset 0 0 0 .18rem #2d1e2f; }
.type-54 span { display: inline-block; font-size: clamp(1.5rem, 3vw, 2.6rem); color: #f72c25; font-weight: 900; }
.type-54 strong { display: block; font-size: clamp(3.6rem, 8vw, 7.5rem); letter-spacing: -.08em; }
.type-54 em { display: inline-block; font-family: 'Bebas Neue', sans-serif; font-style: normal; font-size: clamp(1.1rem, 2.3vw, 2rem); color: #f2f4f3; background: #2d1e2f; padding: .15em .55em; transform: rotate(2deg); }
.bg-54 { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0 18%, transparent 19%), linear-gradient(135deg, #f7b32b, #f2f4f3); width: 100%; height: 100%; }

/* --- Kaktus w smokingu --- */
.type-60 { font-family: 'Prata', serif; color: #1d3557; line-height: .9; text-align: left; border-left: .7rem solid #e63946; padding-left: 1rem; }
.type-60 span { display: block; font-size: clamp(2rem, 4vw, 3.6rem); color: #e63946; }
.type-60 strong { display: block; font-size: clamp(3.8rem, 8vw, 7.5rem); letter-spacing: -.07em; }
.type-60 em { display: inline-block; margin-top: .5rem; font-family: 'Oswald', sans-serif; font-style: italic; color: #1d3557; background: #f1faee; padding: .18em .6em; }
.bg-60 { background: linear-gradient(135deg, #a8dadc 0 60%, #f1faee 60% 100%); width: 100%; height: 100%; }

/* --- Słoik pełen hałasu --- */
.type-63 { font-family: 'Playfair Display', serif; color: #283618; text-align: center; line-height: .95; }
.type-63 span { display: inline-block; font-size: clamp(1.6rem, 3.4vw, 3rem); font-weight: 900; color: #dda15e; letter-spacing: .22em; text-transform: uppercase; }
.type-63 strong { display: block; font-size: clamp(4rem, 9vw, 8rem); font-weight: 300; letter-spacing: -.1em; }
.type-63 em { display: block; margin-top: .5rem; font-family: 'Cormorant Garamond', serif; font-style: normal; color: #dda15e; font-size: clamp(1.2rem, 2.6vw, 2.2rem); }
.bg-63 { background: radial-gradient(circle, rgba(0,0,0,.12) 0 1px, transparent 2px), #bc6c25; background-size: 14px 14px; width: 100%; height: 100%; }

/* --- Żyrandol śpiewa basem --- */
.type-78 { font-family: 'Staatliches', sans-serif; color: #2d1e2f; text-align: center; line-height: .86; transform: rotate(1.4deg); }
.type-78 span { display: inline-block; padding: .08em .45em; font-size: clamp(1.5rem, 3.2vw, 2.8rem); background: #f72c25; color: #f2f4f3; border-radius: .35em; }
.type-78 strong { display: block; font-size: clamp(4rem, 9vw, 8rem); -webkit-text-stroke: 1px #2d1e2f; color: #f7b32b; text-shadow: .08em .08em 0 #f2f4f3; }
.type-78 em { display: inline-block; margin-top: .55rem; font-family: 'Poppins', sans-serif; font-style: normal; font-weight: 900; color: #f72c25; }
.bg-78 { background: radial-gradient(circle at 20% 30%, #f2f4f3 0 5%, transparent 6%), radial-gradient(circle at 74% 62%, #f7b32b 0 9%, transparent 10%), #f72c25; width: 100%; height: 100%; }

/* --- Książka bez końca --- */
.type-114 { font-family: 'Abril Fatface', serif; text-align: center; color: #252422; line-height: .9; padding: 1.4rem; border-radius: 2rem; background: rgba(255,255,255,.68); box-shadow: inset 0 0 0 .18rem #252422; }
.type-114 span { display: inline-block; font-size: clamp(1.5rem, 3vw, 2.6rem); color: #eb5e28; font-weight: 900; }
.type-114 strong { display: block; font-size: clamp(3.6rem, 8vw, 7.5rem); letter-spacing: -.08em; }
.type-114 em { display: inline-block; font-family: 'Bebas Neue', sans-serif; font-style: normal; font-size: clamp(1.1rem, 2.3vw, 2rem); color: #ccc5b9; background: #252422; padding: .15em .55em; transform: rotate(2deg); }
.bg-114 { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0 18%, transparent 19%), linear-gradient(135deg, #fffcf2, #ccc5b9); width: 100%; height: 100%; }

/* --- Tornister pełen duchów --- */
.type-140 { font-family: 'Prata', serif; color: #540b0e; line-height: .9; text-align: left; border-left: .7rem solid #e09f3e; padding-left: 1rem; }
.type-140 span { display: block; font-size: clamp(2rem, 4vw, 3.6rem); color: #e09f3e; }
.type-140 strong { display: block; font-size: clamp(3.8rem, 8vw, 7.5rem); letter-spacing: -.07em; }
.type-140 em { display: inline-block; margin-top: .5rem; font-family: 'Oswald', sans-serif; font-style: italic; color: #540b0e; background: #fff3b0; padding: .18em .6em; }
.bg-140 { background: linear-gradient(135deg, #9e2a2b 0 60%, #fff3b0 60% 100%); width: 100%; height: 100%; }

/* --- Cyrkiel do tęczy --- */
.type-147 { font-family: 'Oswald', sans-serif; color: #220901; text-align: center; line-height: .8; text-transform: uppercase; }
.type-147 span { display: inline-block; font-size: clamp(1.5rem, 3vw, 2.6rem); background: #f6aa1c; padding: .1em .5em; transform: rotate(-3deg); }
.type-147 strong { display: block; font-size: clamp(4.2rem, 10vw, 9rem); letter-spacing: -.08em; color: #220901; text-shadow: .05em .05em 0 #fff3b0, .1em .1em 0 #bc3908; }
.type-147 em { display: inline-block; margin-top: .7rem; color: #fff3b0; background: #bc3908; padding: .25em .6em; font-style: normal; }
.bg-147 { background: repeating-linear-gradient(-12deg, #fff3b0 0 20px, #f6aa1c 20px 22px, #fff3b0 22px 42px); width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════
   Font Picker Cards
   ═══════════════════════════════════════════════════════ */
.fp-card {
    background: #111827;
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fp-card:hover,
.fp-card.fp-card-hover {
    background: #1e293b;
    border-color: #4a6fa5;
}

.fp-card.fp-card-active {
    border-color: #60a5fa;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.45), 0 0 2px rgba(96, 165, 250, 0.7);
    background: #172554;
}

.fp-card-name {
    color: #ffffff;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.fp-card-preview {
    color: #9ca3af;
    font-size: 11px;
    opacity: 0.6;
    flex-shrink: 0;
    margin-left: 8px;
}

.fp-category-header {
    font-size: 10px;
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 3px;
    position: sticky;
    top: 0;
    background: #111;
    z-index: 1;
}

/* Big Windows modal system
   Reference: C:/Users/Andrzej/Desktop/big.windows.html */
.selection-overlay {
    --big-window-w: 1380px;
    --big-window-h: 770px;
    --big-window-radius: 14px;
    --big-window-font: 'Montserrat', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --big-window-surface: #15171d;
    --big-window-surface-2: #0b0d12;
    --big-window-text: #fafafa;
    --big-window-muted: #a0a2aa;
    --big-window-accent: #ffffff;
    --big-window-accent-2: #a6a9b1;
    --big-window-border: #333640;
    --big-window-soft-border: rgba(255,255,255,.08);
    --big-window-panel-pattern:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,.055), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%),
        linear-gradient(145deg, rgba(21,23,29,.98), rgba(11,13,18,.98));
    background: rgba(6, 7, 10, 0.72) !important;
    backdrop-filter: blur(12px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
    padding: clamp(10px, 1.15vw, 18px) !important;
    font-family: var(--big-window-font);
}

.selection-overlay.fullbleed {
    padding: clamp(8px, 1vw, 14px) !important;
}

.selection-overlay .selection-overlay-panel {
    width: min(calc(100% - 24px), var(--big-window-w)) !important;
    height: min(calc(100% - 24px), var(--big-window-h)) !important;
    max-width: var(--big-window-w) !important;
    max-height: var(--big-window-h) !important;
    border-radius: var(--big-window-radius) !important;
    border: 1px solid var(--big-window-border) !important;
    background: var(--big-window-panel-pattern) !important;
    box-shadow:
        0 36px 90px rgba(0,0,0,.62),
        inset 0 1px 0 rgba(255,255,255,.055) !important;
    overflow: hidden !important;
}

.selection-overlay.fullbleed .selection-overlay-panel {
    width: min(calc(100% - 16px), 1660px) !important;
    height: min(calc(100% - 16px), 930px) !important;
    max-width: 1660px !important;
    max-height: 930px !important;
}

.selection-overlay .overlay-shell-theme {
    color: var(--big-window-text) !important;
    font-family: var(--big-window-font) !important;
}

.selection-overlay .selection-overlay-panel::before {
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent),
        radial-gradient(circle at 50% 36%, rgba(255,255,255,.08), transparent 33%) !important;
    opacity: .42 !important;
}

.selection-overlay .overlay-header {
    min-height: 58px !important;
    height: 58px !important;
    padding: 0 12px 0 14px !important;
    border-bottom: 1px solid rgba(51, 54, 64, .78) !important;
    background:
        linear-gradient(180deg, rgba(21,23,29,.94), rgba(11,13,18,.88)),
        linear-gradient(90deg, rgba(255,255,255,.05), transparent 52%) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    flex-shrink: 0 !important;
}

.selection-overlay[data-overlay-type="slides-browser"] .overlay-header {
    height: auto !important;
    min-height: 58px !important;
}

.selection-overlay .overlay-header h2 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--big-window-text) !important;
    font-family: var(--big-window-font) !important;
    font-size: clamp(21px, 2vw, 28px) !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
    line-height: 1 !important;
}

.selection-overlay .overlay-title-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    color: #080a0f !important;
    background: linear-gradient(135deg, var(--big-window-accent), var(--big-window-accent-2)) !important;
    box-shadow:
        0 10px 22px rgba(255,255,255,.10),
        inset 0 1px 0 rgba(255,255,255,.38) !important;
}

.selection-overlay .overlay-title-icon svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
}

.selection-overlay .close-overlay-btn {
    width: 52px !important;
    height: 30px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: var(--big-window-text) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)) !important;
    font: 800 11px/1 var(--big-window-font) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 8px 20px rgba(0,0,0,.16) !important;
}

.selection-overlay .close-overlay-btn:hover {
    border-color: rgba(255,255,255,.32) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) !important;
    transform: translateY(-1px);
}

.selection-overlay .overlay-content {
    background:
        radial-gradient(circle at 30% 12%, rgba(255,255,255,.035), transparent 30%),
        linear-gradient(180deg, rgba(11,13,18,.86), rgba(11,13,18,.98)) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #F3EDE2 transparent;
}

.selection-overlay .overlay-content::-webkit-scrollbar {
    width: 10px;
}

.selection-overlay .overlay-content::-webkit-scrollbar-track {
    background: transparent;
}

.selection-overlay .overlay-content::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    background-color: #F3EDE2;
}

.selection-overlay .overlay-grid {
    padding: 14px 14px 36px !important;
}

.selection-overlay .layouts-toolbar,
.selection-overlay .photo-search-wrap,
.selection-overlay .photo-category-tabs,
.selection-overlay .creative-overlay-nav,
.selection-overlay .shapes-overlay-toolbar,
.selection-overlay .overlay-sticky-actions,
.selection-overlay .overlay-sticky-tabs,
.selection-overlay .warp-overlay-toolbar,
.selection-overlay [style*="sticky"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
    margin: 0 !important;
    padding: 12px 14px 11px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(51,54,64,.78) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(21,23,29,.97), rgba(21,23,29,.88)),
        linear-gradient(90deg, rgba(255,255,255,.045), transparent 52%) !important;
    backdrop-filter: blur(24px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.14) !important;
    box-shadow: 0 18px 32px rgba(0,0,0,.18) !important;
}

.selection-overlay .photo-category-tabs {
    top: 53px !important;
    z-index: 11 !important;
}

.selection-overlay .photo-bg-option {
    padding: 8px 14px 0 !important;
}

.selection-overlay input[type="text"],
.selection-overlay input[type="search"] {
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.12) !important;
    color: var(--big-window-text) !important;
    font: 700 12px/1 var(--big-window-font) !important;
}

.selection-overlay input[type="text"]::placeholder,
.selection-overlay input[type="search"]::placeholder {
    color: rgba(250,250,250,.48) !important;
}

.selection-overlay button[class*="tab"],
.selection-overlay .layout-tab,
.selection-overlay .sb-tab-btn,
.selection-overlay .warp-overlay-tab,
.selection-overlay .warp-overlay-category-tab,
.selection-overlay .warp-overlay-stop {
    border: 1px solid rgba(51,54,64,.82) !important;
    border-radius: 7px !important;
    color: var(--big-window-muted) !important;
    background: rgba(255,255,255,.052) !important;
    font: 850 10px/1 var(--big-window-font) !important;
    letter-spacing: .01em !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.selection-overlay button[class*="tab"].active,
.selection-overlay .layout-tab.active,
.selection-overlay .sb-tab-btn[style*="var(--accent)"],
.selection-overlay .warp-overlay-tab.active,
.selection-overlay .warp-overlay-category-tab.active {
    color: #07080a !important;
    border-color: rgba(255,255,255,.52) !important;
    background: linear-gradient(135deg, #ffffff, #a6a9b1) !important;
    box-shadow: 0 10px 18px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.selection-overlay .layout-card,
.selection-overlay .shape-item-large,
.selection-overlay .creative-text-btn,
.selection-overlay .warp-overlay-card,
.selection-overlay .overlay-grid > div[style*="aspect-ratio"] {
    box-shadow:
        0 10px 20px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.selection-overlay .warp-overlay-card-preview {
    overflow: hidden !important;
}

@media (max-width: 900px) {
    .selection-overlay .selection-overlay-panel {
        width: calc(100% - 16px) !important;
        height: calc(100% - 16px) !important;
    }

    .selection-overlay .overlay-header h2 {
        font-size: 20px !important;
    }
}

/* ============================================================
   FD Number Spinner — see js/fd_num_spinner.js
   Compact +/- buttons absolutely positioned over the input so
   they never get cropped by tight parent containers (e.g. WWW
   inspector grid). Native browser spin buttons hidden so we don't
   end up with two spinners stacked.
   ============================================================ */
.fd-num-wrap {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
}
.fd-num-wrap > input.fd-num {
    padding-right: 22px !important;
    -moz-appearance: textfield;
    appearance: textfield;
}
.fd-num-wrap > input.fd-num::-webkit-outer-spin-button,
.fd-num-wrap > input.fd-num::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
}
.fd-num-spin {
    position: absolute;
    right: 2px;
    top: 1px;
    bottom: 1px;
    width: 18px;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    z-index: 5;
}
.fd-num-up,
.fd-num-down {
    flex: 1;
    width: 18px;
    border: none;
    background: rgba(28, 28, 35, 0.78);
    color: rgba(232, 226, 215, 0.92);
    padding: 0;
    margin: 0;
    cursor: pointer;
    pointer-events: auto;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s ease, color 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
.fd-num-up {
    border-top-right-radius: 4px;
    margin-bottom: 1px;
}
.fd-num-down {
    border-bottom-right-radius: 4px;
}
.fd-num-up::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
}
.fd-num-down::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}
.fd-num-up:hover,
.fd-num-down:hover {
    background: rgba(48, 48, 60, 0.92);
    color: #f5efe2;
}
.fd-num-up:active,
.fd-num-down:active {
    background: rgba(15, 15, 22, 0.98);
    color: #ffffff;
}
.fd-num-up:focus,
.fd-num-down:focus { outline: none; }

/* WWW inspector context: extra-compact look so it doesn't dwarf the 10px input row */
.www-inspector-input.fd-num + .fd-num-spin,
.www-inspector-grid .fd-num-spin,
.www-inspector-group .fd-num-spin {
    width: 14px;
}
.www-inspector-input.fd-num + .fd-num-spin .fd-num-up,
.www-inspector-input.fd-num + .fd-num-spin .fd-num-down,
.www-inspector-grid .fd-num-up,
.www-inspector-grid .fd-num-down,
.www-inspector-group .fd-num-up,
.www-inspector-group .fd-num-down { width: 14px; }
.www-inspector-input.fd-num { padding-right: 16px !important; }

/* When fd-num-wrap sits in a grid/flex cell (like WWW inspector groups), let it fill the cell
   so the input doesn't shrink to content width while the spin sticks out the side. */
.www-inspector-group .fd-num-wrap,
.www-inspector-grid .fd-num-wrap,
.www-row-2 .fd-num-wrap,
.www-row-3 .fd-num-wrap,
.www-mini-row .fd-num-wrap {
    display: flex;
    width: 100%;
    min-width: 0;
}
.www-inspector-group .fd-num-wrap > input,
.www-inspector-grid .fd-num-wrap > input,
.www-row-2 .fd-num-wrap > input,
.www-row-3 .fd-num-wrap > input,
.www-mini-row .fd-num-wrap > input {
    width: 100%;
    min-width: 0;
}
/* ==========================================================================
   PREMIUM CANVAS TOOLBAR (BOTTOM BAR) - UPGRADED & NON-OVERLAPPING
   ========================================================================== */
.canvas-toolbar {
    margin: 10px auto 14px auto !important; /* Perfect spacing below the canvas, in normal layout flow */
    position: relative !important; /* Stable, non-overlapping normal flow */
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* Slightly larger gap for clarity */
    padding: 6px 16px !important;
    background: rgba(18, 19, 26, 0.92) !important; /* Dark, high-contrast, premium translucent background */
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Brighter border for crystal-clear separation */
    border-radius: 9999px !important; /* Beautiful capsule look */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    z-index: 999 !important;
    width: max-content !important;
    max-width: 95% !important;
    pointer-events: auto !important;
    height: auto !important;
    min-height: 44px !important; /* Comfortable height */
    overflow: visible !important;
}

.canvas-toolbar button {
    height: 32px !important; /* comfortable touch target */
    min-width: 32px !important;
    padding: 0 10px !important;
    background: rgba(255, 255, 255, 0.06) !important; /* Higher default brightness for icons */
    border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Defined borders */
    color: #ffffff !important; /* Pure white text for ultimate visibility */
    border-radius: 9999px !important;
    font-size: 13px !important; /* Larger font size for emojis and characters */
    font-weight: 600 !important;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

.canvas-toolbar button:hover {
    background: rgba(255, 255, 255, 0.18) !important; /* Strong highlight on hover */
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.canvas-toolbar button:active {
    transform: translateY(0) !important;
}

.canvas-toolbar button span {
    font-size: 13px !important; /* Ensure icons inside spans are also highly visible */
}

.canvas-toolbar .zoom-input {
    width: 44px !important;
    height: 32px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    outline: none !important;
    margin: 0 2px !important;
    padding: 0 !important;
    -moz-appearance: textfield !important;
}

.canvas-toolbar .zoom-input::-webkit-outer-spin-button,
.canvas-toolbar .zoom-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.canvas-toolbar .toolbar-divider {
    width: 1px !important;
    height: 18px !important;
    background: rgba(255, 255, 255, 0.18) !important; /* Brighter, clearer dividers */
    margin: 0 6px !important;
}



/* ===== Admin-mode gating =====
   Hide ribbon tabs and other UI marked as admin-only when the user does not
   have admin rights. Toggled by `body.admin-mode` (set by js/admin_state.js).
   See ADMIN_FEATURES.md for the full list. */
body:not(.admin-mode) .ribbon-tab[data-ribbon-admin="true"] {
    display: none !important;
}