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

            body {
                font-family:
                    "Inter",
                    -apple-system,
                    BlinkMacSystemFont,
                    sans-serif;
                background: #f8f9fa;
                color: #1a1a1a;
                line-height: 1.5;
                min-height: 100vh;
            }

            /* Header */
            .header {
                background: #fff;
                border-bottom: 1px solid #e5e5e5;
                padding: 0.75rem 1.5rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 100;
                height: 60px;
            }

            .logo {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                font-size: 1.25rem;
                font-weight: 700;
                color: #1a1a1a;
            }

            .logo svg {
                width: 28px;
                height: 28px;
            }

            .logo span {
                color: #666666;
                font-weight: 400;
                font-size: 0.875rem;
            }

            .header-right {
                display: flex;
                align-items: center;
                gap: 1rem;
            }

            .status-indicators {
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .status-indicator {
                display: flex;
                align-items: center;
                gap: 0.25rem;
                padding: 0.375rem 0.625rem;
                border-radius: 6px;
                font-size: 0.75rem;
                font-weight: 500;
                background: #f3f4f6;
            }

            .status-indicator svg {
                width: 16px;
                height: 16px;
            }

            .status-indicator.valid {
                background: #dcfce7;
                color: #166534;
            }

            .status-indicator.valid svg {
                color: #22c55e;
            }

            .status-indicator.invalid {
                background: #fee2e2;
                color: #991b1b;
            }

            .status-indicator.invalid svg {
                color: #ef4444;
            }

            .user-avatar {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: #1a1a1a;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 600;
                font-size: 0.875rem;
                overflow: hidden;
                position: relative;
            }

            .user-avatar #headerAvatarInitial {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }

            /* Main Layout with Sidebar */
            .app-layout {
                display: block;
                min-height: calc(100vh - 60px);
                padding: 0.5rem;
                padding-left: calc(280px + 1rem);
                padding-top: calc(60px + 0.5rem);
                background: #f8f9fa;
            }

            /* Only apply to Link/Image mode panels */
            .app-layout:not(.pending-mode) > .sidebar,
            .app-layout:not(.pending-mode) > .main-content {
                min-height: 0;
            }

            /* Pending mode - allow content to grow with table */
            .app-layout.pending-mode {
                align-items: stretch;
            }
            .app-layout.pending-mode > .main-content {
                height: auto;
            }

            /* Sidebar */
            .sidebar {
                width: 280px;
                min-width: 280px;
                max-width: 280px;
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                height: calc(100vh - 60px - 1rem);
                position: fixed;
                top: calc(60px + 0.5rem);
                left: 0.5rem;
                overflow-y: auto;
            }

            .sidebar-page-selector {
                padding: 1rem;
                padding-bottom: 0.5rem;
                position: relative;
                background: #fff;
                border-radius: 12px 12px 0 0;
            }

            .sidebar-page-selector .page-selector {
                width: 100%;
            }

            .sidebar-page-selector .page-dropdown {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 100;
            }

            .sidebar-nav {
                padding: 1rem;
                padding-top: 0.5rem;
                background: #fff;
                border-radius: 0 0 12px 12px;
                flex: 1;
                overflow-y: auto;
            }

            .sidebar-page-selector,
            .sidebar-nav {
                box-shadow: none;
            }

            .sidebar {
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            }

            .nav-section {
                padding: 0;
                margin-bottom: 1.25rem;
            }

            .nav-section-title {
                font-size: 0.6875rem;
                font-weight: 600;
                color: #9ca3af;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                padding: 0 0.5rem;
                margin-bottom: 0.5rem;
            }

            .nav-item {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                padding: 0.625rem 0.75rem;
                border-radius: 8px;
                font-size: 0.875rem;
                color: #4b5563;
                cursor: pointer;
                transition: all 0.15s;
                text-decoration: none;
            }

            .nav-item:hover {
                background: #f3f4f6;
                color: #1a1a1a;
            }

            .nav-item.active {
                background: #e5e5e5;
                color: #1a1a1a;
            }

            .nav-item svg {
                width: 18px;
                height: 18px;
                flex-shrink: 0;
            }

            .nav-item .badge {
                margin-left: auto;
                background: #1a1a1a;
                color: #fff;
                font-size: 0.6875rem;
                font-weight: 600;
                padding: 0.125rem 0.5rem;
                border-radius: 10px;
            }

            .sidebar-footer {
                padding: 1rem;
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            }

            .sidebar-user {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                padding: 0.5rem;
                border-radius: 8px;
                cursor: pointer;
            }

            .sidebar-user:hover {
                background: #f3f4f6;
            }

            .sidebar-user-avatar {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-weight: 600;
                font-size: 0.875rem;
            }

            .sidebar-user-info h4 {
                font-size: 0.8125rem;
                font-weight: 600;
                color: #1a1a1a;
            }

            .sidebar-user-info p {
                font-size: 0.6875rem;
                color: #6b7280;
            }

            /* Main Content */
            .main-content {
                display: flex;
                gap: 0.5rem;
                align-items: stretch;
                min-height: 0;
                height: min(850px, calc(100vh - 140px));
            }

            /* Preview Panel - Center */
            .preview-panel {
                height: min(850px, calc(100vh - 140px));
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
            }

            .card-preview-header {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 1rem;
                gap: 0.75rem;
                width: 100%;
            }

            .preview-avatar {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #1877f2;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-weight: 600;
            }

            .preview-avatar-img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                object-fit: cover;
                background: #e5e5e5;
            }

            .page-selector {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                padding: 0.5rem 0.75rem;
                border-radius: 8px;
                cursor: pointer;
                transition: background 0.15s;
                position: relative;
            }

            .page-selector:hover {
                background: #f3f4f6;
            }

            .page-selector-skeleton {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                padding: 0.75rem 1rem;
                background: #f3f4f6;
                border-radius: 8px;
            }

            .page-selector-skeleton .sk-avatar {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #e5e5e5;
            }

            .page-selector-skeleton .sk-lines {
                display: flex;
                flex-direction: column;
                gap: 6px;
                flex: 1;
            }

            .page-selector-skeleton .sk-line {
                height: 12px;
                background: #e5e5e5;
                border-radius: 4px;
            }

            .page-selector-skeleton .sk-line:first-child {
                width: 100px;
            }

            .page-selector-skeleton .sk-line:last-child {
                width: 140px;
            }

            .page-dropdown-icon {
                width: 16px;
                height: 16px;
                color: #6b7280;
                margin-left: 0.25rem;
            }

            .page-dropdown {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                background: #fff;
                border-radius: 8px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                min-width: 280px;
                max-height: 300px;
                overflow-y: auto;
                z-index: 1000;
                margin-top: 4px;
            }

            .page-dropdown.visible {
                display: block;
            }

            .page-dropdown-item {
                display: flex;
                align-items: center;
                gap: 0.75rem;
                padding: 0.75rem 1rem;
                cursor: pointer;
                transition: background 0.15s;
            }

            .page-dropdown-item:hover {
                background: #f3f4f6;
            }

            .page-dropdown-item.selected {
                background: #e5e5e5;
            }

            .page-dropdown-item img {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                object-fit: cover;
            }

            .page-dropdown-item-info h4 {
                font-size: 0.875rem;
                font-weight: 600;
                color: #1a1a1a;
            }

            .page-dropdown-item-info p {
                font-size: 0.75rem;
                color: #6b7280;
            }

            .preview-page-info h3 {
                font-size: 0.9375rem;
                font-weight: 600;
                color: #1a1a1a;
            }

            .preview-page-info p {
                font-size: 0.75rem;
                color: #6b7280;
            }

            .btn-publish {
                background: #1f2937;
                color: #fff;
                border: none;
                padding: 0.625rem 1.5rem;
                border-radius: 8px;
                font-size: 0.875rem;
                font-weight: 600;
                cursor: pointer;
                transition: background 0.2s;
            }

            .btn-publish:hover {
                background: #111827;
            }

            .btn-publish:disabled {
                background: #9ca3af;
                cursor: not-allowed;
            }

            .btn-publish.published {
                background: #10b981;
                cursor: pointer;
            }

            .btn-publish.published:hover {
                background: #059669;
            }

            /* Post Mode Buttons */
            .post-mode-btn {
                padding: 0.5rem 1rem;
                border: 2px solid #e5e7eb;
                border-radius: 8px;
                background: #fff;
                cursor: pointer;
                font-size: 0.85rem;
                transition: all 0.2s;
            }
            .post-mode-btn:hover {
                border-color: #1a1a1a;
            }
            .post-mode-btn.active {
                background: #1a1a1a;
                color: #fff;
                border-color: #1a1a1a;
            }

            /* Card Preview - Fixed height container for all modes */
            .card-preview {
                background: #fff;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            /* Card image area - default, will be overridden per mode */
            .card-image-area {
                background: #1a1a1a;
                position: relative;
                cursor: pointer;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* Mode Containers - show/hide based on active state */
            .mode-container {
                display: none;
                width: 100%;
                gap: 1.5rem;
            }

            .mode-container.active {
                display: flex;
            }

            /* Link & News mode: 1:1 - square image + link info below */
            #linkModeContainer .card-preview,
            #newsModeContainer .card-preview {
                width: auto;
            }

            #linkModeContainer .card-image-area,
            #newsModeContainer .card-image-area {
                aspect-ratio: 1 / 1;
                width: auto;
                height: calc(100% - 80px); /* Leave space for link info */
            }

            #linkModeContainer .card-preview,
            #newsModeContainer .card-preview {
                width: fit-content;
            }

            #linkModeContainer .card-link-info,
            #newsModeContainer .card-link-info {
                height: 80px;
                width: 100%;
                flex-shrink: 0;
                box-sizing: border-box;
                max-width: calc(min(800px, calc(100vh - 100px)) - 80px);
            }
            
            /* Image mode: 2:3 - full height image */
            #imageModeContainer .card-preview {
                width: auto;
            }

            #imageModeContainer .card-image-area {
                aspect-ratio: 2 / 3;
                width: auto;
                height: 100%;
            }

            #imageModeContainer .form-panel {
                flex: 1;
                min-width: 400px;
            }

            /* Reels mode: 9:16 - full height image */
            #reelsModeContainer .card-preview {
                width: auto;
            }

            #reelsModeContainer .card-image-area {
                aspect-ratio: 9 / 16;
                width: auto;
                height: 100%;
            }

            #reelsModeContainer .form-panel {
                flex: 1;
                min-width: 400px;
            }

            /* Stack upload buttons vertically in Reels/Image mode */
            #reelsModeContainer .upload-buttons,
            #imageModeContainer .upload-buttons {
                flex-direction: column;
            }

            .upload-prompt {
                position: absolute;
                inset: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #6b7280;
                gap: 0.5rem;
            }

            .upload-buttons {
                display: flex;
                gap: 1rem;
            }

            .upload-btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 0.75rem;
                padding: 1.5rem;
                border: 2px dashed #4b5563;
                border-radius: 12px;
                background: rgba(75, 85, 99, 0.1);
                color: #9ca3af;
                cursor: pointer;
                transition: all 0.2s;
                width: 160px;
                height: 160px;
            }

            .upload-btn:hover {
                border-color: #333333;
                background: rgba(139, 92, 246, 0.1);
                color: #333333;
            }

            .upload-btn svg {
                width: 32px;
                height: 32px;
            }

            .upload-btn span {
                font-size: 0.875rem;
                font-weight: 500;
            }

            .upload-from-gemini:hover {
                border-color: #f97316;
                background: rgba(249, 115, 22, 0.1);
                color: #f97316;
            }

            .upload-prompt svg {
                width: 48px;
                height: 48px;
                color: #4b5563;
            }

            .upload-prompt span {
                font-size: 0.875rem;
            }

            .generate-overlay {
                position: absolute;
                inset: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: rgba(0, 0, 0, 0.5);
            }

            .btn-generate {
                background: #f97316;
                color: #fff;
                border: none;
                padding: 0.75rem 1.5rem;
                border-radius: 8px;
                font-size: 0.9375rem;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .btn-generate:hover {
                background: #ea580c;
            }

            .btn-generate:disabled {
                background: #9ca3af;
                cursor: not-allowed;
            }

            .ref-thumbs-row {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.8);
                padding: 0.75rem;
                display: flex;
                gap: 0.5rem;
                overflow-x: auto;
            }

            .ref-thumb {
                width: 48px;
                height: 48px;
                border-radius: 6px;
                object-fit: cover;
                border: 2px solid transparent;
                flex-shrink: 0;
            }

            .ref-thumb:last-child {
                width: 48px;
                height: 48px;
                background: rgba(255, 255, 255, 0.1);
                border: 2px dashed #6b7280;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #6b7280;
                cursor: pointer;
            }

            .generated-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
                width: 100%;
                height: 100%;
                padding: 8px;
                background: #1a1a1a;
                position: relative;
            }

            .image-action-buttons {
                position: absolute;
                top: 12px;
                right: 12px;
                display: flex;
                gap: 8px;
                z-index: 10;
            }

            .btn-action {
                background: rgba(30, 30, 30, 0.9);
                color: #fff;
                border: none;
                width: 36px;
                height: 36px;
                border-radius: 8px;
                font-size: 0.75rem;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s;
            }

            .btn-action:hover {
                background: #000;
                transform: scale(1.05);
            }

            .btn-action.delete {
                background: rgba(220, 53, 69, 0.9);
            }

            .btn-action.delete:hover {
                background: #c82333;
            }

            .btn-action svg {
                width: 18px;
                height: 18px;
            }

            .btn-regenerate {
                position: absolute;
                top: 12px;
                right: 12px;
                background: rgba(249, 115, 22, 0.9);
                color: #fff;
                border: none;
                padding: 0.5rem 1rem;
                border-radius: 6px;
                font-size: 0.75rem;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                z-index: 10;
            }

            .btn-regenerate:hover {
                background: #ea580c;
            }

            .generated-item {
                position: relative;
                border-radius: 8px;
                overflow: hidden;
                cursor: pointer;
                border: 3px solid transparent;
            }

            .generated-item:hover {
                border-color: #1a1a1a;
            }

            .generated-item.selected {
                border-color: #10b981;
            }

            .generated-item img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .generated-item .item-number {
                position: absolute;
                top: 8px;
                left: 8px;
                background: rgba(0, 0, 0, 0.7);
                color: #fff;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.75rem;
                font-weight: 600;
            }

            .skeleton-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
                width: 100%;
                height: 100%;
                padding: 8px;
                background: #1a1a1a;
            }

            .skeleton-grid.single {
                grid-template-columns: 1fr;
                padding: 0;
            }

            .skeleton-grid.single .skeleton-card {
                border-radius: 0;
            }

            .skeleton-card {
                background: #2a2a2a;
                border-radius: 8px;
                position: relative;
                overflow: hidden;
            }

            .skeleton-card::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    90deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.05) 50%,
                    transparent 100%
                );
                background-size: 200% 100%;
                animation: skeleton-shimmer 1.5s infinite;
            }

            @keyframes skeleton-shimmer {
                0% {
                    background-position: 200% 0;
                }

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

            .card-link-info {
                display: flex;
                align-items: center;
                padding: 1rem 1.25rem;
                gap: 0.75rem;
                border-top: 1px solid #e5e5e5;
                overflow: visible;
                max-width: 100%;
            }

            .card-link-details {
                flex: 1;
                min-width: 0;
                overflow: hidden;
            }

            .card-link-caption {
                font-size: 0.7rem;
                color: #6b7280;
                text-transform: uppercase;
                margin-bottom: 0.15rem;
            }

            .card-link-title {
                font-size: 0.9rem;
                font-weight: 400;
                color: #1a1a1a;
                margin-bottom: 0.1rem;
                line-height: 1.4em;
                display: flex;
                align-items: flex-start;
                gap: 0.25rem;
            }

            .card-link-description {
                font-size: 0.8125rem;
                color: #6b7280;
                display: flex;
                align-items: center;
            }

            .description-prefix {
                color: #6b7280;
                pointer-events: none;
                user-select: none;
                flex-shrink: 0;
                line-height: 1.4em;
            }

            .description-input {
                flex: 1;
                min-width: 100px;
                min-height: 1.4em;
                font-size: 0.9rem;
                color: #6b7280;
                word-break: break-all;
                white-space: normal;
                cursor: pointer;
                line-height: 1.4em;
                max-height: 2.8em;
                overflow: hidden;
                display: inline-block;
            }

            .description-input.editing {
                cursor: text;
                background: #f3f4f6;
                border-radius: 4px;
                padding: 0 2px;
                max-height: none;
            }

            .description-input:focus {
                outline: none;
            }

            .card-button-wrapper {
                position: relative;
            }

            .btn-learn-more {
                background: #f3f4f6;
                border: 1px solid #e5e5e5;
                padding: 0.5rem 1rem;
                border-radius: 6px;
                font-size: 0.8125rem;
                font-weight: 500;
                color: #374151;
                cursor: pointer;
                white-space: nowrap;
                display: flex;
                align-items: center;
                gap: 0.25rem;
            }

            .btn-learn-more:hover {
                background: #e5e7eb;
                border-color: #d1d5db;
            }

            /* Full Image View */
            .full-image-view {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
            }

            .full-image-view img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }

            .back-to-grid {
                position: absolute;
                top: 12px;
                left: 12px;
                background: rgba(0, 0, 0, 0.7);
                color: #fff;
                border: none;
                padding: 0.5rem 1rem;
                border-radius: 6px;
                font-size: 0.75rem;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .back-to-grid:hover {
                background: rgba(0, 0, 0, 0.9);
            }

            /* Right Panel - Form - Same height as card-preview */
            .form-panel {
                min-width: 400px;
                display: flex;
                flex-direction: column;
                height: 100%;
                flex: 1;
            }

            .card {
                background: #fff;
                border-radius: 12px;
                padding: 1.25rem;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
                flex: 1 1 auto;
                min-height: 0;
                height: 100%;
                overflow-y: auto;
            }

            .card-title {
                font-size: 0.875rem;
                font-weight: 600;
                color: #1a1a1a;
                margin-bottom: 1rem;
                padding-bottom: 0.75rem;
                border-bottom: 1px solid #f0f0f0;
            }

            .form-group {
                margin-bottom: 1rem;
            }

            .form-group:last-child {
                margin-bottom: 0;
            }

            .form-label {
                display: block;
                font-size: 0.8125rem;
                font-weight: 500;
                color: #374151;
                margin-bottom: 0.5rem;
            }

            .form-select,
            .form-input,
            .form-textarea {
                width: 100%;
                padding: 0.625rem 0.875rem;
                border: 1px solid #e5e5e5;
                border-radius: 8px;
                font-size: 0.875rem;
                font-family: inherit;
                background: #fff;
                color: #1a1a1a;
                transition:
                    border-color 0.2s,
                    box-shadow 0.2s;
            }

            .form-select:focus,
            .form-input:focus,
            .form-textarea:focus {
                outline: none;
                border-color: #1a1a1a;
                box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
            }

            .form-textarea {
                resize: none;
                min-height: 80px;
                overflow-y: hidden;
            }

            #newsPrimaryText {
                min-height: 200px;
                flex: 1;
            }

            .form-textarea.auto-resize {
                height: auto;
            }

            .form-select {
                cursor: pointer;
                appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 0.75rem center;
                background-size: 1rem;
                padding-right: 2.5rem;
            }

            .checkbox-group {
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
            }

            .checkbox-item {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                cursor: pointer;
            }

            .checkbox-item input {
                width: 18px;
                height: 18px;
                accent-color: #1a1a1a;
            }

            .checkbox-item label {
                font-size: 0.875rem;
                color: #374151;
                cursor: pointer;
            }

            .schedule-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 0.75rem;
            }

            .schedule-label {
                font-size: 0.875rem;
                font-weight: 500;
                color: #374151;
            }

            .toggle {
                position: relative;
                width: 44px;
                height: 24px;
            }

            .toggle input {
                opacity: 0;
                width: 0;
                height: 0;
            }

            .toggle-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #e5e5e5;
                border-radius: 24px;
                transition: 0.3s;
            }

            .toggle-slider:before {
                position: absolute;
                content: "";
                height: 18px;
                width: 18px;
                left: 3px;
                bottom: 3px;
                background: #fff;
                border-radius: 50%;
                transition: 0.3s;
            }

            .toggle input:checked + .toggle-slider {
                background: #f97316;
            }

            .toggle input:checked + .toggle-slider:before {
                transform: translateX(20px);
            }

            /* Loading */
            .loading {
                display: inline-block;
                width: 18px;
                height: 18px;
                border: 2px solid #fff;
                border-radius: 50%;
                border-top-color: transparent;
                animation: spin 0.8s linear infinite;
            }

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

            /* Responsive */
            @media (max-width: 1400px) {
                .sidebar {
                    width: 280px;
                }

                .form-panel {
                    min-width: 320px;
                }

                .preview-panel {
                    --image-size: min(420px, calc(100vh - 297px));
                }
            }

            @media (max-width: 1024px) {
                .app-layout {
                    grid-template-columns: 1fr;
                    justify-items: center;
                }

                .sidebar {
                    width: 100%;
                    max-width: 460px;
                }

                .preview-panel {
                    --image-size: min(460px, 90vw);
                    width: var(--image-size);
                    max-width: 460px;
                }

                .form-panel {
                    width: 100%;
                    max-width: 460px;
                }

                .pending-panel {
                    width: 100%;
                }
            }

            /* Settings Modal */
            .modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1000;
            }

            .modal {
                background: #fff;
                border-radius: 12px;
                width: 90%;
                max-width: 400px;
                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            }

            .modal-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1rem 1.25rem;
                border-bottom: 1px solid #e5e5e5;
            }

            .modal-header h3 {
                font-size: 1.125rem;
                font-weight: 600;
            }

            .modal-close {
                background: none;
                border: none;
                font-size: 1.5rem;
                cursor: pointer;
                color: #6b7280;
                line-height: 1;
            }

            .modal-body {
                padding: 1.25rem;
            }

            .modal-footer {
                padding: 1rem 1.25rem;
                border-top: 1px solid #e5e5e5;
                display: flex;
                justify-content: flex-end;
            }

            .setting-group {
                margin-bottom: 1rem;
            }

            .setting-label {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                font-weight: 500;
                cursor: pointer;
            }

            .setting-label input[type="checkbox"] {
                width: 18px;
                height: 18px;
                accent-color: #1a1a1a;
            }

            .setting-desc {
                font-size: 0.75rem;
                color: #6b7280;
                margin-top: 0.25rem;
            }

            .minute-grid {
                display: grid;
                grid-template-columns: repeat(10, 1fr);
                gap: 0.25rem;
                margin-top: 0.5rem;
            }

            .minute-checkbox {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0.25rem 0.35rem;
                border: 1px solid #e5e7eb;
                border-radius: 0.25rem;
                cursor: pointer;
                transition: all 0.15s;
                background: white;
            }

            .minute-checkbox:hover {
                border-color: #666666;
                background: #f5f5f5;
            }

            .minute-checkbox input {
                display: none;
            }

            .minute-checkbox input:checked + span {
                color: white;
            }

            .minute-checkbox:has(input:checked) {
                background: var(--page-color, #1a1a1a);
                border-color: var(--page-color, #1a1a1a);
                color: white;
            }

            .minute-checkbox.used-by-others {
                background: var(--other-color, #f59e0b);
                border-color: var(--other-color, #f59e0b);
                color: white;
                cursor: not-allowed;
                opacity: 0.8;
            }

            .minute-checkbox.used-by-others span {
                color: white;
            }

            .minute-checkbox.used-by-others:has(input:checked) {
                background: var(--other-color, #f59e0b);
                border-color: var(--other-color, #f59e0b);
            }

            .minute-checkbox span {
                font-weight: 500;
                font-size: 0.7rem;
            }

            .radio-group {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
            }

            .radio-option {
                display: flex;
                align-items: center;
                gap: 0.35rem;
                padding: 0.4rem 0.75rem;
                background: #f3f4f6;
                border-radius: 6px;
                cursor: pointer;
                font-size: 0.875rem;
                transition: all 0.15s;
            }

            .radio-option:hover {
                background: #e5e7eb;
            }

            .radio-option:has(input:checked) {
                background: #1a1a1a;
                color: #fff;
            }

            .radio-option input[type="radio"] {
                display: none;
            }

            .next-schedule-display {
                background: #e5e5e5;
                color: #1a1a1a;
                padding: 0.5rem 0.75rem;
                border-radius: 6px;
                font-weight: 500;
            }

            .btn-save {
                background: #1a1a1a;
                color: #fff;
                border: none;
                padding: 0.625rem 1.25rem;
                border-radius: 8px;
                font-weight: 500;
                cursor: pointer;
            }

            .btn-save:hover {
                background: #000000;
            }

            /* Pending list */
            .pending-item {
                display: flex;
                gap: 0.75rem;
                padding: 0.75rem;
                background: #f9fafb;
                border-radius: 8px;
                margin-bottom: 0.5rem;
            }

            .pending-item-thumb {
                width: 48px;
                height: 48px;
                border-radius: 6px;
                object-fit: cover;
                background: #e5e5e5;
            }

            .pending-item-info {
                flex: 1;
                min-width: 0;
            }

            .pending-item-title {
                font-weight: 500;
                font-size: 0.875rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .pending-item-time {
                font-size: 0.75rem;
                color: #6b7280;
            }

            .pending-item-delete {
                background: none;
                border: none;
                color: #ef4444;
                cursor: pointer;
                padding: 0.25rem;
            }

            .pending-empty {
                text-align: center;
                color: #6b7280;
                padding: 2rem;
            }

            /* Pending Panel (replaces preview + form) */
            .pending-panel {
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
                padding: 1.5rem;
                width: 100%;
                min-width: 0;
            }

            .pending-panel-header {
                display: flex;
                align-items: center;
                gap: 1rem;
                margin-bottom: 1rem;
            }

            .pending-panel-header h2 {
                font-size: 1.25rem;
                font-weight: 600;
            }

            .sort-toggle-btn {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.4rem 0.75rem;
                background: #f5f5f5;
                border: 1px solid #ddd;
                border-radius: 6px;
                font-size: 0.8rem;
                color: #666;
                cursor: pointer;
                transition: all 0.2s;
                margin-left: auto;
            }
            .sort-toggle-btn:hover {
                background: #eee;
                border-color: #ccc;
            }
            .sort-toggle-btn .sort-icon {
                font-size: 1rem;
            }

            .pending-table-container {
                overflow-y: auto;
                flex: 1;
                width: 100%;
            }

            #pendingPanel {
                display: flex;
                flex-direction: column;
                height: calc(100vh - 60px - 1rem);
                overflow: hidden;
            }

            #pendingPanel .pending-panel-header {
                flex-shrink: 0;
            }

            #publishedPanel {
                display: flex;
                flex-direction: column;
                height: calc(100vh - 60px - 1rem);
                overflow: hidden;
            }

            #publishedPanel .pending-panel-header {
                flex-shrink: 0;
            }

            #publishedPanel .pending-table-container {
                overflow-y: auto;
                flex: 1;
            }

            .pending-table-container .pending-table th {
                position: sticky;
                top: 0;
                background: #fff;
                z-index: 1;
            }

            .quotes-table-container {
                overflow-y: auto;
                flex: 1;
                width: 100%;
            }

            #quotesPanel {
                display: flex;
                flex-direction: column;
                height: calc(100vh - 60px - 1rem);
                overflow: hidden;
            }

            #quotesPanel .pending-panel-header,
            #quotesPanel .quotes-form {
                flex-shrink: 0;
            }

            #settingsPanel {
                display: flex;
                flex-direction: column;
                height: calc(100vh - 60px - 1rem);
                overflow: hidden;
                flex: 1;
            }

            #settingsPanel .pending-panel-header {
                flex-shrink: 0;
            }

            #textPanel {
                display: flex;
                flex-direction: column;
                height: calc(100vh - 60px - 1rem);
                overflow: hidden;
            }

            #textPanel .pending-panel-header {
                flex-shrink: 0;
            }

            #earningsPanel {
                display: flex;
                flex-direction: column;
                height: calc(100vh - 60px - 1rem);
                overflow: hidden;
            }

            #earningsPanel .pending-panel-header {
                flex-shrink: 0;
            }

            #earningsContent {
                overflow-y: auto;
                flex: 1;
            }

            .text-post-form {
                padding: 1rem 0;
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            .settings-content {
                overflow-y: auto;
                flex: 1;
                padding-top: 0.5rem;
            }

            .settings-section {
                background: #f9fafb;
                border-radius: 8px;
                padding: 0;
                margin-bottom: 0.5rem;
                overflow: hidden;
            }

            .settings-section.collapsible .settings-section-title {
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1rem 1.25rem;
                margin: 0;
                border-bottom: none;
                user-select: none;
            }

            .settings-section.collapsible .settings-section-title:hover {
                background: #f3f4f6;
            }

            .settings-section.collapsible .collapse-icon {
                font-size: 1.2rem;
                color: #9ca3af;
                transition: transform 0.2s;
            }

            .settings-section.collapsible.open .collapse-icon {
                transform: rotate(90deg);
            }

            .settings-section.collapsible .settings-section-content {
                display: none;
                padding: 0 1.25rem 1.25rem;
            }

            .settings-section.collapsible.open .settings-section-content {
                display: block;
            }

            .settings-section-title {
                font-size: 1rem;
                font-weight: 600;
                color: #374151;
                margin-bottom: 1rem;
                padding-bottom: 0.5rem;
                border-bottom: 1px solid #e5e7eb;
            }

            .pending-table {
                width: 100%;
                border-collapse: collapse;
                overflow: visible;
            }

            .pending-table th,
            .pending-table td {
                padding: 0.75rem 1rem;
                text-align: left;
                border-bottom: 1px solid #e5e5e5;
                overflow: visible;
            }

            .pending-table td:first-child {
                overflow: visible;
                position: relative;
            }

            .pending-table th {
                font-size: 0.75rem;
                font-weight: 600;
                color: #6b7280;
                text-transform: uppercase;
                background: #f9fafb;
            }

            .quotes-table-container .pending-table th {
                position: sticky;
                top: 0;
                z-index: 1;
            }

            .quote-text-cell {
                cursor: default;
            }

            /* Used quote styling */
            .quote-row-used {
                background: rgba(16, 185, 129, 0.15) !important;
            }
            .quote-row-used td {
                border-bottom-color: rgba(16, 185, 129, 0.3) !important;
            }
            .quote-used-badge {
                display: inline-block;
                padding: 2px 6px;
                background: #10b981;
                color: white;
                border-radius: 4px;
                font-size: 0.7rem;
                margin-left: 0.5rem;
                vertical-align: middle;
            }
            .pending-table-thumb {
                width: 56px;
                height: 56px;
                border-radius: 8px;
                object-fit: cover;
                background: #e5e5e5;
                cursor: pointer;
            }

            /* Hover preview popup */
            .thumb-preview-popup {
                position: fixed;
                z-index: 9999;
                pointer-events: none;
                border-radius: 8px;
                max-width: 280px;
                max-height: 500px;
                object-fit: contain;
                display: none;
            }

            /* Pending Skeleton Loading */
            .pending-skeleton {
                padding: 1rem;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .pending-skeleton-row {
                display: flex;
                align-items: center;
                gap: 1rem;
                padding: 0.75rem 0;
                border-bottom: 1px solid #f3f4f6;
            }

            .pending-skeleton-row .sk-img {
                width: 56px;
                height: 56px;
                border-radius: 8px;
                background: linear-gradient(
                    90deg,
                    #e5e5e5 25%,
                    #f0f0f0 50%,
                    #e5e5e5 75%
                );
                background-size: 200% 100%;
                animation: skeleton-shimmer 1.5s infinite;
            }

            .pending-skeleton-row .sk-text {
                flex: 1;
                height: 16px;
                border-radius: 4px;
                background: linear-gradient(
                    90deg,
                    #e5e5e5 25%,
                    #f0f0f0 50%,
                    #e5e5e5 75%
                );
                background-size: 200% 100%;
                animation: skeleton-shimmer 1.5s infinite;
            }

            .pending-skeleton-row .sk-date {
                width: 120px;
                height: 14px;
                border-radius: 4px;
                background: linear-gradient(
                    90deg,
                    #e5e5e5 25%,
                    #f0f0f0 50%,
                    #e5e5e5 75%
                );
                background-size: 200% 100%;
                animation: skeleton-shimmer 1.5s infinite;
            }

            .pending-skeleton-row .sk-badge {
                width: 80px;
                height: 24px;
                border-radius: 12px;
                background: linear-gradient(
                    90deg,
                    #e5e5e5 25%,
                    #f0f0f0 50%,
                    #e5e5e5 75%
                );
                background-size: 200% 100%;
                animation: skeleton-shimmer 1.5s infinite;
            }

            @keyframes skeleton-shimmer {
                0% {
                    background-position: -200% 0;
                }

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

            /* Image Lightbox */
            .lightbox-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.85);
                z-index: 9999;
                display: none;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }

            .lightbox-overlay.show {
                display: flex;
            }

            .lightbox-image {
                max-width: 90vw;
                max-height: 90vh;
                border-radius: 8px;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            }

            .lightbox-close {
                position: absolute;
                top: 20px;
                right: 20px;
                background: rgba(255, 255, 255, 0.2);
                border: none;
                color: white;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                font-size: 1.5rem;
                cursor: pointer;
                transition: background 0.2s;
            }

            .lightbox-close:hover {
                background: rgba(255, 255, 255, 0.3);
            }

            .pending-table-title {
                font-weight: 500;
                font-size: 0.875rem;
            }

            .pending-table-url {
                font-size: 0.75rem;
                color: #6b7280;
                max-width: 250px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .pending-table-time {
                font-size: 0.875rem;
                color: #1a1a1a;
                font-weight: 500;
            }

            .pending-table-status {
                display: inline-flex;
                align-items: center;
                gap: 0.25rem;
                font-size: 0.75rem;
                padding: 0.25rem 0.5rem;
                border-radius: 4px;
                background: #fef3c7;
                color: #92400e;
                text-decoration: none;
                cursor: pointer;
                transition:
                    transform 0.15s,
                    box-shadow 0.15s;
            }

            .pending-table-status:hover {
                transform: scale(1.05);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }

            .pending-table-edit {
                background: #e0e7ff;
                border: none;
                color: #4f46e5;
                padding: 0.5rem;
                border-radius: 6px;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .pending-table-edit:hover {
                background: #c7d2fe;
            }

            .pending-table-delete {
                background: #fee2e2;
                border: none;
                color: #ef4444;
                padding: 0.5rem;
                border-radius: 6px;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .pending-table-delete:hover {
                background: #fecaca;
            }

            .pending-table-link {
                background: #dbeafe;
                border: none;
                color: #2563eb;
                padding: 0.5rem;
                border-radius: 6px;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                text-decoration: none;
            }

            .pending-table-link:hover {
                background: #bfdbfe;
            }

            .pending-table-share-link {
                background: #d1fae5;
                color: #059669;
            }

            .pending-table-share-link:hover {
                background: #a7f3d0;
            }

            /* Edit Time Modal */
            .edit-time-modal {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 10000;
            }

            .edit-time-modal-content {
                background: white;
                padding: 1.5rem;
                border-radius: 12px;
                min-width: 320px;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            }

            .edit-time-modal-content h3 {
                margin: 0 0 1.25rem 0;
                font-size: 1.1rem;
                color: #1f2937;
            }

            .edit-time-fields {
                display: flex;
                gap: 1rem;
                margin-bottom: 1.5rem;
            }

            .edit-time-field {
                flex: 1;
            }

            .edit-time-field label {
                display: block;
                font-size: 0.8rem;
                color: #6b7280;
                margin-bottom: 0.5rem;
            }

            .edit-time-field input {
                width: 100%;
                padding: 0.6rem 0.75rem;
                border: 1px solid #e5e7eb;
                border-radius: 8px;
                font-size: 0.95rem;
                box-sizing: border-box;
            }

            .edit-time-field input:focus {
                outline: none;
                border-color: #1a1a1a;
                box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
            }

            .edit-time-actions {
                display: flex;
                gap: 0.75rem;
                justify-content: flex-end;
            }

            .edit-time-cancel {
                padding: 0.6rem 1.25rem;
                border: 1px solid #e5e7eb;
                background: white;
                border-radius: 8px;
                cursor: pointer;
                font-size: 0.9rem;
                color: #6b7280;
            }

            .edit-time-cancel:hover {
                background: #f9fafb;
            }

            .edit-time-save {
                padding: 0.6rem 1.25rem;
                border: none;
                background: #1f2937;
                color: white;
                border-radius: 8px;
                cursor: pointer;
                font-size: 0.9rem;
                font-weight: 500;
            }

            .edit-time-save:hover {
                background: #374151;
            }

            .delete-confirm-btn {
                padding: 0.6rem 1.25rem;
                border: none;
                background: #ef4444;
                color: white;
                border-radius: 8px;
                cursor: pointer;
                font-size: 0.9rem;
                font-weight: 500;
            }

            .delete-confirm-btn:hover {
                background: #dc2626;
            }

            .delete-confirm-btn:disabled {
                background: #fca5a5;
                cursor: not-allowed;
            }

            /* Post Type Badges */
            .post-type-badge {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border-radius: 8px;
                font-size: 1.1rem;
                cursor: default;
            }
            .post-type-link {
                background: #dbeafe;
            }
            .post-type-image {
                background: #d1fae5;
            }
            .post-type-reels {
                background: #fce7f3;
            }

            /* Token Info Popup Modal */
            .token-modal-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 1000;
                justify-content: center;
                align-items: center;
            }

            .token-modal-overlay.show {
                display: flex;
            }

            .token-modal {
                background: white;
                border-radius: 12px;
                padding: 1.5rem;
                max-width: 600px;
                width: 90%;
                max-height: 80vh;
                overflow-y: auto;
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            }

            .token-modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 1rem;
                padding-bottom: 0.75rem;
                border-bottom: 1px solid #e5e7eb;
            }

            .token-modal-title {
                font-size: 1.25rem;
                font-weight: 600;
                color: #111827;
            }

            .token-modal-close {
                background: none;
                border: none;
                cursor: pointer;
                padding: 0.25rem;
                color: #6b7280;
            }

            .token-modal-close:hover {
                color: #111827;
            }

            .token-item {
                margin-bottom: 1rem;
            }

            .token-label {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                font-weight: 500;
                color: #374151;
                margin-bottom: 0.5rem;
            }

            .token-status {
                padding: 0.125rem 0.5rem;
                border-radius: 9999px;
                font-size: 0.75rem;
                font-weight: 500;
            }

            .token-status.valid {
                background: #dcfce7;
                color: #166534;
            }

            .token-status.invalid {
                background: #fee2e2;
                color: #991b1b;
            }

            .token-value {
                background: #f3f4f6;
                border: 1px solid #e5e7eb;
                border-radius: 8px;
                padding: 0.75rem;
                font-family: monospace;
                font-size: 0.75rem;
                word-break: break-all;
                color: #374151;
                max-height: 100px;
                overflow-y: auto;
            }

            .token-value.empty {
                color: #9ca3af;
                font-style: italic;
            }

            .token-copy-btn {
                margin-top: 0.5rem;
                background: #f3f4f6;
                border: 1px solid #e5e7eb;
                padding: 0.375rem 0.75rem;
                border-radius: 6px;
                font-size: 0.75rem;
                cursor: pointer;
                color: #374151;
            }

            .token-copy-btn:hover {
                background: #e5e7eb;
            }

            .status-indicator {
                cursor: pointer;
                transition: transform 0.1s;
            }

            .status-indicator:hover {
                transform: scale(1.05);
            }