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

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-hover: #252525;
    --bg-icon: #2a2a2a;
    --border-color: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: #999999;
    --text-muted: #666666;
    --accent-blue: #0099FF;
    --accent-blue-hover: #0088ee;
    --accent-blue-light: rgba(0, 153, 255, 0.15);
    --header-height: 45px;
    --sidebar-width: 240px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
}

/* Framework7 Icons Base Styles */
.f7-icons {
    font-size: 18px;
    line-height: 1;
}

.dropdown-item .f7-icons,
.dropdown-header .f7-icons,
.submenu-header .f7-icons {
    font-size: 18px;
    color: var(--text-secondary);
}

.sidebar-toggle-icon {
    font-size: 16px;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.sidebar-toggle-btn:hover .sidebar-toggle-icon {
    color: var(--text-primary);
}

.credits-info .f7-icons {
    font-size: 14px;
}

.credits-count .f7-icons {
    font-size: 12px;
}

/* ================================
   TOP HEADER BAR
   ================================ */
.top-header {
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 20px;
    border-right: 1px solid var(--border-color);
    margin-right: 20px;
}

/* ================================
   PROJECT MENU DROPDOWN
   ================================ */
.project-menu-wrapper {
    position: relative;
}

.project-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.project-menu-btn:hover {
    background: var(--bg-hover);
}

.project-logo {
    width: 28px;
    height: 28px;
    background: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-logo .material-icons-outlined {
    font-size: 16px;
    color: white;
}

.project-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-arrow {
    font-size: 18px !important;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.project-menu-btn.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* Project Dropdown */
.project-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 2000;
    overflow: hidden;
}

.project-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.dropdown-header:hover {
    background: var(--bg-hover);
}

.dropdown-header .material-icons-outlined {
    font-size: 18px;
    color: var(--text-secondary);
}

/* User Section */
.dropdown-user-section {
    padding: 14px 16px;
}

.user-name {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 500;
}

/* Credits Box */
.credits-box {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 12px 14px;
}

.credits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.credits-header span:first-child {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.credits-count {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

.credits-count:hover {
    color: var(--text-primary);
}

.credits-count .material-icons-outlined {
    font-size: 16px !important;
    margin-left: 2px;
}

.credits-bar {
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.credits-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.credits-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.credits-info .material-icons-outlined {
    font-size: 14px !important;
}

/* Dropdown Divider */
.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* Menu Items */
.dropdown-menu-items {
    padding: 4px 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

.dropdown-item .material-icons-outlined {
    font-size: 18px;
    color: var(--text-secondary);
}

.dropdown-item .shortcut {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 3px 6px;
    border-radius: 4px;
}

.dropdown-item .submenu-arrow {
    margin-left: auto;
    font-size: 18px !important;
}

.dropdown-item .check-icon {
    margin-left: auto;
    font-size: 18px !important;
    color: var(--accent-blue);
    display: none;
}

.dropdown-item.active .check-icon {
    display: block;
}

/* App Selection Section in Project Menu */
.dropdown-apps-section {
    padding: 4px 0;
}

.dropdown-section-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px 4px;
}

.dropdown-item.app-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
}

.dropdown-item.app-item .app-icon-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent-blue) 0%, #5856D6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.dropdown-item.app-item .app-check {
    margin-left: auto;
    font-size: 18px !important;
    color: var(--accent-blue);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dropdown-item.app-item.selected .app-check {
    opacity: 1;
}

.dropdown-item.app-item.selected {
    background: var(--bg-hover);
}

/* Check icon for appearance options */
.dropdown-item .check-icon {
    margin-left: auto;
    font-size: 16px !important;
    color: var(--accent-blue);
    display: none;
}

.dropdown-item.active .check-icon {
    display: block;
}

/* Appearance Submenu */
.appearance-submenu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-secondary);
    transform: translateX(100%);
    transition: transform 0.2s ease;
    border-radius: 12px;
    overflow: hidden;
}

.appearance-submenu.open {
    transform: translateX(0);
}

.submenu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.submenu-header:hover {
    background: var(--bg-hover);
}

.submenu-header .material-icons-outlined {
    font-size: 18px;
    color: var(--text-secondary);
}

/* Legacy logo styles (kept for compatibility) */
.logo-mark {
    width: 32px;
    height: 32px;
    background: var(--accent-blue);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 153, 255, 0.3);
    display: none;
}

.logo-mark .material-icons-outlined {
    font-size: 18px;
    color: white;
}

.app-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: none;
}

/* Custom Dropdown Styles */
.custom-dropdown {
    position: relative;
}

.custom-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
}

.custom-dropdown-trigger:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-blue);
}

.custom-dropdown.open .custom-dropdown-trigger {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-light);
}

.custom-dropdown-trigger .dropdown-icon {
    font-size: 18px;
    color: var(--accent-blue);
    background: var(--accent-blue-light);
    padding: 6px;
    border-radius: 8px;
}

.dropdown-selected-text {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-arrow {
    font-size: 18px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.custom-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.custom-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 16px;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 100000;
    max-height: 300px;
    overflow-y: auto;
}

.custom-dropdown.open .custom-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Modal dropdowns need fixed positioning to escape overflow:hidden containers */
.modal-dropdown .custom-dropdown-menu {
    position: fixed;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    min-width: 200px;
}

/* Enhanced modal dropdown triggers */
.modal-dropdown .custom-dropdown-trigger {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    min-width: 100%;
    justify-content: flex-start;
    position: relative;
}

.modal-dropdown .custom-dropdown-trigger:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.modal-dropdown.open .custom-dropdown-trigger {
    border-color: var(--accent-blue);
    background: rgba(0, 153, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.1);
}

.modal-dropdown .dropdown-selected-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.modal-dropdown .dropdown-arrow {
    position: absolute;
    right: 12px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease;
}

.modal-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* Disabled dropdown state */
.modal-dropdown .custom-dropdown-trigger.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.02);
}

.modal-dropdown .custom-dropdown-trigger.disabled .dropdown-selected-text {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.custom-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.custom-dropdown-item:first-child {
    border-radius: 9px 9px 0 0;
}

.custom-dropdown-item:last-child {
    border-radius: 0 0 9px 9px;
}

.custom-dropdown-item:only-child {
    border-radius: 9px;
}

.custom-dropdown-item:hover {
    background: var(--bg-tertiary);
}

.custom-dropdown-item.selected {
    background: var(--accent-blue-light);
}

.custom-dropdown-item .item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
}

.custom-dropdown-item .item-icon-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.custom-dropdown-item .item-text {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.custom-dropdown-item .item-check {
    font-size: 18px;
    color: var(--accent-blue);
    opacity: 0;
}

.custom-dropdown-item.selected .item-check {
    opacity: 1;
}

/* Sidebar dropdown specific styles */
.sidebar-dropdown {
    width: 100%;
}

.sidebar-dropdown .custom-dropdown-trigger {
    width: 100%;
    min-width: unset;
    padding: 8px 12px;
    background: var(--bg-secondary);
}

.sidebar-dropdown .custom-dropdown-menu {
    left: 0;
    right: 0;
    width: 100%;
}

/* Legacy app-selector styles (can be removed later) */
.app-selector-wrapper {
    display: none;
}

.app-selector:hover {
    border-color: var(--accent-blue);
}

.app-selector:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px var(--accent-blue-light);
}

/* Header Section Tabs */
.header-sections {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 8px;
    margin-left: 12px;
    border-left: 1px solid var(--border-color);
}

.section-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.section-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.section-tab .section-icon {
    font-size: 11px;
}

.section-tab .section-label {
    font-size: 11px;
    font-weight: 500;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.2s ease;
}

.section-tab.active {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.section-tab.active .section-label {
    max-width: 80px;
    opacity: 1;
    margin-left: 2px;
}

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

.cpp-selector {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 28px 6px 10px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 500;
    min-width: 140px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.cpp-selector:hover {
    border-color: #444;
    background-color: #1f1f1f;
}

.cpp-selector:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-light);
}

.cpp-actions {
    display: flex;
    gap: 4px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.icon-btn {
    width: 34px;
    height: 34px;
    background: var(--bg-icon);
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-btn .material-icons-outlined {
    font-size: 18px;
    color: var(--text-secondary);
}

.icon-btn:hover {
    background: #3a3a3a;
    transform: translateY(-1px);
}

.icon-btn:hover .material-icons-outlined {
    color: var(--text-primary);
}

.icon-btn:active {
    transform: translateY(0);
}

/* Header Icon Buttons - Clean style (Lovable) */
.header-icon-btn-clean {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-primary);
}

.header-icon-btn-clean .material-icons-outlined {
    font-size: 16px;
}

.header-icon-btn-clean:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.header-icon-btn-clean:active {
    transform: scale(0.95);
}

/* Export HD Button - Special styling */
.header-icon-btn-clean.export-hd-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: white;
}

.header-icon-btn-clean.export-hd-btn:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* Header Icon Buttons - With border */
.header-icon-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-secondary);
}

.header-icon-btn .material-icons-outlined {
    font-size: 18px;
}

.header-icon-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

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

.cpp-selector-wrapper {
    position: relative;
}

.cpp-selector-wrapper .cpp-selector {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid #2563eb;
    color: #2563eb;
    font-weight: 500;
    font-size: 13px;
    padding: 6px 32px 6px 12px;
    border-radius: 6px;
    min-width: 140px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.cpp-selector-wrapper .cpp-selector:hover {
    background: rgba(37, 99, 235, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
}

.cpp-selector-wrapper .cpp-selector:focus {
    outline: none;
    box-shadow: none;
}

.cpp-actions {
    display: flex;
    gap: 0;
    margin-left: 4px;
}

.cpp-actions .header-icon-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
}

.cpp-actions .header-icon-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.publish-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    border: none;
    border-radius: 6px;
    padding: 6px 14px 6px 10px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 8px;
}

.publish-btn .material-icons-outlined {
    font-size: 16px;
}

.publish-btn:hover {
    background: #1d4ed8;
}

.publish-btn:active {
    transform: scale(0.97);
}

/* User Menu */
.user-menu-wrapper {
    position: relative;
    margin-left: 8px;
}

.user-menu-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.user-menu-btn:hover {
    opacity: 0.8;
}

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

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar .material-icons-outlined {
    font-size: 18px;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.user-avatar-large {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar-large .material-icons-outlined {
    font-size: 24px;
}

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

.user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Project Dropdown Profile Section */
.project-dropdown-profile {
    padding: 12px;
}

.project-dropdown-profile .profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    margin-bottom: 8px;
}

.project-dropdown-profile .profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
}

.project-dropdown-profile .profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-dropdown-profile .profile-avatar .material-icons-outlined {
    font-size: 22px;
}

.project-dropdown-profile .profile-info {
    flex: 1;
    min-width: 0;
}

.project-dropdown-profile .profile-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-dropdown-profile .profile-email {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-dropdown-profile .profile-actions {
    display: flex;
    flex-direction: column;
}

/* ================================
   APP LAYOUT
   ================================ */
.app-layout {
    display: flex;
    height: calc(100vh - var(--header-height));
    margin-top: var(--header-height);
}

/* ================================
   LEFT SIDEBAR
   ================================ */
.left-sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    flex-shrink: 0;
    padding-top: 0;
    transition: width 0.3s ease, margin-left 0.3s ease, opacity 0.3s ease;
}

.left-sidebar.collapsed {
    width: 0;
    min-width: 0;
    margin-left: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    border: none;
}

.sidebar-toggle-btn {
    margin-right: 8px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
}

.sidebar-toggle-btn .sidebar-toggle-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.sidebar-toggle-btn.active .sidebar-toggle-icon {
    transform: rotate(180deg);
}

.sidebar-section {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.section-header .material-icons-outlined {
    font-size: 14px;
}

.section-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.device-switcher {
    display: flex;
    gap: 4px;
}

.device-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.device-btn .material-icons-outlined {
    font-size: 14px;
}

.device-btn:hover {
    background: var(--bg-hover);
    border-color: #444;
}

.device-btn.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 153, 255, 0.25);
}

/* Theme Switcher */
.theme-switcher {
    display: flex;
    gap: 4px;
}

.theme-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-btn .material-icons-outlined {
    font-size: 14px;
}

.theme-btn:hover {
    background: var(--bg-hover);
    border-color: #444;
}

.theme-btn.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 153, 255, 0.25);
}

.sidebar-select {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 7px 10px;
    padding-right: 28px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.sidebar-select:hover {
    border-color: #444;
    background-color: #1f1f1f;
}

.sidebar-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-light);
}

.sidebar-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 10px;
}

.sidebar-input {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 7px 10px;
    color: var(--text-primary);
    font-size: 12px;
    transition: all 0.2s ease;
}

.sidebar-input:hover {
    border-color: #444;
    background-color: #1f1f1f;
}

.sidebar-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-light);
}

.sidebar-input::placeholder {
    color: var(--text-muted);
}

.size-info {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding-top: 4px;
}

/* ================================
   CANVAS AREA
   ================================ */
.canvas-area {
    flex: 1;
    min-width: 0;
    background: var(--bg-primary);
    overflow: auto;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.screenshots-container {
    display: flex;
    gap: 24px;
    padding: 20px;
    margin: 0 auto;
}

.screenshots-container::-webkit-scrollbar {
    height: 8px;
}

.screenshots-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.screenshots-container::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
}

.screenshots-container::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

/* ================================
   MODAL
   ================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

.modal-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.modal-header h2 .material-icons-outlined {
    font-size: 20px;
    color: var(--accent-blue);
    opacity: 0.9;
}

.modal-close {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.modal-close .material-icons-outlined {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal-close:hover .material-icons-outlined {
    color: rgba(255, 255, 255, 0.8);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
    background: var(--bg-secondary);
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-field select,
.form-field input {
    background: #3a3a3c;
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 400;
    transition: all 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.form-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.form-field select:hover,
.form-field input:hover {
    background: #48484a;
}

.form-field select:focus,
.form-field input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-blue);
}

.form-field select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #2c2c2e;
}

.form-field select option {
    background: #2c2c2e;
    color: var(--text-primary);
    padding: 12px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.btn-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-blue);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-primary .material-icons-outlined {
    font-size: 18px;
}

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

.btn-primary:disabled {
    background: #333;
    cursor: not-allowed;
}

.btn-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-secondary .material-icons-outlined {
    font-size: 18px;
    color: var(--text-secondary);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: #3a3a3a;
}

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

.config-warning {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.config-warning .material-icons-outlined {
    color: #f44336;
    flex-shrink: 0;
}

.config-warning strong {
    color: #f44336;
}

.config-warning code {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.upload-status {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    margin-top: 20px;
    max-height: 200px;
    overflow-y: auto;
}

.upload-status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

.upload-status-item:last-child {
    border-bottom: none;
}

.upload-status-item .material-icons-outlined {
    font-size: 18px;
}

.upload-status-item.pending .material-icons-outlined {
    color: var(--text-muted);
}

.upload-status-item.uploading .material-icons-outlined {
    color: #FFA500;
    animation: spin 1s linear infinite;
}

.upload-status-item.success .material-icons-outlined {
    color: #4CAF50;
}

.upload-status-item.error .material-icons-outlined {
    color: #f44336;
}

/* Cancel Upload Button */
.upload-cancel-container {
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    text-align: center;
}

.cancel-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.cancel-upload-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #d32f2f, #b71c1c);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

.cancel-upload-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: #666;
}

.cancel-upload-btn .material-icons-outlined {
    font-size: 18px;
}

.upload-cancelled-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 152, 0, 0.2);
    color: #FF9800;
    border-radius: 8px;
    font-size: 14px;
}

.upload-cancelled-message .material-icons-outlined {
    font-size: 18px;
}

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

/* ================================
   PROGRESS OVERLAY
   ================================ */
.export-progress {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.export-progress.active {
    display: flex;
}

.progress-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 60px;
    text-align: center;
}

.progress-content h3 {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
}

.progress-bar {
    width: 240px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: var(--accent-blue);
    width: 0%;
    transition: width 0.3s ease;
}

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

/* ================================
   SCREENSHOT SCREENS
   ================================ */
.screen {
    flex-shrink: 0;
    scroll-snap-align: start;
    background: #D9EAF5;
    border-radius: 24px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.screen:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Imported screenshots - no padding, image fills entire screen */
.screen.imported-screen {
    padding: 0;
    background: transparent;
}

.screen.imported-screen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 24px;
}

/* Edit button on hover */
.screen-edit-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    z-index: 100;
}

.screen-edit-btn .material-icons-outlined {
    font-size: 16px;
}

.screen:hover .screen-edit-btn {
    opacity: 1;
    transform: translateY(0);
}

.screen-edit-btn:hover {
    background: rgba(0, 153, 255, 0.9);
    border-color: rgba(0, 153, 255, 1);
}

/* Default: iPhone 6.7" (1290x2796) scaled down for preview */
.screen {
    width: 322px;
    height: 699px;
}

/* iPhone 5.5" format (1242x2208) - wider aspect ratio */
.screen.format-55 {
    height: 572px; /* 322 * (2208/1242) = 572 */
    overflow: hidden;
}

/* Screen 1 - Hero with phone preview */
.format-55 .hero-title {
    font-size: 36px;
    margin-bottom: 8px;
    margin-top: -5px;
}

.format-55 .logo {
    margin-bottom: 8px;
    font-size: 13px;
}

.format-55 .badges {
    transform: scale(0.75);
    margin-top: 20px;
    gap: 15px;
}

.format-55.screen-1 .phone-preview {
    transform: translateY(-50%) rotate(4deg) scale(0.62);
    right: -280px;
}

.format-55 .todo-widget {
    transform: scale(0.7);
    left: -25px;
    bottom: 130px;
}

/* Screen 2 - Planner */
.format-55.screen-2 .phone-frame {
    transform: rotate(4deg) scale(0.72);
    margin-top: 15px;
}

.format-55.screen-2 .widget-title {
    font-size: 34px;
    margin-bottom: 12px;
}

/* Screen 3 - Calendar */
.format-55.screen-3 .phone-frame {
    transform: scale(0.70);
    margin-top: -15px;
}

.format-55.screen-3 .calendar-icons {
    transform: scale(0.75);
    bottom: 20px;
}

.format-55.screen-3 .devices-title {
    font-size: 34px;
    margin-bottom: 8px;
}

/* Tic-Tac screens for 5.5" */
.format-55 .tic-tac-title {
    font-size: 34px;
    margin-bottom: 10px;
    margin-top: -5px;
}

.format-55 .tic-tac-title-left {
    font-size: 32px;
}

/* Tic-tac screen 1 - phone on right */
.format-55 .phone-preview-right {
    transform: translateY(-50%);
    right: -160px;
    top: 45%;
}

.format-55 .phone-preview-right .phone-frame {
    transform: scale(0.72);
}

/* Tic-tac compact widget */
.format-55 .todo-widget-compact {
    transform: scale(0.75);
    left: 15px;
    top: 95px;
}

/* Tic-tac badges */
.format-55 .tic-tac-badges {
    transform: scale(0.72);
    bottom: 12px;
    left: 5px;
}

/* Tic-tac screen 2+ - centered phone */
.format-55 .phone-frame-centered-container {
    transform: scale(0.78);
    margin-top: 5px;
}

/* iPhone 6.5" format (1242x2688) */
.screen.format-65 {
    height: 696px; /* 322 * (2688/1242) = 696 */
}

/* Tic-tac screen 1 - phone on right for 6.5" */
.format-65 .phone-preview-right {
    transform: translateY(-50%);
    right: -160px;
    top: 50%;
}

.format-65 .phone-preview-right .phone-frame {
    transform: scale(0.81);
}

/* Tic-tac compact widget for 6.5" */
.format-65 .todo-widget-compact {
    transform: scale(0.85);
}

/* Tic-tac badges for 6.5" */
.format-65 .tic-tac-badges {
    transform: scale(0.85);
}

/* Tic-tac centered phone for 6.5" */
.format-65 .phone-frame-centered-container {
    transform: scale(0.95);
    margin-top: 15px;
}

/* iPhone 6.7" format (1290x2796) - default */
.screen.format-67 {
    height: 699px; /* 322 * (2796/1290) = 699 */
}

/* RuStore format (1080x1920 = 9:16) - more compact */
.screen.rustore-format {
    height: 573px;
}

.rustore-format .hero-title {
    font-size: 40px;
    margin-bottom: 15px;
    margin-top: 10px;
}

.rustore-format .badges {
    transform: scale(0.85);
    margin-top: 50px;
}

.rustore-format.screen-1 .phone-preview {
    transform: translateY(-48%) rotate(4deg) scale(0.9);
    right: -295px;
}

.rustore-format.screen-2 .phone-frame {
    transform: rotate(4deg) scale(1.0);
    margin-top: 40px;
}

.rustore-format.screen-3 {
    padding: 20px 20px;
}

.rustore-format .widget-title {
    font-size: 29px;
    margin-bottom: 15px;
}

.rustore-format .widgets-showcase {
    transform: scale(0.9);
    transform-origin: top center;
}

.rustore-format .devices-section {
    transform: scale(0.85);
    margin-top: -20px;
}

/* Screen 1 - Hero */
.screen-1 {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.screen-1 .phone-preview {
    position: absolute;
    right: -295px;
    top: 50%;
    transform: translateY(-48%) rotate(4deg) scale(1.1);
    z-index: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5B9BD5;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.logo-icon {
    width: 20px;
    height: 20px;
    border: 2px solid #5B9BD5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon::after {
    content: '✓';
    font-size: 12px;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 46px;
    font-weight: 700;
    color: #2D2D2D;
    line-height: 1.1;
    margin-bottom: auto;
    position: relative;
    z-index: 2;
}

.hero-title .highlight {
    position: relative;
    display: inline;
}

.hero-title .highlight::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 8px;
    background: #9B59B6;
    opacity: 0.4;
    z-index: -1;
    border-radius: 2px;
}

.badges {
    margin-top: 40px;
    position: relative;
    z-index: 2;
    align-self: flex-start;
}

.badge-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 25px;
}

.badge-laurel {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-laurel img {
    width: 100%;
    height: auto;
}

.badge-laurel:not(.left) img {
    transform: scaleX(-1);
}

.badge-content {
    text-align: center;
    min-width: 100px;
}

.badge-value {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    white-space: nowrap;
    font-weight: 700;
    color: #2D2D2D;
}

.badge-label {
    font-size: 11px;
    font-weight: 600;
    color: #2D2D2D;
    letter-spacing: 1px;
    margin-top: 2px;
    white-space: nowrap;
}

/* Screen 2 - Phone Mockup */
.screen-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    position: relative;
    overflow: hidden;
}

.screen-2 .phone-frame {
    margin-left: -87px;
    margin-top: 25px;
    transform: rotate(4deg) scale(1.1);
}

.screen-2 .task-item {
    padding-left: 20px;
}

.screen-2 .calendar-header {
    margin-left: 15px;
}

.screen-2 .month-year {
    font-size: 18px;
}

.phone-frame {
    background: white;
    border-radius: 50px;
    padding: 10px;
    box-shadow:
            0 25px 50px rgba(0,0,0,0.15),
            0 10px 30px rgba(0,0,0,0.1),
            0 0 0 1px rgba(0,0,0,0.05);
    border: 3px solid #8B6B61;
    width: 320px;
    aspect-ratio: 9 / 17;
}

.phone-screen {
    background: white;
    border-radius: 42px;
    padding: 16px 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.calendar-header {
    margin-bottom: 15px;
}

.calendar-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.month-year {
    color: #2D2D2D;
    font-size: 15px;
    font-weight: 700;
}

.calendar-actions {
    display: flex;
    gap: 8px;
}

.cal-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
}

.today-badge {
    background: #5B9BD5;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.week-strip {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 10px 6px;
    margin-bottom: 8px;
}

.week-days {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.day {
    text-align: center;
    padding: 4px 2px;
    flex: 1;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s;
}

.day-name {
    font-size: 9px;
    color: #999;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.day-number {
    font-size: 13px;
    color: #2D2D2D;
    font-weight: 600;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 8px;
}

.day.has-tasks .day-number::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    background: #5B9BD5;
    border-radius: 50%;
}

.day.active {
    background: #5B9BD5;
}

.day.active .day-name {
    color: rgba(255,255,255,0.8);
}

.day.active .day-number {
    color: white;
    font-weight: 700;
}

.progress-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, #5B9BD5 0%, #4A8BC4 100%);
    border-radius: 12px;
    margin-bottom: 12px;
}

.progress-info {
    color: white;
}

.progress-title {
    font-size: 11px;
    opacity: 0.9;
    margin-bottom: 2px;
}

.progress-stats {
    font-size: 14px;
    font-weight: 700;
}

.progress-ring {
    width: 36px;
    height: 36px;
    position: relative;
}

.progress-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.3);
    stroke-width: 4;
}

.progress-ring-fill {
    fill: none;
    stroke: white;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 88;
    stroke-dashoffset: 44;
    transform: rotate(-90deg);
    transform-origin: center;
}

.progress-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: 700;
    color: white;
}

.timeline {
    margin-top: 8px;
    flex: 1;
    overflow: hidden;
}

.timeline-label {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    padding: 10px 12px;
    background: #F8FAFC;
    border-radius: 12px;
    gap: 10px;
}

.task-item.completed-task {
    background: #F0FDF4;
}

.task-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
}

.task-icon.red { background: #D4847A; }
.task-icon.pink { background: #E8A0A0; }
.task-icon.green { background: #8FB88A; }
.task-icon.blue { background: #6B8FAD; }
.task-icon.purple { background: #9B8FBF; }

.task-content {
    flex: 1;
    min-width: 0;
}

.task-time {
    font-size: 10px;
    color: #999;
    margin-bottom: 1px;
}

.task-title {
    font-size: 13px;
    color: #2D2D2D;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-title.completed {
    text-decoration: line-through;
    color: #999;
}

.task-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid #ddd;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
}

.task-checkbox.checked {
    background: #8FB88A;
    border-color: #8FB88A;
    color: white;
}

.phone-nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding-top: 12px;
    gap: 10px;
}

.phone-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(120, 120, 128, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 22px;
    padding: 8px 12px;
}

.phone-nav.full-width {
    width: 100%;
    justify-content: space-around;
    padding: 8px 20px;
}

.nav-item {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    transition: all 0.2s;
}

.nav-item.active {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nav-icon {
    font-size: 22px;
    color: #666;
}

.nav-item.active .nav-icon {
    color: #5B9BD5;
}

.add-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    background: #5B9BD5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(91, 155, 213, 0.4);
}

.add-btn .material-icons-outlined {
    font-size: 26px;
    color: white;
}

/* Screen 3 - Widgets */
.screen-3 {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
}

.widget-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 600;
    color: #2D2D2D;
    line-height: 1.15;
    margin-bottom: 20px;
}

.widgets-showcase {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}

/* Large Widget */
.widget-large {
    background: white;
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.widget-tasks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-task {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #F8FAFC;
    border-radius: 14px;
}

.widget-task-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.widget-task-dot.red { background: #D4847A; }
.widget-task-dot.blue { background: #5B9BD5; }
.widget-task-dot.green { background: #8FB88A; }

.widget-task-title {
    font-size: 15px;
    color: #2D2D2D;
    font-weight: 600;
    flex: 1;
}

.widget-task-time {
    font-size: 13px;
    color: #5B9BD5;
    font-weight: 600;
}

/* Small Widgets Row */
.widgets-row {
    display: flex;
    gap: 12px;
}

.widget-small {
    flex: 1;
    background: white;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.widget-small.pink-bg {
    background: linear-gradient(135deg, #FFE5EC 0%, #FFF0F3 100%);
}

/* Progress Widget */
.widget-progress-circle {
    width: 70px;
    height: 70px;
    margin-bottom: 8px;
    position: relative;
}

.widget-progress-ring {
    transform: rotate(-90deg);
}

.widget-progress-bg {
    fill: none;
    stroke: #E8F0F5;
    stroke-width: 7;
}

.widget-progress-fill {
    fill: none;
    stroke: #5B9BD5;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 176;
    stroke-dashoffset: 53;
}

.widget-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 700;
    color: #2D2D2D;
}

.widget-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

/* Streak Widget */
.streak-icon {
    font-size: 32px;
    margin-bottom: 4px;
}

.streak-count {
    font-size: 24px;
    font-weight: 700;
    color: #2D2D2D;
}

.streak-label {
    font-size: 13px;
    font-weight: 600;
    color: #D4847A;
}

/* Devices Section */
.devices-section {
    margin-top: auto;
    text-align: center;
    padding-top: 25px;
}

.devices-title {
    font-size: 20px;
    font-weight: 700;
    color: #2D2D2D;
    margin-bottom: 16px;
}

.devices-icons {
    display: flex;
    justify-content: center;
    gap: 28px;
}

.device-icon .material-icons-outlined {
    font-size: 42px;
    color: #5B9BD5;
}

/* iPad specific styles */
.screen-ipad {
    width: 430px;
    height: 574px;
}

.ipad-mockup {
    margin-top: 20px;
}

.ipad-frame {
    background: white;
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 3px solid #8B6B61;
    width: 280px;
    margin: 0 auto;
}

.ipad-screen-content {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 15px;
    min-height: 200px;
}

.ipad-full-mockup {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.ipad-frame-large {
    background: white;
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border: 3px solid #8B6B61;
    width: 380px;
}

.ipad-week-view {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.week-day-col {
    flex: 1;
    text-align: center;
    padding: 10px 5px;
    border-radius: 10px;
    background: #F0F4F8;
}

.week-day-col.active {
    background: #E8F4FD;
}

.day-header {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
}

.day-event {
    font-size: 9px;
    padding: 4px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
    color: white;
}

.day-event.blue { background: #5B9BD5; }
.day-event.green { background: #8FB88A; }
.day-event.pink { background: #E8A0A0; }

.ipad-task-list {
    margin-top: 10px;
}

.ipad-hero {
    font-size: 42px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    text-align: left;
    position: relative;
    z-index: 10;
}

.ipad-hero .title-line {
    display: block;
}

.badges-bottom-left {
    position: absolute;
    bottom: 60px;
    left: 40px;
    flex-direction: column;
    gap: 15px;
}

/* iPad Preview on Screen 1 - peeking from right */
.ipad-screen1-preview {
    position: absolute;
    right: -460px;
    top: 50%;
    transform: translateY(calc(-50% + 35px)) rotate(-4deg);
    z-index: 5;
}

.ipad-screen1-preview .ipad-device-frame {
    width: 581px;
    height: 445px;
    transform: none;
}

.ipad-widgets-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
}

/* iPad Device Mockup - realistic proportions */
.ipad-device-mockup {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 20px;
}

.ipad-device-frame {
    background: #1a1a1a;
    border-radius: 14px;
    padding: 5px;
    box-shadow:
            0 25px 60px rgba(0,0,0,0.35),
            inset 0 0 0 1px #333;
    width: 581px;
    height: 445px;
    transform: rotate(-4deg) translateX(-90px) translateY(30px);
}

/* Apple Pencil */
.apple-pencil {
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%) rotate(20deg);
    height: 420px;
    z-index: 10;
    filter: drop-shadow(3px 5px 10px rgba(0,0,0,0.2));
}

.apple-pencil img {
    height: 100%;
    width: auto;
}

.ipad-device-screen {
    background: #F8FAFC;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.ipad-app-sidebar {
    width: 44px;
    background: #F0F4F8;
    padding: 8px 4px;
    border-right: 1px solid #E0E0E0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ipad-app-main {
    flex: 1;
    padding: 10px;
}

.ipad-main-header {
    margin-bottom: 6px;
}

.ipad-main-header .month-year {
    font-size: 11px;
}

.ipad-calendar-grid {
    display: flex;
    gap: 6px;
    height: calc(100% - 30px);
}

.ipad-day-column {
    flex: 1;
    background: #F8F9FA;
    border-radius: 8px;
    padding: 6px;
}

.ipad-day-column.active {
    background: #E8F4FD;
}

.ipad-day-header {
    font-size: 9px;
    font-weight: 600;
    color: #666;
    text-align: center;
    margin-bottom: 6px;
}

.ipad-event {
    font-size: 8px;
    padding: 4px;
    border-radius: 4px;
    color: white;
    margin-bottom: 4px;
    text-align: center;
}

.ipad-event.blue { background: #5B9BD5; }
.ipad-event.green { background: #8FB88A; }
.ipad-event.pink { background: #E8A0A0; }

/* iPad Sidebar Icons */
.ipad-sidebar-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.ipad-sidebar-icon .material-icons-outlined {
    font-size: 16px;
    color: #666;
}

.ipad-sidebar-icon.active {
    background: #5B9BD5;
}

.ipad-sidebar-icon.active .material-icons-outlined {
    color: white;
}

/* iPad Week Strip */
.ipad-week-strip {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    background: #F0F4F8;
    border-radius: 6px;
    padding: 4px;
}

.ipad-week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

.ipad-week-day .day-name {
    font-size: 7px;
    color: #999;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1px;
}

.ipad-week-day .day-num {
    font-size: 10px;
    font-weight: 600;
    color: #2D2D2D;
}

.ipad-week-day.active {
    background: #5B9BD5;
}

.ipad-week-day.active .day-name {
    color: rgba(255,255,255,0.8);
}

.ipad-week-day.active .day-num {
    color: white;
}

/* iPad Timeline */
.ipad-timeline {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ipad-task-item {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    background: #F8FAFC;
    border-radius: 6px;
    gap: 6px;
}

.ipad-task-item.completed {
    background: #F0FDF4;
}

.ipad-task-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

.ipad-task-icon.red { background: #D4847A; }
.ipad-task-icon.pink { background: #E8A0A0; }
.ipad-task-icon.green { background: #8FB88A; }
.ipad-task-icon.blue { background: #6B8FAD; }

.ipad-task-info {
    flex: 1;
    min-width: 0;
}

.ipad-task-time {
    font-size: 7px;
    color: #999;
    margin-bottom: 0px;
}

.ipad-task-name {
    font-size: 9px;
    color: #2D2D2D;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ipad-task-name.done {
    text-decoration: line-through;
    color: #999;
}

.ipad-task-check {
    width: 14px;
    height: 14px;
    border: 1.5px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 8px;
    color: transparent;
}

.ipad-task-check.checked {
    background: #8FB88A;
    border-color: #8FB88A;
    color: white;
}

/* NEW iPad 3-Column Layout */
.ipad-sidebar-menu {
    width: 36px;
    background: #F0F2F5;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar-profile {
    margin-bottom: 12px;
}

.profile-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5B9BD5, #7BB5E8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    color: white;
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sidebar-bottom {
    margin-top: auto;
}

.ipad-menu-item {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}

.ipad-menu-item .material-icons-outlined {
    font-size: 14px;
    color: #666;
}

.ipad-menu-item.active {
    background: rgba(91, 155, 213, 0.15);
}

.ipad-menu-item.active .material-icons-outlined {
    color: #5B9BD5;
}

/* Center Panel */
.ipad-center-panel {
    width: 140px;
    background: #F5F7FA;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ipad-mini-calendar {
    background: white;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.mini-cal-header {
    font-size: 7px;
    font-weight: 600;
    color: #2D2D2D;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mini-cal-header .material-icons-outlined {
    font-size: 8px;
    color: #999;
}

.mini-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 2px;
}

.mini-cal-weekdays span {
    font-size: 5px;
    color: #999;
    text-align: center;
    font-weight: 600;
}

.mini-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.mini-cal-days span {
    font-size: 6px;
    color: #2D2D2D;
    text-align: center;
    padding: 2px 0;
    border-radius: 3px;
}

.mini-cal-days span.other {
    color: #ccc;
}

.mini-cal-days span.today {
    background: #5B9BD5;
    color: white;
    font-weight: 600;
}

/* Morning Routine Widget */
.morning-routine-widget {
    background: linear-gradient(135deg, #FFE5EC, #FFF0F5);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 6px;
}

.routine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.routine-title {
    font-size: 6px;
    font-weight: 600;
    color: #2D2D2D;
}

.routine-progress {
    font-size: 5px;
    color: #E8A0B0;
    font-weight: 600;
}

.routine-items {
    display: flex;
    gap: 3px;
}

.routine-item {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
}

.routine-item.done {
    background: #E8A0B0;
}

.routine-item.pending {
    background: white;
    border: 1px solid #E8D0D8;
}

/* Schedule Panel */
.ipad-schedule-panel {
    background: white;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    flex: 1;
}

.schedule-panel-header {
    font-size: 7px;
    font-weight: 600;
    color: #2D2D2D;
    margin-bottom: 6px;
}

.schedule-timeline-vertical {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.timeline-hour {
    font-size: 6px;
    color: #999;
    width: 12px;
    text-align: right;
    line-height: 10px;
}

.timeline-block {
    flex: 1;
    border-radius: 4px;
    font-size: 5px;
    font-weight: 500;
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 4px;
    gap: 3px;
}

.timeline-block.short { height: 12px; }
.timeline-block.medium { height: 20px; }
.timeline-block.long { height: 30px; }

.block-icon {
    font-size: 6px;
    opacity: 0.9;
}

.block-text {
    font-size: 5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-block.empty {
    flex: 1;
    background: #F0F4F8;
    height: 10px;
}

.timeline-block.blue { background: #5B9BD5; }
.timeline-block.purple { background: #9B8FBF; }
.timeline-block.teal { background: #5BBDB5; }
.timeline-block.green { background: #8FB88A; }
.timeline-block.orange { background: #E8A060; }

/* Day View - Right Panel */
.ipad-day-view {
    flex: 1;
    background: white;
    padding: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.day-view-header {
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #F0F0F0;
}

.day-view-title {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.day-view-day {
    font-size: 14px;
    font-weight: 700;
    color: #2D2D2D;
}

.day-view-num {
    font-size: 14px;
    font-weight: 700;
    color: #5B9BD5;
}

/* Weather & Progress Row */
.day-view-top-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

/* Weather Widget */
.day-view-weather {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #4A90D9, #87CEEB, #B8E0F0);
    padding: 4px 6px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.day-view-weather::before {
    content: '';
    position: absolute;
    right: 4px;
    top: -2px;
    font-size: 12px;
    opacity: 0.3;
}

.weather-icon {
    font-size: 14px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

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

.weather-temp {
    font-size: 8px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.weather-desc {
    font-size: 5px;
    color: rgba(255,255,255,0.95);
}

/* Progress Widget - circular with stats */
.day-view-progress {
    flex: 1;
    background: linear-gradient(135deg, #F0FDF4, #E8F8E8);
    border-radius: 6px;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.progress-circle {
    width: 26px;
    height: 26px;
    position: relative;
}

.progress-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-bg-circle {
    fill: none;
    stroke: #D0E8D0;
    stroke-width: 3;
}

.progress-fg-circle {
    fill: none;
    stroke: #6AAF6A;
    stroke-width: 3;
    stroke-linecap: round;
}

.progress-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6px;
    font-weight: 700;
    color: #6AAF6A;
}

.progress-stats {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.stats-done {
    font-size: 6px;
    font-weight: 600;
    color: #6AAF6A;
}

.stats-left {
    font-size: 5px;
    color: #888;
}

/* Time Tabs */
.day-view-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 4px;
    background: #F0F0F0;
    padding: 2px;
    border-radius: 6px;
}

.day-tab {
    flex: 1;
    font-size: 5px;
    padding: 3px 4px;
    border-radius: 4px;
    text-align: center;
    color: #666;
    font-weight: 500;
}

.day-tab.active {
    background: white;
    color: #2D2D2D;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Task with icon */
.task-card-icon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    flex-shrink: 0;
}

/* Subtasks */
.task-subtasks {
    margin-top: 3px;
    padding-left: 4px;
    border-left: 2px solid #E8E8E8;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subtask-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.subtask-check {
    width: 10px;
    height: 10px;
    border: 1.5px solid #ccc;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    color: transparent;
    flex-shrink: 0;
}

.subtask-check.done {
    background: #8FB88A;
    border-color: #8FB88A;
    color: white;
}

.subtask-text {
    font-size: 5px;
    color: #666;
}

.subtask-text.done {
    text-decoration: line-through;
    color: #aaa;
}

.day-view-tasks {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    overflow: hidden;
}

.ipad-task-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    background: #F8FAFC;
    border-radius: 6px;
    border-left: 2px solid #E0E0E0;
}

.ipad-task-card.completed {
    background: #F8FBF8;
    border-left-color: #8FB88A;
}

.task-card-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.task-card-content {
    flex: 1;
    min-width: 0;
}

.task-card-name {
    font-size: 8px;
    color: #2D2D2D;
    font-weight: 600;
}

.task-card-name.done {
    text-decoration: line-through;
    color: #999;
}

.task-card-time {
    font-size: 6px;
    color: #999;
}

.task-card-check {
    width: 12px;
    height: 12px;
    border: 1.5px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    color: transparent;
    flex-shrink: 0;
}

.task-card-check.done {
    background: #8FB88A;
    border-color: #8FB88A;
    color: white;
}

.task-card-title {
    font-size: 6px;
    font-weight: 600;
    color: #2D2D2D;
}

.task-card-title.completed {
    text-decoration: line-through;
    color: #999;
}

.ipad-fab-button {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5B9BD5, #7BB5E8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 300;
    color: white;
    box-shadow: 0 3px 8px rgba(91, 155, 213, 0.4);
}

/* Legacy compatibility */
.export-btn {
    display: none;
}

.export-btn.secondary {
    display: none;
}

.device-tabs {
    display: none;
}

.export-panel {
    display: none;
}

.upload-panel {
    display: none;
}

/* ================================
   DARK THEME FOR SCREENSHOTS
   ================================ */
.screenshots-container.dark-theme .screen {
    background: #1a1a2e;
}

.screenshots-container.dark-theme .logo {
    color: #7BA7D9;
}

.screenshots-container.dark-theme .hero-title {
    color: #ffffff;
}

.screenshots-container.dark-theme .widget-title {
    color: #ffffff;
}

.screenshots-container.dark-theme .badge-value,
.screenshots-container.dark-theme .badge-label {
    color: #ffffff;
}

.screenshots-container.dark-theme .devices-title {
    color: #ffffff;
}

.screenshots-container.dark-theme .device-icon {
    background: transparent;
    border: none;
    color: #ffffff;
}

.screenshots-container.dark-theme .device-icon .material-icons-outlined {
    color: #7BA7D9;
}

.screenshots-container.dark-theme .streak-label {
    color: rgba(255, 255, 255, 0.8);
}

/* iPad specific dark theme */
.ipad-screenshots.dark-theme .screen {
    background: #1a1a2e;
}

.ipad-screenshots.dark-theme .logo {
    color: #7BA7D9;
}

.ipad-screenshots.dark-theme .hero-title,
.ipad-screenshots.dark-theme .ipad-hero {
    color: #ffffff;
}

.ipad-screenshots.dark-theme .widget-title {
    color: #ffffff;
}

.ipad-screenshots.dark-theme .badge-value,
.ipad-screenshots.dark-theme .badge-label {
    color: #ffffff;
}

.ipad-screenshots.dark-theme .devices-title {
    color: #ffffff;
}

.ipad-screenshots.dark-theme .device-icon {
    background: transparent;
    border: none;
    color: #ffffff;
}

.ipad-screenshots.dark-theme .device-icon .material-icons-outlined {
    color: #7BA7D9;
}

/* ================================
   VISUAL EDITOR STYLES
   ================================ */

/* Editor mode indicator */
body.editor-mode {
    cursor: crosshair;
}

body.editor-mode .screen {
    position: relative;
}

/* Editable elements */
body.editor-mode .editable {
    outline: 1px dashed rgba(0, 153, 255, 0.3);
    outline-offset: 2px;
    cursor: text;
    transition: outline-color 0.2s, background-color 0.2s;
}

body.editor-mode .editable:hover {
    outline-color: rgba(0, 153, 255, 0.6);
    background-color: rgba(0, 153, 255, 0.05);
}

body.editor-mode .editable:focus {
    outline: 2px solid var(--accent-blue);
    background-color: rgba(0, 153, 255, 0.1);
}

body.editor-mode .selected {
    outline: 2px solid var(--accent-blue) !important;
    box-shadow: 0 0 0 4px rgba(0, 153, 255, 0.2);
}

/* Editor Toolbar */
.editor-toolbar {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

.editor-toolbar.visible {
    opacity: 1;
    visibility: visible;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

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

.toolbar-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.toolbar-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.toolbar-btn .material-icons-outlined {
    font-size: 18px;
}

.toolbar-btn-save {
    width: auto;
    padding: 0 12px;
    gap: 4px;
    background: var(--accent-blue);
    color: white;
}

.toolbar-btn-save:hover {
    background: var(--accent-blue-hover);
    color: white;
}

.toolbar-btn-save.has-changes {
    animation: pulse-save 1.5s infinite;
}

@keyframes pulse-save {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 153, 255, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(0, 153, 255, 0); }
}

.toolbar-btn-close {
    color: var(--text-muted);
}

.toolbar-btn-close:hover {
    background: rgba(255, 59, 48, 0.2);
    color: #ff3b30;
}

.toolbar-btn-delete {
    color: var(--text-muted);
}

.toolbar-btn-delete:hover {
    background: rgba(255, 59, 48, 0.2);
    color: #ff3b30;
}

/* Auto-save status indicator */
.toolbar-autosave-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.toolbar-autosave-status .material-icons-outlined {
    font-size: 20px;
}

.toolbar-autosave-status.saving {
    color: var(--accent-blue);
}

.toolbar-autosave-status.saving .material-icons-outlined {
    animation: spin 1s linear infinite;
}

.toolbar-autosave-status.saved {
    color: #34c759;
}

.toolbar-autosave-status.error {
    color: #ff3b30;
}

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

.toolbar-color {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
}

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

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

.toolbar-select {
    height: 28px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 0 8px;
    cursor: pointer;
}

.toolbar-select:hover {
    border-color: var(--text-muted);
}

/* Context Menu */
.editor-context-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px;
    min-width: 180px;
    z-index: 10001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: all 0.15s;
}

.editor-context-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.context-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}

.context-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.context-item .material-icons-outlined {
    font-size: 16px;
    opacity: 0.7;
}

.context-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 0;
}

/* Editor Modal */
.editor-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    backdrop-filter: blur(4px);
}

.editor-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: auto;
}

.editor-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.editor-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.editor-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editor-modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.editor-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.editor-code-area {
    width: 100%;
    height: 300px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    padding: 12px;
    resize: vertical;
    line-height: 1.5;
}

.editor-code-area:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* CSS Editor Grid */
.css-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.css-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.css-group label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.css-group input[type="text"] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 8px;
    font-size: 13px;
}

.css-group input[type="range"] {
    width: 100%;
    cursor: pointer;
}

/* Editor Notification */
.editor-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 13px;
    color: var(--text-primary);
    z-index: 10003;
    opacity: 0;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.editor-notification.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.editor-notification.success {
    border-color: #34c759;
    background: rgba(52, 199, 89, 0.1);
}

.editor-notification.error {
    border-color: #ff3b30;
    background: rgba(255, 59, 48, 0.1);
}

.editor-notification.warning {
    border-color: #ff9500;
    background: rgba(255, 149, 0, 0.1);
}

/* ================================
   SCREEN 4 & 5 - TIC-TAC STYLE
   ================================ */

/* Month Calendar */
.month-calendar {
    background: white;
    border-radius: 12px;
    padding: 12px;
    margin: 8px 12px;
}

.month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 9px;
    color: #999;
    margin-bottom: 8px;
    font-weight: 500;
}

.month-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
    font-size: 10px;
}

.month-days span {
    padding: 6px 4px;
    border-radius: 50%;
    color: #2D2D2D;
}

.month-days .other {
    color: #ccc;
}

.month-days .today {
    background: #5B9BD5;
    color: white;
    font-weight: 600;
}

.month-days .has-event {
    position: relative;
}

.month-days .has-event::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #FF6B6B;
    border-radius: 50%;
}

/* Upcoming Events */
.upcoming-events {
    padding: 12px;
}

.upcoming-title {
    font-size: 11px;
    font-weight: 600;
    color: #2D2D2D;
    margin-bottom: 10px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.event-item:last-child {
    border-bottom: none;
}

.event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.event-dot.blue {
    background: #5B9BD5;
}

.event-dot.green {
    background: #48BB78;
}

.event-info {
    flex: 1;
}

.event-name {
    font-size: 11px;
    font-weight: 500;
    color: #2D2D2D;
}

.event-date {
    font-size: 9px;
    color: #999;
}

/* Habits Screen */
.habits-header {
    padding: 16px 12px 8px;
}

.habits-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.habits-main-title {
    font-size: 16px;
    font-weight: 600;
    color: #2D2D2D;
}

.habits-streak-badge {
    background: linear-gradient(135deg, #FFE5E5, #FFF0F0);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    color: #FF6B6B;
    font-weight: 500;
}

.habits-list {
    padding: 8px 12px;
}

.habit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border-radius: 10px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.habit-item.completed {
    background: linear-gradient(135deg, #f0fff4, #e6ffed);
}

.habit-icon {
    font-size: 18px;
}

.habit-info {
    flex: 1;
}

.habit-name {
    font-size: 11px;
    font-weight: 500;
    color: #2D2D2D;
}

.habit-progress {
    font-size: 9px;
    color: #999;
}

.habit-check {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
}

.habit-check.done {
    background: #48BB78;
    border-color: #48BB78;
    color: white;
}

/* ================================
   TIC-TAC STYLE SCREENS
   ================================ */

/* Tic-Tac screens need overflow hidden */
.screen.tic-tac-only {
    overflow: hidden;
}

/* Tic-Tac Title - centered at top */
.tic-tac-title {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    color: #2D2D2D;
    z-index: 10;
    position: relative;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    line-height: 1.1;
    white-space: nowrap;
}

/* Allow wrap for long titles in other languages */
.tic-tac-title.wrap-title {
    white-space: normal;
}

/* Smaller font for Russian titles */
.tic-tac-title.smaller-title {
    font-size: 42px;
}

/* Tic-Tac Title - left aligned for screen 1 */
.tic-tac-title-left {
    text-align: left;
    padding-left: 30px;
    margin-top: -10px;
    width: auto;
}

/* Badges for Tic-Tac screen 1 - positioned at bottom left, 30% smaller */
.tic-tac-badges {
    position: absolute;
    bottom: 40px;
    left: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    z-index: 10;
    transform: scale(0.7);
    transform-origin: bottom left;
}

/* Phone peeking from right side (Screen 1 - To-do List) */
.phone-preview-right {
    position: absolute;
    right: -160px;
    top: 50%;
    transform: translateY(-50%);
}

.phone-preview-right .phone-frame {
    transform: scale(0.81);
    transform-origin: center center;
}

/* Centered phone container (Screens 2, 3, 4) */
.phone-frame-centered-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}

.phone-frame-centered-container .phone-frame {
    transform: scale(0.90);
    transform-origin: top center;
}

/* Make screens 5, 6, 7 use absolute positioning */
.screen.screen-5,
.screen.screen-6,
.screen.screen-7 {
    position: relative;
}

.screen.screen-5 .tic-tac-title,
.screen.screen-6 .tic-tac-title,
.screen.screen-7 .tic-tac-title {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
}

.screen.screen-5 .phone-frame-centered-container,
.screen.screen-6 .phone-frame-centered-container,
.screen.screen-7 .phone-frame-centered-container {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
}

/* ================================
   TO-DO LIST SCREEN (Screen 4)
   ================================ */

.todo-list-screen {
    background: #fff;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.todo-header {
    margin-bottom: 20px;
}

.todo-date {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
}

.todo-day {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
}

.todo-list {
    flex: 1;
}

.todo-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.todo-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid #007AFF;
    border-radius: 6px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

.todo-checkbox.checked {
    background: #007AFF;
}

.todo-item.completed .todo-text {
    text-decoration: line-through;
    color: #999;
}

.todo-text {
    font-size: 15px;
    color: #1a1a1a;
}

.todo-fab {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #007AFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}

/* ================================
   COMPACT TODO WIDGET (Screen 1 Left Side)
   ================================ */

.todo-widget-compact {
    position: absolute;
    left: 30px;
    top: 200px;
    width: 230px;
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 5;
}

.widget-title-header {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.widget-task {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
}

.widget-task:last-child {
    border-bottom: none;
}

.widget-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #007AFF;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    flex-shrink: 0;
}

.widget-checkbox.checked {
    background: #007AFF;
}

.widget-task span {
    font-size: 14px;
    color: #1a1a1a;
}

.widget-task.completed span {
    text-decoration: line-through;
    color: #999;
}

/* Todo list section labels */
.todo-section-label {
    font-size: 12px;
    font-weight: 600;
    color: #007AFF;
    margin: 12px 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.todo-section-label.evening {
    color: #9B59B6;
}

/* Evening task styles */
.todo-item.evening .todo-checkbox {
    border-color: #9B59B6;
}

.todo-item.evening .todo-checkbox.checked {
    background: #9B59B6;
}

.todo-checkbox.evening {
    border-color: #9B59B6;
}

/* ================================
   HABIT TRACKER SCREEN (Screen 4)
   ================================ */

.habit-tracker-screen {
    background: #fff;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
}

.habit-header {
    margin-bottom: 14px;
    padding: 0 4px;
}

.habit-greeting {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
}

.habit-date {
    font-size: 14px;
    color: #666;
    margin-top: 2px;
}

.habit-section {
    margin-bottom: 14px;
    padding: 0 4px;
}

.habit-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #666;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.habits-grid {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.habit-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.habit-circle-ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(
        #E8E8E8 0deg,
        #E8E8E8 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.habit-circle-item.completed .habit-circle-ring {
    background: conic-gradient(
        #34C759 0deg,
        #34C759 360deg
    );
}

.habit-circle-item.partial .habit-circle-ring {
    background: conic-gradient(
        #007AFF calc(var(--progress) * 3.6deg),
        #E8E8E8 calc(var(--progress) * 3.6deg)
    );
}

.habit-circle-inner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.habit-circle-label {
    font-size: 12px;
    color: #666;
    text-align: center;
}

/* Routines Section */
.routines-section {
    margin-top: 8px;
}

.routines-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Routine task with progress background */
.routine-task {
    position: relative;
    overflow: hidden;
}

.routine-progress-bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(52, 199, 89, 0.15);
    border-radius: 10px 0 0 10px;
    z-index: 0;
}

.routine-progress-bg.orange {
    background: rgba(255, 149, 0, 0.15);
}

.routine-progress-bg.blue {
    background: rgba(0, 122, 255, 0.15);
}

.routine-task .task-icon,
.routine-task .task-content,
.routine-task .task-checkbox {
    position: relative;
    z-index: 1;
}

/* ================================
   NOTES SCREEN (Screen 5)
   ================================ */

.notes-screen {
    background: #fff;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.note-back {
    font-size: 24px;
    color: #007AFF;
}

.note-actions {
    display: flex;
    gap: 16px;
}

.note-actions .material-icons-outlined {
    font-size: 22px;
    color: #007AFF;
}

.note-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.note-title-input {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.note-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 16px;
}

.note-body {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.note-body p {
    margin: 0 0 10px 0;
}

.note-body strong {
    color: #1a1a1a;
}

.note-body ul {
    margin: 8px 0 12px 0;
    padding-left: 20px;
}

.note-body li {
    margin-bottom: 6px;
    color: #444;
}

/* Text Editor Toolbar */
.note-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: #f8f9fa;
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
    margin-top: auto;
}

.editor-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.editor-btn .material-icons-outlined {
    font-size: 18px;
    color: #666;
}

.editor-btn.active {
    background: #007AFF;
}

.editor-btn.active .material-icons-outlined {
    color: #fff;
}

.editor-divider {
    width: 1px;
    height: 24px;
    background: #ddd;
    margin: 0 6px;
}

.note-fab {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    background: #007AFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}

.note-fab .material-icons-outlined {
    font-size: 28px;
    color: #fff;
}

/* ================================
   SCREEN NUMBER INDICATOR
   ================================ */

.screen-number {
    position: absolute;
    top: -30px;
    right: 10px;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    z-index: 100;
}

/* ================================
   WIDGET GALLERY (Screen 6)
   ================================ */

.widget-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 100px 12px 16px;
    width: 100%;
    box-sizing: border-box;
}

/* Screen 6 (Widgets) specific */
#tic-tac-6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 !important; /* Remove screen padding for widget gallery */
}

#tic-tac-6 .tic-tac-title {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    z-index: 10;
}

.gallery-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

.gallery-widget {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Long Widget (full width) */
.widget-long {
    width: 100%;
    padding: 14px 16px;
}

/* Square Widget */
.widget-square {
    flex: 1;
    min-width: 0;
    height: 140px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Calendar Widget Long */
.calendar-widget-long {
    background: #fff;
}

.cal-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.cal-widget-icon {
    font-size: 20px;
}

.cal-widget-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.cal-widget-date {
    font-size: 13px;
    color: #007AFF;
    font-weight: 500;
    margin-left: auto;
}

.cal-widget-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.cal-event-color {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}

.cal-event-color.blue { background: #007AFF; }
.cal-event-color.green { background: #34C759; }
.cal-event-color.red { background: #FF3B30; }

.cal-event-title {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    flex: 1;
}

.cal-event-time {
    font-size: 12px;
    color: #8e8e93;
    flex-shrink: 0;
}

/* Pomodoro Square Widget */
.pomodoro-square {
    background: #fff;
}

.pomo-circle {
    position: relative;
    width: 80px;
    height: 80px;
}

.pomo-circle svg {
    width: 80px;
    height: 80px;
}

.pomo-circle svg circle:first-child {
    stroke: #f0f0f0;
}

.pomo-circle svg circle:last-child {
    stroke: #FF6B6B;
}

.pomo-emoji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
}

.pomo-time {
    font-size: 18px;
    font-weight: 700;
    color: #FF6B6B;
    margin-top: 10px;
}

/* Water Tracker Widget */
.water-square {
    background: #fff;
}

.water-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.water-progress {
    width: 44px;
    height: 56px;
    background: #f0f0f0;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
}

.water-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #5AC8FA, #007AFF);
    border-radius: 0 0 20px 20px;
}

.water-count {
    font-size: 18px;
    font-weight: 700;
    color: #007AFF;
    margin-top: 8px;
}

.water-label {
    font-size: 12px;
    color: #8e8e93;
}

/* Habits Widget Long */
.habits-widget-long {
    background: #fff;
}

.habits-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.habits-widget-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.habits-widget-progress {
    font-size: 15px;
    font-weight: 700;
    color: #34C759;
}

.habits-widget-circles {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.habit-widget-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.habit-widget-ring {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: conic-gradient(
        #e0e0e0 0deg,
        #e0e0e0 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Green color */
.habit-widget-circle.color-green .habit-widget-ring {
    background: conic-gradient(
        #34C759 0deg,
        #34C759 calc(var(--progress) * 3.6deg),
        #e8f5e9 calc(var(--progress) * 3.6deg),
        #e8f5e9 360deg
    );
}

/* Blue color */
.habit-widget-circle.color-blue .habit-widget-ring {
    background: conic-gradient(
        #007AFF 0deg,
        #007AFF calc(var(--progress) * 3.6deg),
        #e3f2fd calc(var(--progress) * 3.6deg),
        #e3f2fd 360deg
    );
}

/* Orange color */
.habit-widget-circle.color-orange .habit-widget-ring {
    background: conic-gradient(
        #FF9500 0deg,
        #FF9500 calc(var(--progress) * 3.6deg),
        #fff3e0 calc(var(--progress) * 3.6deg),
        #fff3e0 360deg
    );
}

/* Pink color */
.habit-widget-circle.color-pink .habit-widget-ring {
    background: conic-gradient(
        #FF2D55 0deg,
        #FF2D55 calc(var(--progress) * 3.6deg),
        #fce4ec calc(var(--progress) * 3.6deg),
        #fce4ec 360deg
    );
}

/* Gray - not started */
.habit-widget-circle.color-gray .habit-widget-ring {
    background: #f0f0f0;
}

.habit-widget-inner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Streak Square Widget */
.streak-square {
    background: linear-gradient(145deg, #FF6B6B 0%, #FF8E53 100%);
}

.streak-fire {
    font-size: 36px;
}

.streak-num {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-top: 4px;
}

.streak-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Tasks Square Widget */
.tasks-square {
    background: linear-gradient(145deg, #007AFF 0%, #5856D6 100%);
}

.tasks-check {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.tasks-num {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-top: 8px;
}

.tasks-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Old lockscreen styles kept for backward compatibility */
.lockscreen-widgets-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 40px;
    margin-top: 10px;
    align-items: center;
    max-width: 100%;
    box-sizing: border-box;
}

.lockscreen-widgets-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    width: 100%;
    max-width: 280px;
}

.lockscreen-widget {
    background: #fff;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Habits Widget with Circles */
.ls-habits-widget {
    width: 100%;
    max-width: 280px;
    background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
    padding: 16px 20px;
}

.ls-habits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.ls-habits-title {
    font-size: 15px;
    font-weight: 600;
    color: #2D2D2D;
}

.ls-habits-progress {
    font-size: 13px;
    color: #4CAF50;
    font-weight: 600;
}

.ls-habits-grid {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.ls-habit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.ls-habit-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(
        #4CAF50 calc(var(--progress) * 1%),
        #E0E0E0 calc(var(--progress) * 1%)
    );
    padding: 4px;
}

.ls-habit-item.completed .ls-habit-ring {
    background: conic-gradient(#4CAF50 100%, #E0E0E0 100%);
}

.ls-habit-inner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ls-habit-name {
    font-size: 10px;
    color: #666;
    font-weight: 500;
    text-align: center;
}

/* Large Pomodoro Widget */
.ls-pomodoro-widget {
    width: 100%;
    max-width: 280px;
    background: linear-gradient(135deg, #FFF5F5, #FFEBEB);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ls-pomodoro-circle {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.ls-pomodoro-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.ls-pomodoro-emoji {
    font-size: 26px;
    margin-bottom: 2px;
}

.ls-pomodoro-time {
    font-size: 18px;
    font-weight: 700;
    color: #FF6B6B;
}

.ls-pomodoro-label {
    font-size: 15px;
    font-weight: 600;
    color: #2D2D2D;
    margin-bottom: 2px;
}

.ls-pomodoro-session {
    font-size: 11px;
    color: #999;
}

/* Small Widgets */
.widget-small-ls {
    width: 130px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}

.widget-small-ls.pink-gradient {
    background: linear-gradient(135deg, #FF6B9D 0%, #FF8A80 100%);
}

.widget-small-ls.green-gradient {
    background: linear-gradient(135deg, #34C759 0%, #30D158 100%);
}

.widget-small-ls.blue-gradient {
    background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
}

/* Streak Widget */
.ls-streak-icon {
    font-size: 32px;
}

.ls-streak-count {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.ls-streak-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Habits Widget */
.ls-habits-circles {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.ls-habit-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.ls-habit-circle.done {
    background: rgba(255, 255, 255, 0.9);
}

.ls-habit-circle.pending {
    background: rgba(255, 255, 255, 0.3);
}

.ls-habits-count {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.ls-habits-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Tasks Widget */
.ls-tasks-icon {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ls-tasks-count {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.ls-tasks-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Old styles kept for backward compatibility */
.widget-small-ls .widget-progress-circle {
    position: relative;
    width: 60px;
    height: 60px;
}

.widget-small-ls .widget-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
}

.widget-small-ls .widget-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.widget-small-ls.pink-bg .widget-label,
.widget-small-ls.blue-bg .widget-label,
.widget-small-ls.green-bg .widget-label {
    color: #fff;
}

.widget-small-ls .streak-icon {
    font-size: 32px;
}

.widget-small-ls .streak-count {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.widget-small-ls .streak-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.calendar-widget-day {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.calendar-widget-month {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}

.habits-widget-progress {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
}

/* ================================
   MONTH CALENDAR SCREEN (Screen 6)
   ================================ */

.month-calendar-screen {
    background: #fff;
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.month-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 12px;
}

.month-calendar-title {
    font-size: 16px;
    font-weight: 600;
    color: #2D2D2D;
}

.month-nav-arrow {
    font-size: 18px;
    color: #007AFF;
    padding: 0 8px;
}

.month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 10px;
    color: #8E8E93;
    padding-bottom: 8px;
    border-bottom: 1px solid #E5E5EA;
}

.month-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding-top: 8px;
    flex: 1;
}

.month-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 2px;
    font-size: 12px;
    color: #2D2D2D;
    position: relative;
    min-height: 32px;
}

.month-day.other-month {
    color: #C7C7CC;
}

.month-day.today span {
    background: #007AFF;
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-day.has-event {
    position: relative;
}

.month-day .event-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 2px;
}

.month-day .event-dot.blue {
    background: #007AFF;
}

.month-day .event-dot.pink {
    background: #FF2D55;
}

.month-day .event-dot.green {
    background: #34C759;
}

.month-day .event-dot.orange {
    background: #FF9500;
}

.month-day .event-dot.red {
    background: #FF3B30;
}

.calendar-fab {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: #007AFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
    z-index: 10;
}

/* Calendar integrations bar */
.calendar-integrations-bar {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.integration-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.integration-logo svg,
.integration-logo img {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
}

/* Calendar events */
.cal-event {
    font-size: 7px;
    padding: 2px 3px;
    border-radius: 3px;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    line-height: 1.3;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.month-day {
    min-height: 44px;
}

/* Blue tones */
.cal-event.blue-light { background: #A8D4FF; color: #1a5490; }
.cal-event.blue { background: #007AFF; }
.cal-event.blue-dark { background: #0051a8; }

/* Green tones */
.cal-event.green-light { background: #A8F0C0; color: #1a6b32; }
.cal-event.green { background: #34C759; }
.cal-event.green-dark { background: #248a3d; }

/* Orange/Yellow tones */
.cal-event.orange-light { background: #FFE4B8; color: #8a5a00; }
.cal-event.orange { background: #FFAA33; }
.cal-event.orange-dark { background: #E89500; }

/* Purple tones */
.cal-event.purple-light { background: #E0C6F5; color: #6b3d99; }
.cal-event.purple { background: #AF52DE; }
.cal-event.purple-dark { background: #8324b8; }

/* Teal tones */
.cal-event.teal-light { background: #B8F0F0; color: #1a6b6b; }
.cal-event.teal { background: #5AC8FA; }
.cal-event.teal-dark { background: #32A4D4; }

/* Event dot red for calendar events */
.event-dot.red {
    background: #FF6B6B;
}

/* Dark theme for Tic-Tac screens */
.screenshots-container.dark-theme .tic-tac-title {
    color: #ffffff;
}

/* ==================== Screen 7 - Devices Showcase ==================== */

#tic-tac-7 {
    justify-content: flex-start;
    padding-top: 20px;
    overflow: hidden;
}

#tic-tac-7 .tic-tac-title {
    margin-bottom: 15px;
}

.devices-showcase {
    position: relative;
    width: 100%;
    height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Mac Device - Back left */
.device-mac {
    position: absolute;
    left: -30px;
    top: 20px;
    z-index: 1;
}

.mac-bezel {
    width: 220px;
    height: 145px;
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%);
    border-radius: 10px;
    padding: 8px;
    box-sizing: border-box;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.device-mac .mac-screen {
    width: 100%;
    height: 100%;
    background: #f5f5f7;
    border-radius: 4px;
    overflow: hidden;
}

.mac-app {
    display: flex;
    height: 100%;
    font-family: -apple-system, sans-serif;
}

.device-mac .mac-sidebar {
    width: 50px;
    background: linear-gradient(180deg, #f0f0f2 0%, #e8e8ea 100%);
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid #ddd;
}

.mac-sidebar-item {
    font-size: 14px;
    text-align: center;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
}

.mac-sidebar-item.active {
    background: rgba(0,122,255,0.15);
}

.mac-main {
    flex: 1;
    padding: 8px 10px;
    overflow: hidden;
}

.mac-header {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.mac-task-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #333;
    padding: 3px 0;
}

.mac-task-item .check {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #34C759;
    color: white;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mac-task-item .check.empty {
    background: transparent;
    border: 1.5px solid #ccc;
}

.mac-task-item.done span:last-child {
    text-decoration: line-through;
    color: #999;
}

.device-mac .mac-stand {
    width: 50px;
    height: 35px;
    background: linear-gradient(180deg, #c0c0c0, #a8a8a8);
    margin: 0 auto;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.device-mac .mac-base {
    width: 90px;
    height: 8px;
    background: linear-gradient(180deg, #b0b0b0, #909090);
    margin: 0 auto;
    border-radius: 0 0 4px 4px;
}

/* iPad Device - Center */
.device-ipad {
    position: absolute;
    left: 90px;
    top: 70px;
    z-index: 2;
}

.ipad-bezel {
    width: 150px;
    height: 200px;
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%);
    border-radius: 14px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 15px 50px rgba(0,0,0,0.35);
}

.device-ipad .ipad-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.ipad-app {
    height: 100%;
    font-family: -apple-system, sans-serif;
    padding: 8px;
    box-sizing: border-box;
}

.ipad-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
}

.ipad-count {
    background: #007AFF;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 9px;
}

.ipad-lists {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ipad-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    padding: 4px 6px;
    background: #f8f8f8;
    border-radius: 6px;
}

.list-icon {
    font-size: 12px;
}

.ipad-list-item .count {
    margin-left: auto;
    color: #999;
    font-size: 9px;
}

/* iPhone Device - Right front */
.device-iphone {
    position: absolute;
    right: 20px;
    top: 100px;
    z-index: 3;
}

.iphone-bezel {
    width: 100px;
    height: 200px;
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%);
    border-radius: 22px;
    padding: 8px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.iphone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 14px;
    background: #1a1a1a;
    border-radius: 0 0 12px 12px;
    z-index: 5;
}

.device-iphone .iphone-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.iphone-app {
    height: 100%;
    font-family: -apple-system, sans-serif;
    padding: 20px 8px 8px;
    box-sizing: border-box;
}

.iphone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.iphone-time {
    font-size: 9px;
    font-weight: 600;
}

.iphone-title {
    font-size: 10px;
    font-weight: 600;
}

.iphone-section {
    font-size: 8px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    margin: 6px 0 4px;
}

.iphone-task {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    padding: 4px 0;
}

.iphone-task .check {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #34C759;
    color: white;
    font-size: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iphone-task .check.empty {
    background: transparent;
    border: 1.5px solid #ccc;
}

.iphone-task.done span:last-child {
    text-decoration: line-through;
    color: #999;
}

/* Apple Watch - Left front */
.device-watch {
    position: absolute;
    left: 10px;
    bottom: 60px;
    z-index: 4;
}

.watch-bezel {
    width: 75px;
    height: 90px;
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%);
    border-radius: 18px;
    padding: 6px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 15px 45px rgba(0,0,0,0.4);
}

.device-watch .watch-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    padding: 6px;
    box-sizing: border-box;
}

.watch-time {
    font-size: 10px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2px;
}

.watch-label {
    font-size: 8px;
    color: #999;
    text-align: center;
    margin-bottom: 4px;
}

.device-watch .watch-task {
    font-size: 8px;
    color: #fff;
    padding: 5px 6px;
    border-radius: 8px;
    margin-bottom: 3px;
    font-family: -apple-system, sans-serif;
}

.device-watch .watch-task.blue {
    background: linear-gradient(135deg, #007AFF, #5856D6);
}

.device-watch .watch-task.orange {
    background: linear-gradient(135deg, #FF9500, #FF6B00);
}

.device-watch .watch-task.green {
    background: linear-gradient(135deg, #34C759, #30B350);
}

.device-watch .watch-crown {
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 18px;
    background: linear-gradient(180deg, #555, #333);
    border-radius: 2px;
}

/* Dark theme for devices screen */
.screenshots-container.dark-theme .device-label {
    color: #aaa;
}

/* ================================
   KANBAN BOARD STYLES (Task Manager CPP)
   ================================ */
.kanban-screen {
    background: #f5f5f7;
    padding: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kanban-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    margin-bottom: 10px;
}

.kanban-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.kanban-menu {
    font-size: 18px;
    color: #666;
}

.kanban-board {
    display: flex;
    gap: 10px;
    flex: 1;
    overflow: hidden;
    padding-bottom: 50px;
}

.kanban-screen {
    overflow: hidden;
}

.kanban-column {
    flex: 0 0 120px;
    min-width: 120px;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.kanban-column:nth-child(2) {
    background: #f0f7ff;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    margin-bottom: 10px;
}

.kanban-column-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.kanban-column-dot.gray { background: #9ca3af; }
.kanban-column-dot.blue { background: #3b82f6; }
.kanban-column-dot.green { background: #22c55e; }

.kanban-column-title {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    flex: 1;
}

.kanban-column-count {
    font-size: 10px;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 6px;
}

.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kanban-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.kanban-card.done {
    opacity: 0.6;
}

.kanban-card.dragging {
    position: absolute;
    z-index: 100;
    transform: rotate(-3deg);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border: 2px solid #3b82f6;
    background: #fff;
}

.kanban-card-title {
    font-size: 11px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 6px;
    line-height: 1.3;
}

.kanban-card.done .kanban-card-title {
    text-decoration: line-through;
    color: #9ca3af;
}

.kanban-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kanban-tag {
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.kanban-tag.blue { background: #dbeafe; color: #1d4ed8; }
.kanban-tag.purple { background: #ede9fe; color: #7c3aed; }
.kanban-tag.green { background: #dcfce7; color: #16a34a; }
.kanban-tag.orange { background: #ffedd5; color: #ea580c; }
.kanban-tag.red { background: #fee2e2; color: #dc2626; }

.kanban-due {
    font-size: 8px;
    color: #6b7280;
}

/* Dragging card overlay */
.kanban-dragging-card {
    position: absolute;
    z-index: 100;
    transform: rotate(-4deg);
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
    border: 2px solid #3b82f6;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    width: 140px;
}

.kanban-dragging-card .kanban-card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

.kanban-dragging-card .kanban-card-meta {
    gap: 6px;
}

.kanban-dragging-card .kanban-tag {
    font-size: 10px;
    padding: 4px 8px;
}

.kanban-dragging-card .kanban-due {
    font-size: 10px;
}

/* Lists Showcase Styles */
.lists-showcase {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 70px;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.list-row {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
    width: 280px;
}

.list-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}

.list-row:nth-child(1)::before { background: #3b82f6; }
.list-row:nth-child(2)::before { background: #f59e0b; }
.list-row:nth-child(3)::before { background: #22c55e; }
.list-row:nth-child(4)::before { background: #8b5cf6; }
.list-row:nth-child(5)::before { background: #ec4899; }
.list-row:nth-child(6)::before { background: #f97316; }

.list-row:nth-child(1) .list-row-plus { color: #3b82f6; }
.list-row:nth-child(2) .list-row-plus { color: #f59e0b; }
.list-row:nth-child(3) .list-row-plus { color: #22c55e; }
.list-row:nth-child(4) .list-row-plus { color: #8b5cf6; }
.list-row:nth-child(5) .list-row-plus { color: #ec4899; }
.list-row:nth-child(6) .list-row-plus { color: #f97316; }

.list-row-icon {
    font-size: 26px;
    flex-shrink: 0;
}

.list-row-title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.list-row-plus {
    font-size: 26px;
    font-weight: 400;
    flex-shrink: 0;
}

/* Task Manager specific overrides */
.task-manager-only {
    display: none;
}

/* Task Manager Screen 4 (Board View) positioning - same as Calendar */
#task-manager-4 {
    position: relative;
}

#task-manager-4 .tic-tac-title,
#task-manager-5 .tic-tac-title,
#task-manager-6 .tic-tac-title,
#task-manager-7 .tic-tac-title {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
}

#task-manager-4 .phone-frame-centered-container,
#task-manager-5 .phone-frame-centered-container,
#task-manager-6 .phone-frame-centered-container {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
}

#task-manager-4,
#task-manager-5,
#task-manager-6,
#task-manager-7 {
    position: relative;
}

/* ================================
   CPP MANAGER MODAL
   ================================ */
.cpp-manager-modal {
    max-width: 700px;
}

.cpp-manager-header {
    margin-bottom: 20px;
}

.cpp-app-selector label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.cpp-app-row {
    display: flex;
    gap: 8px;
}

.cpp-app-row select {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 13px;
}

.cpp-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cpp-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.cpp-create-btn {
    padding: 8px 16px;
    font-size: 12px;
}

.cpp-list-container {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-height: 350px;
    overflow-y: auto;
}

.cpp-list {
    padding: 8px;
}

.cpp-list-empty,
.cpp-list-loading,
.cpp-list-error {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.cpp-list-error {
    color: #ff6b6b;
}

.cpp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.15s ease;
}

.cpp-item:last-child {
    margin-bottom: 0;
}

.cpp-item:hover {
    border-color: #3a3a3a;
}

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

.cpp-item-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.cpp-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cpp-item-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.cpp-item-status.visible {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.cpp-item-status.hidden {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
}

.cpp-item-link {
    font-size: 12px;
    color: var(--accent-blue);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.cpp-item-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.cpp-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cpp-item:hover .cpp-item-actions {
    opacity: 1;
}

.cpp-item-actions .icon-btn {
    width: 32px;
    height: 32px;
}

.cpp-item-actions .icon-btn .material-icons-outlined {
    font-size: 18px;
}

.cpp-item-actions .icon-btn.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.cpp-item-actions .icon-btn.hide-btn:hover {
    background: rgba(156, 163, 175, 0.15);
}

/* CPP Item Main Layout with Previews */
.cpp-item-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

/* Screenshot Previews Container */
.cpp-item-previews {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 120px;
    height: 50px;
    flex-shrink: 0;
}

.cpp-preview-thumb {
    height: 50px;
    width: auto;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cpp-preview-thumb.portrait {
    width: auto;
    max-width: 28px;
}

.cpp-preview-thumb.landscape {
    width: auto;
    max-width: 60px;
}

.cpp-preview-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.cpp-preview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--text-secondary);
}

.cpp-preview-loading .spinning {
    animation: spin 1s linear infinite;
    font-size: 18px;
}

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

.cpp-preview-empty {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--text-tertiary);
    font-size: 11px;
}

.cpp-preview-empty .material-icons-outlined {
    font-size: 16px;
    opacity: 0.5;
}

.cpp-info-box {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.cpp-info-box strong {
    color: var(--text-primary);
}

.cpp-info-box ul {
    margin-top: 8px;
    margin-left: 16px;
}

.cpp-info-box li {
    margin-bottom: 4px;
}

/* ================================
   CLAUDE AI FLOATING BUTTON - Modern 2025
   ================================ */
.claude-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: all 0.2s ease;
}

.claude-fab:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

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

.claude-fab .material-icons-outlined {
    font-size: 22px;
    opacity: 0.9;
}

.claude-fab.active {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.3);
}

/* ================================
   CLAUDE AI CHAT PANEL - Notion-style 2025
   ================================ */
.claude-chat-panel {
    position: fixed;
    right: -460px;
    bottom: 84px;
    width: 420px;
    height: 560px;
    max-height: calc(100vh - 120px);
    background: rgba(20, 20, 22, 0.95);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    z-index: 1001;
    transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}

.claude-chat-panel.open {
    right: 24px;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Drag and drop state */
.claude-chat-panel.drag-over {
    border-color: var(--accent-blue);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--accent-blue) inset;
}

.claude-chat-panel.drag-over::after {
    content: 'Drop image here';
    position: absolute;
    inset: 0;
    background: rgba(0, 153, 255, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-blue);
    pointer-events: none;
    z-index: 10;
}

.claude-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.claude-chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: -0.01em;
}

.claude-chat-title .material-icons-outlined {
    display: none;
}

.claude-chat-title::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.claude-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.claude-close-btn,
.claude-clear-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.claude-close-btn:hover,
.claude-clear-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}

.claude-close-btn .material-icons-outlined,
.claude-clear-btn .material-icons-outlined {
    font-size: 18px;
}

.claude-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.claude-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.claude-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.claude-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.claude-chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

.claude-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.claude-message.user {
    justify-content: flex-end;
}

.claude-avatar {
    display: none;
}

.claude-message-content {
    max-width: 85%;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: -0.01em;
}

/* User message - right aligned bubble */
.claude-message.user .claude-message-content {
    background: #0099FF;
    padding: 12px 16px;
    border-radius: 18px 18px 4px 18px;
    color: #fff;
    font-weight: 450;
}

/* Assistant message - left aligned, no bubble */
.claude-message.assistant .claude-message-content {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 16px 18px;
    color: rgba(255, 255, 255, 0.75);
}

/* Success/status messages */
.claude-message.assistant .claude-message-content:has(code),
.claude-message-content:first-child:contains("✅") {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
}

/* Compact status messages (saving, applied, etc.) */
.claude-status-message {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    padding: 4px 0;
    margin: 2px 0;
}

.claude-status-message::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpolyline points='17 21 17 13 7 13 7 21'/%3E%3Cpolyline points='7 3 7 8 15 8'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    opacity: 0.8;
}

.claude-message-content ul,
.claude-message-content ol {
    margin: 14px 0 0 0;
    padding: 0;
    list-style: none;
    counter-reset: item;
}

.claude-message-content li {
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
    line-height: 1.5;
}

/* Numbered list items - Lovable style */
.claude-message-content ol li {
    counter-increment: item;
}

.claude-message-content ol li::before {
    content: counter(item) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* Bullet list items */
.claude-message-content ul li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

/* Bold text in list items */
.claude-message-content li strong {
    color: #fff;
    font-weight: 600;
}

.claude-message-content code {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    color: #f9a8d4;
}

.claude-message-content pre {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 16px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 14px 0;
}

.claude-message-content pre code {
    background: none;
    padding: 0;
    color: #e5e7eb;
}

/* Message actions - like/dislike/copy buttons */
.claude-message-actions {
    display: flex;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.claude-message-actions button {
    background: transparent;
    border: none;
    padding: 6px 8px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    transition: all 0.15s ease;
}

.claude-message-actions button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.claude-message-actions button .material-icons-outlined {
    font-size: 16px;
}

/* Thinking time header */
.claude-thinking-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.claude-thinking-time .material-icons-outlined {
    font-size: 14px;
    opacity: 0.7;
}

/* Message footer with action buttons */
.claude-message-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.claude-msg-action-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.claude-msg-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.claude-msg-action-btn .material-icons-outlined {
    font-size: 14px;
}

.claude-msg-action-btn.copied {
    color: var(--accent-green);
}

/* Quick action chips - Lovable style */
.claude-quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 12px 0;
}

.claude-quick-action {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.claude-quick-action:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.claude-chat-input-area {
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.claude-chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 4px 4px 4px 14px;
    transition: all 0.2s ease;
}

.claude-chat-input-wrapper:focus-within {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.claude-chat-input-area textarea {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    max-height: 120px;
}

.claude-chat-input-area textarea:focus {
    outline: none;
}

.claude-chat-input-area textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.claude-send-btn {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.claude-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.claude-send-btn:disabled {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.claude-send-btn .material-icons-outlined {
    font-size: 18px;
}

/* Welcome message styling */
.claude-welcome {
    text-align: center;
    padding: 20px;
}

.claude-welcome-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.claude-welcome-icon .material-icons-outlined {
    font-size: 24px;
    color: #a5b4fc;
}

.claude-welcome h3 {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.claude-welcome p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 20px;
    line-height: 1.5;
}

.claude-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.claude-suggestion {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 14px;
    text-align: left;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.claude-suggestion:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.claude-suggestion .material-icons-outlined {
    font-size: 16px;
    opacity: 0.5;
}

/* Loading indicator - Modern */
.claude-message.loading .message-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.claude-typing-indicator {
    display: flex;
    gap: 5px;
    padding: 4px 0;
}

.claude-typing-indicator span {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: typing-modern 1.4s ease-in-out infinite;
}

.claude-typing-indicator span:nth-child(2) {
    animation-delay: 0.15s;
}

.claude-typing-indicator span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes typing-modern {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Thinking indicator with timer - ChatGPT style */
.claude-thinking-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.claude-thinking-indicator .thinking-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
}

.claude-thinking-indicator .thinking-icon svg {
    animation: thinking-spin 1.5s linear infinite;
}

.claude-thinking-indicator .thinking-text {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.claude-thinking-indicator .thinking-timer {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    min-width: 24px;
}

@keyframes thinking-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Action buttons in messages - Modern */
.claude-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.claude-action-btn {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: #a5b4fc;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.claude-action-btn:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.3);
    color: #c4b5fd;
}

.claude-action-btn.secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.claude-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.claude-action-btn .material-icons-outlined {
    font-size: 14px;
}

/* Diff preview - Modern */
.claude-diff-preview {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px;
    margin-top: 12px;
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    font-size: 11px;
    overflow-x: auto;
}

.claude-diff-preview .diff-added {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.claude-diff-preview .diff-removed {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

/* Chat Message Images */
.claude-message-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.claude-message-image {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    object-fit: cover;
}

.claude-message-image:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Save Prompt Styles */
.claude-save-prompt {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 12px !important;
    margin: 8px 0;
}

.claude-save-prompt .claude-avatar {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.save-prompt-text {
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.save-prompt-actions {
    display: flex;
    gap: 8px;
}

.claude-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.claude-save-btn .material-icons-outlined {
    font-size: 16px;
}

.claude-save-btn.primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.claude-save-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.claude-save-btn.secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.claude-save-btn.secondary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ================================
   AI SIDEBAR (Lovable Style)
   ================================ */

.ai-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    height: 100vh;
    background: var(--bg-secondary);
    /* border-left: 1px solid var(--border-color); */
    display: flex;
    flex-direction: column;
    z-index: 1500;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-sidebar.open {
    transform: translateX(0);
}

/* Drag and drop state */
.ai-sidebar.drag-over {
    border-left-color: var(--accent-blue);
    box-shadow: inset 0 0 0 2px var(--accent-blue);
}

.ai-sidebar.drag-over::before {
    content: 'Drop image here';
    position: absolute;
    inset: 0;
    background: rgba(0, 153, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-blue);
    pointer-events: none;
    z-index: 100;
}

/* AI Sidebar Resize Handle */
.ai-sidebar-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease;
}

.ai-sidebar-resize-handle:hover,
.ai-sidebar.resizing .ai-sidebar-resize-handle {
    background: var(--accent-blue);
}

.ai-sidebar.resizing {
    transition: none;
}

/* When sidebar is open, adjust main content */
body.ai-sidebar-open .app-layout {
    margin-right: 420px;
    transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.ai-sidebar-open .top-header {
    right: 420px;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* AI Sidebar Header */
.ai-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    /* border-bottom: 1px solid var(--border-color); */
    height: 51px;
    min-height: 51px;
}

.ai-sidebar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.ai-sidebar-title .material-icons-outlined {
    font-size: 16px;
    color: var(--accent-blue);
}

.ai-sidebar-actions {
    display: flex;
    gap: 2px;
}

.ai-sidebar-actions.right {
    margin-left: auto;
}

.ai-sidebar-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.ai-sidebar-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ai-sidebar-btn .material-icons-outlined {
    font-size: 16px;
}

/* AI Sidebar Toggle - matches left sidebar toggle */
.ai-sidebar-toggle {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
}

.ai-sidebar-toggle .f7-icons {
    font-size: 14px;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.ai-sidebar-toggle:hover .f7-icons {
    color: var(--text-primary);
}

/* AI Sidebar Content */
.ai-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.ai-sidebar-content::-webkit-scrollbar {
    width: 6px;
}

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

.ai-sidebar-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* AI Welcome Screen */
.ai-welcome {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ai-welcome-header {
    text-align: center;
    padding: 20px 12px 16px;
}

.ai-welcome-icon {
    width: 40px;
    height: 40px;
    background: var(--accent-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: white;
}

.ai-welcome-icon .material-icons-outlined {
    font-size: 20px;
    color: white;
}

.ai-welcome-icon svg {
    width: 20px;
    height: 20px;
}

.ai-welcome h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.ai-welcome p {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* AI Suggestions Grid */
.ai-suggestions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.ai-suggestion-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-suggestion-card:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.ai-suggestion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--bg-secondary);
    border-radius: 6px;
    flex-shrink: 0;
}

.ai-suggestion-icon .material-icons-outlined {
    font-size: 14px;
    color: var(--accent-color);
}

.ai-suggestion-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ai-suggestion-title {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
}

.ai-suggestion-desc {
    font-size: 10px;
    color: var(--text-muted);
}

/* AI Sidebar Input */
.ai-sidebar-input {
    padding: 10px 12px 12px;
    /* border-top: 1px solid var(--border-color); */
}

/* AI Attached Files */
.ai-attached-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    max-height: 120px;
    overflow-y: auto;
}

.ai-attached-files:empty {
    display: none;
}

.ai-attached-files:not(:empty) {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}

.ai-attached-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    max-width: 150px;
}

.ai-attached-file .file-icon {
    font-size: 14px;
    color: var(--accent-blue);
}

.ai-attached-file .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.ai-attached-file .file-remove {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    padding: 0;
    flex-shrink: 0;
}

.ai-attached-file .file-remove:hover {
    background: var(--danger-color);
    color: white;
}

.ai-attached-file .file-remove .material-icons-outlined {
    font-size: 12px;
}

.ai-input-container {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.ai-input-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px;
}

.ai-attach-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.ai-attach-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ai-attach-btn .material-icons-outlined {
    font-size: 16px;
}

.ai-voice-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.ai-voice-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ai-voice-btn.recording {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    animation: pulse-recording 1.5s infinite;
}

@keyframes pulse-recording {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
}

.ai-voice-btn .material-icons-outlined {
    font-size: 16px;
}

.ai-input-row textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    resize: none;
    outline: none;
    min-height: 20px;
    max-height: 80px;
    padding: 4px 0;
    line-height: 1.4;
}

.ai-input-row textarea::placeholder {
    color: var(--text-muted);
}

.ai-send-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(128, 128, 128, 0.46);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.ai-send-btn:hover {
    background: var(--accent-blue-hover);
}

.ai-send-btn:disabled {
    background: var(--bg-hover);
    color: var(--text-muted);
    cursor: not-allowed;
}

.ai-send-btn .material-icons-outlined {
    font-size: 14px;
}

/* AI Input Actions (below textarea) */
.ai-input-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px 8px;
    border-top: 1px solid var(--border-color);
}

.ai-input-actions .ai-send-btn {
    margin-left: auto;
}

.ai-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.ai-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ai-action-btn .material-icons-outlined {
    font-size: 16px;
}

.ai-action-btn.recording {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    animation: pulse-recording 1.5s infinite;
}

/* AI Input Footer (legacy, can be removed if not used) */
.ai-input-footer {
    display: flex;
    gap: 4px;
    padding: 6px 10px 8px;
    border-top: 1px solid var(--border-color);
}

.ai-footer-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-footer-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ai-footer-btn.active {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.ai-footer-btn .material-icons-outlined {
    font-size: 14px;
}

/* AI Toggle Button */
.ai-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    z-index: 1400;
}

.ai-toggle-btn:hover {
    transform: scale(1.05);
    background: var(--bg-hover);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ai-toggle-btn .material-icons-outlined {
    font-size: 18px;
}

.ai-toggle-btn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* AI Message Styles - Lovable style */
.ai-sidebar-content .claude-message {
    display: flex;
    margin-bottom: 16px;
}

.ai-sidebar-content .claude-avatar {
    display: none;
}

/* User message - right aligned, gray bubble like Lovable */
.ai-sidebar-content .claude-message.user {
    justify-content: flex-end;
}

.ai-sidebar-content .claude-message.user .claude-message-content {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 10px 14px;
    border-radius: 18px 18px 4px 18px;
    max-width: 85%;
    font-size: 13px;
    line-height: 1.5;
}

/* Assistant message - no background, no border, just text like Lovable */
.ai-sidebar-content .claude-message.assistant {
    justify-content: flex-start;
}

.ai-sidebar-content .claude-message.assistant .claude-message-content {
    background: none !important;
    border: none !important;
    color: var(--text-primary);
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
}

/* AI Actions */
.ai-sidebar-content .claude-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-sidebar-content .claude-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--accent-blue);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-sidebar-content .claude-action-btn:hover {
    background: var(--accent-blue-hover);
}

.ai-sidebar-content .claude-action-btn .material-icons-outlined {
    font-size: 12px;
}

/* Typing Indicator */
.ai-sidebar-content .claude-typing-indicator {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.ai-sidebar-content .claude-typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.ai-sidebar-content .claude-typing-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.ai-sidebar-content .claude-typing-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* AI Sidebar thinking indicator with timer */
.ai-sidebar-content .claude-thinking-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.ai-sidebar-content .claude-thinking-indicator .thinking-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}

.ai-sidebar-content .claude-thinking-indicator .thinking-icon svg {
    animation: thinking-spin 1.5s linear infinite;
}

.ai-sidebar-content .claude-thinking-indicator .thinking-text {
    color: var(--text-secondary);
    font-weight: 500;
}

.ai-sidebar-content .claude-thinking-indicator .thinking-timer {
    color: var(--text-muted);
    font-size: 12px;
}

/* Hide old claude fab */
.claude-fab {
    display: none !important;
}

/* Screen Edit Button - smaller size */
.screen-edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.15s ease;
    z-index: 10;
}

.screen-edit-btn .material-icons-outlined {
    font-size: 14px;
}

.screen:hover .screen-edit-btn {
    opacity: 1;
}

.screen-edit-btn:hover {
    background: var(--accent-blue-hover);
}

/* ================================
   CUSTOM MODAL SYSTEM
   ================================ */

#modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}

.modal-backdrop.active {
    opacity: 1;
}

.modal-dialog {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    padding-top: 20px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

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

.modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.modal-icon svg {
    width: 26px;
    height: 26px;
}

.modal-info .modal-icon {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.modal-success .modal-icon {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.modal-warning .modal-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.modal-error .modal-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

.modal-input .modal-icon,
.modal-question .modal-icon {
    background: rgba(0, 153, 255, 0.15);
    color: var(--accent-blue);
}

.modal-content {
    text-align: center;
    margin-bottom: 20px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 16px;
}

.modal-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.modal-message {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.modal-input-wrapper {
    margin-top: 14px;
}

.modal-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.modal-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.2);
}

.modal-input::placeholder {
    color: var(--text-muted);
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 4px;
}

.modal-btn {
    flex: 1;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.modal-btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.modal-btn-cancel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-btn-confirm {
    background: var(--accent-blue);
    color: white;
}

.modal-btn-confirm:hover {
    background: var(--accent-blue-hover);
}

.modal-btn-success {
    background: #22C55E;
}

.modal-btn-success:hover {
    background: #16A34A;
}

.modal-btn-warning {
    background: #F59E0B;
}

.modal-btn-warning:hover {
    background: #D97706;
}

.modal-btn-error {
    background: #EF4444;
}

.modal-btn-error:hover {
    background: #DC2626;
}

.modal-btn-input,
.modal-btn-question {
    background: var(--accent-blue);
}

.modal-btn-input:hover,
.modal-btn-question:hover {
    background: var(--accent-blue-hover);
}

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

/* =====================================================
   Template Gallery - Fullscreen with iframe previews
   ===================================================== */

.template-gallery-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.template-gallery-overlay.active {
    opacity: 1;
}

.template-gallery-container {
    width: 95vw;
    height: 90vh;
    max-width: 1400px;
    background: var(--bg-primary);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease;
}

.template-gallery-overlay.active .template-gallery-container {
    transform: scale(1) translateY(0);
}

/* Header */
.template-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.template-gallery-title h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.template-gallery-title p {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.template-gallery-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.template-gallery-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Body - sidebar + grid */
.template-gallery-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar */
.template-gallery-sidebar {
    width: 280px;
    padding: 24px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.template-name-input label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.template-name-input input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.15s ease;
}

.template-name-input input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.15);
}

.template-selected-info {
    padding: 16px;
    background: var(--bg-primary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.selected-template-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.selected-template-screens {
    font-size: 12px;
    color: var(--text-secondary);
}

.template-create-btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--accent-blue);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-create-btn:hover:not(:disabled) {
    background: #0088e0;
    transform: translateY(-1px);
}

.template-create-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Grid */
.template-gallery-grid {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    align-content: start;
}

.template-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.template-loading .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.template-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

/* Template Cards */
.template-card {
    position: relative;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.template-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.template-card.selected {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.2);
}

/* iframe preview container */
.template-card-preview {
    position: relative;
    width: 100%;
    height: 200px;
    min-height: 200px;
    overflow: hidden;
    background: #1a1a2e;
    flex-shrink: 0;
    border-radius: 10px 10px 0 0;
}

.template-card-preview iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    height: 750px;
    border: none;
    transform: scale(0.27);
    transform-origin: top left;
    pointer-events: none;
}

.template-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}

.template-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.template-card-screens {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 3px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

/* Checkmark for selected */
.template-card-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.template-card.selected .template-card-check {
    opacity: 1;
    transform: scale(1);
}

/* Template Preview Button */
.template-preview-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.template-card:hover .template-preview-btn {
    opacity: 1;
    transform: scale(1);
}

.template-preview-btn:hover {
    background: rgba(0, 153, 255, 0.9);
    border-color: var(--accent-blue);
    color: white;
    transform: scale(1.1);
}

/* Template Full Preview Overlay */
.template-fullpreview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.template-fullpreview-overlay.active {
    opacity: 1;
}

.template-fullpreview-container {
    width: 95%;
    max-width: 1400px;
    max-height: 90vh;
    background: var(--bg-secondary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease;
}

.template-fullpreview-overlay.active .template-fullpreview-container {
    transform: scale(1) translateY(0);
}

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

.template-fullpreview-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.template-fullpreview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.template-fullpreview-reload,
.template-fullpreview-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.template-fullpreview-reload:hover,
.template-fullpreview-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.template-fullpreview-reload.spinning svg {
    animation: spin 0.5s linear infinite;
}

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

.template-fullpreview-content {
    flex: 1;
    overflow: auto;
    padding: 24px;
}

.template-fullpreview-loading,
.template-fullpreview-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px;
    color: var(--text-secondary);
}

.template-fullpreview-screens {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

.template-fullpreview-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.template-fullpreview-screen .screen-number {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.template-fullpreview-screen .screen-frame {
    width: 250px;
    height: 542px;
    border-radius: 24px;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.template-fullpreview-screen .screen-frame iframe {
    width: 322px;
    height: 699px;
    border: none;
    transform: scale(0.776);
    transform-origin: top left;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .template-gallery-body {
        flex-direction: column;
    }

    .template-gallery-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .template-name-input {
        flex: 1;
        min-width: 200px;
    }

    .template-selected-info {
        flex: 1;
        min-width: 150px;
    }

    .template-create-btn {
        margin-top: 0;
    }

    .template-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .template-gallery-container {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .template-gallery-sidebar {
        flex-direction: column;
        gap: 12px;
    }

    .template-name-input {
        min-width: 100%;
    }

    .template-selected-info {
        min-width: 100%;
    }

    .template-gallery-grid {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 16px;
    }

    .template-card {
        display: flex;
        flex-direction: column;
    }

    .template-card-preview {
        height: 180px;
    }

    .template-card-footer {
        display: flex !important;
        padding: 10px 12px;
    }
}

/* ================================
   TOAST NOTIFICATIONS
   ================================ */

#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10001;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    max-width: 360px;
}

.toast.active {
    transform: translateX(0);
    opacity: 1;
}

.toast.dismissing {
    transform: translateX(120%);
    opacity: 0;
}

.toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-info .toast-icon {
    color: #3B82F6;
}

.toast-success .toast-icon {
    color: #22C55E;
}

.toast-warning .toast-icon {
    color: #F59E0B;
}

.toast-error .toast-icon {
    color: #EF4444;
}

.toast-message {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}

.toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.toast-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Toast with colored left border */
.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
}

.toast-info::before {
    background: #3B82F6;
}

.toast-success::before {
    background: #22C55E;
}

.toast-warning::before {
    background: #F59E0B;
}

.toast-error::before {
    background: #EF4444;
}

.toast {
    position: relative;
    padding-left: 20px;
}

/* ================================
   ADHD FOCUS TIMER SCREEN
   ================================ */

#adhd-screen-4,
#adhd-screen-5 {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 60px;
}

.focus-title {
    font-family: 'Playfair Display', serif;
    font-size: 46px;
    font-weight: 700;
    color: #2D2D2D;
    line-height: 1.1;
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
    display: block;
}

.focus-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 400;
    color: #2D2D2D;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 15px;
    width: 100%;
    display: block;
}

.focus-subtitle .highlight {
    position: relative;
    display: inline;
}

.focus-subtitle .highlight::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 8px;
    background: #9B59B6;
    opacity: 0.4;
    z-index: -1;
}

/* Simple Pomodoro Circle */
.pomodoro-simple {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.pomodoro-card {
    background: white;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 15px 40px rgba(91, 155, 213, 0.15);
}

.pomodoro-circle {
    position: relative;
    width: 240px;
    height: 240px;
}

.pomodoro-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pomodoro-circle .circle-bg {
    fill: none;
    stroke: rgba(91, 155, 213, 0.2);
    stroke-width: 12;
}

.pomodoro-circle .circle-progress {
    fill: none;
    stroke: #5B9BD5;
    stroke-width: 12;
    stroke-linecap: round;
}

.circle-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.circle-time {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-weight: 600;
    color: #5B9BD5;
}

.circle-label {
    font-size: 18px;
    color: #5B9BD5;
    margin-top: 5px;
}

/* Focus Content Layout */
.focus-content {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 15px 0;
}

/* Pomodoro Phone */
.pomodoro-phone {
    width: 220px;
    height: 420px;
    background: linear-gradient(145deg, #E8A598, #D4847A);
    border-radius: 36px;
    padding: 12px;
    box-shadow: 0 30px 60px rgba(212, 132, 122, 0.4);
    position: relative;
    z-index: 2;
}

.pomodoro-phone-screen {
    background: linear-gradient(180deg, #D4847A, #C06B60);
    border-radius: 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 20px;
}

/* Pomodoro Task Pill (inside phone) */
.pomodoro-task-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.15);
    padding: 8px 16px 8px 8px;
    border-radius: 25px;
    margin-bottom: 20px;
}

.pomodoro-task-pill span {
    font-size: 14px;
    font-weight: 500;
    color: white;
}

.pomodoro-task-pill .task-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.pomodoro-timer-ring {
    position: relative;
    width: 140px;
    height: 140px;
}

.pomodoro-timer-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pomodoro-timer-ring .timer-bg {
    fill: none;
    stroke: rgba(255,255,255,0.2);
    stroke-width: 8;
}

.pomodoro-timer-ring .timer-progress {
    fill: none;
    stroke: white;
    stroke-width: 8;
    stroke-linecap: round;
}

.pomodoro-time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: 300;
    color: white;
    letter-spacing: 2px;
}

.pomodoro-status {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    margin-top: 15px;
    margin-bottom: 20px;
}

.pomodoro-controls {
    display: flex;
    gap: 25px;
    align-items: center;
}

.pomodoro-btn {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
}

.pomodoro-btn.play {
    width: 52px;
    height: 52px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #D4847A;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.pomodoro-sessions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.session-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
}

.session-dot.completed {
    background: #4CAF50;
}

.session-dot.active {
    background: white;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* Floating Task Pills (around phone) */
.floating-task-pill {
    position: absolute;
    background: white;
    border-radius: 16px;
    padding: 10px 14px 10px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    z-index: 3;
}

.floating-task-pill .task-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.floating-task-pill .pill-title {
    font-size: 14px;
    font-weight: 600;
    color: #2D2D2D;
}

.floating-task-pill .pill-subtitle {
    font-size: 11px;
    color: #888;
}

.floating-task-pill.top-right {
    top: 25px;
    right: 15px;
}

.floating-task-pill.bottom-left {
    bottom: 90px;
    left: 15px;
}

.floating-task-pill.top-left {
    top: 25px;
    left: 15px;
}

/* Focus Watch Widget */
.focus-watch-widget {
    position: absolute;
    bottom: 30px;
    right: 25px;
    width: 52px;
    height: 64px;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    z-index: 3;
}

.focus-watch-widget::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 10px;
    background: #E8A598;
    border-radius: 4px 4px 0 0;
}

.focus-watch-widget::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 10px;
    background: #E8A598;
    border-radius: 0 0 4px 4px;
}

.watch-time {
    font-size: 14px;
    font-weight: 600;
    color: #E8A598;
}

/* Stats Card */
.focus-stats-card {
    position: absolute;
    top: 30px;
    left: 20px;
    background: linear-gradient(135deg, #FFE5E5, #FFF0F0);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    z-index: 3;
}

.stats-icon {
    font-size: 24px;
}

.stats-value {
    font-size: 20px;
    font-weight: 700;
    color: #E85A4F;
}

.stats-label {
    font-size: 10px;
    color: #E85A4F;
    text-transform: uppercase;
}

/* Bottom Badges */
.focus-badges-bottom {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: auto;
    padding-bottom: 10px;
}

.focus-badge-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.7);
    padding: 8px 14px;
    border-radius: 20px;
}

.focus-badge-item .badge-icon {
    font-size: 16px;
}

.focus-badge-item .badge-text {
    font-size: 12px;
    font-weight: 500;
    color: #2D2D2D;
}

/* Focus Badges */
.focus-badges {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 20px 0;
}

.focus-badge {
    background: white;
    border-radius: 16px;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    min-width: 100px;
}

.focus-badge-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.focus-badge-text {
    font-size: 13px;
    font-weight: 600;
    color: #2D2D2D;
    line-height: 1.3;
}

.focus-badge-label {
    font-size: 10px;
    color: #888;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Phone Container */
.focus-phone-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
    margin-top: 15px;
}

/* Focus Phone */
.focus-phone {
    width: 200px;
    height: 380px;
    background: linear-gradient(145deg, #E8A598, #D4847A);
    border-radius: 32px;
    padding: 10px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    position: relative;
    z-index: 2;
}

.focus-phone-screen {
    background: linear-gradient(180deg, #E8A598, #C97B70);
    border-radius: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.focus-timer-header {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 15px;
}

.focus-timer-display {
    font-size: 64px;
    font-weight: 300;
    color: white;
    letter-spacing: 2px;
}

.focus-timer-label {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    margin-top: 5px;
    margin-bottom: 25px;
}

.focus-timer-controls {
    display: flex;
    gap: 20px;
    align-items: center;
}

.focus-btn {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
}

.focus-btn.play {
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #D4847A;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* ================================
   UPLOAD MODAL REDESIGN
   ================================ */

/* Form sections with visual grouping */
.form-section {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
}

.form-section:last-of-type {
    margin-bottom: 0;
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.form-section-header .material-icons-outlined {
    font-size: 14px;
    color: var(--accent-blue);
    opacity: 0.7;
}

.form-section-content {
    padding: 16px;
}

.form-section-content .form-field {
    margin-bottom: 14px;
}

.form-section-content .form-field:last-child {
    margin-bottom: 0;
}

/* Form field labels in modal */
.form-section-content .form-field > label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-section-content .form-field > label .material-icons-outlined {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.25);
}

/* Screenshots preview area */
.screenshots-preview {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.preview-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-device-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.preview-device-label .material-icons-outlined {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.25);
}

.preview-device-group h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-device-group h4 .material-icons-outlined {
    font-size: 16px;
}

.preview-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.preview-thumb {
    width: 48px;
    height: 86px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
    transition: all 0.15s ease;
}

.preview-thumb:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-thumb .thumb-number {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.7);
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
}

.preview-thumb.ipad {
    width: 70px;
    height: 52px;
}

.preview-thumb.has-screenshot {
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.05);
}

.preview-thumb.has-screenshot .thumb-number {
    background: rgba(74, 222, 128, 0.85);
    color: white;
}

/* Loading state for screenshots preview */
.screenshots-preview.loading {
    position: relative;
}

.screenshots-preview.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.screenshots-preview.loading .preview-thumbs {
    opacity: 0.5;
    pointer-events: none;
}

/* New modal actions layout */
.modal-actions-new {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.actions-left {
    display: flex;
    gap: 8px;
}

.actions-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Icon-only buttons */
.btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.btn-icon:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-icon .material-icons-outlined {
    font-size: 18px;
}

.btn-icon.btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

/* Upload button with gradient */
.btn-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #0099ff 0%, #0077dd 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 153, 255, 0.25);
}

.btn-upload:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 153, 255, 0.35);
}

.btn-upload:active:not(:disabled) {
    transform: translateY(0);
}

.btn-upload:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    cursor: not-allowed;
}

.btn-upload .material-icons-outlined {
    font-size: 18px;
}

/* Hide old modal footer when using new design */
.modal-content:has(.modal-actions-new) .modal-footer {
    display: none;
}

/* ================================
   ANALYTICS SECTION
   ================================ */

.analytics-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.analytics-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.analytics-title .material-icons-outlined {
    font-size: 20px;
    color: var(--accent-blue);
}

.analytics-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.analytics-controls select {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}

.analytics-controls select:hover {
    border-color: var(--text-muted);
}

.analytics-content {
    min-height: 200px;
}

/* Analytics Empty/Loading/Error States */
.analytics-empty,
.analytics-loading,
.analytics-pending,
.analytics-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
}

.analytics-empty .material-icons-outlined,
.analytics-loading .material-icons-outlined,
.analytics-pending .material-icons-outlined,
.analytics-error .material-icons-outlined {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.analytics-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

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

.analytics-pending h4,
.analytics-error h4 {
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 16px;
}

.analytics-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
}

.analytics-error .material-icons-outlined {
    color: #ff6b6b;
}

.analytics-error button {
    margin-top: 16px;
}

/* Analytics Summary Cards */
.analytics-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.analytics-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.analytics-card-icon .material-icons-outlined {
    font-size: 22px;
    color: white;
}

.analytics-card-icon.impressions {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.analytics-card-icon.pageviews {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.analytics-card-icon.downloads {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.analytics-card-icon.conversion {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.analytics-card-content {
    flex: 1;
}

.analytics-card-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.analytics-card-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Analytics Breakdown Table */
.analytics-breakdown {
    margin-bottom: 24px;
}

.analytics-breakdown h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.analytics-breakdown h4 .material-icons-outlined {
    font-size: 18px;
    color: var(--text-secondary);
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.analytics-table th,
.analytics-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.analytics-table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.analytics-table td {
    color: var(--text-primary);
}

.analytics-table tbody tr:hover {
    background: var(--bg-hover);
}

.cpp-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpp-name-cell .material-icons-outlined {
    font-size: 18px;
    color: var(--text-muted);
}

.conversion-cell {
    font-weight: 600;
}

.conversion-cell.positive {
    color: #43e97b;
}

.conversion-cell.negative {
    color: #ff6b6b;
}

/* Analytics Chart */
.analytics-chart {
    margin-bottom: 24px;
}

.analytics-chart h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.analytics-chart h4 .material-icons-outlined {
    font-size: 18px;
    color: var(--text-secondary);
}

.chart-container {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

.chart-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.chart-bar {
    width: 100%;
    max-width: 24px;
    background: linear-gradient(180deg, var(--accent-blue), #0077cc);
    border-radius: 4px 4px 0 0;
    margin-top: auto;
    transition: all 0.3s ease;
    min-height: 2px;
}

.chart-bar-container:hover .chart-bar {
    background: linear-gradient(180deg, #00b3ff, var(--accent-blue));
    transform: scaleX(1.1);
}

.chart-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
}

/* Analytics Period Info */
.analytics-period-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.analytics-period-info .material-icons-outlined {
    font-size: 16px;
}

.period-days {
    opacity: 0.7;
}

/* Responsive adjustments for analytics */
@media (max-width: 900px) {
    .analytics-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .analytics-summary {
        grid-template-columns: 1fr;
    }

    .analytics-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .analytics-controls {
        width: 100%;
    }

    .analytics-controls select {
        flex: 1;
    }
}

/* ================================
   ONBOARDING MODAL
   ================================ */
.onboarding-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.onboarding-modal.active {
    display: flex;
    opacity: 1;
}

.onboarding-content {
    background: var(--bg-secondary);
    border-radius: 20px;
    width: 90%;
    max-width: 520px;
    padding: 40px;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.onboarding-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.onboarding-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.onboarding-slides {
    min-height: 350px;
}

.onboarding-slide {
    display: none;
    text-align: center;
}

.onboarding-slide.active {
    display: block;
}

.onboarding-slide.active.slide-right {
    animation: fadeInRight 0.4s ease;
}

.onboarding-slide.active.slide-left {
    animation: fadeInLeft 0.4s ease;
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

@keyframes rotateIn {
    from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
    to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.onboarding-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-color), #7c3aed);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: bounceIn 0.6s ease;
    position: relative;
    overflow: hidden;
}

.onboarding-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 2s infinite;
}

.onboarding-slide.active .onboarding-icon {
    animation: bounceIn 0.6s ease, float 3s ease-in-out infinite 0.6s;
}

.onboarding-icon .material-icons-outlined {
    font-size: 40px;
    color: white;
    z-index: 1;
}

.onboarding-icon.blue {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.onboarding-icon.purple {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.onboarding-icon.green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.onboarding-icon.orange {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.onboarding-slide h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    animation: fadeInUp 0.5s ease 0.2s backwards;
}

.onboarding-slide p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    animation: fadeInUp 0.5s ease 0.3s backwards;
}

.onboarding-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    text-align: left;
    animation: fadeInUp 0.5s ease backwards;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-item:nth-child(1) { animation-delay: 0.4s; }
.feature-item:nth-child(2) { animation-delay: 0.5s; }
.feature-item:nth-child(3) { animation-delay: 0.6s; }

.feature-item:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.feature-item .material-icons-outlined {
    font-size: 24px;
    color: var(--accent-color);
    transition: transform 0.3s ease;
}

.feature-item:hover .material-icons-outlined {
    transform: scale(1.2);
}

.feature-item span:last-child {
    font-size: 14px;
    color: var(--text-primary);
}

.onboarding-image {
    margin: 20px 0;
    animation: fadeInUp 0.5s ease 0.4s backwards;
}

.onboarding-image img {
    max-width: 100%;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.onboarding-image img:hover {
    transform: scale(1.02);
}

.onboarding-hint {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    background: var(--bg-tertiary);
    padding: 10px 14px;
    border-radius: 8px;
    display: inline-block;
    animation: fadeInUp 0.5s ease 0.5s backwards;
    transition: transform 0.2s ease;
}

.onboarding-hint:hover {
    transform: scale(1.02);
}

.onboarding-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    text-align: left;
}

.onboarding-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 14px;
    animation: fadeInRight 0.4s ease backwards;
    transition: transform 0.2s ease;
}

.onboarding-list li:nth-child(1) { animation-delay: 0.3s; }
.onboarding-list li:nth-child(2) { animation-delay: 0.4s; }
.onboarding-list li:nth-child(3) { animation-delay: 0.5s; }
.onboarding-list li:nth-child(4) { animation-delay: 0.6s; }

.onboarding-list li:hover {
    transform: translateX(6px);
}

.onboarding-list li:last-child {
    border-bottom: none;
}

.onboarding-list li .material-icons-outlined {
    font-size: 20px;
    color: var(--accent-color);
    transition: transform 0.3s ease;
}

.onboarding-list li:hover .material-icons-outlined {
    transform: rotate(10deg) scale(1.1);
}

.onboarding-slide kbd {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    font-family: monospace;
}

.onboarding-export-options {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 20px 0;
}

.export-option {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 14px 18px;
    text-align: center;
    animation: fadeInUp 0.4s ease backwards;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.export-option:nth-child(1) { animation-delay: 0.3s; }
.export-option:nth-child(2) { animation-delay: 0.4s; }
.export-option:nth-child(3) { animation-delay: 0.5s; }

.export-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.export-option strong {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

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

.onboarding-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.onboarding-dots {
    display: flex;
    gap: 8px;
}

.onboarding-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.onboarding-dots .dot.active {
    background: var(--accent-color);
    width: 24px;
    border-radius: 4px;
    animation: pulse 1.5s ease infinite;
}

.onboarding-dots .dot:hover:not(.active) {
    background: var(--text-muted);
    transform: scale(1.3);
}

.onboarding-buttons {
    display: flex;
    gap: 12px;
}

.onboarding-buttons button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.onboarding-buttons .btn-primary {
    background: var(--accent-color);
    color: white;
    border: none;
}

.onboarding-buttons .btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.onboarding-buttons .btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.onboarding-buttons .btn-secondary:hover {
    background: var(--bg-hover);
}

.onboarding-buttons .material-icons-outlined {
    font-size: 18px;
}

.onboarding-skip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
}

.onboarding-skip input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.onboarding-skip:hover {
    color: var(--text-secondary);
}

/* Responsive onboarding */
@media (max-width: 600px) {
    .onboarding-content {
        padding: 30px 24px;
        margin: 16px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .onboarding-slides {
        min-height: auto;
    }

    .onboarding-slide h2 {
        font-size: 20px;
    }

    .onboarding-export-options {
        flex-direction: column;
    }

    .onboarding-footer {
        flex-direction: column;
        gap: 16px;
    }

    .onboarding-buttons {
        width: 100%;
        justify-content: center;
    }
}



/* ================================
   REVIEWS SECTION
   ================================ */
.reviews-section {
    flex: 1;
    overflow: hidden;
    background: var(--bg-primary);
}

.reviews-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.reviews-container {
    max-width: 900px;
    margin: 0 auto;
}

.reviews-header {
    margin-bottom: 32px;
}

.reviews-header h2 {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.reviews-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

.reviews-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.stat-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.stat-card .stars {
    color: #FFD700;
    font-size: 16px;
    letter-spacing: 2px;
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.review-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

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

.review-rating {
    color: #FFD700;
    font-size: 14px;
    letter-spacing: 1px;
}

.review-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.review-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.review-actions {
    display: flex;
    gap: 12px;
}

.review-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.review-btn .material-icons-outlined {
    font-size: 16px;
}

.reviews-section .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.reviews-section .empty-state .material-icons-outlined {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.reviews-section .empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.reviews-section .empty-state p {
    font-size: 14px;
}

@media (max-width: 768px) {
    .reviews-stats {
        grid-template-columns: 1fr;
    }

    .reviews-section {
        padding: 20px;
    }
}

/* ================================
   REVIEWS SECTION - DYNAMIC CONTENT
   ================================ */

/* Container */
.reviews-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    overflow-y: auto;
}

/* Stats Overview */
.stats-overview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
}

.stats-rating {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rating-value {
    font-size: 42px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.rating-stars {
    display: flex;
    gap: 2px;
}

.rating-stars .star {
    color: #FFD700;
    font-size: 18px;
}

.rating-stars .star.empty {
    color: var(--text-muted);
    opacity: 0.3;
}

.rating-stars .star.half {
    background: linear-gradient(90deg, #FFD700 50%, var(--text-muted) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rating-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.stats-platforms {
    display: flex;
    gap: 24px;
}

.platform-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.platform-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.platform-icon.apple {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z'/%3E%3C/svg%3E");
}

.platform-icon.google {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M3 20.5v-17c0-.59.34-1.11.84-1.35L13.69 12l-9.85 9.85c-.5-.24-.84-.76-.84-1.35m13.81-5.38L6.05 21.34l8.49-8.49 2.27 2.27m3.35-4.31c.34.27.56.69.56 1.19s-.22.92-.56 1.19l-2.29 1.32-2.5-2.5 2.5-2.5 2.29 1.3M6.05 2.66l10.76 6.22-2.27 2.27-8.49-8.49z'/%3E%3C/svg%3E");
}

.platform-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Stats Distribution */
.stats-distribution {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

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

.dist-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    width: 16px;
    text-align: center;
}

.dist-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.dist-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.dist-count {
    font-size: 11px;
    color: var(--text-muted);
    width: 40px;
    text-align: right;
}

/* Filters */
.reviews-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 16px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.filter-select {
    padding: 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.1);
}

.refresh-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.refresh-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.refresh-btn .material-icons-outlined {
    font-size: 18px;
}

.refresh-btn.spinning .material-icons-outlined {
    animation: spin 1s linear infinite;
}

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

/* Reviews List */
.reviews-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Review Card (updated) */
.review-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.author-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.review-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.country-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.platform-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
}

.platform-badge.appstore {
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
}

.platform-badge.googleplay {
    background: rgba(52, 168, 83, 0.1);
    color: #34A853;
}

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

.review-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.review-rating .star {
    color: #FFD700;
    font-size: 14px;
}

.review-rating .star.empty {
    color: var(--text-muted);
    opacity: 0.3;
}

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

.review-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

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

.review-helpful {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.review-helpful .material-icons-outlined {
    font-size: 14px;
}

/* Loading State */
.reviews-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

.stats-loading {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}

/* Error State */
.reviews-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.reviews-error .material-icons-outlined {
    font-size: 48px;
    color: #dc3545;
    margin-bottom: 16px;
}

.reviews-error p {
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.reviews-error .error-detail {
    font-size: 13px;
    color: var(--text-muted);
}

.retry-btn {
    margin-top: 16px;
    padding: 8px 20px;
    background: var(--primary-color);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

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

/* Empty State */
.reviews-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.reviews-empty .material-icons-outlined {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
    opacity: 0.5;
}

.reviews-empty p {
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.reviews-empty .empty-hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* Load More */
.reviews-load-more {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.load-more-btn {
    padding: 10px 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-more-btn:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

/* Responsive Reviews */
@media (max-width: 768px) {
    .reviews-container {
        padding: 16px;
    }

    .stats-overview {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .stats-platforms {
        justify-content: center;
    }

    .reviews-filters {
        flex-wrap: wrap;
    }

    .filter-group {
        flex: 1 1 auto;
    }

    .refresh-btn {
        margin-left: 0;
    }
}

/* =====================================================
   ENHANCED CPP DROPDOWN MENU
   ===================================================== */

/* CPP Selector Wrapper */
.cpp-selector-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Enhanced Dropdown Container */
.cpp-enhanced-dropdown {
    position: relative;
}

/* Dropdown Trigger */
.cpp-enhanced-dropdown .custom-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}

.custom-dropdown-trigger:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
}

.cpp-enhanced-dropdown.open .custom-dropdown-trigger {
    border-color: var(--primary-color);
    background: var(--bg-hover);
}

.cpp-enhanced-dropdown .dropdown-selected-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpp-enhanced-dropdown .dropdown-arrow-icon {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.cpp-enhanced-dropdown.open .dropdown-arrow-icon {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.cpp-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 320px;
    max-width: 380px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.cpp-enhanced-dropdown.open .cpp-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Menu Sections */
.cpp-menu-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.cpp-menu-section:last-of-type {
    border-bottom: none;
}

/* Section Header */
.cpp-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cpp-section-header i.f7-icons {
    font-size: 12px;
    opacity: 0.7;
}

.cpp-section-add {
    margin-left: auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cpp-section-add:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.cpp-section-add i.f7-icons {
    font-size: 12px;
}

/* CPP Menu Item */
.cpp-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.cpp-menu-item:hover {
    background: var(--bg-hover);
}

.cpp-menu-item.selected {
    background: rgba(var(--primary-rgb), 0.1);
}

.cpp-menu-item.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color);
    border-radius: 0 3px 3px 0;
}

/* Item Preview - Mini Screens */
.cpp-item-preview {
    flex-shrink: 0;
}

.cpp-preview-screens {
    display: flex;
    gap: 3px;
}

.cpp-mini-screen {
    width: 16px;
    height: 28px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.cpp-mini-screen::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 4px;
    background: var(--border-light);
    border-radius: 1px;
}

.cpp-mini-screen:nth-child(2) {
    transform: translateY(-2px);
}

/* Item Content */
.cpp-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cpp-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpp-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cpp-screen-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.cpp-screen-count i.f7-icons {
    font-size: 10px;
}

.cpp-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
}

.cpp-status i.f7-icons {
    font-size: 10px;
}

.cpp-status.live {
    color: #34c759;
}

.cpp-status.draft {
    color: var(--text-muted);
}

.cpp-status.synced {
    color: #007aff;
}

/* Item Actions */
.cpp-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cpp-menu-item:hover .cpp-item-actions {
    opacity: 1;
}

.cpp-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cpp-action-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.cpp-action-btn i.f7-icons {
    font-size: 13px;
}

/* Empty State */
.cpp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    gap: 8px;
}

.cpp-empty-state i.f7-icons {
    font-size: 24px;
    color: var(--text-muted);
    opacity: 0.5;
}

.cpp-empty-state span {
    font-size: 12px;
    color: var(--text-muted);
}

/* Menu Footer */
.cpp-menu-footer {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
}

.cpp-footer-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cpp-footer-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.cpp-footer-btn i.f7-icons {
    font-size: 14px;
}

/* CPP Menu Items Container */
.cpp-menu-items {
    max-height: 240px;
    overflow-y: auto;
}

.cpp-menu-items::-webkit-scrollbar {
    width: 6px;
}

.cpp-menu-items::-webkit-scrollbar-track {
    background: transparent;
}

.cpp-menu-items::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.cpp-menu-items::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* No CPP Items State */
.cpp-no-items {
    padding: 16px 14px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* ==================== Filter Dropdowns (Reviews Section) ==================== */

.filter-dropdown {
    position: relative;
    display: inline-block;
    min-width: 140px;
}

.filter-dropdown .custom-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-dropdown .custom-dropdown-trigger:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
}

.filter-dropdown.open .custom-dropdown-trigger {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.filter-dropdown .dropdown-selected-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.filter-dropdown .dropdown-arrow {
    font-size: 16px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.filter-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.filter-dropdown .custom-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
}

.filter-dropdown.open .custom-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.filter-dropdown .custom-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.filter-dropdown .custom-dropdown-item:hover {
    background: var(--bg-hover);
}

.filter-dropdown .custom-dropdown-item.selected {
    background: var(--accent-color-subtle);
}

.filter-dropdown .custom-dropdown-item .item-text {
    font-size: 13px;
    color: var(--text-primary);
}

.filter-dropdown .custom-dropdown-item .item-check {
    font-size: 16px;
    color: var(--accent-color);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.filter-dropdown .custom-dropdown-item.selected .item-check {
    opacity: 1;
}

/* ==================== CPP Manager Modal List ==================== */

.cpp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--bg-secondary);
    transition: all 0.15s ease;
}

.cpp-item:hover {
    border-color: var(--border-light);
    background: var(--bg-hover);
}

.cpp-item-info {
    flex: 1;
    text-align: left;
}

.cpp-item-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-align: left;
}

.cpp-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.cpp-item-status {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}

.cpp-item-status.visible {
    background: rgba(52, 199, 89, 0.15);
    color: #34c759;
}

.cpp-item-status.hidden {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.cpp-item-link {
    font-size: 12px;
    color: var(--primary-color);
    text-decoration: none;
}

.cpp-item-link:hover {
    text-decoration: underline;
}

.cpp-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cpp-item:hover .cpp-item-actions {
    opacity: 1;
}

/* ==================== CPP Analytics Section ==================== */

.analytics-section {
    padding: 0 20px 20px;
}

.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.analytics-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.analytics-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.analytics-content {
    min-height: 120px;
}

/* Analytics Status States */
.analytics-empty,
.analytics-pending,
.analytics-error,
.analytics-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 8px;
}

.analytics-empty .material-icons-outlined,
.analytics-pending .material-icons-outlined,
.analytics-error .material-icons-outlined,
.analytics-loading .material-icons-outlined {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.analytics-empty p,
.analytics-pending p,
.analytics-error p {
    font-size: 13px;
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}

.analytics-loading {
    color: var(--primary-color);
}

.analytics-loading .material-icons-outlined {
    animation: spin 1s linear infinite;
    opacity: 1;
}

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

.analytics-error {
    color: #ff3b30;
}

.analytics-error .material-icons-outlined {
    opacity: 0.8;
}

/* Analytics Summary Cards */
.analytics-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.analytics-card {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.analytics-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.analytics-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.analytics-card-icon .material-icons-outlined {
    font-size: 20px;
    color: white;
}

.analytics-card-icon.impressions {
    background: linear-gradient(135deg, #5856d6, #7c7aff);
}

.analytics-card-icon.views,
.analytics-card-icon.pageviews {
    background: linear-gradient(135deg, #007aff, #5ac8fa);
}

.analytics-card-icon.downloads {
    background: linear-gradient(135deg, #34c759, #30d158);
}

.analytics-card-icon.conversion {
    background: linear-gradient(135deg, #ff9500, #ffcc00);
}

.analytics-card-content {
    flex: 1;
    min-width: 0;
}

.analytics-card-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.analytics-card-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Analytics Breakdown Table */
.analytics-breakdown {
    background: var(--bg-secondary);
    border-radius: 10px;
    overflow: hidden;
}

.analytics-breakdown h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 14px 16px;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
}

.analytics-table th,
.analytics-table td {
    padding: 10px 16px;
    text-align: left;
    font-size: 12px;
}

.analytics-table th {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 10px;
    background: var(--bg-tertiary);
}

.analytics-table td {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.analytics-table tr:last-child td {
    border-bottom: none;
}

.analytics-table tr:hover td {
    background: var(--bg-tertiary);
}

/* Chart Container */
.chart-container {
    display: flex;
    align-items: flex-end;
    height: 80px;
    gap: 4px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    margin-top: 16px;
}

.chart-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.chart-bar {
    flex: 1;
    width: 100%;
    background: linear-gradient(180deg, var(--primary-color), rgba(0, 122, 255, 0.6));
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    opacity: 0.8;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.chart-bar-container:hover .chart-bar {
    opacity: 1;
    transform: scaleY(1.05);
    transform-origin: bottom;
}

.chart-label {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: center;
}

/* Analytics Table Extra Styles */
.cpp-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpp-name-cell .material-icons-outlined {
    font-size: 16px;
    color: var(--text-muted);
}

.conversion-cell {
    font-weight: 600;
}

.conversion-cell.positive {
    color: #34c759;
}

.conversion-cell.negative {
    color: var(--text-secondary);
}

/* Analytics Hint Text */
.analytics-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Analytics Pending/Empty State Headers */
.analytics-pending h4,
.analytics-empty h4,
.analytics-error h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.analytics-error h4 {
    color: #ff3b30;
}

/* Analytics Breakdown Header Icon */
.analytics-breakdown h4 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.analytics-breakdown h4 .material-icons-outlined {
    font-size: 18px;
    color: var(--text-muted);
}

/* Responsive Analytics */
@media (max-width: 600px) {
    .analytics-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .analytics-card {
        padding: 12px;
    }

    .analytics-card-value {
        font-size: 18px;
    }
}

/* ================================
   ADD APP BUTTON
   ================================ */
.add-app-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: auto;
}

.add-app-btn:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.add-app-btn .f7-icons {
    font-size: 14px;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.add-app-btn:hover .f7-icons {
    color: white;
}

.dropdown-section-label {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ================================
   ADD APP MODAL
   ================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.2s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

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

.modal-content.small-modal {
    max-width: 380px;
}

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

.modal-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-header h2 .material-icons-outlined {
    font-size: 22px;
    color: var(--accent-blue);
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.modal-close:hover {
    background: var(--bg-hover);
}

.modal-close .material-icons-outlined {
    font-size: 20px;
    color: var(--text-secondary);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

/* Form Fields */
.form-field {
    margin-bottom: 20px;
}

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

.form-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-field label .optional {
    font-weight: 400;
    color: var(--text-muted);
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-light);
}

.form-input::placeholder {
    color: var(--text-muted);
}

/* Platform Selector */
.platform-selector {
    display: flex;
    gap: 12px;
}

.platform-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.platform-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.platform-btn.active {
    background: var(--accent-blue-light);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.platform-btn .f7-icons {
    font-size: 18px;
}

/* Buttons */
.btn-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--accent-blue);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.btn-primary .material-icons-outlined {
    font-size: 18px;
}

.btn-secondary {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ================================
   SCREEN TOOLBAR (Hover Actions)
   ================================ */
.screen-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.screen-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 4px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    width: 100%;
}

.screen-wrapper:hover .screen-toolbar {
    opacity: 1;
    visibility: visible;
}

.screen-toolbar-btn {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: none !important;
}

/* Override general .add-btn styles for screen toolbar */
.screen-toolbar-btn.add-btn {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    background: transparent;
    border-radius: 4px;
    box-shadow: none !important;
}

.screen-toolbar-btn.add-btn .material-icons-outlined {
    font-size: 14px;
    color: var(--text-muted);
}

.screen-toolbar-btn.add-btn:hover {
    background: var(--bg-hover);
}

.screen-toolbar-btn.add-btn:hover .material-icons-outlined {
    color: var(--text-primary);
}

.screen-toolbar-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

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

.screen-toolbar-btn .material-icons-outlined {
    font-size: 14px;
}

.screen-toolbar-btn.delete-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.screen-toolbar-divider {
    width: 1px;
    height: 14px;
    background: var(--border-color);
    margin: 0 2px;
}

/* Screen number badge */
.screen-number {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-right: auto;
    padding-left: 4px;
}

/* ================================
   SUBSCRIPTION & PRO FEATURES
   ================================ */

/* Pro Badge */
.pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pro-badge-small {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Pro Status in Profile */
.pro-status {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-color);
}

.upgrade-link {
    background: none;
    border: none;
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}

.upgrade-link:hover {
    color: var(--accent-blue-hover);
    text-decoration: underline;
}

/* Upgrade Button */
.upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upgrade-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Pro-only locked state */
.pro-only.locked {
    position: relative;
    opacity: 0.5;
    pointer-events: none;
}

.pro-only.locked::after {
    content: 'PRO';
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    color: white;
}

/* Subscription Modal */
#subscriptionModal {
    z-index: 3000;
}

#subscriptionModal .modal-content {
    max-width: 480px;
}

.subscription-header {
    text-align: center;
    padding: 24px 24px 0;
}

.subscription-header h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

.subscription-features {
    padding: 24px;
}

.subscription-features h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

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

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 10px;
}

.feature-item .material-icons-outlined {
    font-size: 20px;
    color: #3B82F6;
}

.feature-item span {
    font-size: 13px;
    color: var(--text-primary);
}

.subscription-pricing {
    padding: 0 24px 24px;
    text-align: center;
}

.price-display {
    margin-bottom: 16px;
}

.price-amount {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
}

.price-period {
    font-size: 14px;
    color: var(--text-secondary);
}

.subscribe-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.subscribe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.subscribe-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.subscription-footer {
    padding: 16px 24px;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

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

/* Toast Notification (Subscription specific) */
.toast-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 4000;
    opacity: 0;
    transition: all 0.3s ease;
}

.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-notification .material-icons-outlined {
    font-size: 20px;
}

.toast-success .material-icons-outlined {
    color: #22c55e;
}

.toast-error .material-icons-outlined {
    color: #ef4444;
}

.toast-info .material-icons-outlined {
    color: var(--accent-blue);
}

/* ==================== PREMIUM FLOATING BUTTON ==================== */

.premium-floating-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35);
    transition: all 0.2s ease;
    z-index: 1000;
}

.premium-floating-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5);
}

.premium-floating-btn:active {
    transform: translateY(0) scale(0.98);
}

.premium-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.premium-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.premium-text {
    letter-spacing: 0.5px;
}

@keyframes premium-pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 4px 30px rgba(139, 92, 246, 0.5);
    }
}

/* Hide premium button when user is Pro */
body.is-pro .premium-floating-btn {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .premium-floating-btn {
        bottom: 16px;
        left: 16px;
        padding: 10px 16px;
        font-size: 13px;
    }

    .premium-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* HD Mode Toggle */
.hd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-right: 12px;
    user-select: none;
}

.hd-toggle input {
    display: none;
}

.hd-toggle-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    transition: background 0.2s ease;
    border: 1px solid var(--border-color);
}

.hd-toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.hd-toggle input:checked + .hd-toggle-slider {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.hd-toggle input:checked + .hd-toggle-slider::before {
    transform: translateX(16px);
    background: white;
}

.hd-toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hd-toggle input:checked ~ .hd-toggle-label {
    color: var(--accent-blue);
}