/**
 * SIGMINT BUILDER - Design System CSS
 * Normal Clean Light UI with 3D Effects
 */

/* ==================== CSS VARIABLES ==================== */
:root {
    /* Colors */
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    
    /* Primary Green */
    --green-50: #F0FDF4;
    --green-100: #DCFCE7;
    --green-200: #BBF7D0;
    --green-300: #86EFAC;
    --green-400: #4ADE80;
    --green-500: #22C55E;
    --green-600: #16A34A;
    --green-700: #15803D;
    --green-800: #166534;
    
    /* Accent Orange */
    --orange-400: #FB923C;
    --orange-500: #F97316;
    --orange-600: #EA580C;
    --orange-700: #C2410C;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.07);
    --shadow-green: 0 8px 20px rgba(34, 197, 94, 0.4);
    
    /* Borders */
    --border-color: #E5E7EB;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ==================== BASE STYLES ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--gray-50);
    color: var(--gray-900);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

/* ==================== LAYOUT ==================== */
.app-container {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    margin-left: 280px;
    padding: 24px;
    padding-bottom: 100px;
    transition: margin-left var(--transition-normal);
}

@media (max-width: 1024px) {
    .main-content {
        margin-left: 0;
        padding: 16px;
        padding-bottom: 120px;
    }
}

/* ==================== HEADER ==================== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(10px);
}

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

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--gray-100);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.menu-toggle span {
    width: 20px;
    height: 2px;
    background: var(--gray-700);
    border-radius: 2px;
    transition: var(--transition-fast);
}

@media (max-width: 1024px) {
    .menu-toggle {
        display: flex;
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 20px;
    color: var(--green-600);
}

.logo-icon {
    width: 36px;
    height: 36px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    overflow: visible;
}

/* Brand mark: the real logo replaces the old gradient tile, so it must not be
   stretched or clipped. Sized by the parent's width/height above. */
.logo-icon img,
.sidebar-logo-icon img,
.admin-sidebar-logo-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
}

.logo:hover .logo-icon img {
    filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.35));
    transform: scale(1.04);
}

.logo-icon img { transition: transform .2s ease, filter .2s ease; }

/* Larger mark used on auth + hero cards */
.logo-icon-lg {
    width: 72px;
    height: 72px;
}

.header-center {
    flex: 1;
    max-width: 400px;
    margin: 0 24px;
}

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

.search-box input {
    width: 100%;
    padding: 10px 16px 10px 44px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: 14px;
    background: var(--gray-50);
    transition: var(--transition-fast);
}

.search-box input:focus {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.search-box::before {
    content: "🔍";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
}

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

.header-icon-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--gray-100);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    position: relative;
    transition: var(--transition-fast);
}

.header-icon-btn:hover {
    background: var(--gray-200);
}

.notification-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    background: var(--orange-500);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-dropdown {
    position: relative;
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--border-color);
    background: var(--white);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.profile-btn:hover {
    border-color: var(--green-500);
}

.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--green-400), var(--green-500));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.profile-info {
    text-align: left;
}

.profile-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-900);
}

.profile-plan {
    font-size: 11px;
    color: var(--green-600);
    font-weight: 600;
    text-transform: uppercase;
}

.profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-fast);
    z-index: 200;
}

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

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--gray-700);
    font-size: 14px;
    transition: var(--transition-fast);
}

.profile-menu-item:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}

.profile-menu-item.danger {
    color: #EF4444;
}

.profile-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* ==================== SIDEBAR ==================== */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    background: var(--white);
    border-right: 1px solid var(--border-color);
    padding: 20px 16px;
    z-index: 150;
    overflow-y: auto;
    transition: transform var(--transition-normal);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 140;
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
    
    .sidebar-overlay.active {
        display: block;
    }
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 24px;
}

.sidebar-logo-icon {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.sidebar-logo-text {
    font-weight: 700;
    font-size: 18px;
    color: var(--green-600);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--border-radius-md);
    color: var(--gray-600);
    font-weight: 500;
    transition: var(--transition-fast);
}

.sidebar-nav-item:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}

.sidebar-nav-item.active {
    background: linear-gradient(135deg, var(--green-50), var(--green-100));
    color: var(--green-600);
}

.sidebar-nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    width: 4px;
    height: 24px;
    background: var(--green-500);
    border-radius: 0 4px 4px 0;
}

.sidebar-nav-icon {
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.sidebar-nav-badge {
    margin-left: auto;
    padding: 2px 8px;
    background: var(--orange-500);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
}

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

.sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
}

/* ==================== BOTTOM NAVIGATION ==================== */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 16px;
    /* The bar used to be centred with a 50% offset plus a counter-shift; the override
       further down bounds it with inset margins instead, which is what keeps it clear of
       the iPhone home indicator. */
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    padding: 8px 16px;
    gap: 8px;
    box-shadow: var(--shadow-xl);
    z-index: 100;
    backdrop-filter: blur(20px);
}

@media (max-width: 1024px) {
    .bottom-nav {
        display: flex;
    }
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border-radius: var(--border-radius-md);
    color: var(--gray-500);
    font-size: 11px;
    font-weight: 500;
    transition: var(--transition-fast);
    min-width: 70px;
}

.bottom-nav-item:hover {
    color: var(--gray-700);
}

.bottom-nav-item.active {
    color: var(--green-600);
    background: var(--green-50);
}

.bottom-nav-item .icon {
    font-size: 22px;
}

.bottom-nav-item.create-btn {
    background: linear-gradient(135deg, var(--green-500), var(--green-600));
    color: white;
    box-shadow: 0 4px 0 var(--green-700), 0 6px 15px rgba(34, 197, 94, 0.4);
    transform: translateY(-4px);
    margin-top: -16px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    padding: 0;
}

.bottom-nav-item.create-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 0 var(--green-700), 0 4px 10px rgba(34, 197, 94, 0.3);
}

.bottom-nav-item.create-btn .icon {
    font-size: 28px;
}

/* ==================== BUTTONS ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius-md);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
}

.btn-3d-green {
    background: linear-gradient(180deg, var(--green-500) 0%, var(--green-600) 100%);
    color: white;
    border: 2px solid var(--green-700);
    box-shadow: 0 4px 0 var(--green-700), 0 8px 20px rgba(34, 197, 94, 0.4);
    position: relative;
    overflow: hidden;
}

.btn-3d-green::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
}

.btn-3d-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--green-700), 0 12px 30px rgba(34, 197, 94, 0.5);
}

.btn-3d-green:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--green-700), 0 2px 10px rgba(34, 197, 94, 0.3);
}

.btn-3d-green .icon {
    color: var(--orange-500);
}

.btn-secondary {
    background: var(--white);
    color: var(--green-600);
    border: 2px solid var(--green-500);
    box-shadow: 0 4px 0 var(--green-200);
}

.btn-secondary:hover {
    background: var(--green-50);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--green-200);
}

.btn-secondary:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--green-200);
}

.btn-outline {
    background: transparent;
    color: var(--gray-700);
    border: 2px solid var(--border-color);
}

.btn-outline:hover {
    border-color: var(--gray-400);
    background: var(--gray-50);
}

.btn-ghost {
    background: transparent;
    color: var(--gray-600);
}

.btn-ghost:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.btn-danger {
    background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);
    color: white;
    border: 2px solid #B91C1C;
    box-shadow: 0 4px 0 #B91C1C, 0 8px 20px rgba(239, 68, 68, 0.4);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #B91C1C, 0 12px 30px rgba(239, 68, 68, 0.5);
}

.btn-danger:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 #B91C1C;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
}

.btn-xl {
    padding: 20px 48px;
    font-size: 18px;
    border-radius: var(--border-radius-lg);
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* ==================== CARDS ==================== */
.card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
}

.card-body {
    padding: 24px;
}

.card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--gray-50);
}

/* ==================== FORMS ==================== */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-700);
}

.form-label .required {
    color: #EF4444;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: 14px;
    transition: var(--transition-fast);
    background: var(--white);
}

.form-input:focus {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}

.form-input::placeholder {
    color: var(--gray-400);
}

.form-input.error {
    border-color: #EF4444;
}

.form-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--gray-500);
}

.form-error {
    margin-top: 6px;
    font-size: 12px;
    color: #EF4444;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%236B7280' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 44px;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.form-checkbox input {
    width: 20px;
    height: 20px;
    accent-color: var(--green-500);
}

.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.form-radio:hover {
    border-color: var(--green-400);
}

.form-radio.selected {
    border-color: var(--green-500);
    background: var(--green-50);
}

.form-radio input {
    margin-top: 4px;
    accent-color: var(--green-500);
}

.form-radio-content {
    flex: 1;
}

.form-radio-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.form-radio-desc {
    font-size: 13px;
    color: var(--gray-500);
}

/* ==================== BADGES ==================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background: var(--green-100);
    color: var(--green-700);
}

.badge-warning {
    background: #FEF3C7;
    color: #92400E;
}

.badge-danger {
    background: #FEE2E2;
    color: #991B1B;
}

.badge-info {
    background: #DBEAFE;
    color: #1E40AF;
}

.badge-gray {
    background: var(--gray-100);
    color: var(--gray-700);
}

.badge-orange {
    background: #FFF7ED;
    color: var(--orange-600);
}

/* ==================== ALERTS ==================== */
.alert {
    padding: 16px 20px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.alert-icon {
    font-size: 20px;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.alert-success {
    background: var(--green-50);
    border: 1px solid var(--green-200);
    color: var(--green-800);
}

.alert-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

.alert-warning {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
}

.alert-info {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
}

/* ==================== TABS ==================== */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 24px;
}

.tab {
    padding: 12px 20px;
    font-weight: 600;
    color: var(--gray-500);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.tab:hover {
    color: var(--gray-700);
}

.tab.active {
    color: var(--green-600);
    border-bottom-color: var(--green-500);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ==================== GRID ==================== */
.grid {
    display: grid;
    gap: 24px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ==================== STATS ==================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1000px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
    .stats-grid { grid-template-columns: 1fr; }
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat-icon.green {
    background: var(--green-100);
    color: var(--green-600);
}

.stat-icon.orange {
    background: #FFF7ED;
    color: var(--orange-500);
}

.stat-icon.blue {
    background: #DBEAFE;
    color: #2563EB;
}

.stat-icon.purple {
    background: #EDE9FE;
    color: #7C3AED;
}

.stat-info {
    flex: 1;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.stat-label {
    font-size: 13px;
    color: var(--gray-500);
}

/* ==================== APP CARD ==================== */
.app-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-card);
}

.app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.app-card-image {
    height: 160px;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.app-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-card-placeholder {
    font-size: 48px;
    color: var(--gray-400);
}

.app-card-status {
    position: absolute;
    top: 12px;
    right: 12px;
}

.app-card-content {
    padding: 20px;
}

.app-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.app-card-package {
    font-size: 12px;
    color: var(--gray-500);
    font-family: monospace;
    margin-bottom: 12px;
}

.app-card-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--gray-500);
}

.app-card-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-card-actions {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
}

/* ==================== THEME SELECTOR ==================== */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .theme-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 800px) {
    .theme-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 500px) {
    .theme-grid { grid-template-columns: repeat(2, 1fr); }
}

.theme-item {
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-fast);
}

.theme-item:hover {
    border-color: var(--green-400);
    transform: translateY(-2px);
}

.theme-item.selected {
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.theme-item-preview {
    height: 120px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--gray-400);
}

.theme-item-name {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
    background: var(--white);
}

/* ==================== STEPS ==================== */
.steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

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

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background: var(--gray-200);
    color: var(--gray-500);
}

.step.active .step-number {
    background: linear-gradient(135deg, var(--green-500), var(--green-600));
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.step.completed .step-number {
    background: var(--green-500);
    color: white;
}

.step-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-500);
}

.step.active .step-label {
    color: var(--gray-900);
}

.step.completed .step-label {
    color: var(--green-600);
}

.step-connector {
    width: 60px;
    height: 2px;
    background: var(--border-color);
    margin: 0 12px;
}

.step.completed + .step-connector {
    background: var(--green-500);
}

@media (max-width: 700px) {
    .step-label {
        display: none;
    }
    
    .step-connector {
        width: 30px;
    }
}

/* ==================== MODAL ==================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--white);
    border-radius: var(--border-radius-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
    transform: scale(0.9);
    transition: var(--transition-fast);
}

.modal-overlay.active .modal {
    transform: scale(1);
}

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

.modal-title {
    font-size: 20px;
    font-weight: 700;
}

.modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--gray-100);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.modal-close:hover {
    background: var(--gray-200);
}

.modal-body {
    padding: 24px;
}

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

/* ==================== TOAST ==================== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 16px 20px;
    background: var(--white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-icon {
    font-size: 24px;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    color: var(--gray-900);
}

.toast-message {
    font-size: 13px;
    color: var(--gray-500);
}

.toast.success .toast-icon { color: var(--green-500); }
.toast.error .toast-icon { color: #EF4444; }
.toast.warning .toast-icon { color: var(--orange-500); }

/* ==================== PRICING ==================== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
}

.pricing-card {
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    padding: 32px;
    text-align: center;
    position: relative;
}

.pricing-card.popular {
    border-color: var(--green-500);
    transform: scale(1.05);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
    color: white;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.pricing-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.pricing-price {
    font-size: 48px;
    font-weight: 800;
    color: var(--gray-900);
}

.pricing-price span {
    font-size: 16px;
    font-weight: 500;
    color: var(--gray-500);
}

.pricing-features {
    list-style: none;
    margin: 24px 0;
    text-align: left;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--gray-700);
}

.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-features .check {
    color: var(--green-500);
    font-weight: 700;
}

.pricing-features .x {
    color: #EF4444;
}

/* ==================== HERO ==================== */
.hero {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--green-50), var(--green-100));
    border: 1px solid var(--green-200);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--green-700);
    margin-bottom: 24px;
}

.hero-badge .pulse {
    width: 8px;
    height: 8px;
    background: var(--green-500);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

.hero h1 {
    font-size: 56px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 16px;
    line-height: 1.1;
}

@media (max-width: 700px) {
    .hero h1 { font-size: 36px; }
}

.hero h1 .highlight {
    background: linear-gradient(135deg, var(--green-500), var(--green-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero p {
    font-size: 20px;
    color: var(--gray-500);
    max-width: 600px;
    margin: 0 auto 40px;
}

@media (max-width: 700px) {
    .hero p { font-size: 16px; }
}

.hero-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    gap: 12px;
}

@media (max-width: 600px) {
    .hero-form { flex-direction: column; }
}

.hero-form input {
    flex: 1;
    padding: 16px 20px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: 16px;
}

.hero-form input:focus {
    outline: none;
    border-color: var(--green-500);
}

/* ==================== SHOWCASE CAROUSEL ==================== */
.showcase {
    padding: 60px 20px;
}

.showcase-header {
    text-align: center;
    margin-bottom: 40px;
}

.showcase-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 12px;
}

.showcase-header p {
    color: var(--gray-500);
    font-size: 18px;
}

.carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 20px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar {
    height: 8px;
}

.carousel::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 4px;
}

.carousel::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 4px;
}

.carousel-item {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: var(--transition-fast);
}

.carousel-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.carousel-preview {
    height: 500px;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
    position: relative;
    overflow: hidden;
}

.carousel-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-info {
    padding: 16px;
}

.carousel-name {
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.carousel-category {
    font-size: 13px;
    color: var(--gray-500);
}

/* ==================== FEATURES ==================== */
.features {
    padding: 80px 20px;
    background: var(--gray-50);
}

.features-header {
    text-align: center;
    margin-bottom: 60px;
}

.features-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 12px;
}

.features-header p {
    color: var(--gray-500);
    font-size: 18px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .features-grid { grid-template-columns: 1fr; }
}

.feature-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 32px;
    transition: var(--transition-fast);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--green-100), var(--green-200));
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
}

.feature-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 12px;
}

.feature-desc {
    color: var(--gray-500);
    line-height: 1.6;
}

/* ==================== AUTH PAGES ==================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 50%, var(--gray-50) 100%);
}

.auth-container {
    width: 100%;
    max-width: 440px;
}

.auth-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.auth-header {
    padding: 32px 32px 0;
    text-align: center;
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
    color: var(--green-600);
    margin-bottom: 24px;
}

.auth-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.auth-subtitle {
    color: var(--gray-500);
    font-size: 14px;
}

.auth-body {
    padding: 32px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    color: var(--gray-400);
    font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-footer {
    padding: 24px 32px;
    background: var(--gray-50);
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.auth-footer a {
    color: var(--green-600);
    font-weight: 600;
}

.google-btn {
    width: 100%;
    padding: 14px;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: var(--transition-fast);
}

.google-btn:hover {
    border-color: var(--gray-400);
    background: var(--gray-50);
}

.otp-inputs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 24px 0;
}

.otp-input {
    width: 56px;
    height: 64px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    transition: var(--transition-fast);
}

.otp-input:focus {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* ==================== LOADING SPINNER ==================== */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--green-500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-text {
    margin-top: 16px;
    font-weight: 600;
    color: var(--gray-700);
}

/* ==================== PROGRESS BAR ==================== */
.progress-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-400), var(--green-500));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.empty-desc {
    color: var(--gray-500);
    margin-bottom: 24px;
}

/* ==================== UTILITIES ==================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-green { color: var(--green-600); }
.text-orange { color: var(--orange-500); }
.text-gray { color: var(--gray-500); }
.text-danger { color: #EF4444; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.hidden { display: none; }
.block { display: block; }

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* ==================== ANIMATIONS ==================== */
.fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-up {
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== FILE UPLOAD ==================== */
.file-upload {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.file-upload:hover {
    border-color: var(--green-400);
    background: var(--green-50);
}

.file-upload-icon {
    font-size: 48px;
    color: var(--gray-400);
    margin-bottom: 16px;
}

.file-upload-text {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.file-upload-hint {
    font-size: 13px;
    color: var(--gray-500);
}

.file-upload input[type="file"] {
    display: none;
}

.file-preview {
    margin-top: 20px;
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-preview img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}

.file-preview-info {
    flex: 1;
}

.file-preview-name {
    font-weight: 600;
    color: var(--gray-900);
    word-break: break-all;
}

.file-preview-size {
    font-size: 12px;
    color: var(--gray-500);
}

.file-preview-remove {
    padding: 8px;
    background: none;
    border: none;
    color: #EF4444;
    cursor: pointer;
    font-size: 20px;
}

/* ==================== IMAGE CROP ==================== */
.crop-container {
    max-width: 400px;
    margin: 20px auto;
}

.crop-preview {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    border: 4px solid var(--green-500);
}

.crop-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* theme_library preview thumbnails (create-app pickers) */
.theme-item-preview img.theme-preview-img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 96px;
    object-fit: contain;
    border-radius: 8px;
    background: #0b1220;
}
.theme-item:hover .theme-item-preview img.theme-preview-img {
    transform: translateY(-2px);
}
.theme-item-preview img.theme-preview-img { transition: transform .2s ease; }

/* The auth pages wrap the mark in a green gradient tile (.auth-logo). Now that
   the real logo sits inside .logo-icon, that tile becomes a coloured frame
   around the artwork - keep the sizing, drop the fill. */
.auth-logo .logo-icon {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* ==================== LANDING PAGE (responsive) ====================
   index.php used to carry its nav/stats/steps/footer layout in inline style
   attributes. Inline declarations beat every media query, so none of those
   sections could adapt below ~700px - the four-column stats row and the
   2fr/1fr/1fr/1fr footer simply overflowed. They are classes now.
   ================================================================== */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-badge .pulse { animation: none; }
}

.land-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.land-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    position: relative;
}

.land-nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.land-nav-links .navlink {
    color: var(--gray-600);
    font-weight: 500;
    font-size: 15px;
    padding: 8px 2px;
}

.land-nav-links .navlink:hover {
    color: var(--green-600);
}

.land-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* checkbox nav - no JS needed for the mobile menu to open/close */
.land-nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.land-burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}

.land-burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--gray-700);
    transition: transform .18s ease, opacity .18s ease;
}

.land-hero {
    padding: 132px 20px 72px;
}

.land-hero .hero-copy {
    max-width: 820px;
    margin: 0 auto;
}

.land-hero h1 {
    font-size: clamp(31px, 6.4vw, 56px);
}

.land-hero p {
    font-size: clamp(15px, 2.4vw, 20px);
}

/* anchor targets must clear the fixed nav */
.land-anchor {
    scroll-margin-top: 78px;
}

.land-section {
    padding: 80px 20px;
    background: var(--white);
}

.land-section--alt {
    background: var(--gray-50);
}

.land-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.land-title {
    font-size: clamp(24px, 4.6vw, 36px);
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 10px;
    text-align: center;
}

.land-sub {
    color: var(--gray-500);
    font-size: clamp(14px, 2.2vw, 18px);
    text-align: center;
    max-width: 640px;
    margin: 0 auto 44px;
}

.land-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    text-align: center;
}

.land-stat-num {
    font-size: clamp(26px, 4.6vw, 36px);
    font-weight: 800;
    color: var(--green-600);
    line-height: 1.15;
}

.land-stat-label {
    color: var(--gray-500);
    font-size: 14px;
}

.land-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    margin-top: 20px;
}

.land-step {
    text-align: center;
}

.land-step-num {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-100), var(--green-200));
    color: var(--green-700);
    font-size: 26px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.land-step h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px;
}

.land-step p {
    color: var(--gray-500);
    font-size: 15px;
    margin: 0;
}

.land-cta {
    padding: 76px 20px;
    background: linear-gradient(135deg, var(--green-500), var(--green-600));
    text-align: center;
}

.land-cta h2 {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
}

.land-cta p {
    font-size: clamp(15px, 2.4vw, 18px);
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto 28px;
    max-width: 620px;
}

.land-faq {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.land-faq details {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md, 12px);
    padding: 4px 18px;
}

.land-faq summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--gray-800);
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.land-faq summary::-webkit-details-marker { display: none; }

.land-faq summary::after {
    content: '+';
    color: var(--green-600);
    font-size: 20px;
    line-height: 1;
}

.land-faq details[open] summary::after { content: '–'; }

.land-faq details p {
    margin: 0 0 16px;
    color: var(--gray-500);
    font-size: 15px;
    line-height: 1.65;
}

.land-foot {
    background: var(--gray-900);
    color: var(--gray-400);
    padding: 56px 20px 28px;
}

.land-foot-grid {
    max-width: 1100px;
    margin: 0 auto 36px;
    display: grid;
    grid-template-columns: 2fr minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
}

.land-foot h4 {
    color: #fff;
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
}

.land-foot ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.land-foot li { margin-bottom: 10px; }

.land-foot a {
    color: var(--gray-400);
    font-size: 15px;
}

.land-foot a:hover { color: var(--green-400); }

.land-foot-bar {
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid var(--gray-800);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 14px;
}

@media (max-width: 880px) {
    .land-burger { display: inline-flex; }

    .land-nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px 16px;
        background: var(--white);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 18px 30px rgba(17, 24, 39, 0.10);
    }

    .land-nav-toggle:checked ~ .land-nav-links { display: flex; }

    .land-nav-links .navlink {
        padding: 13px 4px;
        border-bottom: 1px solid var(--gray-100);
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .land-nav-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-top: 12px;
    }

    .land-nav-actions .btn { justify-content: center; }
    .land-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .land-steps { grid-template-columns: 1fr; gap: 26px; }
    .land-foot-grid { grid-template-columns: 1fr 1fr; }
    .land-hero { padding-top: 116px; }
}

@media (max-width: 560px) {
    .land-section { padding: 56px 16px; }
    .land-cta { padding: 56px 16px; }
    .land-foot-grid { grid-template-columns: 1fr; gap: 24px; }
    .land-hero { padding-top: 104px; padding-bottom: 56px; }
    .hero-form { gap: 10px; }
    .hero-form .btn { width: 100%; justify-content: center; }
}

/* 44px minimum touch targets on the nav row for phones */
@media (max-width: 380px) {
    .land-nav-inner { padding: 10px 14px; }
    .land-nav-links .btn-sm { padding: 11px 14px; }
}

/* ==================== CONFIRM / DANGER CARDS ==================== */
.land-narrow {
    max-width: 620px;
    margin: 0 auto;
}

.confirm-copy {
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.65;
}

.confirm-list {
    margin: 14px 0 0;
    padding-left: 20px;
    color: var(--gray-500);
    font-size: 14px;
    line-height: 1.9;
}

.btn-danger {
    background: #DC2626;
    color: #fff;
    border: none;
    box-shadow: 0 3px 0 #991B1B;
}

.btn-danger:hover { background: #B91C1C; }
.btn-danger:active { transform: translateY(2px); box-shadow: 0 1px 0 #991B1B; }

/* ==================== PROSE PAGES (faq / terms / privacy) ==================== */
.land-prose {
    max-width: 760px;
    margin: 0 auto;
}

.land-prose h2 {
    font-size: clamp(19px, 3.4vw, 24px);
    font-weight: 700;
    color: var(--gray-900);
    margin: 34px 0 10px;
}

.land-prose h2:first-of-type { margin-top: 0; }

.land-prose p,
.land-prose li {
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.75;
}

.land-prose ul {
    padding-left: 20px;
    margin: 0 0 14px;
}

.land-prose li { margin-bottom: 8px; }

.land-prose strong { color: var(--gray-800); }

.land-meta {
    color: var(--gray-400);
    font-size: 13px;
    margin-bottom: 26px;
}

.land-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green-600);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 18px;
}

.land-faq-group { margin-bottom: 30px; }

.land-faq-group-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin: 0 0 10px;
}

/* ====================================================================
   ROUND 5 - icons, mobile chrome, money pages, admin layout
   Appended rather than scattered: everything below is one system, and the
   selectors deliberately match the markup the PHP emits.
   ==================================================================== */

/* ==================== SVG ICONS ====================
   Inline stroke icons replace emoji everywhere in the chrome. They inherit the
   text colour (so an active nav row recolours the icon too), sit on the text
   baseline instead of floating, and never fall back to a system emoji font. */
.icon-svg,
.sidebar-nav-icon svg,
.admin-nav-icon svg,
.header-icon-btn svg,
.profile-menu-item svg,
.card-title svg,
.page-title svg,
.section-title svg,
.alert-icon svg,
.btn svg,
.stat-icon svg,
.empty-icon svg,
.empty-state svg,
.file-upload-icon svg,
.apk-tile svg,
.title-icon svg,
.checkout-note svg,
.referral-sub svg,
.referral-credit svg,
.ref-who svg,
.admin-callout-title svg,
.billing-quota svg,
.billing-note svg {
    display: inline-block;
    vertical-align: -0.18em;
    flex: 0 0 auto;
    pointer-events: none; /* a click must land on the link, never on the svg inside it */
}

.icon-svg-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex: 0 0 24px;
}

.title-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 7px;
    color: var(--green-600);
    vertical-align: -2px;
}

.card-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.section-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 6px;
}

/* ==================== SIDEBAR FOOTER PANELS ==================== */
.sidebar-plan {
    background: linear-gradient(135deg, var(--gray-50), #F3F4F6);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 14px;
    margin-bottom: 14px;
}

.sidebar-plan.is-paid {
    background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
    border-color: #86EFAC;
}

.sidebar-plan-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sidebar-plan-icon {
    display: inline-flex;
    color: var(--green-600);
}

.sidebar-plan-name {
    font-weight: 800;
    font-size: 13.5px;
    color: var(--gray-900);
}

.sidebar-plan-days {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-600);
    background: rgba(255, 255, 255, .75);
    border-radius: 999px;
    padding: 3px 8px;
}

.sidebar-meter-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .1);
    overflow: hidden;
}

.sidebar-meter-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--green-500), var(--green-600));
    transition: width var(--transition-normal);
}

.sidebar-meter-label {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--gray-500);
    font-weight: 600;
}

.sidebar-credits {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--green-700);
}

.sidebar-stats {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 14px;
}

.sidebar-stats-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 10px;
}

.sidebar-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sidebar-stats-num { font-size: 22px; font-weight: 800; color: var(--gray-900); line-height: 1.1; }
.sidebar-stats-cap { font-size: 11px; color: var(--gray-500); }

@media (max-width: 1024px) {
    .sidebar-nav-item { min-height: 44px; font-size: 14.5px; }
    .sidebar-footer { padding-bottom: 8px; }
}

/* ==================== BOTTOM NAV (thumb row) ====================
   The old rule centred the bar with left:50% + translateX(-50%), which on a notched
   phone fought the safe area and clipped "Settings" behind the home indicator. It is now
   a width-bounded bar with inset margins, and its own padding-bottom uses the safe area
   while .main-content keeps the page clear of it. */
.bottom-nav {
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: auto;
    max-width: 520px;
    margin: 0 auto;
    display: none;
    align-items: stretch;
    justify-content: space-between;
    gap: 2px;
    padding: 6px 8px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .16);
}

.bottom-nav-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 8px 4px;
    gap: 3px;
    font-size: 10.5px;
    letter-spacing: .01em;
}

.bottom-nav-item .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    font-size: 22px;
}

.bottom-nav-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottom-nav-dot {
    position: absolute;
    top: 2px;
    right: 50%;
    transform: translateX(16px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #EF4444;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.bottom-nav-item.create-btn {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    min-height: 46px;
    margin-top: -14px;
    border-radius: 50%;
    padding: 0;
}

@media (max-width: 1024px) {
    .bottom-nav { display: flex; }
    .main-content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* A tablet in landscape has room for the rail; the floating bar only helps on phones. */
@media (min-width: 769px) and (max-width: 1024px) {
    .bottom-nav { display: none; }
    .main-content { padding-bottom: 100px; }
}


/* ==================== TEXT / IMAGE LOCK ====================
   The app is resold to clients whose screenshots end up on other marketplaces, and
   long-pressing an icon opened the Android image viewer (a "download image" affordance
   on a logo). So: text is not selectable, images are not draggable and show no callout.
   Everything that must be usable - form fields, the referral code, the package name,
   table data a support agent needs to read - is opted back in, because a page you cannot
   copy an email out of is not a page you can work on. */
body,
.page-title,
.page-subtitle,
.card-title,
.section-title,
.card-meta,
.stat-value,
.stat-label,
.alert-content,
.land-hero h1,
.land-hero p {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

input,
textarea,
select,
[contenteditable="true"],
.allow-select,
.mono-cell,
.copy-line code,
.referral-link-input {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

img,
svg {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Icons inside a button must not become a drag target or steal the tap. */
a img, button img, .btn img { pointer-events: none; }
a svg, button svg, .btn svg { pointer-events: none; }

@media (max-width: 1024px) {
    /* A tap on the header logo should not select the word next to it. */
    .logo, .sidebar-logo { -webkit-tap-highlight-color: transparent; }
}

/* ==================== RESPONSIVE TABLES ====================
   Below 820px a table of 5-7 columns is unreadable on a phone. Each cell becomes its own
   row with the header text pulled from data-label (the markup already carries it), so the
   information order survives and no data is hidden. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.data-table thead th {
    text-align: left;
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.data-table tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--gray-700);
    vertical-align: top;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(249, 250, 251, .8); }

.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td small { display: block; margin-top: 3px; font-size: 12px; color: var(--gray-500); }
.data-table .muted { color: var(--gray-400); }
.mono-cell { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.mono-cell b { font-weight: 600; word-break: break-all; }

.empty-row { text-align: center; padding: 34px 18px !important; color: var(--gray-500); }
.empty-row svg { color: var(--gray-300); margin-bottom: 6px; }
.empty-row p { margin: 0 0 12px; line-height: 1.55; max-width: 46ch; display: inline-block; }

.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.row-actions form { margin: 0; display: inline-flex; gap: 6px; }

@media (max-width: 820px) {
    .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table tbody tr { padding: 6px 0 10px; border-bottom: 1px solid var(--border-color); }
    .data-table tbody tr:hover { background: none; }
    .data-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        padding: 7px 14px;
        border: none;
        text-align: left !important;
    }
    .data-table tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 38%;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--gray-400);
        padding-top: 2px;
    }
    .data-table tbody td .mono-cell { font-size: 11.5px; }
    .row-actions { justify-content: flex-end; flex: 1 1 auto; }
}

/* ==================== CHECKOUT / BILLING / REFERRALS ==================== */
.checkout-card { max-width: 760px; }

.checkout-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }

.checkout-plan {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    position: relative;
}

.checkout-plan:hover { transform: translateY(-1px); border-color: var(--green-300); }

.checkout-plan.selected {
    border-color: var(--green-500);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .12);
    background: linear-gradient(180deg, #F0FDF4, #FFFFFF);
}

.checkout-plan-name { font-weight: 800; color: var(--gray-900); }
.checkout-plan-price { font-size: 24px; font-weight: 800; color: var(--gray-900); line-height: 1.1; }
.checkout-plan-price small { font-size: 12px; font-weight: 600; color: var(--gray-500); }
.checkout-plan-meta { font-size: 12px; color: var(--gray-500); }

.checkout-plan-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--green-700);
    background: #DCFCE7;
    padding: 3px 8px;
    border-radius: 999px;
}

.checkout-summary {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--gray-50);
}

.checkout-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
    color: var(--gray-900);
}

.checkout-note { margin: 10px 0 0; font-size: 12.5px; color: var(--gray-500); line-height: 1.5; }
.checkout-note svg { color: var(--gray-400); }
.checkout-legal { margin: 12px 0 0; font-size: 12px; color: var(--gray-500); line-height: 1.55; }
.checkout-legal a { color: var(--green-700); font-weight: 600; text-decoration: underline; }
.checkout-error { margin: 12px 0 0; font-size: 13px; color: #B91C1C; font-weight: 600; }

.checkout-paid-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.checkout-amount { text-align: right; }
.checkout-amount strong { display: block; font-size: 28px; font-weight: 800; color: var(--gray-900); line-height: 1.1; }
.checkout-amount s { display: block; font-size: 13px; color: var(--gray-400); }
.checkout-amount small { font-size: 11.5px; color: var(--green-700); font-weight: 700; }

.hidden-form { display: none; }

.billing-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; margin-bottom: 20px; }
.billing-plan-name { font-size: 26px; font-weight: 800; margin: 0 0 4px; color: var(--gray-900); }
.billing-plan-sub { font-size: 13.5px; color: var(--gray-500); margin: 0 0 16px; line-height: 1.5; }

.billing-limits { display: grid; gap: 8px; margin: 0 0 14px; }
.billing-limits > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background: var(--gray-50);
    border-radius: var(--border-radius-md);
}
.billing-limits dt { font-size: 13px; color: var(--gray-500); font-weight: 600; }
.billing-limits dd { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--gray-900); font-variant-numeric: tabular-nums; }

.billing-quota { font-size: 13px; margin: 0; line-height: 1.5; }
.billing-quota.ok { color: var(--green-700); }
.billing-quota.blocked { color: #B91C1C; }
.billing-quota em { font-style: normal; font-weight: 700; }

.billing-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border-color);
    flex-wrap: wrap;
}
.billing-offer:last-of-type { border-bottom: none; }
.billing-offer > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.billing-offer strong { font-size: 15px; color: var(--gray-900); }
.billing-offer span { font-size: 12.5px; color: var(--gray-500); }
.billing-offer-right { display: flex; align-items: center; gap: 12px; }
.billing-offer-price { font-weight: 800; color: var(--gray-900); }
.billing-note { font-size: 12.5px; color: var(--gray-500); line-height: 1.55; margin: 14px 0 0; }
.billing-foot { font-size: 12.5px; color: var(--gray-500); padding: 12px 14px; border-top: 1px solid var(--border-color); }
.billing-foot a { color: var(--green-700); font-weight: 700; }

.referral-hero .card-body { padding: 20px; }
.referral-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.referral-sub { font-size: 13px; color: var(--gray-500); margin: 6px 0 0; line-height: 1.5; max-width: 52ch; }
.referral-sub svg { color: var(--gray-400); }

.referral-balance { text-align: center; padding: 10px 16px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: var(--border-radius-lg); }
.referral-balance-num { display: block; font-size: 30px; font-weight: 800; color: var(--green-700); line-height: 1; }
.referral-balance-cap { font-size: 11px; font-weight: 700; color: var(--green-700); text-transform: uppercase; letter-spacing: .05em; }

.referral-link-row { display: flex; gap: 10px; align-items: center; margin: 16px 0 8px; flex-wrap: wrap; }
.referral-link-input { flex: 1 1 240px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.referral-code-line { font-size: 12.5px; color: var(--gray-500); margin: 0 0 18px; }
.referral-code-line b { color: var(--gray-900); font-family: ui-monospace, Menlo, Consolas, monospace; }

.referral-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.ref-stat { padding: 12px; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); background: var(--gray-50); }
.ref-stat-num { display: block; font-size: 22px; font-weight: 800; color: var(--gray-900); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ref-stat-cap { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }

.referral-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    background: #FFFBEB;
    flex-wrap: wrap;
}
.referral-progress-copy { font-size: 13px; color: #92400E; }
.referral-progress-copy strong { font-size: 15px; }
.ref-who { display: inline-flex; align-items: center; gap: 6px; }
.ref-credit { display: inline-flex; align-items: center; gap: 5px; color: var(--green-700); font-weight: 700; }

.referral-rules { margin-top: 20px; padding: 18px 20px; background: var(--white); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); }
.referral-rules .section-title { margin-bottom: 10px; }
.referral-rules ul { margin: 0; padding-left: 18px; }
.referral-rules li { font-size: 13.5px; color: var(--gray-600); line-height: 1.65; margin-bottom: 6px; }
.referral-rules b { color: var(--gray-900); }

.credit-box {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1.5px solid #BBF7D0;
    background: linear-gradient(180deg, #F0FDF4, #FFFFFF);
    border-radius: var(--border-radius-md);
    margin-bottom: 14px;
    cursor: pointer;
}
.credit-box input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--green-600); }
.credit-box-text { display: flex; flex-direction: column; gap: 3px; }
.credit-box-text strong { font-size: 14px; color: var(--gray-900); }
.credit-box-text small { font-size: 12.5px; color: var(--gray-500); line-height: 1.5; }

.build-cta-form { display: block; }
.build-cta-meta { text-align: center; margin: 10px 0 0; font-size: 13px; color: var(--gray-500); }
.build-cta-meta a { color: var(--green-700); font-weight: 700; text-decoration: underline; }

.apk-tile {
    width: 48px;
    height: 48px;
    background: var(--green-100);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-700);
    flex: 0 0 48px;
}

/* ==================== ADMIN LAYOUT (responsive) ====================
   The admin pages each print their own <head> but all link this file, so the chrome
   lives here instead of being copy-pasted seven times. On desktop this matches the old
   fixed-rail look; below 1024px the rail becomes the drawer admin/includes/sidebar.php
   opens, and the margin goes away so the content owns the full width. */
.admin-layout { display: flex; }

.admin-main {
    flex: 1;
    margin-left: 260px;
    padding: 24px;
    min-width: 0; /* without this the table's intrinsic width beats flex and overflows */
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 1023.98px) {
    .admin-main { margin-left: 0; padding-left: 14px; padding-right: 14px; }
}

.admin-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.admin-two-col { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 1280px) { .admin-two-col { grid-template-columns: 1.45fr .95fr; } }

.admin-side-stack { display: grid; gap: 20px; align-content: start; }

.admin-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.admin-stat {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 14px 16px;
}
.admin-stat span { display: block; font-size: 24px; font-weight: 800; color: var(--gray-900); line-height: 1.1; font-variant-numeric: tabular-nums; }
.admin-stat small { font-size: 11.5px; color: var(--gray-500); font-weight: 600; }
@media (max-width: 900px) { .admin-stats-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .admin-stats-row { grid-template-columns: 1fr; } }

.admin-form { display: block; }
.admin-form .form-group { margin-bottom: 14px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .form-row-2 { grid-template-columns: 1fr; gap: 0; } }

.admin-form-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.admin-inline-note { font-size: 12.5px; color: var(--gray-500); }
.admin-readonly { margin: 0; font-size: 14px; font-weight: 700; color: var(--gray-900); }
.admin-foot-note { font-size: 12.5px; color: var(--gray-500); line-height: 1.6; margin: 12px 0 0; }
.admin-table { font-size: 13.5px; }
.admin-callout {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 14px;
    margin: 4px 0 18px;
}
.admin-callout-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--gray-700); }
.admin-callout-note { margin: 8px 0 0; font-size: 12px; color: var(--gray-500); line-height: 1.6; }
.admin-callout-note code { font-size: 11.5px; }
.admin-status-list p { display: flex; gap: 12px; font-size: 13px; margin: 0 0 8px; color: var(--gray-700); flex-wrap: wrap; }
.admin-status-key { flex: 0 0 150px; font-weight: 700; color: var(--gray-500); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 560px) { .admin-status-key { flex-basis: 100%; margin-bottom: -4px; } }

.copy-line { margin: 0; }
.copy-line code {
    display: block;
    padding: 10px 12px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12.5px;
    word-break: break-all;
    user-select: all;
    -webkit-user-select: all;
}

.switch-row,
.checkbox-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--gray-50);
    margin-bottom: 14px;
    cursor: pointer;
}
.checkbox-row { background: transparent; border: none; padding: 4px 0; margin: 6px 0 12px; font-size: 13px; color: var(--gray-600); }
.switch-row input,
.checkbox-row input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 18px; accent-color: var(--green-600); }
.switch-row-text { display: flex; flex-direction: column; gap: 3px; }
.switch-row-text strong { font-size: 14px; color: var(--gray-900); }
.switch-row-text small { font-size: 12.5px; color: var(--gray-500); line-height: 1.5; }

/* ==================== PAGE HEADER / SHARED BITS ==================== */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) {
    .page-actions { width: 100%; }
    .page-actions .btn { flex: 1 1 auto; justify-content: center; }
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--gray-400); }
.link-btn {
    border: 0;
    background: none;
    padding: 0 2px;
    color: var(--green-700);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: underline;
}
.link-btn.is-done { color: var(--gray-500); }

/* ==================== FORMS ON PHONES ====================
   iOS Safari zooms the whole page when a focused control is smaller than 16px, which is
   the single most common reason a mobile form "looks broken". */
@media (max-width: 768px) {
    .form-input,
    .form-select,
    textarea.form-input,
    #coupon,
    .referral-link-input { font-size: 16px; }
    .form-input { padding: 13px 14px; }
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }
}

.form-input.is-invalid { border-color: #FCA5A5; box-shadow: 0 0 0 3px rgba(239, 68, 68, .1); }
.form-hint.is-warn { color: #B45309; }

/* ==================== CREATE WIZARD ==================== */
.package-row { display: flex; gap: 10px; align-items: stretch; }
.package-row .form-input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
.package-row .btn { white-space: nowrap; }
.package-group .package-warn { display: none; }
.package-group:focus-within .package-warn { display: block; color: var(--gray-500); }
@media (max-width: 560px) {
    .package-row { flex-direction: column; }
    .package-row .btn { width: 100%; justify-content: center; }
}

.step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.step-nav .btn { flex: 1 1 auto; justify-content: center; min-width: 130px; }
.step-nav .btn-xl { flex: 2 1 auto; }
@media (max-width: 480px) {
    .step-nav { flex-direction: column-reverse; }
    .step-nav .btn { width: 100%; }
}

.steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: thin; }
.steps::-webkit-scrollbar { height: 4px; }

.theme-grid,
.theme-grid,
.icon-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 560px) {
    .theme-grid,
    .theme-grid,
    .icon-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
}

/* ==================== DASHBOARD / CARDS ON SMALL SCREENS ==================== */
@media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 560px) {
    .main-content { padding: 14px 12px calc(92px + env(safe-area-inset-bottom, 0px)); }
    .page-title { font-size: 21px; }
    .page-subtitle { font-size: 13px; }
    .card-body { padding: 16px; }
    .card-header { padding: 14px 16px; flex-wrap: wrap; gap: 6px; }
    .checkout-plans { grid-template-columns: 1fr; }
    .referral-stats { grid-template-columns: 1fr 1fr; }
    .referral-link-row .btn { flex: 1 1 44%; justify-content: center; }
    .billing-grid { grid-template-columns: 1fr; }
    .checkout-amount { text-align: left; }
    .alert { padding: 12px 14px; }
    .header { padding: 10px 12px; }
    .header-center { display: none; }
}

@media (max-width: 380px) {
    .bottom-nav-item { font-size: 9.5px; padding: 8px 2px; }
    .stats-grid { grid-template-columns: 1fr !important; }
}

/* Tablet portrait: the drawer needs to be thumb-reachable, so it slides over a scrim
   rather than pushing content (already the .sidebar.active behaviour) and the bottom
   nav is hidden in favour of the rail. */
@media (min-width: 769px) and (max-width: 1024px) {
    .checkout-plans { grid-template-columns: 1fr 1fr; }
    .billing-grid { grid-template-columns: 1fr; }
}

/* ==================== PRINT (invoices, from the billing page) ==================== */
@media print {
    .sidebar, .header, .bottom-nav, .sidebar-overlay, .page-actions, .btn, .loading-overlay { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; }
    .card { border: none !important; box-shadow: none !important; }
    .data-table tbody td, .data-table thead th { padding: 6px 8px; }
}

/* ==================== NOTIFICATIONS PANEL ====================
   Replaces a hardcoded `grid-template-columns: 1fr 350px` in the page: on a phone that
   left the compose form 350px wide and the history column squeezed to nothing, because
   inline styles have no media queries. */
.notif-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: start; }
.notif-history { padding: 0; max-height: 600px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.notif-list { display: grid; gap: 1px; background: var(--border-color); }
.notif-item { padding: 16px; background: var(--white); }
.notif-empty { padding: 34px 20px; text-align: center; color: var(--gray-500); font-size: 13.5px; line-height: 1.6; }
.notif-empty svg { color: var(--gray-300); margin-bottom: 10px; }

@media (max-width: 1100px) {
    .notif-layout { grid-template-columns: minmax(0, 1fr); }
    .notif-history { max-height: 460px; }
}
@media (max-width: 560px) {
    .notif-item { padding: 13px 14px; }
    .notif-history { max-height: none; } /* the page scrolls; a nested scroller on touch is a trap */
}

/* Fix for the emoji-to-icon swap: a lone svg inside a stat tile needs to stay on the
   tile's grid line instead of centring itself. */
.stat-icon { display: inline-flex; align-items: center; justify-content: center; }
.stat-icon svg { width: 20px; height: 20px; }
.empty-icon svg { width: 40px; height: 40px; }
.empty-state svg { color: var(--gray-300); }
.file-upload-icon svg { width: 24px; height: 24px; color: var(--gray-400); }

/* ==================== AUTH PAGES ON MOBILE ====================
   The login/register cards are max-width-limited; on a 360px screen the padding and the
   OTP row are what break, not the column width. */
@media (max-width: 560px) {
    .auth-wrapper, .auth-container { padding: 20px 14px 40px; }
    .auth-card { border-radius: var(--border-radius-lg); box-shadow: none; }
    .auth-card .card-body { padding: 20px 18px; }
    .auth-actions, .form-row-buttons { flex-direction: column-reverse; gap: 10px; }
    .auth-actions .btn, .form-row-buttons .btn { width: 100%; justify-content: center; }
    .otp-inputs { gap: 6px; }
    .otp-input { width: 100%; min-width: 0; font-size: 18px; padding: 12px 4px; }
}

/* ==================== LANDings/LEGAL: long-form reading on phones ==================== */
/* Classes the landing and legal pages emit but that never had a rule: the hero note
   under the URL field, the prose wrapper on terms/privacy/faq, and the two long-form
   text blocks. The .land-* layout itself is already responsive above (nav collapse at
   880px, single-column steps and stats at 560px), so nothing is overridden here - these
   are the pieces that were simply unstyled and rendered as browser-default text. */
.land-body { font-size: 15px; line-height: 1.75; color: var(--gray-600); max-width: 76ch; }
.land-body p { margin: 0 0 14px; }
.land-body h2, .land-body h3 { color: var(--gray-900); margin: 26px 0 10px; line-height: 1.3; }
.land-body h3 { font-size: 17px; margin-top: 22px; }
.land-body ul { margin: 0 0 14px; padding-left: 20px; }
.land-body li { margin-bottom: 7px; }
.land-body a { color: var(--green-700); font-weight: 600; text-decoration: underline; }

.land-hero-note { font-size: 13px; color: var(--gray-500); margin: 12px 0 0; line-height: 1.55; }
.land-hero-note b { color: var(--gray-700); }

.faq-answer { font-size: 14.5px; color: var(--gray-600); line-height: 1.7; }
.faq-answer p { margin: 0 0 10px; }
.faq-icon { color: var(--green-600); display: inline-flex; }
.category-content { min-width: 0; }

.empty-state-title { font-size: 17px; font-weight: 800; color: var(--gray-900); margin: 10px 0 6px; }
.empty-state-text { font-size: 14px; color: var(--gray-500); line-height: 1.6; margin: 0 auto; max-width: 54ch; }
.checkout-form { display: block; }

@media (max-width: 768px) {
    .land-body { font-size: 14.5px; }
    .land-body h2 { font-size: 21px; }
}

/* Tables inside pricing / showcase cards on a phone scroll sideways instead of
   overflowing the card and pushing the whole page wide. */
.card > .table-wrap, .card-body > .table-wrap { margin: 0 -16px; }
.card-body .data-table { min-width: 520px; }
@media (min-width: 821px) {
    .card > .table-wrap, .card-body > .table-wrap { margin: 0; }
    .card-body .data-table { min-width: 0; }
}

/* Toasts: the JS in includes/footer.php builds them; on a phone they used to sit under
   the bottom nav and the emoji icons rendered as raw boxes on Android WebView. */
@media (max-width: 768px) {
    .toast-container { left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); top: auto; }
    .toast { max-width: none; width: auto; }
}
.toast-icon { display: inline-flex; align-items: center; justify-content: center; }
.toast-icon svg { width: 18px; height: 18px; }

/* Anything that would otherwise be a horizontal-scroll cause on a narrow screen. */
img, video, iframe, table, pre, code { max-width: 100%; }
pre { overflow-x: auto; }
.main-content, .admin-main { min-width: 0; }

/* Landing bits added with the live-pricing rewrite */
.pricing-blurb { font-size: 13px; color: var(--gray-500); margin: 4px 0 0; line-height: 1.5; }
.hero-btn-icon { display: inline-flex; align-items: center; }
.showcase-theme-icon {
    display: flex; align-items: center; justify-content: center;
    height: 96px; color: var(--green-600);
}
.showcase-theme-icon svg { width: 44px; height: 44px; }

/* Pricing-page additions from the live-catalog rewrite */
.pricing-card.is-current { border-color: var(--green-300); box-shadow: 0 0 0 3px rgba(34, 197, 94, .08); }
.pricing-badge-current { background: var(--gray-900); color: #fff; display: inline-flex; align-items: center; gap: 5px; }

.land-callout {
    margin-top: 26px;
    padding: 16px 18px;
    background: #F0FDF4;
    border: 1px dashed #86EFAC;
    border-radius: var(--border-radius-lg);
}
.land-callout p { margin: 0; font-size: 14px; color: var(--green-800); line-height: 1.6; }
.land-callout svg { vertical-align: -3px; color: var(--green-600); }

.land-cta-note { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 0; }
.land-cta-note .btn { flex: 1 1 auto; justify-content: center; min-width: 190px; }