/* Design System & Root Variables */
:root {
    --bg-main: #282C34;
    --bg-sidebar: rgba(33, 37, 43, 0.85);
    --bg-card: rgba(44, 49, 60, 0.55);
    --bg-card-inner: rgba(33, 37, 43, 0.5);
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-glass-hover: rgba(255, 255, 255, 0.15);
    
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --accent-orange: #f97316;
    --accent-orange-rgb: 249, 115, 22;
    --accent-cyan: #06b6d4;
    --accent-cyan-rgb: 6, 182, 212;
    --accent-coral: #ff7f50;
    --accent-coral-rgb: 255, 127, 80;
    --accent-amber: #f59e0b;
    --accent-amber-rgb: 245, 158, 11;
    
    --accent-gradient: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-cyan) 100%);
    --gradient-hover: linear-gradient(135deg, var(--accent-coral) 0%, var(--accent-amber) 100%);

    /* Backward compatibility mappings for older styles and hardcoded variables */
    --accent-purple: var(--accent-orange);
    --accent-purple-rgb: var(--accent-orange-rgb);
    --accent-pink: var(--accent-coral);
    --accent-pink-rgb: var(--accent-coral-rgb);
    
    --shadow-main: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
    --shadow-inset: inset 0 2px 4px 0 rgba(255, 255, 255, 0.05);
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease-out;
}

/* Global Reset & Base Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    overflow-x: hidden;
    position: relative;
    line-height: 1.5;
}

/* Background Glow Effects */
.glow-bg {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(150px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.15;
}

.glow-1 {
    background: radial-gradient(circle, var(--accent-purple) 0%, rgba(0, 0, 0, 0) 70%);
    top: -100px;
    right: -100px;
}

.glow-2 {
    background: radial-gradient(circle, var(--accent-cyan) 0%, rgba(0, 0, 0, 0) 70%);
    bottom: -200px;
    left: -100px;
}

/* Main Layout Structure */
.app-container {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Sidebar Navigation */
.sidebar {
    position: relative;
    width: 280px;
    height: 100vh;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    padding: 24px;
    flex-shrink: 0;
    z-index: 10;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Webkit */
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    transition: justify-content 0.3s ease, gap 0.3s ease, margin-bottom 0.3s ease;
}

.brand-logo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: var(--shadow-inset);
    transition: width 0.3s ease, height 0.3s ease, font-size 0.3s ease;
}

.text-gradient {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-info {
    display: flex;
    flex-direction: column;
}

.brand-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.brand-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.nav-item {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-smooth);
    width: 100%;
    text-decoration: none;
}

.nav-item i {
    font-size: 18px;
    width: 20px;
    text-align: center;
    transition: var(--transition-fast);
    color: var(--accent-cyan);
}

.nav-item:hover i {
    color: var(--accent-purple);
}

.nav-item.active i,
[data-theme="light"] .nav-item.active i {
    background: var(--accent-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
}

.nav-item:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--border-glass);
}

.nav-item.active {
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border-color: transparent !important;
    z-index: 1;
    box-shadow: 0 4px 20px rgba(var(--accent-purple-rgb), 0.15);
}

.nav-item.active::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        #f97316,
        #84cc16,
        #06b6d4,
        #f97316
    );
    animation: rotateBorderChasing 3.5s linear infinite;
    z-index: -2;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: var(--bg-sidebar);
    border-radius: var(--radius-md);
    z-index: -1;
}

.nav-item.active > * {
    position: relative;
    z-index: 2;
}

.nav-item.active i {
    transform: scale(1.1);
    position: relative;
    z-index: 2;
}

/* ── Custom Highlighted Design for Learning Hub ── */
#nav-ruang-belajar {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(6, 182, 212, 0.05) 100%) !important;
    border: 1px solid rgba(124, 58, 237, 0.22) !important;
    margin-bottom: 12px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#nav-ruang-belajar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 3.5px;
    background: linear-gradient(to bottom, #a855f7, #06b6d4);
    border-radius: 0 4px 4px 0;
    transition: var(--transition-smooth);
}

#nav-ruang-belajar:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(6, 182, 212, 0.1) 100%) !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.18);
    transform: translateY(-1px);
}

#nav-ruang-belajar.active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25) !important;
}

#nav-ruang-belajar.active::before {
    opacity: 0; /* Hide the bar when chasing border is active */
}

/* Learning Menu Badge */
.learning-menu-badge {
    font-size: 8px;
    font-weight: 800;
    padding: 2.5px 7px;
    border-radius: 20px;
    background: rgba(124, 58, 237, 0.15);
    color: #a855f7;
    border: 1px solid rgba(124, 58, 237, 0.3);
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: var(--transition-smooth);
}

#nav-ruang-belajar:hover .learning-menu-badge {
    background: #7c3aed;
    color: #ffffff;
    border-color: #7c3aed;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

#nav-ruang-belajar.active .learning-menu-badge {
    background: #a855f7;
    color: #ffffff;
    border-color: #a855f7;
}

/* Light Theme Adaptations */
[data-theme="light"] #nav-ruang-belajar {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.07) 0%, rgba(2, 132, 199, 0.04) 100%) !important;
    border-color: rgba(124, 58, 237, 0.16) !important;
}

[data-theme="light"] #nav-ruang-belajar:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(2, 132, 199, 0.08) 100%) !important;
    border-color: rgba(124, 58, 237, 0.28) !important;
}

[data-theme="light"] .learning-menu-badge {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
    border-color: rgba(124, 58, 237, 0.2);
}


@keyframes rotateBorderChasing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sidebar-footer {
    border-top: 1px solid var(--border-glass);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dkv-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(var(--accent-cyan-rgb), 0.1);
    color: var(--accent-cyan);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.copyright {
    font-size: 11px;
    color: var(--text-muted);
}

.creator-profile {
    transition: var(--transition-smooth);
}

.creator-profile:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--accent-cyan-rgb), 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--accent-cyan-rgb), 0.05);
}

/* Sidebar Collapsed & Toggle Button Styles */
.sidebar-toggle-btn {
    position: absolute;
    top: 40px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    outline: none;
}
.sidebar-toggle-btn:hover {
    color: var(--text-primary);
    background-color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(var(--accent-cyan-rgb), 0.6);
}
.sidebar-toggle-btn i {
    font-size: 11px;
    transition: transform 0.3s ease;
}
.sidebar.collapsed .sidebar-toggle-btn i {
    transform: rotate(180deg);
}

.sidebar.collapsed {
    width: 88px;
    padding: 24px 12px;
    overflow-x: hidden;
}
.sidebar.collapsed .brand {
    justify-content: center;
    gap: 0;
    margin-bottom: 30px;
}
.sidebar.collapsed .brand-info {
    display: none !important;
}
.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 14px 0;
    gap: 0;
}
.sidebar.collapsed .nav-item span {
    display: none !important;
}
.sidebar.collapsed .nav-item i {
    font-size: 20px;
}
.sidebar.collapsed .sidebar-footer {
    align-items: center;
    padding-top: 16px;
}
.sidebar.collapsed .creator-profile {
    padding: 6px !important;
    justify-content: center;
    width: auto;
    margin-bottom: 12px;
}
.sidebar.collapsed .creator-info,
.sidebar.collapsed .dkv-tag,
.sidebar.collapsed .copyright {
    display: none !important;
}

/* Main Content Styling */
.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
    height: 100vh;
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 20px;
    padding: 40px 40px 0 40px;
}


.header-title-area h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.header-title-area p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--accent-gradient);
    color: var(--text-primary);
    box-shadow: 0 4px 15px rgba(var(--accent-purple-rgb), 0.2);
}

.btn-primary:hover {
    background: var(--gradient-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-purple-rgb), 0.3);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--border-glass);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--border-glass-hover);
    transform: translateY(-2px);
}

.btn-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.btn-danger:hover {
    background-color: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    transform: translateY(-2px);
}

.btn-floating-top {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    backdrop-filter: blur(8px);
}

/* Glass Panel UI Components */
.glass-panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-main), var(--shadow-inset);
    padding: 24px;
}

/* Tabs Toggle Visibility */
.tab-content {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    padding: 0 40px 40px 40px;
}

/* ==========================================================================
   TAB 1: RODA WARNA CSS
   ========================================================================== */
.color-wheel-layout {
    display: grid;
    grid-template-columns: 390px 1fr;
    gap: 32px;
    align-items: start;
}

.wheel-control-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.harmony-selector-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.harmony-active-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 12px;
    text-transform: capitalize;
}

.harmony-icons-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.harmony-icons-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    width: 100%;
    padding: 4px;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
}

.harmony-icons-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.harmony-btn {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: var(--radius-md);
    background-color: var(--bg-card-inner);
    border: 1.5px solid var(--border-glass);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    padding: 0;
}

.harmony-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-glass-hover);
    transform: translateY(-2px);
}

.harmony-btn.active {
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--text-primary);
    color: var(--accent-cyan);
    box-shadow: 0 0 12px rgba(var(--accent-cyan-rgb), 0.15);
}

.harmony-svg {
    width: 38px;
    height: 38px;
    transition: var(--transition-smooth);
}

.harmony-btn.active .harmony-svg {
    transform: scale(1.05);
}

.scroll-arrow-btn {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(9, 13, 22, 0.95);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    backdrop-filter: blur(4px);
    transition: var(--transition-smooth);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.scroll-arrow-btn:hover {
    transform: scale(1.1);
    background-color: var(--text-primary);
    color: #000;
    border-color: transparent;
}

.scroll-arrow-btn.left {
    left: -10px;
}

.scroll-arrow-btn.right {
    right: -10px;
}

.combination-count-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    border-top: 1px dashed var(--border-glass);
    padding-top: 16px;
}

.segmented-control {
    display: flex;
    background-color: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 4px;
    width: 100%;
    margin-top: 8px;
}

.segment-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
    text-align: center;
}

.segment-btn:hover {
    color: var(--text-primary);
}

.segment-btn.active {
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: 0 4px 10px rgba(var(--accent-cyan-rgb), 0.15);
}

.wheel-canvas-container {
    position: relative;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

#color-wheel {
    cursor: crosshair;
    touch-action: none;
}

.wheel-instruction {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    align-items: flex-start;
}

.wheel-instruction i {
    font-size: 13px;
    color: var(--accent-cyan);
    margin-top: 1px;
}

/* Palette Display Area */
.palette-display-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.palette-colors-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Dynamic layouts based on color counts */
.palette-colors-row.count-3 .color-card {
    flex: 1 1 calc(33.333% - 12px);
    max-width: calc(33.333% - 8px);
}

.palette-colors-row.count-5 .color-card {
    flex: 1 1 calc(33.333% - 12px);
    max-width: calc(33.333% - 8px);
}

.palette-colors-row.count-7 .color-card {
    flex: 1 1 calc(25% - 12px);
    max-width: calc(25% - 9px);
}

.color-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-main);
    transition: var(--transition-smooth);
    min-width: 180px;
}

.color-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-glass-hover);
}

.color-card.active {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.15), var(--shadow-main);
}

.color-preview {
    height: 180px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 12px;
    transition: background-color 0.15s ease;
}

.color-base-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: rgba(9, 13, 22, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: var(--transition-fast);
}

.color-card.active .color-base-badge {
    opacity: 1;
    background-color: var(--accent-cyan);
    border-color: transparent;
    color: #000;
}

.btn-color-picker-trigger {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(9, 13, 22, 0.65);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    backdrop-filter: blur(4px);
    transition: var(--transition-fast);
}

.btn-color-picker-trigger:hover {
    transform: scale(1.1);
    background-color: var(--text-primary);
    color: #000;
}

.hidden-color-picker {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.color-inputs-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
    background-color: rgba(9, 13, 22, 0.2);
}

/* Hex input group */
.hex-input-group {
    display: flex;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--bg-card-inner);
    transition: var(--transition-fast);
}

.hex-input-group:focus-within {
    border-color: var(--accent-cyan);
}

.input-prefix {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background-color: rgba(255, 255, 255, 0.02);
    border-right: 1px solid var(--border-glass);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hex-input-field {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 10px;
    text-transform: uppercase;
}

.btn-copy-hex {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.btn-copy-hex:hover {
    color: var(--accent-cyan);
    transform: scale(1.15);
}


/* RGB Sliders */
.color-slider-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    width: 12px;
    flex-shrink: 0;
}

.color-slider {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}

.color-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.color-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

.slider-red::-webkit-slider-thumb { background-color: #ef4444; }
.slider-green::-webkit-slider-thumb { background-color: #22c55e; }
.slider-blue::-webkit-slider-thumb { background-color: #3b82f6; }

.slider-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* RGB Digital Mode Readout styling */
.rgb-display {
    border-top: 1px dashed var(--border-glass);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rgb-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rgb-title i {
    color: var(--accent-cyan);
}

.rgb-value {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: 'Space Grotesk', sans-serif;
}

/* CMYK Print Mode Readout styling */
.cmyk-display {
    border-top: 1px dashed var(--border-glass);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cmyk-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cmyk-title i {
    color: var(--accent-purple);
}

.cmyk-value {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    font-family: 'Space Grotesk', sans-serif;
}

/* Gamut Warning & Auto-Clamp styles */
.cmyk-display {
    position: relative;
    transition: var(--transition-smooth);
    border-radius: var(--radius-sm);
    padding: 8px;
    border: 1px dashed transparent;
    margin: -8px;
    margin-top: 4px;
}
.cmyk-display.out-of-gamut {
    border-color: rgba(var(--accent-amber-rgb), 0.3) !important;
    background: rgba(var(--accent-amber-rgb), 0.03) !important;
}
.gamut-warning-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-amber);
    background-color: rgba(var(--accent-amber-rgb), 0.12);
    border: 1px solid rgba(var(--accent-amber-rgb), 0.2);
    padding: 2px 6px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-amber 2s infinite;
}
@keyframes pulse-amber {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; box-shadow: 0 0 6px rgba(var(--accent-amber-rgb), 0.3); }
}

.btn-gamut-clamp {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #0b0f19;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 2px 8px rgba(var(--accent-amber-rgb), 0.3);
}
.btn-gamut-clamp:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--accent-amber-rgb), 0.45);
}
.btn-gamut-clamp:active {
    transform: translateY(0);
}

/* ==========================================================================
   TAB 2: EKSTRAK GAMBAR CSS
   ========================================================================== */
.image-extract-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.image-source-card {
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Dropzone styling */
.image-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    cursor: pointer;
    transition: var(--transition-smooth);
    background-color: rgba(255, 255, 255, 0.01);
}

.image-dropzone:hover {
    border-color: var(--accent-cyan);
    background-color: rgba(var(--accent-cyan-rgb), 0.02);
}

.dropzone-icon {
    font-size: 48px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.image-dropzone h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.image-dropzone p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-align: center;
}

.file-spec {
    font-size: 11px;
    color: var(--text-muted);
}

.hidden-file-input {
    display: none;
}

/* Image Picker Container overlay */
.image-picker-container {
    position: relative;
    max-width: 100%;
    max-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.source-image-element {
    max-width: 100%;
    max-height: 500px;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.picker-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

/* Draggable Image Markers */
.color-picker-marker {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
    cursor: grab;
    transform: translate(-50%, -50%);
    z-index: 5;
    transition: border-color 0.1s ease;
}

.color-picker-marker:active {
    cursor: grabbing;
}

.color-picker-marker::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
}

/* Colors extracted result card */
.extracted-result-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.subtitle-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: -6px;
}

.extracted-palettes-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0;
}

.extracted-color-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.extracted-color-item:hover {
    border-color: var(--border-glass-hover);
    transform: translateX(4px);
}

.ext-preview {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-inset);
    flex-shrink: 0;
}

.ext-details {
    display: flex;
    flex-direction: column;
}

.ext-hex {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.ext-rgb {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    color: var(--text-secondary);
}

.extracted-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.extracted-actions .btn {
    width: 100%;
}

/* ==========================================================================
   TAB 3: CEK KONTRAS CSS (ADOBE EXPRESS LAYOUT STYLE)
   ========================================================================== */
.contrast-checker-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 32px;
    align-items: start;
}

.contrast-control-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contrast-header-express {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contrast-header-express h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

/* Score Capsule styling */
.express-ratio-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    padding: 10px 16px;
    border-radius: var(--radius-md);
}

.ratio-label-express {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.express-ratio-capsule {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #10b981;
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
    transition: var(--transition-fast);
}

.express-ratio-capsule.fail-bg {
    background-color: #f43f5e;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.2);
}

.btn-text-link {
    background: transparent;
    border: none;
    color: var(--accent-cyan);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    margin-left: auto;
    transition: var(--transition-fast);
    font-family: inherit;
}

.btn-text-link:hover {
    color: #fff;
}

/* Dual picker cards grid */
.express-picker-grid {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.express-picker-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    padding: 16px;
    border-radius: var(--radius-md);
}

.picker-label-express {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.express-input-wrap {
    display: flex;
    align-items: center;
    background-color: rgba(9, 13, 22, 0.6);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    gap: 8px;
}

.color-dot-preview {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.hex-hash {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--text-muted);
}

.express-input-wrap input[type="text"] {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    width: 100%;
}

.simple-color-picker {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    background: transparent;
    flex-shrink: 0;
    padding: 0;
}

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

.simple-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.btn-swap-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-swap-express {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-card);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-swap-express:hover {
    background-color: var(--text-primary);
    color: #000;
    transform: scale(1.1);
}

/* Lightness slider details */
.lightness-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.lightness-slider-bar {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #000000, #888888, #ffffff);
    outline: none;
    cursor: pointer;
}

.lightness-slider-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 2px solid #000;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    transition: transform 0.1s ease;
}

.lightness-slider-bar::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.lightness-value-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 18px;
    text-align: right;
}

/* Inner Tabs selectors */
.express-detail-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-glass);
    margin-top: 10px;
    gap: 16px;
}

.express-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 4px;
    cursor: pointer;
    position: relative;
    font-family: inherit;
    transition: var(--transition-fast);
}

.express-tab-btn:hover {
    color: var(--text-primary);
}

.express-tab-btn.active {
    color: var(--accent-cyan);
    font-weight: 700;
}

.express-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
}

/* Inner Panel details */
.express-tab-panels {
    min-height: 150px;
    display: flex;
    flex-direction: column;
}

.express-panel-content {
    padding-top: 16px;
}

/* Summary table styling */
.express-score-table {
    width: 100%;
    border-collapse: collapse;
}

.express-score-table th, 
.express-score-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-glass);
}

.express-score-table th {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 0;
}

.express-score-table td {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.dim-text {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

.text-center {
    text-align: center !important;
}

.score-status {
    font-weight: 700 !important;
}

.score-status i {
    margin-left: 4px;
    font-size: 13px;
}

.text-emerald-500 {
    color: #10b981;
}

.text-rose-500 {
    color: #f43f5e;
}

/* Suggested alternatives styling */
.suggestion-alternatives-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.suggestion-pill-btn {
    width: 100%;
    padding: 10px 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.alternatives-swatches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.alt-swatch-card {
    background-color: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: var(--transition-fast);
}

.alt-swatch-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
}

.alt-swatch-color {
    height: 36px;
    border-radius: var(--radius-xs);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.alt-swatch-hex {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--text-primary);
    text-align: center;
}

.alt-swatch-ratio {
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
}

/* Set ratio target buttons */
.target-ratio-btns-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.target-ratio-btn {
    padding: 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: 'Space Grotesk', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.target-ratio-btn.active {
    border-color: var(--accent-cyan) !important;
    background-color: rgba(var(--accent-cyan-rgb), 0.1) !important;
    color: var(--accent-cyan) !important;
}

.label-info {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ==========================================
   RIGHT COLUMN: BROWSER MOCKUP PREVIEW
   ========================================== */
.contrast-result-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.preview-label-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.browser-mockup-window {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    background-color: #1e293b;
    overflow: hidden;
    box-shadow: var(--shadow-main);
    display: flex;
    flex-direction: column;
}

.browser-titlebar-mock {
    height: 32px;
    background-color: rgba(9, 13, 22, 0.4);
    border-bottom: 1px solid var(--border-glass);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
}

.browser-titlebar-mock span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-red { background-color: #f43f5e; }
.dot-yellow { background-color: #eab308; }
.dot-green { background-color: #10b981; }

.browser-body-mock {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: 290px;
    align-items: stretch;
}

.browser-mock-photo {
    width: 100%;
    height: 100%;
    min-height: 290px;
    overflow: hidden;
    position: relative;
    background-color: #0b0f19;
}

.browser-mock-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.browser-mock-details {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.details-icon-express {
    opacity: 0.9;
}

.details-headline {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.details-paragraph {
    font-size: 11px;
    line-height: 1.5;
    opacity: 0.85;
}

.details-button-wrap {
    margin-top: 8px;
}

.details-action-btn {
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-fast);
}

.details-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Footer toolbar row */
.contrast-footer-toolbar {
    display: grid;
    grid-template-columns: auto auto;
    gap: 16px;
    align-items: center;
    margin-top: 4px;
}

.active-palette-dots-row {
    display: flex;
    gap: 6px;
}

.color-dot-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-fast);
}

.color-dot-swatch:hover {
    transform: scale(1.15);
    border-color: var(--accent-cyan);
}

.toolbar-actions-express {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.toolbar-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: var(--transition-fast);
}

.toolbar-icon-btn:hover {
    background-color: var(--text-primary);
    color: #000;
    transform: scale(1.08);
}

/* Create Theme Box at the very bottom */
.create-theme-express-box {
    grid-column: span 2;
    display: flex;
    background-color: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    padding: 6px;
    border-radius: var(--radius-md);
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.theme-name-input-express {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    padding-left: 12px;
}

.create-theme-express-box .btn {
    flex-shrink: 0;
    padding: 8px 16px !important;
    font-size: 12px !important;
    border-radius: var(--radius-sm) !important;
}

/* ==========================================================================
   TAB 4: RUANG BELAJAR CSS
   ========================================================================== */
.learning-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.learning-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.learning-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.learning-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    box-shadow: 0 4px 15px rgba(var(--accent-purple-rgb), 0.2);
}

.learning-header h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.learning-header p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* RGB CMYK Comparison Layout */
.cmyk-rgb-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.model-info-block {
    background-color: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.block-badge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

.rgb-badge {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.cmyk-badge {
    background-color: rgba(var(--accent-cyan-rgb), 0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
}

.model-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.model-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.model-bullet {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
}

.model-bullet li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.model-bullet i {
    font-size: 14px;
    margin-top: 2px;
    width: 14px;
    text-align: center;
}

.text-red { color: #ef4444; }
.text-cyan { color: #c2410c; }

/* Interactive Venn Diagrams */
.interactive-diagram-rgb {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 20px auto 10px auto;
}

.venn-circle {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 14px;
    mix-blend-mode: screen;
    opacity: 0.85;
}

.r-circle {
    background-color: rgba(255, 0, 0, 0.7);
    top: 15px;
    left: 40px;
}

.g-circle {
    background-color: rgba(0, 255, 0, 0.7);
    bottom: 25px;
    left: 10px;
}

.b-circle {
    background-color: rgba(0, 0, 255, 0.7);
    bottom: 25px;
    right: 10px;
}

.venn-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: #000;
    background-color: #fff;
    padding: 3px 6px;
    border-radius: 20px;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.interactive-diagram-cmyk {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 20px auto 10px auto;
}

.c-circle {
    background-color: rgba(0, 255, 255, 0.7);
    top: 15px;
    left: 40px;
    color: #000;
}

.m-circle {
    background-color: rgba(255, 0, 255, 0.7);
    bottom: 25px;
    left: 10px;
}

.y-circle {
    background-color: rgba(255, 255, 0, 0.7);
    bottom: 25px;
    right: 10px;
    color: #000;
}

.venn-center-cmyk {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background-color: #000;
    padding: 3px 6px;
    border-radius: 20px;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.learning-tip-alert {
    background-color: rgba(var(--accent-amber-rgb), 0.05);
    border: 1px solid rgba(var(--accent-amber-rgb), 0.15);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.5;
}

.learning-tip-alert i {
    font-size: 16px;
    margin-top: 2px;
}

/* Color Psychology Section */
.psychology-btn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.psych-btn {
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 12px 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.01);
    color: var(--text-secondary);
    transition: var(--transition-fast);
    text-align: center;
}

.psych-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-glass-hover);
}

.psych-btn.active {
    border-color: transparent;
    color: #000;
}

.red-btn.active { background-color: #ef4444; }
.blue-btn.active { background-color: #3b82f6; color: #fff; }
.yellow-btn.active { background-color: #facc15; }
.green-btn.active { background-color: #22c55e; }
.orange-btn.active { background-color: #f97316; }
.purple-btn.active { background-color: #a855f7; color: #fff; }
.black-btn.active { background-color: #111827; color: #fff; border: 1px solid var(--border-glass); }
.white-btn.active { background-color: #f8fafc; }

.psychology-detail-display {
    background-color: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-grow: 1;
}

.psychology-detail-display h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.psych-aspects {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 1px solid var(--border-glass);
    padding-top: 16px;
    margin-top: 6px;
}

.psych-aspect {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aspect-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.psych-aspect p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.brand-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.brand-tag {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

/* ==========================================================================
   TAB 5: GALERI SAYA CSS
   ========================================================================== */
.gallery-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    max-width: 500px;
    margin: 40px auto;
}

.empty-icon {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.gallery-empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.gallery-empty-state p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Palettes Grid */
.palettes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.palette-item-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.palette-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.palette-name-area h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.palette-date {
    font-size: 11px;
    color: var(--text-muted);
}

.btn-delete-palette {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition-fast);
    padding: 4px;
}

.btn-delete-palette:hover {
    color: #ef4444;
}

.palette-card-colors-row {
    display: flex;
    height: 64px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-glass);
}

.palette-card-color-stripe {
    flex-grow: 1;
    height: 100%;
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
}

.palette-card-color-stripe:hover {
    flex-grow: 1.5;
}

.stripe-hex {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px;
    font-weight: 700;
    background-color: rgba(9, 13, 22, 0.7);
    color: #fff;
    padding: 1px 4px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-fast);
}

.palette-card-color-stripe:hover .stripe-hex {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.palette-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.palette-card-actions .btn {
    padding: 8px 10px;
    font-size: 12px;
}

/* ==========================================================================
   TAB 6: EKSPLORASI CSS
   ========================================================================== */
.explore-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.explore-filter-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px dashed var(--border-glass);
    padding-bottom: 24px;
    margin-bottom: 8px;
}

.explore-search-box {
    position: relative;
    width: 100%;
}

.explore-search-box .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
}

.explore-search-box input {
    width: 100%;
    background-color: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 14px 16px 14px 46px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: var(--transition-smooth);
}

.explore-search-box input:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.15);
}

.explore-search-box .btn-clear {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    transition: var(--transition-fast);
    padding: 4px;
}

.explore-search-box .btn-clear:hover {
    color: var(--text-primary);
}

.explore-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.explore-tag-btn {
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.01);
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.explore-tag-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-glass-hover);
}

.explore-tag-btn.active {
    background: var(--accent-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(var(--accent-cyan-rgb), 0.2);
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 24px;
}

.explore-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background-color: rgba(9, 13, 22, 0.2);
}

.explore-card .palette-name-area h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.explore-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.explore-card-tag {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Utilities */
.hidden {
    display: none !important;
}

.hidden-canvas {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .color-wheel-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    
    .palette-display-area {
        width: 100%;
    }
    
    .image-extract-layout {
        grid-template-columns: 1fr;
    }
    
    .contrast-checker-layout {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   TABLET BREAKPOINT (769px – 1024px)
   Sidebar auto-collapses to icon-only strip (88px). Bottom nav stays hidden.
   Fills the gap between mobile (sidebar hidden) and desktop (sidebar full 280px).
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

    /* =====================================================
       SIDEBAR — Auto-collapse to icon-only strip
       ===================================================== */
    .sidebar {
        width: 88px !important;
        padding: 24px 12px !important;
        overflow-x: hidden !important;
    }
    .sidebar .brand {
        justify-content: center !important;
        gap: 0 !important;
        margin-bottom: 30px !important;
    }
    .sidebar .brand-info {
        display: none !important;
    }
    .sidebar .nav-item {
        justify-content: center !important;
        padding: 14px 0 !important;
        gap: 0 !important;
        position: relative;
    }
    .sidebar .nav-item span,
    .sidebar .learning-menu-badge {
        display: none !important;
    }
    .sidebar .nav-item i {
        font-size: 20px !important;
    }
    /* Tooltip on hover for icon-only sidebar */
    .sidebar .nav-item::after {
        content: attr(title);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%);
        background: rgba(15, 23, 42, 0.95);
        color: #e2e8f0;
        font-size: 11px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 6px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 200;
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }
    .sidebar .nav-item:hover::after {
        opacity: 1;
    }
    .sidebar .sidebar-footer {
        align-items: center !important;
        padding-top: 16px !important;
    }
    .sidebar .creator-profile {
        padding: 6px !important;
        justify-content: center !important;
        width: auto !important;
        margin-bottom: 12px !important;
    }
    .sidebar .creator-info,
    .sidebar .dkv-tag,
    .sidebar .copyright {
        display: none !important;
    }
    .sidebar .lang-toggle-btn,
    .sidebar .theme-toggle-btn .toggle-label,
    .sidebar .theme-toggle-btn .toggle-track {
        display: none !important;
    }
    .sidebar .theme-toggle-btn {
        justify-content: center !important;
        padding: 10px 0 !important;
    }
    /* Hide manual toggle btn on tablet — sidebar is auto-collapsed */
    .sidebar-toggle-btn {
        display: none !important;
    }

    /* =====================================================
       MAIN CONTENT — adjust padding for narrower canvas
       ===================================================== */
    .content-header {
        padding: 28px 28px 0 28px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .tab-content.active {
        padding: 0 28px 28px 28px !important;
    }
    .header-title-area h1 {
        font-size: 26px !important;
    }

    /* =====================================================
       LAYOUT GRIDS — single column for narrower viewport
       ===================================================== */
    .color-wheel-layout {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }
    .wheel-canvas-container,
    #color-wheel {
        width: 300px !important;
        height: 300px !important;
    }
    .image-extract-layout {
        grid-template-columns: 1fr !important;
    }
    .contrast-checker-layout {
        grid-template-columns: 1fr !important;
    }
    .composition-simulator-layout,
    .comp-page-layout {
        grid-template-columns: 1fr !important;
    }

    /* Explore & Gallery — 2 cols is comfortable on tablet */
    .explore-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .palettes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* =====================================================
       BUTTONS — larger touch targets on tablet
       ===================================================== */
    .btn {
        min-height: 42px !important;
    }
}

@media (max-width: 768px) {

    .app-container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-glass);
        padding: 16px;
    }
    
    .brand {
        margin-bottom: 16px;
    }
    
    .nav-menu {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 6px;
        gap: 6px;
    }
    
    .nav-item {
        padding: 10px 14px;
        flex-shrink: 0;
    }
    
    .main-content {
        padding: 0;
    }
    .content-header {
        padding: 20px 20px 0 20px;
    }
    .tab-content.active {
        padding: 0 20px 20px 20px;
    }

    
    .palette-colors-row {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .cmyk-rgb-split {
        grid-template-columns: 1fr;
    }
    
    .psychology-btn-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive adjustments for highly mobile-friendly layout */
@media (max-width: 768px) {

    /* =====================================================
       LAYOUT FOUNDATION
       ===================================================== */
    .sidebar {
        display: none !important;
    }
    .app-container {
        height: 100svh; /* use svh for mobile (accounts for browser chrome) */
    }
    .main-content {
        padding: 0 !important;
        height: 100svh;
        overflow-y: auto;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    
    

    /* =====================================================
       MOBILE TOP MINI HEADER (shown on small screens)
       ===================================================== */
    .content-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 18px !important;
        padding: 16px 14px 0 14px !important;
    }
    .tab-content.active {
        padding: 0 14px 130px 14px !important; /* Safe clearance for the dual-stacked bottom bars */
    }
    .header-title-area h1 {
        font-size: 22px !important;
        letter-spacing: -0.3px !important;
    }
    .header-title-area p {
        font-size: 12px !important;
    }
    .header-actions {
        width: 100% !important;
    }
    .palette-quick-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* =====================================================
       MOBILE BOTTOM NAV — 7 items, scrollable
       ===================================================== */
    .mobile-bottom-nav {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory;
        padding: 0 4px !important;
        gap: 0 !important;
        justify-content: flex-start !important;
        /* Hide scrollbar but keep scroll function */
        scrollbar-width: none;
    }
    .mobile-bottom-nav::-webkit-scrollbar {
        display: none;
    }
    .mobile-nav-item {
        background: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        text-decoration: none;
        flex: 0 0 68px !important; /* fixed width per item, prevents squeeze */
        min-width: 60px !important;
        scroll-snap-align: start;
        border-radius: 12px;
        transition: all 0.2s ease;
        padding: 6px 4px !important;
    }
    .mobile-nav-item i {
        font-size: 18px !important;
    }
    .mobile-nav-item span {
        font-size: 8.5px !important;
        letter-spacing: 0.1px;
    }
    .mobile-nav-item.active {
        color: var(--accent-cyan) !important;
        text-shadow: 0 0 10px rgba(var(--accent-cyan-rgb), 0.4);
        background: rgba(var(--accent-cyan-rgb), 0.08) !important;
    }
    .mobile-nav-item:active {
        transform: scale(0.93);
    }

    /* =====================================================
       GLASS PANELS & CARDS
       ===================================================== */
    .glass-panel {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    .tab-content {
        gap: 14px !important;
    }

    /* =====================================================
       COLOR WHEEL PAGE
       ===================================================== */
    .scroll-arrow-btn {
        display: none !important;
    }
    .harmony-icons-scroll {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        overflow-x: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .color-wheel-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        justify-items: center;
    }
    .wheel-control-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
    }
    .wheel-canvas-container {
        width: 260px !important;
        height: 260px !important;
        margin: 8px auto;
    }
    #color-wheel {
        width: 260px !important;
        height: 260px !important;
    }
    .palette-display-area {
        width: 100% !important;
    }
    .palette-colors-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        min-height: auto !important;
        width: 100% !important;
    }
    .color-card {
        flex: none !important;
        max-width: 100% !important;
        flex-direction: column !important;
        height: auto !important;
        align-items: stretch !important;
        width: 100% !important;
        border-radius: var(--radius-md) !important;
        transform: none !important;
        padding: 12px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        margin-bottom: 12px !important;
    }
    .color-card:hover {
        transform: none !important;
    }
    .color-preview {
        width: 100% !important;
        height: 80px !important;
        flex-shrink: 0 !important;
        padding: 12px !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        border-radius: 8px !important;
        position: relative !important;
    }
    .color-base-badge {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        font-size: 9px !important;
        padding: 2px 6px !important;
        opacity: 0;
    }
    .color-card.active .color-base-badge {
        opacity: 1 !important;
    }
    .btn-color-picker-trigger {
        position: absolute !important;
        bottom: 10px !important;
        right: 10px !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
    .color-inputs-container {
        width: 100% !important;
        padding: 8px 0 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        background-color: transparent !important;
    }
    .hex-input-group {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    .hex-input-field {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    .input-prefix {
        padding: 8px 10px !important;
        font-size: 10px !important;
    }
    .rgb-display {
        width: 100% !important;
        margin-top: 0 !important;
        padding: 4px 0 !important;
        font-size: 10px !important;
        text-align: left !important;
        border-top: none !important;
        padding-top: 0 !important;
    }
    .rgb-title {
        display: inline !important;
    }
    .cmyk-display {
        width: 100% !important;
        margin-top: 0 !important;
        padding: 4px 0 !important;
        font-size: 10px !important;
        text-align: left !important;
        border-top: none !important;
        padding-top: 0 !important;
    }
    .cmyk-title {
        display: inline !important;
    }
    .color-slider-group {
        width: 100% !important;
        margin-top: 4px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .slider-row {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }
    .slider-label {
        font-size: 10px !important;
        width: 12px !important;
    }
    .color-slider {
        flex: 1 !important;
        height: 4px !important;
    }
    .slider-value {
        font-size: 10px !important;
        width: 28px !important;
        text-align: right !important;
    }

    /* =====================================================
       RUANG BELAJAR PAGE
       ===================================================== */
    .learning-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }
    .learning-card {
        padding: 16px !important;
    }
    .cmyk-rgb-split {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .venn-canvas-wrap {
        margin: 8px auto !important;
    }
    .psychology-btn-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }
    .psych-btn {
        padding: 8px 4px !important;
        font-size: 10px !important;
    }
    .psychology-detail-display {
        padding: 14px !important;
    }
    /* Fix 9 Elements grid on mobile */
    .accordion-body-inner > div[style*="display:grid"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .accordion-body-inner > div[style*="display:grid"] > div {
        grid-column: span 1 !important;
    }

    /* =====================================================
       CEK KONTRAS PAGE
       ===================================================== */
    .contrast-checker-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .express-picker-grid {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .btn-swap-wrap {
        transform: rotate(90deg) !important;
        margin: 4px 0;
    }
    .express-picker-card {
        width: 100% !important;
    }
    .browser-body-mock {
        grid-template-columns: 1fr !important;
    }
    .browser-mock-photo {
        min-height: 180px !important;
        height: 180px !important;
    }
    .browser-mock-details {
        padding: 16px !important;
    }
    .details-headline {
        font-size: 20px !important;
    }
    .contrast-footer-toolbar {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .toolbar-actions-express {
        justify-content: flex-start !important;
    }
    .create-theme-express-box {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px !important;
    }
    .theme-name-input-express {
        padding: 8px !important;
        border-bottom: 1px solid var(--border-glass) !important;
        margin-bottom: 4px;
    }

    /* =====================================================
       KOMPOSISI PAGE — NEW MOBILE LAYOUT
       ===================================================== */
    .comp-page-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .comp-canvas-wrapper {
        max-height: 55vw !important; /* roughly 16:9 on mobile widths */
        min-height: 200px;
        border-radius: 12px !important;
        touch-action: none;
    }
    .comp-controls-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .preset-btn {
        flex: 1 1 auto !important;
        min-width: 80px !important;
        font-size: 10px !important;
        padding: 6px 8px !important;
    }
    .upload-main-btn {
        width: 100% !important;
        justify-content: center !important;
        margin-left: 0 !important;
        margin-top: 4px;
    }
    .comp-rule-tabs {
        width: 100% !important;
    }
    .comp-rule-tab {
        font-size: 11px !important;
        padding: 9px 8px !important;
    }
    .comp-explanation-panel {
        padding: 14px !important;
    }
    .comp-explanation-panel h4 {
        font-size: 13px !important;
    }
    .guide-list li {
        font-size: 11px !important;
    }
    .comp-drop-zone {
        padding: 28px 16px !important;
    }
    .comp-drop-zone .drop-icon {
        font-size: 36px !important;
        margin-bottom: 10px !important;
    }
    .comp-drop-zone .drop-title {
        font-size: 14px !important;
    }

    /* =====================================================
       KOMPOSISI LAYOUT (ruang-belajar legacy embed)
       ===================================================== */
    .composition-simulator-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* =====================================================
       HEADER BADGES (webp + ratio on komposisi)
       ===================================================== */
    .webp-badge, .ratio-info-badge {
        font-size: 9px !important;
        padding: 3px 8px !important;
    }

    /* =====================================================
       BUTTONS — larger touch targets
       ===================================================== */
    .btn {
        min-height: 40px !important;
        font-size: 12px !important;
    }
    .btn-sm {
        min-height: 34px !important;
        font-size: 11px !important;
    }

    /* =====================================================
       IMAGE EXTRACT PAGE
       ===================================================== */
    .image-extract-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .image-dropzone {
        padding: 32px 16px !important;
    }
    .image-dropzone h3 {
        font-size: 15px !important;
    }
    .extracted-palettes-grid {
        gap: 8px !important;
    }
    .extracted-color-item {
        padding: 8px !important;
    }
    .ext-preview {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
    }

    /* =====================================================
       EXPLORE PAGE
       ===================================================== */
    .explore-layout {
        padding: 14px !important;
    }
    .explore-tags-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .explore-tag-btn {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
    .explore-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* =====================================================
       GALLERY PAGE
       ===================================================== */
    .palettes-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* Extra small screens (< 400px) */
@media (max-width: 400px) {
    .main-content {
        padding: 0 !important;
    }
    .tab-content.active {
        padding: 0 10px 130px 10px !important;
    }

    .header-title-area h1 {
        font-size: 19px !important;
    }
    .mobile-nav-item {
        flex: 0 0 58px !important;
    }
    .wheel-canvas-container,
    #color-wheel {
        width: 230px !important;
        height: 230px !important;
    }
}

/* ==========================================================================
   KOMPOSISI SIMULATOR (RULE OF THIRDS & GOLDEN RATIO)
   ========================================================================== */
.composition-simulator-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 16px;
}

.comp-preview-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.comp-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    overflow: hidden;
    background-color: #050811;
    box-shadow: var(--shadow-main);
    display: flex;
    align-items: center;
    justify-content: center;
}

.comp-image-wrapper img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: fadeIn 0.3s ease forwards;
}

/* Rule of Thirds Lines */
.grid-line {
    position: absolute;
    background-color: rgba(239, 68, 68, 0.45);
    transition: var(--transition-smooth);
}

.grid-v1 {
    top: 0;
    left: 33.33%;
    width: 2px;
    height: 100%;
    border-left: 1px dashed rgba(239, 68, 68, 0.8);
    background: transparent;
}

.grid-v2 {
    top: 0;
    left: 66.66%;
    width: 2px;
    height: 100%;
    border-left: 1px dashed rgba(239, 68, 68, 0.8);
    background: transparent;
}

.grid-h1 {
    left: 0;
    top: 33.33%;
    height: 2px;
    width: 100%;
    border-top: 1px dashed rgba(239, 68, 68, 0.8);
    background: transparent;
}

.grid-h2 {
    left: 0;
    top: 66.66%;
    height: 2px;
    width: 100%;
    border-top: 1px dashed rgba(239, 68, 68, 0.8);
    background: transparent;
}

/* Rule of Thirds Focal Points */
.focal-point {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: rgba(239, 68, 68, 0.8);
    border: 3px solid #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8), var(--shadow-main);
    pointer-events: auto;
    cursor: help;
    transition: var(--transition-smooth);
}

.focal-point::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: pulse-comp 1.8s infinite;
}

.focal-point:hover {
    transform: translate(-50%, -50%) scale(1.3);
    background-color: var(--text-primary);
    border-color: rgba(239, 68, 68, 1);
    box-shadow: 0 0 20px rgba(239, 68, 68, 1);
}

.fp-1 { top: 33.33%; left: 33.33%; }
.fp-2 { top: 33.33%; left: 66.66%; }
.fp-3 { top: 66.66%; left: 33.33%; }
.fp-4 { top: 66.66%; left: 66.66%; }

/* Golden Ratio Spiral SVG */
.golden-ratio-spiral svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.spiral-path {
    stroke: #fbbf24;
    stroke-width: 2px;
    stroke-dasharray: 6 3;
}

.comp-control-board {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comp-rule-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
    text-align: center;
}

.comp-rule-tab:hover {
    color: var(--text-primary);
}

.comp-rule-tab.active {
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: 0 4px 10px rgba(var(--accent-cyan-rgb), 0.15);
}

.comp-explanation-panel {
    background-color: var(--bg-card-inner);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 24px;
    animation: fadeIn 0.3s ease forwards;
}

.glass-panel-compact {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 16px;
}

/* Animations */
@keyframes pulse-comp {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* =====================================================
   PROFESSIONAL SWATCH EXPORTER MODAL
   ===================================================== */
.export-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(9, 13, 22, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.export-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.export-modal {
    background-color: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 600px;
    box-shadow: var(--shadow-main);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.export-modal-overlay.active .export-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.export-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-glass);
}

.export-modal-header h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-close-export {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close-export:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.export-modal-tabs {
    display: flex;
    background-color: rgba(9, 13, 22, 0.5);
    border-bottom: 1px solid var(--border-glass);
    padding: 4px 12px 0 12px;
    gap: 4px;
}

.export-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
}

.export-tab-btn:hover {
    color: var(--text-primary);
}

.export-tab-btn.active {
    color: #fff;
    border-bottom-color: var(--accent-cyan);
    background-color: rgba(255, 255, 255, 0.03);
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}

.export-modal-body {
    padding: 24px;
    flex-grow: 1;
    overflow-y: auto;
    max-height: 450px;
}

.export-pane {
    display: none;
    animation: fadeIn 0.25s ease forwards;
}

.export-pane.active {
    display: block;
}

/* ASE Download Tab */
.ase-download-panel {
    text-align: center;
    padding: 16px 8px;
}

.ase-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--accent-purple-rgb), 0.1) 0%, rgba(var(--accent-cyan-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px auto;
    color: var(--accent-cyan);
    box-shadow: 0 8px 24px rgba(var(--accent-cyan-rgb), 0.15);
}

.ase-download-panel h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.ase-download-panel p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 420px;
    margin-inline: auto;
}

.ase-swatch-preview {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px;
    background-color: rgba(9, 13, 22, 0.4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
}

.ase-preview-dot {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    cursor: help;
}

.ase-preview-dot::after {
    content: attr(data-hex);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background-color: rgba(9, 13, 22, 0.95);
    border: 1px solid var(--border-glass);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-fast);
}

.ase-preview-dot:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.btn-ase-download {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 13px;
    background: var(--accent-gradient);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(var(--accent-purple-rgb), 0.35);
    transition: var(--transition-smooth);
}

.btn-ase-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(var(--accent-purple-rgb), 0.5);
    background: var(--gradient-hover);
}

/* Code Exporter Panels */
.code-panel-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
}

.code-box-container {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-glass);
}

.code-box {
    background-color: rgba(9, 13, 22, 0.6);
    padding: 16px;
    margin: 0;
    font-family: 'Space Grotesk', monospace;
    font-size: 11px;
    color: #cbd5e1;
    overflow-x: auto;
    max-height: 250px;
    line-height: 1.6;
    text-align: left;
    white-space: pre;
}

/* Custom scrollbar for code-box */
.code-box::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.code-box::-webkit-scrollbar-track {
    background: transparent;
}
.code-box::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
.code-box::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-copy-code {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--border-glass);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
}

.btn-copy-code:hover {
    background-color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--accent-cyan-rgb), 0.25);
}

.btn-copy-code.copied {
    background-color: #10b981;
    border-color: #10b981;
    color: #fff;
}

/* =====================================================
   LOGO CONTRAST & MOCKUP SIMULATOR STYLES
   ===================================================== */
.logo-contrast-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1024px) {
    .logo-contrast-layout {
        grid-template-columns: 1fr;
    }
}

/* PNG Logo Drop Zone */
.logo-drop-zone {
    border: 2px dashed rgba(var(--accent-cyan-rgb), 0.35);
    border-radius: var(--radius-md);
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    background-color: rgba(var(--accent-cyan-rgb), 0.02);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.logo-drop-zone:hover, .logo-drop-zone.dragover {
    border-color: var(--accent-cyan);
    background-color: rgba(var(--accent-cyan-rgb), 0.08);
    box-shadow: 0 0 20px rgba(var(--accent-cyan-rgb), 0.15);
    transform: translateY(-2px);
}

.logo-drop-zone .drop-icon {
    font-size: 32px;
    color: var(--accent-cyan);
    opacity: 0.8;
    transition: var(--transition-smooth);
}

.logo-drop-zone:hover .drop-icon {
    transform: translateY(-4px) scale(1.1);
    opacity: 1;
}

.logo-drop-zone .drop-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.logo-drop-zone .drop-sub {
    font-size: 10px;
    color: var(--text-muted);
}

/* Logo Color Option */
.logo-color-btn {
    border: 1px solid var(--border-glass);
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    transition: var(--transition-smooth);
}

.logo-color-btn.active {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(var(--accent-purple-rgb), 0.3);
}

.logo-palette-color-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    box-shadow: var(--shadow-inset);
}

.logo-palette-color-btn:hover {
    transform: scale(1.15);
}

.logo-palette-color-btn.active {
    border-color: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4), var(--shadow-main);
    transform: scale(1.1);
}

.logo-palette-color-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid var(--accent-cyan);
    border-radius: 50%;
    opacity: 0;
    transition: var(--transition-fast);
}

.logo-palette-color-btn.active::after {
    opacity: 1;
}

/* Mockup Grid Cards */
.logo-mockups-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 640px) {
    .logo-mockups-grid {
        grid-template-columns: 1fr;
    }
}

.mockup-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mockup-card-header .mockup-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.mockup-badge.pass {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399 !important;
}

.mockup-badge.fail {
    background-color: rgba(244, 63, 94, 0.15) !important;
    border: 1px solid rgba(244, 63, 94, 0.3);
    color: #fb7185 !important;
}

.mockup-badge.warning {
    background-color: rgba(var(--accent-amber-rgb), 0.15) !important;
    border: 1px solid rgba(var(--accent-amber-rgb), 0.3);
    color: #fbbf24 !important;
}

.mockup-canvas-area {
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    transition: background-color 0.4s ease;
}

/* Mockup Logo Containers Sizing & Layout */
.mockup-logo-container {
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.biz-card-logo {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.tshirt-logo-placement {
    position: absolute !important;
    top: 28% !important;
    left: 50% !important;
    transform: translate(-50%, -20%) !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
}

/* Children (images, svgs, and wrapper divs) */
.mockup-logo-container img, 
.mockup-logo-container svg,
.mockup-logo-container div,
.biz-card-logo img, 
.biz-card-logo svg,
.biz-card-logo div,
.tshirt-logo-placement img, 
.tshirt-logo-placement svg,
.tshirt-logo-placement div {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Swatches for background adjustments */
.mockup-color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.1);
}

.mockup-color-swatch:hover {
    transform: scale(1.2);
}

.mockup-color-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    transform: scale(1.15);
}

/* Business Card Mockup */
.biz-card-mockup {
    width: 100%;
    max-width: 240px;
    height: 120px;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-glass);
    background-color: #0b0f19;
    box-shadow: var(--shadow-main);
    transition: background-color 0.4s ease;
}

/* T-shirt Mockup */
.tshirt-mockup-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
}

/* =====================================================
   INTERACTIVE 3D PACKAGING MOCKUP SIMULATOR STYLES
   ===================================================== */
.viewport-3d-container {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.viewport-3d {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    user-select: none;
}

.object-3d-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    cursor: grab;
    transition: transform 0.1s ease-out;
}

.object-3d-wrapper:active {
    cursor: grabbing;
}

/* Base style for all 3D elements/faces */
.face-3d {
    position: absolute;
    background-color: var(--mockup-color, #1e1b4b);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backface-visibility: visible;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35);
}

/* Box Packaging faces */
.box-face-front {
    width: 120px;
    height: 180px;
    transform: rotateY(0deg) translateZ(60px);
}

.box-face-back {
    width: 120px;
    height: 180px;
    transform: rotateY(180deg) translateZ(60px);
}

.box-face-left {
    width: 120px;
    height: 180px;
    transform: rotateY(-90deg) translateZ(60px);
}

.box-face-right {
    width: 120px;
    height: 180px;
    transform: rotateY(90deg) translateZ(60px);
}

.box-face-top {
    width: 120px;
    height: 120px;
    transform: rotateX(90deg) translateZ(90px);
}

.box-face-bottom {
    width: 120px;
    height: 120px;
    transform: rotateX(-90deg) translateZ(90px);
}

/* Cylinder Mesh (Can & Mug) */
.cylinder-strip {
    position: absolute;
    width: 25px;
    height: 180px;
    left: calc(50% - 12.5px);
    top: calc(50% - 90px);
    background-color: var(--mockup-color, #1e1b4b);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
    transform: rotateY(calc(var(--i) * 22.5deg)) translateZ(58px);
    background-size: calc(24.5px * 16) 100%;
    background-position: calc(var(--i) * -24.5px) 0;
    backface-visibility: visible;
}

.cylinder-lid-top {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #a1a1a1 60%, #404040 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: rotateX(90deg) translateZ(90px);
    position: absolute;
    left: calc(50% - 59px);
    top: calc(50% - 59px);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

.cylinder-lid-bottom {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background-color: #262626;
    border: 1px solid rgba(0, 0, 0, 0.5);
    transform: rotateX(-90deg) translateZ(90px);
    position: absolute;
    left: calc(50% - 59px);
    top: calc(50% - 59px);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
}

/* Mug Specific styles */
.mug-handle {
    width: 30px;
    height: 96px;
    border-radius: 50% 0 0 50%;
    border: 14px solid var(--mockup-color, #9a3412);
    border-right: none;
    position: absolute;
    left: calc(50% - 85px);
    top: calc(50% - 48px);
    transform: rotateY(90deg) translateZ(10px);
    transform-style: preserve-3d;
    box-shadow: -4px 0 12px rgba(0,0,0,0.4), inset -2px 0 5px rgba(0,0,0,0.3);
}

/* Poster Bingkai styles */
.poster-face-front {
    width: 200px;
    height: 260px;
    transform: rotateY(0deg) translateZ(6px);
    border: 8px solid #111827; /* Thin frame border */
}

.poster-face-back {
    width: 200px;
    height: 260px;
    transform: rotateY(180deg) translateZ(6px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.75);
}

.poster-face-left {
    width: 12px;
    height: 260px;
    transform: rotateY(-90deg) translateZ(100px);
    background-color: #111827;
}

.poster-face-right {
    width: 12px;
    height: 260px;
    transform: rotateY(90deg) translateZ(100px);
    background-color: #111827;
}

.poster-face-top {
    width: 200px;
    height: 12px;
    transform: rotateX(90deg) translateZ(130px);
    background-color: #111827;
}

.poster-face-bottom {
    width: 200px;
    height: 12px;
    transform: rotateX(-90deg) translateZ(130px);
    background-color: #111827;
}

/* Paper Bag (Shopping Bag) styles */
.bag-face-front {
    width: 140px;
    height: 180px;
    transform: rotateY(0deg) translateZ(30px);
}
.bag-face-back {
    width: 140px;
    height: 180px;
    transform: rotateY(180deg) translateZ(30px);
}
.bag-face-left {
    width: 60px;
    height: 180px;
    transform: rotateY(-90deg) translateZ(30px);
}
.bag-face-right {
    width: 60px;
    height: 180px;
    transform: rotateY(90deg) translateZ(30px);
}
.bag-face-bottom {
    width: 140px;
    height: 60px;
    transform: rotateX(-90deg) translateZ(150px);
}
.bag-handle-front {
    width: 50px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, 0.85);
    border-bottom: none;
    border-radius: 25px 25px 0 0;
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 130px);
    transform: translateZ(30.5px);
    transform-style: preserve-3d;
    pointer-events: none;
}
.bag-handle-back {
    width: 50px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, 0.85);
    border-bottom: none;
    border-radius: 25px 25px 0 0;
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 130px);
    transform: rotateY(180deg) translateZ(30.5px);
    transform-style: preserve-3d;
    pointer-events: none;
}

/* Tumbler (Thermos) styles */
.tumbler-strip {
    width: 20px;
    height: 220px;
    left: calc(50% - 10px);
    top: calc(50% - 110px);
    transform: rotateY(calc(var(--i) * 22.5deg)) translateZ(48px);
    background-size: calc(19.5px * 16) 100%;
    background-position: calc(var(--i) * -19.5px) 0;
}
.tumbler-lid-top {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 50%, #475569 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: rotateX(90deg) translateZ(110px);
    position: absolute;
    left: calc(50% - 49px);
    top: calc(50% - 49px);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
.tumbler-cap {
    width: 48px;
    height: 32px;
    background: linear-gradient(90deg, #f8fafc 0%, #cbd5e1 30%, #64748b 70%, #334155 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    transform: rotateY(0deg) translateZ(0) translateY(-126px);
    position: absolute;
    left: calc(50% - 24px);
    top: calc(50% - 16px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border-radius: 6px 6px 3px 3px;
    transform-style: preserve-3d;
}
.tumbler-lid-bottom {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    background-color: #1e293b;
    border: 1px solid rgba(0, 0, 0, 0.5);
    transform: rotateX(-90deg) translateZ(110px);
    position: absolute;
    left: calc(50% - 49px);
    top: calc(50% - 49px);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
}

/* Book Cover styles */
.book-face-front {
    width: 130px;
    height: 180px;
    transform: rotateY(0deg) translateZ(10px);
    border-radius: 0 4px 4px 0;
}
.book-face-back {
    width: 130px;
    height: 180px;
    transform: rotateY(180deg) translateZ(10px);
    border-radius: 4px 0 0 4px;
}
.book-face-left {
    width: 20px;
    height: 180px;
    transform: rotateY(-90deg) translateZ(65px);
}
.book-face-right {
    width: 20px;
    height: 180px;
    transform: rotateY(90deg) translateZ(65px);
}
.book-face-top {
    width: 130px;
    height: 20px;
    transform: rotateX(90deg) translateZ(90px);
}
.book-face-bottom {
    width: 130px;
    height: 20px;
    transform: rotateX(-90deg) translateZ(90px);
}

/* Shading and sheen effects */
.sheen-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, var(--gloss-opacity, 0.18)) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.35) 100%);
    z-index: 2;
}

/* ==========================================================================
   PHASE 16: AI-LIKE PSYCHOLOGICAL COLOR & MOOD GENERATOR STYLES
   ========================================================================== */
#mood-grid-selectors button.active {
    background: var(--accent-gradient) !important;
    border-color: #9a3412 !important;
    box-shadow: 0 4px 14px rgba(var(--accent-purple-rgb), 0.3) !important;
    transform: translateY(-2px);
}

.swatch-large {
    flex: 1;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.swatch-large:hover {
    flex-grow: 1.8;
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.05);
}

.swatch-hex {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.5px;
    opacity: 0.9;
    transition: transform 0.3s ease;
}

.swatch-large:hover .swatch-hex {
    transform: scale(1.05);
    opacity: 1;
}

.swatch-trait-tag {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    margin-bottom: 2px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.swatch-large:hover .swatch-trait-tag {
    opacity: 1;
    transform: translateY(0);
}

.swatch-copy-indicator {
    position: absolute;
    inset: 0;
    background: rgba(9, 15, 25, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    font-size: 11px;
    font-weight: 700;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
}

.swatch-copy-indicator.active {
    opacity: 1;
}

.glass-panel-compact {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    border-radius: 12px;
    padding: 16px;
}

.individual-trait-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
}

.individual-trait-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(var(--accent-cyan-rgb), 0.15);
    transform: translateX(4px);
}

/* Global Form Inputs, Search boxes, Textareas & Selects Styling (Ensuring high contrast & premium look) */
input[type="text"]:not(.hex-input-field):not(.theme-name-input-express), 
input[type="search"], 
textarea, 
select {
    background-color: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

input[type="text"]:not(.hex-input-field):not(.theme-name-input-express):focus, 
input[type="search"]:focus, 
textarea:focus, 
select:focus {
    border-color: #c2410c !important;
    background-color: #131d35 !important;
    box-shadow: 0 0 10px rgba(var(--accent-cyan-rgb), 0.25) !important;
}

/* Ensure placeholder text matches the text muted color scheme */
input::placeholder, 
textarea::placeholder {
    color: #64748b !important;
    opacity: 0.8 !important;
}

/* ==========================================================================
   LIGHT MODE — SOFT COTTON CANDY THEME
   Palette Reference:
     warna-1 #ffd1dc  (Pink Blush)
     warna-2 #ffdfd3  (Peach Cream)
     warna-3 #f0e6ef  (Lavender Mist)
     warna-4 #d8e2dc  (Sage Mist)
     warna-5 #ece4db  (Warm Ivory)
   ========================================================================== */

[data-theme="light"] {
    /* === Sleek Slate Gray Backgrounds === */
    --bg-main:       #e5e7eb;   /* Sleek Slate Gray — page canvas     */
    --bg-sidebar:    #f8fafc;   /* Soft Silver Gray — sidebar         */
    --bg-card:       #ffffff;   /* Pure White       — card panels     */
    --bg-card-inner: #f8fafc;   /* Soft Slate Gray  — inner card fill */
    --bg-sage:       #e2e8f0;   /* Medium Gray      — alt areas       */

    /* === Borders — slate-tinted === */
    --border-glass:       rgba(100, 116, 139, 0.12);
    --border-glass-hover: rgba(100, 116, 139, 0.25);

    /* === Text — Slate scale (WCAG AAA/AA compliant) === */
    --text-primary:   #0f172a;  /* Slate 900 */
    --text-secondary: #334155;  /* Slate 700 */
    --text-muted:     #475569;  /* Slate 600 - WCAG AA compliant on white/gray */

    /* === Accent Colors — vibrant readable slate variants === */
    --accent-cyan:    #0284c7;  /* Ocean Blue (primary action)       */
    --accent-purple:  #7c3aed;  /* Indigo / Purple                   */
    --accent-pink:    #db2777;  /* Rose / Pink                       */
    --accent-amber:   #d97706;  /* Amber / Orange                    */

    /* === Gradients === */
    --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #0284c7 100%);
    --gradient-hover:  linear-gradient(135deg, #6d28d9 0%, #0369a1 100%);

    /* === Shadows — softer, slate-tinted === */
    --shadow-main:  0 8px 32px 0 rgba(15, 23, 42, 0.06);
    --shadow-inset: inset 0 2px 4px 0 rgba(15, 23, 42, 0.02);
}

/* Body & background */
[data-theme="light"] body {
    background-color: var(--bg-main);
    color: var(--text-primary);
}

/* Glow blobs — use slate-blue tones */
[data-theme="light"] .glow-1 {
    background: radial-gradient(circle, #e2e8f0 0%, rgba(0,0,0,0) 70%);
    opacity: 0.5;
}
[data-theme="light"] .glow-2 {
    background: radial-gradient(circle, #cbd5e1 0%, rgba(0,0,0,0) 70%);
    opacity: 0.45;
}

/* ========== SIDEBAR — Sleek Slate Gray ========== */
[data-theme="light"] .sidebar {
    background-color: var(--bg-sidebar);
    border-right: 1px solid rgba(100, 116, 139, 0.15);
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .sidebar-toggle-btn {
    background-color: #e2e8f0;
    border-color: rgba(100, 116, 139, 0.2);
    color: var(--text-secondary);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
[data-theme="light"] .sidebar-toggle-btn:hover {
    background-color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    color: #fff;
}

/* Nav items */
[data-theme="light"] .nav-item {
    color: var(--text-secondary);
}
[data-theme="light"] .nav-item:hover {
    background-color: rgba(100, 116, 139, 0.08) !important;
    border-color: rgba(100, 116, 139, 0.15) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] .nav-item.active {
    background: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 16px rgba(100, 116, 139, 0.06) !important;
}
[data-theme="light"] .nav-item.active::before {
    background: var(--bg-sidebar) !important;
}

/* Brand */
[data-theme="light"] .brand-title  { color: var(--text-primary); }
[data-theme="light"] .brand-subtitle { color: var(--text-secondary); }
[data-theme="light"] .brand-logo {
    background: rgba(100, 116, 139, 0.08);
    border-color: rgba(100, 116, 139, 0.15);
}

/* Sidebar footer */
[data-theme="light"] .sidebar-footer {
    border-top-color: rgba(100, 116, 139, 0.15);
}
[data-theme="light"] .dkv-tag {
    color: #0284c7;
    background-color: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.18);
}
[data-theme="light"] .copyright { color: var(--text-muted); }

/* Creator profile */
[data-theme="light"] .creator-profile {
    background-color: rgba(100, 116, 139, 0.05);
    border-color: rgba(100, 116, 139, 0.12);
}

/* ========== CARDS & PANELS — Sleek Slate Gray ========== */
[data-theme="light"] .glass-panel {
    background-color: var(--bg-card);
    border-color: rgba(100, 116, 139, 0.12);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .color-card {
    background-color: var(--bg-card);
    border-color: rgba(100, 116, 139, 0.12);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .color-card:hover {
    border-color: rgba(100, 116, 139, 0.25);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .color-card.active {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 16px rgba(2, 132, 199, 0.15);
}

/* Scroll arrow buttons */
[data-theme="light"] .scroll-arrow-btn {
    background-color: var(--bg-card);
    border-color: rgba(100, 116, 139, 0.15);
    color: var(--text-primary);
}

/* Harmony buttons */
[data-theme="light"] .harmony-btn {
    background-color: var(--bg-card-inner);
    border-color: rgba(100, 116, 139, 0.12);
    color: var(--text-secondary);
}
[data-theme="light"] .harmony-btn:hover {
    border-color: rgba(100, 116, 139, 0.25);
    color: var(--text-primary);
}
[data-theme="light"] .harmony-btn.active {
    background-color: rgba(2, 132, 199, 0.08) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}

/* Segmented control */
[data-theme="light"] .segmented-control {
    background-color: var(--bg-card-inner);
    border-color: rgba(100, 116, 139, 0.12);
}
[data-theme="light"] .segment-btn       { color: var(--text-secondary); }
[data-theme="light"] .segment-btn:hover { color: var(--text-primary); }

/* Active title */
[data-theme="light"] .harmony-active-title { color: var(--accent-cyan); }

/* Wheel instruction */
[data-theme="light"] .wheel-instruction   { color: var(--text-muted); }
[data-theme="light"] .wheel-instruction i { color: var(--accent-cyan); }

/* Control labels */
[data-theme="light"] .control-label { color: var(--text-muted); }

/* ========== BUTTONS ========== */
[data-theme="light"] .btn-secondary {
    background-color: rgba(190, 18, 60, 0.05);
    border-color: rgba(190, 18, 60, 0.15);
    color: var(--text-primary);
}
[data-theme="light"] .btn-secondary:hover {
    background-color: rgba(190, 18, 60, 0.10);
    border-color: rgba(190, 18, 60, 0.25);
}

/* ========== INPUTS / TEXTAREAS / SELECTS ========== */
[data-theme="light"] input[type="text"]:not(.hex-input-field):not(.theme-name-input-express),
[data-theme="light"] input[type="search"],
[data-theme="light"] textarea,
[data-theme="light"] select {
    background-color: #ffffff !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    color: var(--text-primary) !important;
}
[data-theme="light"] input[type="text"]:not(.hex-input-field):not(.theme-name-input-express):focus,
[data-theme="light"] input[type="search"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: var(--accent-cyan) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #475569 !important;
    opacity: 1 !important;
}

/* Range sliders */
[data-theme="light"] input[type="range"] { accent-color: var(--accent-cyan); }

/* Divider */
[data-theme="light"] .divider { border-color: rgba(100, 116, 139, 0.12); }

/* ========== MOBILE BOTTOM NAV ========== */
[data-theme="light"] .mobile-bottom-nav {
    background-color: rgba(248, 250, 252, 0.97) !important;
    border-top-color: rgba(100, 116, 139, 0.15) !important;
}
[data-theme="light"] .mobile-nav-item       { color: var(--text-secondary) !important; }
[data-theme="light"] .mobile-nav-item.active { color: var(--accent-cyan) !important; }

/* ========== TABLES ========== */
[data-theme="light"] table th,
[data-theme="light"] table td    { color: var(--text-primary); }
[data-theme="light"] tr.border-b { border-color: rgba(100, 116, 139, 0.1); }

/* ========== INLINE HARDCODED TAILWIND BACKGROUNDS ========== */
[data-theme="light"] [class*="bg-[#0b0f19]"],
[data-theme="light"] .bg-\[\#0b0f19\]\/90,
[data-theme="light"] .bg-\[\#0b0f19\]\/80 {
    background-color: var(--bg-card) !important;
}
[data-theme="light"] [class*="bg-[#090d16]"] { background-color: var(--bg-main) !important; }
[data-theme="light"] [class*="bg-[#0f172a]"] { background-color: var(--bg-card-inner) !important; }

[data-theme="light"] [class*="text-white"]:not(.nav-item.active):not(.btn-primary):not(.align-btn.active):not(.case-btn.active):not(.font-choice-btn.active):not(.weight-choice-btn.active):not(.layout-preset-btn.active) {
    color: var(--text-primary) !important;
}
[data-theme="light"] [class*="text-slate-300"],
[data-theme="light"] [class*="text-slate-400"] { color: var(--text-secondary) !important; }

[data-theme="light"] [class*="border-white\/10"],
[data-theme="light"] [class*="border-white\/5"]  { border-color: rgba(100, 116, 139, 0.12) !important; }

[data-theme="light"] [class*="bg-white\/5"],
[data-theme="light"] [class*="bg-white\/3"]  { background-color: rgba(100, 116, 139, 0.04) !important; }
[data-theme="light"] [class*="bg-white\/4"]  { background-color: rgba(100, 116, 139, 0.04) !important; }

/* ========== TAILWIND TEXT COLOR OVERRIDES ========== */
/* Cyan → Deep Rose #be123c  (5.17:1 AA) */
[data-theme="light"] [class*="text-cyan-400"],
[data-theme="light"] [class*="text-cyan-300"],
[data-theme="light"] [class*="text-cyan-500"],
[data-theme="light"] [class*="text-[#06b6d4]"] { color: #0284c7 !important; }

/* Purple → Deep Violet #6b21a8  (7.17:1 AAA) */
[data-theme="light"] [class*="text-purple-400"],
[data-theme="light"] [class*="text-purple-500"],
[data-theme="light"] [class*="text-violet-400"],
[data-theme="light"] [class*="text-[#a855f7]"] { color: #7c3aed !important; }

/* Pink/Rose → Deep Berry #9f1239  (5.83:1 AA) */
[data-theme="light"] [class*="text-pink-400"],
[data-theme="light"] [class*="text-rose-400"],
[data-theme="light"] [class*="text-[#ec4899]"] { color: #db2777 !important; }

/* Amber → Warm Brown #92400e  (5.63:1 AA) */
[data-theme="light"] [class*="text-amber-400"],
[data-theme="light"] [class*="text-yellow-400"],
[data-theme="light"] [class*="text-[#f59e0b]"] { color: #d97706 !important; }

/* Slate */
[data-theme="light"] [class*="text-slate-500"] { color: #64748b !important; }

/* Cyan borders → rose */
[data-theme="light"] [class*="border-cyan-400"],
[data-theme="light"] [class*="border-[#06b6d4]"]    { border-color: #0284c7 !important; }
[data-theme="light"] [class*="border-[#06b6d4]/30"]  { border-color: rgba(2, 132, 199, 0.3) !important; }

/* Cyan backgrounds → blush tint */
[data-theme="light"] [class*="bg-cyan-500\/10"],
[data-theme="light"] [class*="bg-[#06b6d4]"]        { background-color: rgba(2, 132, 199, 0.08) !important; }

/* Purple backgrounds */
[data-theme="light"] [class*="bg-purple-500\/10"]    { background-color: rgba(124, 58, 237, 0.08) !important; }

/* Mobile nav cyan badge */
[data-theme="light"] [class*="text-[#06b6d4]"]      { color: #0284c7 !important; }
[data-theme="light"] [class*="border-[#06b6d4]"]     { border-color: #0284c7 !important; }
[data-theme="light"] [class*="bg-cyan-500\/10"]      { background-color: rgba(2, 132, 199, 0.08) !important; }

/* Section subheadings */
[data-theme="light"] h5[class*="text-cyan"],
[data-theme="light"] h4[class*="text-cyan"]   { color: #0284c7 !important; }
[data-theme="light"] h5[class*="text-purple"],
[data-theme="light"] h4[class*="text-purple"] { color: #7c3aed !important; }

/* ========== GLASS PANEL INNER TEXT ========== */
[data-theme="light"] .color-info-text,
[data-theme="light"] .hex-value,
[data-theme="light"] .color-name-display { color: var(--text-primary); }

/* Color swatch base badge */
[data-theme="light"] .color-base-badge {
    background-color: rgba(30, 21, 35, 0.70);
    color: #f8f4f6;
}

/* DKV Tag — rose tinted */
[data-theme="light"] .dkv-tag {
    color: #0284c7;
    background-color: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.18);
}

/* Active nav always white on gradient */
[data-theme="light"] .nav-item.active { color: #fff !important; }

/* ========== THEME TOGGLE BUTTON (Global: Icon/Logo only) ========== */
.theme-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--border-glass) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    transition: all 0.25s ease !important;
    margin-bottom: 8px;
}
.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
    transform: scale(1.05);
}
.theme-toggle-btn:active {
    transform: scale(0.95);
}
.theme-toggle-btn .toggle-label,
.theme-toggle-btn .toggle-track {
    display: none !important;
}
/* Light mode toggle — slate/cyan accented */
[data-theme="light"] .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: var(--text-secondary) !important;
}
[data-theme="light"] .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: var(--text-primary) !important;
}
/* Collapsed sidebar */
.sidebar.collapsed .theme-toggle-btn .toggle-label { display: none !important; }
.sidebar.collapsed .theme-toggle-btn { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .theme-toggle-btn .toggle-track { margin-left: 0; }

/* ========== LANGUAGE SELECTOR TOGGLE ========== */
.lang-toggle-btn {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-glass);
    padding: 3px;
    border-radius: 12px;
    margin-bottom: 8px;
    width: 100%;
    transition: var(--transition-smooth);
}
.lang-toggle-btn .lang-btn {
    flex: 1;
    padding: 6px 12px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    color: var(--text-secondary);
    background: transparent;
    text-align: center;
    letter-spacing: 0.5px;
}
.lang-toggle-btn .lang-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
}
.lang-toggle-btn .lang-btn.active {
    background: var(--grad);
    color: #fff;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.25);
}
/* Light mode adjustments for language switcher */
[data-theme="light"] .lang-toggle-btn {
    background-color: rgba(0, 0, 0, 0.04);
    border-color: rgba(100, 116, 139, 0.18);
}
[data-theme="light"] .lang-toggle-btn .lang-btn {
    color: var(--text-secondary);
}
[data-theme="light"] .lang-toggle-btn .lang-btn:hover {
    color: var(--text-primary);
    background: rgba(100, 116, 139, 0.08);
}
[data-theme="light"] .lang-toggle-btn .lang-btn.active {
    background: var(--accent-cyan);
    color: #fff;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
}
/* Collapsed sidebar language switcher */
.sidebar.collapsed .lang-toggle-btn {
    flex-direction: column;
    gap: 4px;
    padding: 4px;
}
.sidebar.collapsed .lang-toggle-btn .lang-btn {
    padding: 4px 0;
    width: 100%;
}

/* ========== SMOOTH THEME TRANSITION ========== */
html { transition: background-color 0.4s ease, color 0.4s ease; }
body,
.sidebar,
.glass-panel,
.color-card,
.nav-item {
    transition: background-color 0.4s ease, border-color 0.3s ease,
                color 0.3s ease, box-shadow 0.4s ease;
}

/* ==========================================================================
   LIGHT MODE — SOLID COLORS (replace all gradients)
   Primary: Indigo/Cyan Gradient & Accents (WCAG AA compliant)
   ========================================================================== */

/* ── Active Nav Item ─────────────────────────── */
[data-theme="light"] .nav-item.active {
    background: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 16px rgba(100, 116, 139, 0.06) !important;
}
[data-theme="light"] .nav-item.active::before {
    background: var(--bg-sidebar) !important;
}
[data-theme="light"] .nav-item:hover {
    background-color: rgba(100, 116, 139, 0.08) !important;
}

/* ── Primary Button ──────────────────────────── */
[data-theme="light"] .btn-primary {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25) !important;
}
[data-theme="light"] .btn-primary:hover {
    background: var(--gradient-hover) !important;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35) !important;
}

/* ── Segmented Control Active ────────────────── */
[data-theme="light"] .segment-btn.active {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.20) !important;
}

/* ── Harmony Button Active ───────────────────── */
[data-theme="light"] .harmony-btn.active {
    background: rgba(2, 132, 199, 0.08) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
    box-shadow: none !important;
}

/* ── Explore Tag Buttons ─────────────────────── */
[data-theme="light"] .explore-tag-btn.active {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.22) !important;
}

/* ── Composition Rule Tabs ───────────────────── */
[data-theme="light"] .comp-rule-tab.active {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.22) !important;
}

/* ── Layout Preset Buttons (Elemen Desain) ───── */
[data-theme="light"] .layout-preset-btn.active,
[data-theme="light"] .font-choice-btn.active,
[data-theme="light"] .weight-choice-btn.active,
[data-theme="light"] .align-btn.active,
[data-theme="light"] .case-btn.active {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.22) !important;
}

/* ── Logo/Color Picker Active ────────────────── */
[data-theme="light"] .logo-color-btn.active {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}

/* ── Mood Grid Selectors ─────────────────────── */
[data-theme="light"] #mood-grid-selectors button.active {
    background: var(--accent-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25) !important;
}

/* ── Tab Buttons (other tab-style selectors) ─── */
[data-theme="light"] .tab-btn.active,
[data-theme="light"] [class*="tab-btn"].active {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ── Upload / CTA Buttons ────────────────────── */
[data-theme="light"] .upload-main-btn,
[data-theme="light"] [class*="upload-btn"] {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25) !important;
}
[data-theme="light"] .upload-main-btn:hover,
[data-theme="light"] [class*="upload-btn"]:hover {
    background: var(--gradient-hover) !important;
}

/* ── Icon badge backgrounds (sidebar brand, etc.) ── */
[data-theme="light"] [class*="gradient"] > .bg-\[var\(--accent-gradient\)\],
[data-theme="light"] .icon-badge {
    background: var(--accent-gradient) !important;
}

/* ── Text-gradient (palette icon, brand logo) ── */
/* Keep gradient text brand styling in light mode */
[data-theme="light"] .text-gradient {
    background: var(--accent-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--accent-cyan) !important;
}

/* ── Inline Tailwind gradient backgrounds ─────── */
[data-theme="light"] [class*="from-purple"][class*="to-cyan"],
[data-theme="light"] [class*="from-[#a855f7]"],
[data-theme="light"] [class*="bg-gradient"] {
    background-image: var(--accent-gradient) !important;
    color: #fff !important;
}

/* ── Preset btn in comp/mockup pages ─────────── */
[data-theme="light"] .preset-btn.active {
    background: rgba(2, 132, 199, 0.08) !important;
    border-color: var(--accent-cyan) !important;
    color: var(--accent-cyan) !important;
}

/* ── Secondary solid buttons (outline style) ─── */
[data-theme="light"] .btn-secondary {
    background-color: rgba(100, 116, 139, 0.05) !important;
    border-color: rgba(100, 116, 139, 0.2) !important;
    color: var(--text-secondary) !important;
}
[data-theme="light"] .btn-secondary:hover {
    background-color: rgba(100, 116, 139, 0.12) !important;
    border-color: rgba(100, 116, 139, 0.35) !important;
    color: var(--text-primary) !important;
}


/* ==========================================================================
   Dark Mode Overrides for Tailwind Hardcoded Classes
   ========================================================================== */
html:not([data-theme="light"]) [class*="bg-[#090d16]"] {
    background-color: var(--bg-main) !important;
}
html:not([data-theme="light"]) [class*="bg-[#0b0f19]"],
html:not([data-theme="light"]) .bg-\[\#0b0f19\]\/90,
html:not([data-theme="light"]) .bg-\[\#0b0f19\]\/80 {
    background-color: var(--bg-sidebar) !important;
}
html:not([data-theme="light"]) [class*="bg-[#0f172a]"] {
    background-color: var(--bg-card-inner) !important;
}
html:not([data-theme="light"]) [class*="text-[#06b6d4]"],
html:not([data-theme="light"]) [class*="text-cyan-300"],
html:not([data-theme="light"]) [class*="text-cyan-400"],
html:not([data-theme="light"]) [class*="text-cyan-500"] {
    color: var(--accent-cyan) !important;
}

html:not([data-theme="light"]) [class*="text-[#a855f7]"],
html:not([data-theme="light"]) [class*="text-purple-400"],
html:not([data-theme="light"]) [class*="text-purple-500"],
html:not([data-theme="light"]) [class*="text-violet-400"] {
    color: var(--accent-purple) !important;
}

html:not([data-theme="light"]) [class*="text-[#ec4899]"],
html:not([data-theme="light"]) [class*="text-pink-400"],
html:not([data-theme="light"]) [class*="text-rose-400"] {
    color: var(--accent-pink) !important;
}

html:not([data-theme="light"]) [class*="text-[#f59e0b]"],
html:not([data-theme="light"]) [class*="text-amber-400"],
html:not([data-theme="light"]) [class*="text-yellow-400"] {
    color: var(--accent-amber) !important;
}

html:not([data-theme="light"]) [class*="border-[#06b6d4]"],
html:not([data-theme="light"]) [class*="border-cyan-400"] {
    border-color: var(--accent-cyan) !important;
}

html:not([data-theme="light"]) [class*="border-[#06b6d4]/30"] {
    border-color: rgba(var(--accent-cyan-rgb), 0.3) !important;
}

html:not([data-theme="light"]) [class*="bg-[#06b6d4]"] {
    background-color: var(--accent-cyan) !important;
}

html:not([data-theme="light"]) [class*="bg-cyan-500/10"] {
    background-color: rgba(var(--accent-cyan-rgb), 0.1) !important;
}

html:not([data-theme="light"]) [class*="bg-purple-500/10"] {
    background-color: rgba(var(--accent-purple-rgb), 0.1) !important;
}

html:not([data-theme="light"]) [class*="border-[#a855f7]"],
html:not([data-theme="light"]) [class*="border-purple-400"] {
    border-color: var(--accent-purple) !important;
}

html:not([data-theme="light"]) [class*="from-purple"][class*="to-cyan"],
html:not([data-theme="light"]) [class*="from-[#a855f7]"],
html:not([data-theme="light"]) [class*="bg-gradient"] {
    background-image: var(--accent-gradient) !important;
}

/* ==========================================================================
   PHASE 27: PASSPORT PHOTO & DPI SIMULATOR STYLES
   ========================================================================== */
.pasfoto-workspace {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1024px) {
    .pasfoto-workspace {
        grid-template-columns: 1fr;
    }
}

.pasfoto-viewport-box {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 440px;
    background: #0f172a;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
}

.pasfoto-canvas-container {
    position: relative;
    cursor: grab;
    user-select: none;
}
.pasfoto-canvas-container:active {
    cursor: grabbing;
}

/* Crop guides overlay */
.pasfoto-crop-guide {
    position: absolute;
    border: 2px dashed rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 4px;
}

/* Face guide template silhouette */
.pasfoto-face-silhouette {
    position: absolute;
    inset: 15% 15% 15% 15%;
    border: 1.5px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50% 50% 40% 40%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pasfoto-face-silhouette::after {
    content: '';
    position: absolute;
    bottom: -22px;
    width: 70%;
    height: 40%;
    border: 1.5px dashed rgba(255, 255, 255, 0.25);
    border-radius: 20px 20px 0 0;
}

/* DPI Visual Preview card */
.dpi-preview-viewport {
    background: #090d16;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pixelated-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    background-color: #262626;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.dpi-quality-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.dpi-badge-low {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}
.dpi-badge-medium {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}
.dpi-badge-high {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #34d399;
}

/* Light mode support for Pas Foto */
[data-theme="light"] .pasfoto-viewport-box {
    background: #e2e8f0;
    border-color: rgba(190, 18, 60, 0.1);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .pasfoto-crop-guide {
    border-color: rgba(190, 18, 60, 0.45);
    box-shadow: 0 0 0 9999px rgba(240, 230, 239, 0.65);
}
[data-theme="light"] .pasfoto-face-silhouette,
[data-theme="light"] .pasfoto-face-silhouette::after {
    border-color: rgba(190, 18, 60, 0.25);
}
[data-theme="light"] .dpi-preview-viewport {
    background: #ffdfd3;
    border-color: rgba(190, 18, 60, 0.08);
}
[data-theme="light"] .pixelated-canvas {
    background-color: #fff;
    border-color: rgba(190, 18, 60, 0.15);
}

/* ==========================================================================
   PHASE 28: RASTER VS VECTOR WORKSPACE STYLES
   ========================================================================== */
.vektor-viewport-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) {
    .vektor-viewport-split {
        grid-template-columns: 1fr;
    }
}

.vektor-canvas-viewport {
    position: relative;
    width: 100%;
    height: 320px;
    background: #090d16;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
}

.vektor-comparison-canvas {
    max-width: 100%;
    max-height: 100%;
    transition: transform 0.05s ease-out;
}

/* Tooltip Pixel Inspector */
.pixel-inspector-tip {
    position: absolute;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 6px;
    font-family: 'Space Grotesk', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #f8fafc;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    display: none;
}

/* Bezier interactive canvas */
.bezier-editor-box {
    position: relative;
    width: 100%;
    background: #0b0f19;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
}

/* Light mode overrides for Raster vs Vektor */
[data-theme="light"] .vektor-canvas-viewport {
    background: #ffdfd3;
    border-color: rgba(190, 18, 60, 0.08);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
}
[data-theme="light"] .pixel-inspector-tip {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(190, 18, 60, 0.15);
    color: #1e1523;
    box-shadow: 0 4px 12px rgba(126, 34, 74, 0.15);
}
[data-theme="light"] .bezier-editor-box {
    background: #ece4db;
    border-color: rgba(190, 18, 60, 0.08);
}

/* ==========================================================================
   PHASE 29: GRID SYSTEM WORKSPACE STYLES
   ========================================================================== */
.grid-canvas-wrapper {
    position: relative;
    border-radius: 8px;
    box-sizing: border-box;
    touch-action: none;
}

/* Active element outline when hovered or active */
.grid-layout-item {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.2s, border-color 0.2s;
    touch-action: none;
}

.grid-layout-item:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.grid-layout-item.active-element {
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.4), 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* Custom sliders and toggles styling */
.lightness-slider-bar {
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.lightness-slider-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-gradient);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}

/* Light mode overrides for Grid System */
[data-theme="light"] .grid-canvas-wrapper {
    background: #fff !important;
    border-color: rgba(190, 18, 60, 0.12) !important;
    box-shadow: 0 12px 36px rgba(126, 34, 74, 0.1) !important;
}

[data-theme="light"] .grid-layout-item {
    box-shadow: 0 4px 10px rgba(126, 34, 74, 0.08);
}

[data-theme="light"] .grid-layout-item.active-element {
    box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.3), 0 8px 20px rgba(126, 34, 74, 0.15);
}

[data-theme="light"] .lightness-slider-bar {
    background: rgba(0, 0, 0, 0.08);
}


/* ================================================================
   ACCORDION MENU — LEARNING HUB
   ================================================================ */
.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
}

.accordion-item {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.accordion-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
}
.accordion-item.active {
    border-color: rgba(6, 182, 212, 0.25);
    box-shadow: 0 0 24px rgba(6, 182, 212, 0.06), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* --- Header Button --- */
.accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.25s ease;
    position: relative;
}
.accordion-header:hover {
    background: rgba(255, 255, 255, 0.025);
}
.accordion-item.active .accordion-header {
    background: rgba(255, 255, 255, 0.02);
}

/* Accent left bar */
.accordion-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--accordion-accent, var(--accent-cyan));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.accordion-item.active .accordion-header::before,
.accordion-header:hover::before {
    opacity: 1;
}

/* Number badge */
.accordion-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 800;
    color: var(--accordion-accent, var(--accent-cyan));
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.accordion-item.active .accordion-num {
    background: var(--accordion-accent, var(--accent-cyan));
    color: #0f172a;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.25);
}

/* Icon */
.accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(168,85,247,0.1));
    font-size: 16px;
    color: var(--accordion-accent, var(--accent-cyan));
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.accordion-item.active .accordion-icon {
    transform: scale(1.1);
}

/* Title area */
.accordion-title-area {
    flex: 1;
    min-width: 0;
}
.accordion-title {
    font-size: 15px;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 2px;
    line-height: 1.3;
}
.accordion-subtitle {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
}

/* Chevron */
.accordion-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 12px;
    color: #64748b;
    flex-shrink: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-item.active .accordion-chevron {
    transform: rotate(180deg);
    color: var(--accordion-accent, var(--accent-cyan));
    background: rgba(6, 182, 212, 0.1);
}

/* --- Body / Expandable Panel --- */
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
    padding: 0 24px;
}
.accordion-item.active .accordion-body {
    padding: 0 24px 24px 24px;
}
.accordion-body-inner {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 20px;
}

/* --- Light Theme --- */
[data-theme="light"] .accordion-item {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .accordion-item:hover {
    border-color: rgba(0, 0, 0, 0.14);
}
[data-theme="light"] .accordion-item.active {
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 2px 16px rgba(6, 182, 212, 0.08);
}
[data-theme="light"] .accordion-header:hover {
    background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .accordion-num {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .accordion-item.active .accordion-num {
    background: var(--accordion-accent, var(--accent-cyan));
    color: #fff;
}
[data-theme="light"] .accordion-title {
    color: #0f172a;
}
[data-theme="light"] .accordion-subtitle {
    color: #64748b;
}
[data-theme="light"] .accordion-chevron {
    background: rgba(0, 0, 0, 0.04);
    color: #94a3b8;
}
[data-theme="light"] .accordion-body-inner {
    border-top-color: rgba(0, 0, 0, 0.06);
}

/* Responsive */
@media (max-width: 768px) {
    .accordion-header {
        padding: 16px 16px;
        gap: 12px;
    }
    .accordion-body {
        padding: 0 16px;
    }
    .accordion-item.active .accordion-body {
        padding: 0 16px 16px 16px;
    }
    .accordion-num {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
    .accordion-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    .accordion-title {
        font-size: 13px;
    }
}

/* ==========================================================================
/* ==========================================================================
   TOP STICKY CONTROLS (THEME & LANGUAGE SELECTORS)
   Full-width navbar bar — flush at the top of every page
   ========================================================================== */
.top-controls-container {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* pin controls to right */
    gap: 10px;
    padding: 0 28px;
    height: 52px;                /* slim navbar height */
    margin: 0;
    flex-shrink: 0;
    z-index: 100;
    background: rgba(11, 15, 25, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.top-controls-container .lang-toggle-btn {
    width: auto;
    margin: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 2px;
}

.top-controls-container .lang-toggle-btn .lang-btn {
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 7px;
    min-width: 32px;
}

.top-controls-container .theme-toggle-btn {
    margin: 0;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid var(--border-glass) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-secondary) !important;
    transition: all 0.25s ease !important;
}

.top-controls-container .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
    transform: scale(1.05);
}

.top-controls-container .theme-toggle-btn:active {
    transform: scale(0.95);
}

.top-controls-container .theme-toggle-btn .toggle-label,
.top-controls-container .theme-toggle-btn .toggle-track {
    display: none !important;
}

/* Light Mode Overrides */
[data-theme="light"] .top-controls-container {
    background: rgba(229, 231, 235, 0.92);
    border-bottom-color: rgba(100, 116, 139, 0.18);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .top-controls-container .lang-toggle-btn {
    background: rgba(0, 0, 0, 0.04);
}

/* ── Navbar Creator Chip (global — used in top-controls-container) ── */
.navbar-creator-chip {
    display: flex; /* Enabled inside horizontal controls header */
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: default;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}
.navbar-creator-chip:hover {
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(6, 182, 212, 0.2);
}
.navbar-creator-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #06b6d4;
    flex-shrink: 0;
}
.navbar-creator-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.navbar-creator-label {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #06b6d4;
}
.navbar-creator-name {
    font-size: 11px;
    font-weight: 600;
    color: #f1f5f9;
}
.navbar-divider {
    display: none !important; /* Hide on desktop */
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .navbar-creator-chip {
        display: flex !important; /* Show on mobile */
    }
    .navbar-divider {
        display: block !important; /* Show on mobile */
    }
}

/* Light mode overrides */
[data-theme="light"] .navbar-creator-chip {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .navbar-creator-chip:hover {
    background: rgba(6, 182, 212, 0.08);
}
[data-theme="light"] .navbar-creator-name {
    color: #1e293b;
}
[data-theme="light"] .navbar-divider {
    background: rgba(0, 0, 0, 0.12);
}

/* Responsive adjustments for mobile view */
/* Desktop: sembunyikan creator chip di navbar (sudah ada di sidebar) */
.navbar-creator-chip,
.navbar-divider {
    display: none;
}

@media (max-width: 768px) {
    .top-controls-container {
        padding: 0 14px;
        height: 46px;
    }

    /* Mobile: tampilkan creator chip di navbar */
    .navbar-creator-chip,
    .navbar-divider {
        display: flex;
    }
    .navbar-divider {
        display: block;
    }
}


/* ==========================================================================
   MOBILE MENU DRAWER & OVERLAY (HAMBURGER MENU - ADVANCED DESIGN)
   ========================================================================== */
.mobile-menu-drawer {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    height: 100vh;
    background: rgba(9, 13, 22, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-top: none;
    border-radius: 0;
    z-index: 9999;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: env(safe-area-inset-top, 20px) 16px 95px 16px;
    box-shadow: 0 -15px 50px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-menu-drawer.active {
    bottom: 0;
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
}

.drawer-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-title i {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.drawer-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 20px;
    color: #94a3b8;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.drawer-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: rotate(90deg);
}

/* Search Bar inside Drawer */
.drawer-search-container {
    position: relative;
    width: 100%;
}

.drawer-search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 16px 12px 42px;
    color: #ffffff;
    font-size: 13px;
    outline: none;
    transition: all 0.3s ease;
}

.drawer-search-input:focus {
    border-color: #06b6d4;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}

.drawer-search-container .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
    transition: color 0.3s ease;
}

.drawer-search-input:focus + .search-icon {
    color: #06b6d4;
}

.drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    overflow-y: auto;
    flex-grow: 1;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}

.drawer-grid::-webkit-scrollbar {
    width: 4px;
}

.drawer-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* Drawer Item Cards */
.drawer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    text-decoration: none;
    color: #94a3b8;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.drawer-item-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Icon Gradients */
.drawer-item-icon-wrap.icon-purple { background: linear-gradient(135deg, #a855f7, #ec4899); }
.drawer-item-icon-wrap.icon-cyan { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.drawer-item-icon-wrap.icon-emerald { background: linear-gradient(135deg, #10b981, #059669); }
.drawer-item-icon-wrap.icon-amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.drawer-item-icon-wrap.icon-violet { background: linear-gradient(135deg, #6366f1, #4f46e5); }

.drawer-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
    min-width: 0;
}

.drawer-item-title {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.drawer-item-desc {
    display: none !important;
}

.drawer-item-arrow {
    font-size: 10px;
    color: #475569;
    transition: all 0.25s ease;
    margin-left: auto;
}

/* Interactive States */
.drawer-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(6, 182, 212, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.drawer-item.active {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border-color: transparent !important;
    z-index: 1;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.drawer-item.active::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        #f97316,
        #84cc16,
        #06b6d4,
        #f97316
    );
    animation: rotateBorderChasing 3.5s linear infinite;
    z-index: -2;
}

.drawer-item.active::before {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: rgba(9, 13, 22, 0.96);
    border-radius: 14.5px;
    z-index: -1;
}

[data-theme="light"] .drawer-item.active::before {
    background: rgba(255, 240, 243, 0.98);
}

.drawer-item.active > * {
    position: relative;
    z-index: 2;
}

.drawer-item:hover .drawer-item-icon-wrap,
.drawer-item.active .drawer-item-icon-wrap {
    transform: scale(1.08) rotate(3deg);
    position: relative;
    z-index: 2;
}

.drawer-item:hover .drawer-item-title,
.drawer-item.active .drawer-item-title {
    color: #06b6d4;
}

.drawer-item:hover .drawer-item-arrow,
.drawer-item.active .drawer-item-arrow {
    color: #06b6d4;
    transform: translateX(4px);
}

/* Light Mode support */
[data-theme="light"] .mobile-menu-drawer {
    background: rgba(248, 250, 252, 0.98);
    border-top-color: rgba(100, 116, 139, 0.15);
    box-shadow: 0 -15px 50px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .drawer-title {
    color: var(--text-primary);
}

[data-theme="light"] .drawer-title i {
    background: var(--accent-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] .drawer-close-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(100, 116, 139, 0.12);
    color: var(--text-muted);
}

[data-theme="light"] .drawer-search-input {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(100, 116, 139, 0.2);
    color: var(--text-primary);
}

[data-theme="light"] .drawer-search-input:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(2, 132, 199, 0.15);
}

[data-theme="light"] .drawer-search-container .search-icon {
    color: var(--text-muted);
}

[data-theme="light"] .drawer-search-input:focus + .search-icon {
    color: var(--accent-cyan);
}

[data-theme="light"] .drawer-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(100, 116, 139, 0.08);
    color: var(--text-secondary);
}

[data-theme="light"] .drawer-item-title {
    color: var(--text-primary);
}

[data-theme="light"] .drawer-item-desc {
    color: var(--text-muted);
}

[data-theme="light"] .drawer-item-arrow {
    color: var(--text-muted);
}

[data-theme="light"] .drawer-item:hover,
[data-theme="light"] .drawer-item.active {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(100, 116, 139, 0.25);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .drawer-item:hover .drawer-item-title,
[data-theme="light"] .drawer-item.active .drawer-item-title {
    color: #0284c7;
}

[data-theme="light"] .drawer-item:hover .drawer-item-arrow,
[data-theme="light"] .drawer-item.active .drawer-item-arrow {
    color: #0284c7;
}

/* ==========================================================================
   INTERACTIVE MOODBOARD STYLES
   ========================================================================== */
.moodboard-item {
    position: absolute;
    cursor: grab;
    user-select: none;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    overflow: visible;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.moodboard-item:active {
    cursor: grabbing;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
    border-color: rgba(6, 182, 212, 0.4);
}

.moodboard-item .item-content {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.moodboard-item-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    pointer-events: none; /* prevent native image dragging */
}

.moodboard-item-color {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
}

.moodboard-item-color-label {
    font-family: 'Space Grotesk', monospace;
    font-size: 10px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.moodboard-item-text {
    width: 100%;
    height: 100%;
    padding: 16px;
    color: #0f172a;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.4;
    overflow-y: auto;
    word-break: break-word;
    border-radius: inherit;
}

/* Scrollbars for text nodes */
.moodboard-item-text::-webkit-scrollbar {
    width: 4px;
}
.moodboard-item-text::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

/* Control Buttons (Close / Resize) */
.moodboard-item .item-control {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.95);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.moodboard-item .item-resize-controls {
    position: absolute;
    bottom: -10px;
    right: -10px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.moodboard-item .item-scale-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(30, 41, 59, 0.95);
    color: var(--text-primary);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.moodboard-item:hover .item-control,
.moodboard-item:hover .item-resize-controls {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.moodboard-item .item-scale-btn:hover {
    background: var(--accent-cyan);
    color: #0f172a;
    border-color: var(--accent-cyan);
}

.moodboard-item .item-control:hover {
    background: #ef4444;
    transform: scale(1.1);
}

/* Suggested Swatch Badges */
.moodboard-suggested-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.moodboard-suggested-badge:hover {
    transform: scale(1.2) translateY(-1px);
    border-color: #ffffff;
}

/* Light Theme overrides for Moodboard elements */
[data-theme="light"] .moodboard-item {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .moodboard-item:active {
    border-color: rgba(2, 132, 199, 0.3);
}
[data-theme="light"] .moodboard-item .item-scale-btn {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
    border-color: rgba(15, 23, 42, 0.1);
}
[data-theme="light"] .moodboard-item .item-scale-btn:hover {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

/* ==========================================================================
   KISS CAMPAIGN POSTER SIMULATOR STYLES
   ========================================================================== */
.kiss-poster-canvas {
    position: relative;
    width: 360px;
    height: 504px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .kiss-poster-canvas {
    border-color: rgba(15, 23, 42, 0.06);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
}

.kiss-draggable {
    cursor: move;
    user-select: none;
    touch-action: none;
    position: absolute;
    transition: outline 0.15s ease;
    outline: 1.5px solid transparent;
    padding: 4px 8px;
    border-radius: 4px;
}

.kiss-draggable:hover {
    outline: 1px dashed rgba(6, 182, 212, 0.4);
}

.kiss-draggable.dragging {
    outline: 1.5px dashed var(--accent-cyan);
    background: rgba(6, 182, 212, 0.05);
}

.kiss-product-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.kiss-product-layer svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

.kiss-logo-layer {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    pointer-events: none;
}

.kiss-logo-layer svg {
    width: 100%;
    height: 100%;
}

.kiss-clutter-sticker {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kiss-clutter-sticker.active {
    opacity: 0.6;
    transform: scale(1);
}

/* Diagnostic gauges */
.clutter-gauge-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clutter-bar-track {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .clutter-bar-track {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.03);
}

.clutter-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 5px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

/* Brand guidelines panel widgets */
.distraction-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.distraction-btn {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.distraction-btn:hover {
    background: rgba(255,255,255,0.06);
    color: #f1f5f9;
}

.distraction-btn.active {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444 !important;
}

[data-theme="light"] .distraction-btn {
    border-color: rgba(15,23,42,0.06);
    background: rgba(15,23,42,0.02);
}

[data-theme="light"] .distraction-btn:hover {
    background: rgba(15,23,42,0.05);
    color: #1e293b;
}

[data-theme="light"] .distraction-btn.active {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: #dc2626 !important;
}

.cognitive-timer-chip {
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[data-theme="light"] .cognitive-timer-chip {
    background: rgba(255,255,255,0.8);
    border-color: rgba(0,0,0,0.06);
}



/* ==============================================================================
   Brand Guidelines & Logo Safe Zone Simulator Style Rules
   ============================================================================== */
.brand-workspace-container {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.brand-workspace-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.brand-workspace-canvas.backdrop-dark {
    background: #0f172a !important;
}

.brand-workspace-canvas.backdrop-photo {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(88, 28, 135, 0.8)), 
                radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.15), transparent 50%),
                repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 10px) !important;
}

.brand-canvas-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(100, 116, 139, 0.15) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 1;
}

/* Safe Zone Exclusion Border Box */
.brand-safe-zone-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1.5px dashed rgba(6, 182, 212, 0.45);
    background: rgba(6, 182, 212, 0.02);
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-safe-zone-box::before {
    content: 'ZONA AMAN / SAFE ZONE';
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(6, 182, 212, 0.6);
    pointer-events: none;
}

/* Safe Zone Breach Warning */
.brand-safe-zone-box.breached {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.06) !important;
    box-shadow: inset 0 0 25px rgba(239, 68, 68, 0.15);
    animation: breachPulse 1.5s infinite alternate ease-in-out;
}

.brand-safe-zone-box.breached::before {
    content: '⚠️ BREACHED / PELANGGARAN';
    color: #ef4444;
}

@keyframes breachPulse {
    0% {
        box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.1), 0 0 8px rgba(239, 68, 68, 0.2);
    }
    100% {
        box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.25), 0 0 20px rgba(239, 68, 68, 0.45);
    }
}

/* CAD-style Dimension Arrow Lines */
.dimension-line {
    position: absolute;
    background: rgba(6, 182, 212, 0.4);
    pointer-events: none;
    z-index: 3;
    transition: all 0.3s ease;
}

.brand-safe-zone-box.breached ~ .dimension-line {
    background: rgba(239, 68, 68, 0.5);
}

.dimension-line.dim-h {
    height: 1px;
    left: 0;
    right: 0;
}

.dimension-line.dim-v {
    width: 1px;
    top: 0;
    bottom: 0;
}

.dimension-label {
    position: absolute;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06b6d4;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 4;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.brand-safe-zone-box.breached ~ .dimension-label {
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

/* Draggable Branding Elements */
.brand-draggable-element {
    position: absolute;
    cursor: move;
    user-select: none;
    z-index: 10;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.3s ease;
}

.brand-draggable-element:hover {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.05);
}

.brand-draggable-element.dragging {
    border-color: #06b6d4 !important;
    background: rgba(6, 182, 212, 0.1) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    z-index: 100;
}

/* Brand Collateral Previews */
.collateral-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.collateral-card {
    position: relative;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.collateral-card:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 182, 212, 0.2);
}

.collateral-preview-viewport {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #0f172a;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Light mode support */
[data-theme="light"] .brand-workspace-canvas {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .brand-workspace-canvas.backdrop-photo {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.9), rgba(219, 234, 254, 0.9)), 
                repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.01) 0px, rgba(0, 0, 0, 0.01) 2px, transparent 2px, transparent 10px) !important;
}

[data-theme="light"] .collateral-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .dimension-label {
    background: rgba(255, 255, 255, 0.92);
}

/* ── Unified Top Control Header & Creator Chip Overrides ── */

/* Left brand section to hold logo, title, and creator chip */
.navbar-left-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar-brand-logo {
    display: none;
    height: 32px;
    width: auto;
    object-fit: contain;
}

.navbar-brand-title {
    display: none;
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

/* Desktop layout overrides (width >= 769px) */
@media (min-width: 769px) {
    .top-controls-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 12px 24px;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    
    [data-theme="light"] .top-controls-container {
        background: rgba(248, 250, 252, 0.8);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
}

/* Mobile responsive layout overrides (width <= 768px) */
@media (max-width: 768px) {
    .navbar-brand-logo {
        display: none !important; /* Hide brand details in bottom controls on mobile to keep it clean */
    }
    .navbar-brand-title {
        display: none !important;
    }
    .navbar-creator-chip {
        display: flex !important; /* Show creator chip on mobile so the App Creator is always visible */
    }
    .top-controls-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed !important;
        top: auto !important;
        bottom: 56px !important; /* Stacked directly above the 56px-tall mobile bottom nav bar */
        left: 0 !important;
        right: 0 !important;
        height: 56px !important; /* Sleek height for mobile top header */
        padding: 0 16px !important;
        background: rgba(11, 15, 25, 0.88) !important; /* Translucent glassmorphism */
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: none !important;
        z-index: 9990 !important; /* High enough to stay on top, below hamburger modal overlays (9998/9999) */
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25) !important;
    }
    
    [data-theme="light"] .top-controls-container {
        background: rgba(248, 250, 252, 0.92) !important;
        border-top: 1px solid rgba(100, 116, 139, 0.15) !important;
        border-bottom: none !important;
    }
    
    /* Ensure page containers shift down on mobile to not be obscured by the fixed top header */
    .moodboard-container, 
    .mockup-workspace,
    .main-workspace, 
    .apparel-workspace-container,
    .brand-workspace-container,
    .font-workspace-container,
    .typography-workspace-container,
    .psychology-workspace-container,
    .resources-workspace-container {
        margin-top: 0 !important; /* Clear the top margin, as header is now at the bottom */
        padding-bottom: 130px !important; /* Safe clearance for the dual-stacked bottom bars (controls + links) */
    }
}

/* Light mode enhancements for the creator chip */
[data-theme="light"] .navbar-creator-chip {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .navbar-creator-chip:hover {
    background: rgba(6, 182, 212, 0.05);
    border-color: rgba(6, 182, 212, 0.15);
}
[data-theme="light"] .navbar-creator-chip .creator-label {
    color: #475569 !important;
}
[data-theme="light"] .navbar-creator-chip .creator-name {
    color: #0f172a !important;
}