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

        body {
            font-family: 'TikTok Sans', sans-serif;
            color: #333;
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
        }

        html {
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
        }

        /* Fullscreen Exit Trigger */
        .fullscreen-exit-trigger {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 60px;
            z-index: 10000;
            cursor: pointer;
            display: none; /* Hidden by default, shown only in fullscreen */
            align-items: center;
            justify-content: center;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .fullscreen-exit-trigger.active {
            display: flex;
        }

        .exit-trigger-progress {
            position: relative;
            width: 60px;
            height: 60px;
        }

        .progress-circle {
            width: 60px;
            height: 60px;
            transform: rotate(-90deg);
        }

        .progress-circle-bg {
            fill: none;
            stroke: rgba(255, 255, 255, 0.2);
            stroke-width: 3;
        }

        .progress-circle-fill {
            fill: none;
            stroke: #0d6efd;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 157; /* 2 * π * 25 (radius) */
            stroke-dashoffset: 157;
            transition: stroke-dashoffset 0.1s linear;
        }

        .exit-trigger-hint {
            position: absolute;
            top: 70px;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
            background: rgba(0, 0, 0, 0.6);
            padding: 4px 8px;
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        .fullscreen-exit-trigger:hover .exit-trigger-hint {
            opacity: 1;
        }

        /* Hide trigger when not in fullscreen */
        body:not(:fullscreen):not(:-webkit-full-screen):not(:-moz-full-screen):not(:-ms-fullscreen) .fullscreen-exit-trigger {
            display: none !important;
        }

        /* Common Styles */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 0px 40px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        

        .btn-primary {
            align-items: center;
            background-color: #ffffff;
            border-radius: 48px;
            border-width: 0;
            box-sizing: border-box;
            color: #000000;
            cursor: pointer;
            display: inline-flex;
            font-family: 'TikTok Sans',sans-serif;
            font-style: normal;
            height: 72px;
            min-width: 200px;
            justify-content: center;
            line-height: 1;
            overflow: hidden;
            margin-top: 40px;
            padding-left: 32px;
            padding-right: 32px;
            position: relative;
            text-align: left;
            transition: box-shadow .15s,transform .15s;
            touch-action: manipulation;
            white-space: nowrap;
            will-change: box-shadow,transform;
            font-size: 24px;
        }

        .btn-primary:hover {
            transform: translateY(-4px);
            color: #000;
            background-color: #ffffff;
            border-color: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
        }

        .btn-primary:active {
            box-shadow: #A59EA1 0 1px 7px inset;
            transform: translateY(2px);
        }

        .btn-secondary {
            align-items: center;
            background-color: #FCFCFD;
            border-radius: 10px;
            border-width: 0;
            box-shadow: rgba(0, 0, 0, 0.3) 0 4px 8px,rgba(0, 0, 0, 0.2) 0 6px 24px -3px,#A59EA1 0 -3px 0 inset;
            box-sizing: border-box;
            color: #000000;
            cursor: pointer;
            display: inline-flex;
            font-family: 'TikTok Sans',sans-serif;
            font-style: normal;
            height: 72px;
            min-width: 200px;
            justify-content: center;
            line-height: 1;
            overflow: hidden;
            margin-top: 40px;
            padding-left: 32px;
            padding-right: 32px;
            position: relative;
            text-align: left;
            transition: box-shadow .15s,transform .15s;
            touch-action: manipulation;
            white-space: nowrap;
            will-change: box-shadow,transform;
            font-size: 24px;
        }

        .btn-secondary:hover {
            box-shadow: rgba(0, 0, 0, 0.1) 0 16px 28px, rgba(0, 0, 0, 0.1) 0 7px 13px -3px, #A59EA1 0 -3px 0 inset;
            transform: translateY(-4px);
            color: #000;
            background-color: #FCFCFD;
            border-color: none;
        }

        /* Button Retake (Red, same style as btn-secondary) */
        .btn-retake {
            align-items: center;
            background-color: #dc3545;
            border-radius: 10px;
            border-width: 0;
            box-shadow: rgba(0, 0, 0, 0.3) 0 4px 8px, rgba(0, 0, 0, 0.2) 0 6px 24px -3px, rgba(139, 0, 0, 0.5) 0 -3px 0 inset;
            box-sizing: border-box;
            color: #ffffff;
            cursor: pointer;
            display: inline-flex;
            font-family: 'TikTok Sans', sans-serif;
            font-style: normal;
            height: 72px;
            min-width: 200px;
            justify-content: center;
            line-height: 1;
            overflow: hidden;
            margin-top: 0;
            padding-left: 32px;
            padding-right: 32px;
            position: relative;
            text-align: center;
            transition: box-shadow .15s, transform .15s;
            touch-action: manipulation;
            white-space: nowrap;
            will-change: box-shadow, transform;
            font-size: 24px;
        }

        .btn-retake:hover {
            box-shadow: rgba(0, 0, 0, 0.1) 0 16px 28px, rgba(0, 0, 0, 0.1) 0 7px 13px -3px, rgba(139, 0, 0, 0.5) 0 -3px 0 inset;
            transform: translateY(-4px);
            color: #ffffff;
            background-color: #dc3545;
            border-color: none;
        }

        /* Override margin for buttons in photo preview modal */
        #photoPreviewModal .btn-secondary,
        #photoPreviewModal .btn-retake {
            margin-top: 0;
        }

        .btn-success {
            background-color: #28a745;
            border: none;
            color: white;
        }

        .btn-success:hover {
            background-color: #218838;
            color: white;
            border: none;
        }

        .btn-orange {
            background-color: #ff9800;
            color: white;
            border: none;
        }

        .btn-orange:hover {
            background-color: #f57c00;
            color: white;
            border: none;
        }

        .btn.is-disabled {
            background-color: #E3E3E3;
            color: #888;
            pointer-events: none;   /* disables clicking */
            filter: grayscale(40%);
        }

        .screen {
            display: none;
            width: 100%;
            text-align: center;
        }

        .screen.active {
            display: block;
        }

        /* Landing Page */

        #landingScreen {
            color: white;
            position: relative;
            min-height: 100vh;
            overflow: hidden;
        }

        .landing-camera-stack {
            position: fixed;
            inset: 0;
            z-index: 0;
            background: #000;
        }

        #landingCameraVideo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scaleX(-1);
        }

        .landing-frame-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            background-image: url('assets/bg-landing.png');
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
        }

        #landingScreen > .container {
            position: relative;
            z-index: 10;
        }

        /* Printer preset: FAB + modal (welcome screen) */
        .printer-settings-fab {
            position: fixed;
            right: max(20px, env(safe-area-inset-right, 0px));
            bottom: max(24px, env(safe-area-inset-bottom, 0px));
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.45);
            background: rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 50;
            padding: 0;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
        }

        .printer-settings-fab:hover {
            background: #ffffff;
            border-color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        }

        .printer-settings-fab:active {
            transform: translateY(0);
        }

        .printer-settings-fab-icon {
            display: block;
            width: 28px;
            height: 28px;
            pointer-events: none;
            transition: filter 0.2s ease;
        }

        .printer-settings-fab:hover .printer-settings-fab-icon {
            filter: brightness(0);
        }

        .printer-preset-modal {
            position: fixed;
            inset: 0;
            z-index: 100;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }

        .printer-preset-modal.is-open {
            display: flex;
        }

        .printer-preset-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
        }

        .printer-preset-panel {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 360px;
            background: #ffffff;
            border-radius: 20px;
            padding: 22px 20px 20px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
            text-align: left;
        }

        .printer-preset-heading {
            font-size: 1.1rem;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0 0 8px 0;
        }

        .printer-preset-hint {
            font-size: 0.8rem;
            color: #666;
            margin: 0 0 18px 0;
            line-height: 1.4;
        }

        .printer-preset-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .printer-preset-option {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            padding: 14px 16px;
            border-radius: 16px;
            border: 1px solid #d8d8d8;
            background: #ffffff;
            cursor: pointer;
            text-align: left;
            transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        }

        .printer-preset-option:hover {
            border-color: #c0c0c0;
            background: #fafafa;
        }

        .printer-preset-option.selected {
            border-color: #ff6b35;
            background: rgba(255, 107, 53, 0.1);
            box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.25);
        }

        .printer-preset-option-icon {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            background-color: #3d3d3d;
            -webkit-mask: url('assets/icons/ic-printer.svg') center / contain no-repeat;
            mask: url('assets/icons/ic-printer.svg') center / contain no-repeat;
        }

        .printer-preset-option.selected .printer-preset-option-icon {
            background-color: #ff6b35;
        }

        .printer-preset-option-text {
            font-size: 0.95rem;
            font-weight: 600;
            color: #222;
        }

        .printer-preset-option.selected .printer-preset-option-text {
            color: #1a1a1a;
        }

        .event-settings-panel {
            padding-bottom: 18px;
        }

        .event-settings-label,
        .event-settings-section-label {
            display: block;
            font-size: 0.85rem;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0 0 8px 0;
        }

        .event-settings-section-label {
            margin-top: 18px;
        }

        .event-settings-printer-hint {
            margin-top: 0;
            margin-bottom: 12px;
        }

        .event-settings-input {
            width: 100%;
            box-sizing: border-box;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid #d8d8d8;
            font-size: 0.95rem;
            font-family: inherit;
            color: #222;
            margin-bottom: 8px;
        }

        .event-settings-input:focus {
            outline: none;
            border-color: #ff6b35;
            box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
        }

        .event-settings-filename-preview {
            font-size: 0.78rem;
            color: #666;
            margin: 0 0 4px 0;
            line-height: 1.35;
            word-break: break-all;
        }

        .event-settings-save-btn {
            width: 100%;
            margin-top: 18px;
            padding: 14px 16px;
            border: none;
            border-radius: 14px;
            background: #ff6b35;
            color: #fff;
            font-size: 0.95rem;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.1s ease;
        }

        .event-settings-save-btn:hover {
            background: #e85a28;
        }

        .event-settings-save-btn:active {
            transform: scale(0.99);
        }
        
        /* Frame Selection */
    

        .frame-option:hover {
            border-color: #007bff;
            transform: translateY(-5px);
        }

        .frame-option.selected {
            border-color: #007bff;
            background-color: #e7f3ff;
        }


        /* --- CLEAN IMAGE-ONLY LAYOUT SELECTION --- */

        #frameSelectionScreen {
            /* background image behind the cards */
            background: #000 url('assets/bg-selection-layout.png');
            background-size: cover;       /* makes the image cover the entire screen */
            background-repeat: no-repeat;
            color: #fff;
        }

        .frame-selection-container {
            min-height: 100vh;
            padding: 0;
            padding-bottom: 100px; /* space for sticky footer button */
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        /* Sticky bottom: Lihat Desain + Lanjut Foto */
        .frame-selection-footer {
            position: fixed;
            bottom: 40px;
            left: 20px;
            right: 20px;
            z-index: 20;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            pointer-events: none;
        }

        .frame-selection-footer .btn-continue,
        .frame-selection-footer .btn-view-design {
            pointer-events: auto;
        }

        .btn-view-design {
            padding: 16px 32px;
            border-radius: 32px;
            background: #ffffff;
            border: 2px solid #dee2e6;
            cursor: pointer;
            font-size: 20px;
            font-weight: 500;
            color: #333;
            font-family: 'TikTok Sans', sans-serif;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
        }

        .btn-view-design:hover:not(.is-disabled) {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border-color: #adb5bd;
        }

        .btn-view-design.is-disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .btn-continue {
            padding: 16px 48px;
            border-radius: 32px;
            background: #FF3C00;
            border: none;
            cursor: pointer;
            font-size: 20px;
            font-weight: 500;
            color: #fff;
            font-family: 'TikTok Sans',sans-serif;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
        }

        .btn-continue:hover:not(.is-disabled) {
            transform: translateY(-2px);
            background-color: #e73600;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .btn-continue.is-disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Main content: Category panel + Carousel */
        .frame-selection-content {
            display: flex;
            gap: 0px;
            flex: 1;
            min-height: 0;
            width: 100%;
            padding-top: 96px;
            padding-left: 20px; /* Row 2: only left padding, no right padding */
            box-sizing: border-box;
            overflow: visible; /* Allow carousel to extend to screen edge */
        }

        /* Category Panel (Left) */
        .category-panel {
            width: 280px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        }

        .category-title {
            font-size: 16px;
            font-weight: bold;
            color: #000;
            margin: 0 0 20px 0;
            text-align: center;
            text-transform: uppercase;
            
        }

        .category-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .category-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: 8px;
            background: #fff;
            border: 1px solid #e0e0e0;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .category-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .category-item.selected {
            background: #FF3C0020;
            border: 1px solid #FF3C00;
        }

        .category-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .category-icon img,
        .category-icon svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Default icon color #A4A8B7 */
        .category-icon img {
            filter: brightness(0) saturate(100%) invert(64%) sepia(5%) saturate(500%) hue-rotate(200deg) brightness(92%) contrast(88%);
        }

        /* Selected icon color #FF3C00 */
        .category-item.selected .category-icon img {
            filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(7458%) hue-rotate(0deg) brightness(99%) contrast(101%);
        }

        /* For SVG elements directly */
        .category-icon svg {
            fill: #A4A8B7;
        }

        .category-item.selected .category-icon svg {
            fill: #FF3C00;
        }

        .category-name {
            flex: 1;
            font-size: 14px;
            font-weight: 500;
            color: #000;
            text-align: left;
            display: block;
        }

        .category-count {
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            background: #f0f0f0;
            border: 1px solid #e0e0e0;
            color: #666;
            min-width: 24px;
            text-align: center;
            transition: all 0.2s ease;
        }

        .category-item.selected .category-count {
            background: #FF3C0020;
            border-color: #FF3C00;
            color: #FF3C00;
        }

        /* Carousel Panel (Right) */
        .carousel-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            overflow: visible; /* Allow content to extend beyond */
        }

        .carousel-title {
            font-size: 16px;
            font-weight: bold;
            color: #000;
            margin: 20px 0px 20px 0px;
            margin-bottom: 0px;
            padding-left: 30px;
            text-transform: uppercase;
            text-align: left;
        }

        .carousel-panel .frame-options.frame-options-carousel {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            gap: 24px;
            padding-top: 40px;
            padding-bottom: 20px;
            padding-left: 30px !important; /* Ensure padding is always applied */
            padding-right: 30px; /* No right padding - let it extend to screen edge */
            scroll-snap-type: x mandatory;
            justify-content: flex-start;
            align-items: flex-start;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.3) transparent;
            /* Ensure first item has padding from left edge */
            scroll-padding-left: 30px;
            box-sizing: border-box;
            /* Enable mouse/trackpad scrolling */
            cursor: grab;
            /* Ensure carousel can scroll */
            width: 100%;
            max-width: 100%;
            position: relative;
            /* Prevent vertical scrolling */
            overscroll-behavior-x: contain;
            overscroll-behavior-y: none;
            /* Ensure items don't shrink */
            min-width: 0;
            flex: 1;
        }


        .carousel-panel .frame-options.frame-options-carousel:active {
            cursor: grabbing;
        }

        .carousel-panel .frame-options.frame-options-carousel::-webkit-scrollbar {
            height: 6px;
        }
        .carousel-panel .frame-options.frame-options-carousel::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
        }

        /* each card is just an image holder */
        .carousel-panel .frame-option {
            flex: 0 0 auto;
            padding: 0;
            border: none;
            background: transparent;
            scroll-snap-align: start;
            cursor: pointer;
            min-width: 0;
            /* Prevent shrinking */
            flex-shrink: 0;
            display: none; /* Hidden by default, shown by category filter */
        }

        .carousel-panel .frame-option.visible {
            display: block;
        }

        /* Ensure first visible item respects padding */
        .carousel-panel .frame-option.visible:first-of-type {
            margin-left: 0;
        }

        /* layout images: same height for all */
        .carousel-panel .frame-option img {
            display: block;
            height: 480px;        /* set the uniform height here */
            width: auto;
            border: 4px solid transparent;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
            pointer-events: none; /* prevent image drag from interfering with scroll */
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }

        .carousel-panel .frame-option:hover img {
            transform: translateY(-4px);
        }

        /* blue outline when selected */
        .carousel-panel .frame-option.selected img {
            border-color: #FF3C00;
        }

        /* Photo Session */
        .photo-session-content {
            /* Now mostly controlled by Bootstrap row.
            Use this only for extra spacing/behaviour if needed. */
            width: 100%;
        }

        #photoSessionScreen {
            /* background image behind the cards */
            background: #000 url('assets/bg-selection-layout.png');
            background-size: cover;       /* makes the image cover the entire screen */
            background-repeat: no-repeat;
            color: #000;
        }

        .camera-section {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .camera-controls {
            display: flex;
            flex-direction: column;
            gap: 4px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            padding: 8px 8px;
            flex-shrink: 0;
        }

        .camera-controls-hint {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 10px;
            text-align: center;
        }

        .camera-select {
            padding: 10px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            background-color: white;
            font-size: 14px;
        }

        .video-container {
            position: relative;
            width: 100%;
            height: calc(100vh - 40px);
            min-height: 60vh;          /* so it's tall on big screens */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Floating button container - tengah camera, compact seperti gambar */
        .photo-session-footer {
            position: absolute;
            bottom: 64px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            display: flex;
            gap: 12px;
            justify-content: center;
            align-items: center;
            padding: 8px;
            background: #ffffff;
            border-radius: 40px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            width: fit-content;
        }

        .photo-session-footer .btn {
            min-height: 48px;
            padding: 12px 28px;
            border-radius: 32px;
            font-size: 20px;
            font-weight: 500;
            font-family: 'TikTok Sans',sans-serif;
            border: none;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .photo-session-footer .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .photo-session-footer .btn-success {
            background: #28a745;
            color: #fff;
        }

        .photo-session-footer .btn-orange {
            background: #FF3C00;
            color: #fff;
        }

        #cameraVideo {
            width: 100%;
            height: 100%;
            max-height: none;          /* remove previous cap */
            object-fit: cover;
            border-radius: 10px;
            transform: scaleX(-1);
        }

        .countdown-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 15;
            background-color: rgba(0, 0, 0, 0.3);
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 6rem;
            color: white;
            font-family: 'TikTok Sans',sans-serif;
            font-weight: bold;
            border-radius: 10px;
        }

        /* Camera guide overlay - safe zone sesuai ratio slot */
        .camera-guide-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 10;
        }

        .camera-guide-overlay .guide-bar {
            position: absolute;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 12px;
        }

        .camera-guide-overlay .guide-bar-top { top: 0; left: 0; right: 0; height: 0; }
        .camera-guide-overlay .guide-bar-bottom { bottom: 0; left: 0; right: 0; height: 0; }
        .camera-guide-overlay .guide-bar-left { top: 0; bottom: 0; left: 0; width: 0; }
        .camera-guide-overlay .guide-bar-right { top: 0; bottom: 0; right: 0; width: 0; }

        .camera-guide-overlay .guide-frame {
            position: absolute;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 12px;
            box-sizing: border-box;
        }

        .controls-section {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 15px;
            max-height: 100vh;
            overflow-y: auto;
            height: calc(100vh - 40px);
            box-sizing: border-box;
        }

        .frame-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1; /* allows it to grow/shrink to accommodate buttons at bottom */
            min-height: 0; /* allows shrinking */
            overflow-y: auto; /* allows scrolling if content is too tall */
        }

        .frame-section h3 {
            margin-bottom: 15px;
            font-size: 1rem;
            text-align: center;
        }

        .photo-controls {
            margin-top: auto;   /* pushes the buttons to the bottom */
            padding-top: 10px;
            display: flex;
            gap: 10px;
            align-items: center; /* aligns buttons horizontally */
            justify-content: center; /* centers buttons horizontally */
            flex-shrink: 0; /* prevents buttons from shrinking */
        }

        .photo-controls .btn {
            flex: 1; /* makes buttons equal width */
            min-height: 48px; /* fixed minimum height for consistent button height */
            height: 48px; /* fixed height to ensure same height before and after */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .timer-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            padding: 8px 8px;
            flex-shrink: 0;
        }

        .session-timer {
            font-size: 1.8rem;
            font-weight: bold;
            color: #0d6efd;
            margin: 0;
        }

        .photo-slot:hover {
            border-color: #007bff;
        }

        .photo-slot.filled {
            border-style: solid;
            border-color: #28a745;
        }

        .photo-slot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        .slot-text {
            color: #6c757d;
            font-size: 14px;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .photo-session-content {
                flex-direction: column;
                height: auto;
            }

            .camera-section {
                width: 100%;
                height: 60vh;
                position: relative;
            }

            .photo-session-footer {
                bottom: 16px;
                padding: 10px 16px;
            }

            .controls-section {
                width: 100%;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
                padding: 15px;
            }

            .timer-section,
            .camera-controls,
            .frame-section {
                flex: 1;
                min-width: 200px;
                margin: 5px;
            }
        }

        @media (max-width: 768px) {
            .controls-section {
                flex-direction: column;
            }

            .frame-options {
                flex-direction: column;
                align-items: center;
            }

            .title {
                font-size: 2rem;
            }

            .btn {
                min-width: 120px;
                font-size: 16px;
            }

            .photo-controls .btn {
                height: 48px; /* maintain same height on mobile */
                min-height: 48px;
            }

            .camera-section {
                height: 50vh;
            }
        }

        /* Hidden canvas for photo processing */
        #photoCanvas {
            display: none;
        }

        /* --- FRAME SELECTION CAROUSEL (session 2) --- */

        .frame-options.frame-options-carousel {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            gap: 32px;
            padding: 30px 10px 16px;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(0,0,0,0.25) transparent;
        }

        .frame-options.frame-options-carousel::-webkit-scrollbar {
            height: 6px;
        }
        .frame-options.frame-options-carousel::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.2);
            border-radius: 3px;
        }

        .frame-option {
            flex: 0 0 260px;
            scroll-snap-align: start;
            background: rgba(255,255,255,0.95);
            padding: 0;
            cursor: pointer;
            transition: all 0.3s ease;
            background-color: transparent;
            width: auto;                /* let the image define width */
            margin: 0;                  /* 🔹 no auto-centering */
        }

        .frame-option:hover {
            transform: translateY(-4px);
        }

        .frame-layout-thumb {
            width: 100%;
            height: 260px;              /* all layout images same visual height */
            border-radius: 18px;
            overflow: hidden;
            background: #f6f6f6;
            border: 2px solid rgba(0,0,0,0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }

        .frame-layout-thumb img {
            max-height: 100%;
            width: auto;
            display: block;
        }

        /* selected state: “outline grid” feeling */
        .frame-option.selected .frame-layout-thumb {
            border-color: #FF3C00;
            box-shadow: 0 0 0 3px rgba(59,130,246,0.55);
        }


        /* --- LIVE FRAME PREVIEW (session 3) --- */

        .frame-layout {
            width: 80%;
            max-width: 300px;
            max-height: 400px; /* Prevent scrolling in controls section */
            aspect-ratio: 2 / 3; /* default Frame A */
            display: grid;
            box-sizing: border-box; /* Include border and padding in width */
        }

        /* Frame D: A4 ratio (1060:1500 = 53:75) */
        .frame-layout.frameD {
            aspect-ratio: 1060 / 1500;
        }

        /* Frame A layouts – 4-square 2x2 grid (frameA4, frameA3, etc.) */
        .frame-layout.frameA {
            display: grid;
            width: 300px;
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 1fr;
        }

        /* Frame B layouts – vertical strip */
        .frame-layout.frameB {
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: min-content; /* Let slots size based on aspect-ratio */
            gap: 10px; /* Add gap between slots */
            align-content: start; /* Align slots to top */
            width: 196px;
            aspect-ratio: auto; /* Override default aspect-ratio to allow height to grow */
            max-height: 500px; /* Increase max-height for Frame B to accommodate slots */
            height: auto; /* Let height adjust based on content */
        }

        /* Frame B2: 2 slots vertical with gap */
        .frame-layout.frameB2 {
            gap: 24px;
            grid-auto-rows: min-content;
            max-height: 450px; /* Specific max-height for 2 slots */
            transform: scale(0.92); /* Scale down slightly to prevent scrolling */
            transform-origin: top;
        }

        /* Frame B3: 3 slots vertical with gap */
        .frame-layout.frameB3 {
            gap: 4px;
            grid-auto-rows: min-content;
            max-height: 600px; /* Specific max-height for 3 slots */
            transform: scale(0.88); /* Scale down slightly to prevent scrolling */
            transform-origin: top;
        }

        /* Frame C layouts – Instagram Story 9:16 */
        .frame-layout.frameC {
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: 1fr;
        }

        /* Frame C4: 2x2 grid */
        .frame-layout.frameC4 {
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: 1fr;
            gap: 2px;
        }

        /* Frame C2: 2 slots vertical */
        .frame-layout.frameC2 {
            grid-template-columns: 1fr;
            grid-auto-rows: 1fr;
            gap: 2px;
        }

        /* Frame C1: 1 slot */
        .frame-layout.frameC1 {
            grid-template-columns: 1fr;
            grid-auto-rows: 1fr;
        }

        /* Frame D layouts – A4 Paper */
        .frame-layout.frameD {
            display: grid;
            grid-template-columns: 1fr;
            grid-auto-rows: 1fr;
        }

        /* Frame D2: 2 slots vertical (slot 1 wide, slot 2 = 4:3) */
        .frame-layout.frameD2 {
            grid-template-columns: 1fr;
            grid-auto-rows: min-content;
            gap: 8px;
            aspect-ratio: auto;
            max-height: 450px;
        }

        .frame-layout.frameD2 .photo-slot:nth-child(1) {
            aspect-ratio: 1012 / 568; /* wide - upper slot */
            width: 100%;
        }

        .frame-layout.frameD2 .photo-slot:nth-child(2) {
            aspect-ratio: 4 / 3; /* 4:3 - lower slot */
            width: 100%;
        }

        /* Frame D2: fill & crop seperti safe area camera preview */
        .frame-layout.frameD2 .photo-slot img {
            object-fit: cover;
            object-position: center;
        }

        /* photo slots with overlay */
        .photo-slot {
            background-color: #000;
            border-radius: 6px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid #dee2e6;
            transition: border-color 0.2s ease;
        }

        .photo-slot.filled {
            border-color: #28a745;
        }

        /* Aspect ratio for photo slot previews (session 3 only) */
        /* Frame A4: all slots = 3:4 */
        .frame-layout.frameA4 .photo-slot {
            aspect-ratio: 3 / 4;
        }

        /* Frame A3: top slot = 3:2, bottom slots = 3:4 */
        .frame-layout.frameA3 .photo-slot:first-child {
            aspect-ratio: 3 / 2;
        }
        .frame-layout.frameA3 .photo-slot:not(:first-child) {
            aspect-ratio: 3 / 4;
        }

        /* Frame B3: all slots = 5:4 */
        .frame-layout.frameB3 .photo-slot {
            aspect-ratio: 5 / 4;
            width: 100%; /* Ensure full width */
            box-sizing: border-box; /* Include border in width calculation */
        }

        /* Frame B2: all slots = 5:6 */
        .frame-layout.frameB2 .photo-slot {
            aspect-ratio: 5 / 6;
            width: 100%; /* Ensure full width */
            box-sizing: border-box; /* Include border in width calculation */
        }

        /* Frame C1: 2:3 */
        .frame-layout.frameC1 .photo-slot {
            aspect-ratio: 2 / 3;
        }

        /* Frame C2: all slots = 11:8 */
        .frame-layout.frameC2 .photo-slot {
            aspect-ratio: 11 / 8;
        }

        /* Frame C4: all slots = 2:3 */
        .frame-layout.frameC4 .photo-slot {
            aspect-ratio: 2 / 3;
        }

        .slot-content {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .photo-slot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0;      /* ← IMPORTANT */
            display: block;
        }

        .slot-text {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #ffffff;
            font-size: 14px;
            opacity: 0.8;
        }

        /* Loading indicator for photo processing */
        .slot-loading {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 4px;
            z-index: 10;
        }

        .loading-spinner {
            width: 28px;
            height: 28px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* overlay appears when slot is clicked */
        .slot-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: rgba(0, 0, 0, 0.55);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        .photo-slot.show-overlay .slot-overlay {
            opacity: 1;
            pointer-events: auto;
        }

        .slot-btn {
            border: none;
            border-radius: 999px;
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            background-color: rgba(255, 255, 255, 0.9);
        }

        .slot-btn:first-child {
            /* View */
            color: #0d6efd;
        }
        .slot-btn:last-child {
            /* Retake */
            color: #dc3545;
        }

        /* --- RESULT FRAME PREVIEW (session 4) --- */

        .final-frame {
            width: 100%;
            max-width: 100%;
            margin: 0;
            border: none;          /* border comes from design image */
            padding: 0;
            background: transparent;
        }

        .final-frame-inner {
            position: relative;
            width: 100%;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            border-radius: 0px;
            background-color: transparent;
            overflow: hidden;
            /* aspect-ratio is set by JavaScript based on frame type */
            /* Frame A: 2:3 (1000:1500), Frame B: 1:3 (500:1500) */
            /* When width is 100%, aspect-ratio property calculates height automatically */
            /* max-height: 100% ensures it fits within container */
            /* The browser will maintain aspect ratio automatically */
        }

        .final-frame-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            pointer-events: none;
            z-index: 2;
        }

        .final-frame-slot {
            position: absolute;
            overflow: hidden;
            z-index: 1;
        }

        .final-frame-slot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        /* Photo filters (sesi 4) - only on captured photos, not overlay */
        .final-frame-slot img.filter-grayscale {
            filter: grayscale(100%);
        }
        /* Vintage: img filter + yellow overlay */
        .final-frame-slot.filter-vintage::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #faaa00;
            opacity: 0.13;
            mix-blend-mode: normal;
            pointer-events: none;
        }
        .final-frame-slot.filter-vintage img {
            -webkit-filter: brightness(105%) grayscale(100%) sepia(50%);
            filter: brightness(105%) grayscale(100%) sepia(50%);
        }
        /* Ocean Wave: img filter + blue overlay */
        .final-frame-slot.filter-ocean-wave::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #00e5fa;
            opacity: 0.13;
            mix-blend-mode: multiply;
            pointer-events: none;
        }
        .final-frame-slot.filter-ocean-wave img {
            -webkit-filter: brightness(105%) contrast(104%) grayscale(10%) sepia(50%);
            filter: brightness(105%) contrast(104%) grayscale(10%) sepia(50%);
        }

        /* Filter panel */
        .filter-panel {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(0,0,0,0.08);
        }
        .filter-panel-label {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }
        .filter-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .photo-filter-btn {
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #fff;
            color: #555;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .photo-filter-btn:hover {
            border-color: #999;
            background: #f8f8f8;
        }
        .photo-filter-btn.selected {
            border-color: #FF3C00;
            background: #FF3C0020;
            color: #FF3C00;
        }

        /* frame design thumbnails as images */
        .frame-design {
            position: relative;
            border: 3px solid transparent;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s ease, border-color 0.2s ease;
            aspect-ratio: 2 / 3; /* default Frame A */
        }
          
        .frame-design img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover; /* no crop */
            object-position: center;
            
        }
          
        .frame-design.selected {
            border-color: #FF3C00;
            transform: translateY(-4px);
        }
          

        /* ✅ default ratio = Frame A (2:3) */
        .frame-design[data-group="frameA"] {
            aspect-ratio: 2 / 3;
        }
        
        /* ✅ if a design is for frameB only (1:3) make it thinner */
        .frame-design[data-group="frameB"] {
            aspect-ratio: 1 / 3;
        }

        /* Frame C designs (9:16 ratio) */
        .frame-design[data-group="frameC"] {
            aspect-ratio: 9 / 16;
        }

        /* Frame D designs (A4 ratio - 1060:1500 = 53:75) */
        .frame-design[data-group="frameD"] {
            aspect-ratio: 1060 / 1500;
        }

        /* Make preview fill the center section */
        .final-frame {
            width: 100%;
            max-width: 100%;
            flex: 1 1 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            min-height: 0;
            min-width: 0;
            padding: 0;
            overflow: hidden;
            /* flex: 1 1 0 allows it to take available space */
            /* min-width: 0 and min-height: 0 prevent flex overflow issues */
            /* Container will center the frame-inner which maintains aspect ratio */
            /* The frame-inner will use aspect-ratio to maintain correct proportions */
        }

        /* Buttons row under preview */
        .result-actions .btn {
            min-width: 0;               /* let them flex nicely */
        }

        /* Left side: 2-column scrollable frame list */
        .frame-designs-vertical {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            flex: 1;
            overflow-y: auto;
            padding-right: 4px;
            align-content: start;
        }

        .frame-designs-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        /* Modal frame design grid (sesi 2) - lebih kecil, tampilkan 5+ design sekaligus */
        /* Gunakan #frameDesignModalGrid agar override .frame-designs-grid.frame-group-X (spesifisitas lebih tinggi) */
        #frameDesignModalGrid.frame-designs-modal-grid {
            max-height: 55vh;
            overflow-y: auto;
        }

        #frameDesignModalGrid.frame-group-A {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
        }

        #frameDesignModalGrid.frame-group-B {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
        }

        #frameDesignModalGrid.frame-group-C {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
        }

        #frameDesignModalGrid.frame-group-D {
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 10px;
        }

        /* Frame A: 2 columns (sesi 4) */
        .frame-designs-grid.frame-group-A {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* Frame B: 3 columns */
        .frame-designs-grid.frame-group-B {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        /* Frame C: 2 columns (same as Frame A) */
        .frame-designs-grid.frame-group-C {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* Frame D: 1 column (only one design: dn-wedding) */
        .frame-designs-grid.frame-group-D {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }

        /* On small screens, fall back to stacked layout */
        @media (max-width: 768px) {
            .result-layout {
                flex-direction: column;
            }

            .final-frame {
                max-width: 360px;
            }

            .frame-designs-vertical {
                max-height: none;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }
        }

        /* Frame A with 4 photos – simple 2x2 grid */
        .frame-layout.frameA4 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }

        /* Frame A with 2 photos – 2 slots stacked (1032×672 each, 24px gap) */
        .frame-layout.frameA2 {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 24px;
        }

        .frame-layout.frameA2 .photo-slot {
            aspect-ratio: 1032 / 672;
        }

        /* Frame A with 3 photos – big top, 2 small bottom */
        .frame-layout.frameA3 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: 1.4fr 1fr;   /* top row taller */
        }

        /* First slot spans the full top row */
        .frame-layout.frameA3 .photo-slot:nth-child(1) {
            grid-column: 1 / 3;   /* column 1 to 2 */
        }

        /* Second and third slots sit at the bottom, left and right */
        .frame-layout.frameA3 .photo-slot:nth-child(2) {
            grid-column: 1;
            grid-row: 2;
        }
        .frame-layout.frameA3 .photo-slot:nth-child(3) {
            grid-column: 2;
            grid-row: 2;
        }

        /* Frame B layouts – vertical strip (3 or 2 photos) */
        .frame-layout.frameB3,
        .frame-layout.frameB2 {
            grid-template-columns: 1fr;
            grid-auto-rows: 1fr;
        }

        

        /* --- RESULT SCREEN LAYOUT (session 4) --- */
        
        #resultScreen {
            background: #000 url('assets/bg-selection-layout.png');
            background-size: cover;
            background-repeat: no-repeat;
            color: #fff;
            height: 100vh;
            padding: 20px;
            overflow: hidden;
            box-sizing: border-box;
            position: relative;
        }

        .result-screen-container {
            max-width: 100%;
            width: 100%;
            margin: 0 auto;
            padding: 0;
            height: calc(100vh - 40px);
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }

        .result-grid {
            display: grid;
            grid-template-columns: minmax(0, 4.5fr) minmax(0, 4.5fr) minmax(0, 1fr);
            gap: 20px;
            align-items: stretch;
            width: 100%;
            height: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .result-left {
            display: flex;
            flex-direction: column;
            gap: 12px;
            height: calc(100vh - 40px);
            max-height: 100%;
            background-color: #ffffff;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            box-sizing: border-box;
        }

        .result-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            background-color: #ffffff;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            height: calc(100vh - 40px);
            max-height: 100%;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            overflow: hidden;
            /* Allow flex child to determine its own size */
        }

        /* Ensure result-title doesn't take too much space */

        .result-right {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: calc(100vh - 40px);
            max-height: 100%;
            background-color: #ffffff;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            box-sizing: border-box;
            overflow: hidden;
        }

        /* Auto-print card */
        .auto-print-card {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            padding: 15px 20px;
            flex-shrink: 0;
        }

        .auto-print-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }

        .auto-print-icon {
            font-size: 18px;
        }

        .auto-print-time {
            font-size: 20px;
            font-weight: bold;
            color: #dc3545;
            text-align: center;
        }

        /* Design panel */
        .design-panel {
            flex: 1;
            min-height: 0;
            background: #f4f4f4;
            border-radius: 12px;
            padding: 14px 14px 0 14px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-sizing: border-box;
        }

        .design-panel-inner {
            width: 100%;
            flex: 1;
            min-height: 0;
            /* ✅ scroll lives inside here */
            overflow-y: auto;
            overflow-x: hidden;
            box-sizing: border-box;
        }


        /* Result title */
        .result-title {
            font-size: 1.25rem;
            font-weight: bold;
            margin-top: 0;
            color: #333;
            flex-shrink: 0;
        }

        .result-caption {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }

        /* Result actions column */
        .result-actions-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 100%;
        }

        /* Round action buttons */
        .round-action-btn {
            width: 120px;
            height: 120px;
            border-radius: 12%;
            border: 1px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            font-family: 'TikTok Sans', sans-serif;
            font-weight: 600;
        }

        .round-action-btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
        }

        .round-action-btn:active {
            transform: translateY(-2px);
        }

        .round-action-btn-light {
            background-color: #f6313e50;
            border: 1px solid #f6313e;
            color: #f6313e;
        }

        .round-action-btn-orange {
            background-color: #ff6b354d;
            border: 1px solid #ff6b35;
            color: #ff6b35;
        }

        .round-action-btn-blue {
            background-color: #e0e9ff;
            border: 1px solid #3b82f6;
            color: #3b82f6;
        }

        .round-action-btn-green {
            background-color: #28a74652;
            border: 1px solid #28a745;
            color: #28a745;
        }

        .round-action-btn-violet {
            background-color: rgba(124, 58, 237, 0.15);
            border: 1px solid #7c3aed;
            color: #7c3aed;
        }

        .drive-qr-modal-body {
            min-height: 120px;
        }

        .drive-qr-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .drive-qr-container img,
        .drive-qr-container canvas {
            display: block;
            margin: 0 auto;
        }

        .round-icon {
            font-size: 32px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .round-icon svg {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
        }

        .round-label {
            font-size: 12px;
            text-align: center;
        }

        /* QR Tooltip - tanpa overlay, muncul di samping tombol */
        .qr-tooltip-wrapper {
            position: relative;
        }
        .qr-tooltip {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            min-width: 260px;
            display: none;
            z-index: 1000;
            border: 1px solid #e9ecef;
        }
        .qr-tooltip.qr-tooltip-visible {
            display: block;
        }
        .qr-tooltip .qr-code-container {
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 8px;
        }
        .qr-code-container img {
            display: block;
        }
        .qr-tooltip .qr-hint {
            font-size: 12px;
            color: #6c757d;
            margin: 0;
        }
        .qr-tooltip .qr-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        .qr-tooltip .qr-loading p {
            margin: 0.5rem 0 0;
            font-size: 12px;
        }
        .qr-tooltip .qr-error {
            padding: 0.75rem;
            font-size: 14px;
        }
        .qr-tooltip-close {
            display: block;
            width: 100%;
            margin-top: 8px;
            padding: 6px 12px;
            font-size: 13px;
            background: #f0f0f0;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            color: #333;
        }
        .qr-tooltip-close:hover {
            background: #e0e0e0;
        }

        /* Responsive design for result screen */
        @media (max-width: 1200px) {
            .result-grid {
                grid-template-columns: 40% 45% 15%;
                gap: 20px;
            }
        }

        @media (max-width: 992px) {
            #resultScreen {
                padding: 15px;
                height: 100vh;
            }

            .result-screen-container {
                height: calc(100vh - 30px);
                width: 100%;
                max-width: 100%;
            }

            .result-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                height: auto;
                width: 100%;
                max-width: 100%;
            }

            .result-left,
            .result-center,
            .result-right {
                height: auto;
                min-height: 400px;
                max-width: 100%;
                width: 100%;
            }

            .result-left,
            .result-right {
                max-width: 600px;
                margin: 0 auto;
            }

            .result-center {
                padding: 20px;
            }

            .result-actions-column {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }

            .frame-designs-vertical {
                grid-template-columns: repeat(2, 1fr);
                max-height: none;
            }

            /* Frame designs grid responsive */
            .frame-designs-grid.frame-group-A {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .frame-designs-grid.frame-group-B {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .frame-designs-grid.frame-group-C {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .frame-designs-grid.frame-group-D {
                grid-template-columns: repeat(1, minmax(0, 1fr));
            }

            /* Responsive final-frame for tablet */
            .final-frame {
                max-width: 100%;
                padding: 0;
            }

            .final-frame-inner {
                max-width: 100%;
                max-height: 70vh;
            }
        }

        @media (max-width: 768px) {
            #resultScreen {
                padding: 10px;
                height: 100vh;
                width: 100%;
                max-width: 100vw;
            }

            .result-screen-container {
                padding: 0;
                height: calc(100vh - 20px);
                width: 100%;
                max-width: 100%;
            }

            .result-grid {
                width: 100%;
                max-width: 100%;
            }

            .result-center {
                padding: 15px;
            }

            .result-title {
                font-size: 1.5rem;
                margin-bottom: 15px;
            }

            .round-action-btn {
                width: 100px;
                height: 100px;
            }

            .round-icon {
                font-size: 28px;
            }
            
            .round-icon svg {
                width: 28px;
                height: 28px;
            }

            /* Frame designs grid responsive for mobile */
            .frame-designs-grid.frame-group-A {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .frame-designs-grid.frame-group-B {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .frame-designs-grid.frame-group-C {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .frame-designs-grid.frame-group-D {
                grid-template-columns: repeat(1, minmax(0, 1fr));
            }

            /* Responsive final-frame for mobile */
            .final-frame {
                max-width: 100%;
                padding: 0;
                margin: 0;
            }

            .final-frame-inner {
                max-width: 100%;
                max-height: 60vh;
            }

            .final-frame-overlay {
                object-fit: cover;
            }
        }

        @media (max-width: 480px) {
            #resultScreen {
                padding: 5px;
                height: 100vh;
                width: 100%;
                max-width: 100vw;
            }

            .result-screen-container {
                padding: 0;
                height: calc(100vh - 10px);
                width: 100%;
                max-width: 100%;
            }

            .result-grid {
                width: 100%;
                max-width: 100%;
                gap: 10px;
            }

            .result-center {
                padding: 10px;
            }

            .result-title {
                font-size: 1.25rem;
                margin-bottom: 10px;
            }

            /* Extra small screens - final-frame */
            .final-frame {
                padding: 5px;
            }

            .final-frame-inner {
                max-height: 50vh;
            }
        }