/* Editor Layout */
.editor-layout { display:flex; height:100vh; background:var(--bg-dark); overflow:hidden; }

/* Sidebar */
.sidebar { width:260px; min-width:260px; background:rgba(15,12,25,0.95); border-right:1px solid var(--border-glass); display:flex; flex-direction:column; z-index:10; }
.sidebar__header {  }
.sidebar__logo {
    font-family: var(--font-script);
    font-size: 1.5rem;
    color: var(--accent);
    line-height: 0;
    padding: 17px 15px;
    border-bottom: 1px solid #212027;
}
.sidebar__logo a {    display: inline-block;line-height: 0;}
.sidebar__logo a img {height: 20px;}
.sidebar__subtitle { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:2px; }
.sidebar__pages { flex:1; overflow-y:auto; padding:12px; }
.sidebar__empty { text-align:center; padding:32px 16px; color:var(--text-muted); font-size:0.85rem; }
.sidebar__empty-icon { font-size:2.5rem; margin-bottom:12px; opacity:0.4; }
.sidebar__footer { padding:12px; border-top:1px solid var(--border-glass); }

.page-card { padding:12px 14px; border-radius:var(--radius-md); cursor:pointer; transition:all 0.2s; margin-bottom:4px; border:1px solid transparent; position:relative; }
.page-card:hover { background:var(--bg-card); border-color:var(--border-glass); }
.page-card--active { background:rgba(244,160,181,0.08); border-color:rgba(244,160,181,0.2); }
.page-card__name { font-size:0.9rem; font-weight:500; }
.page-card__url { font-size:0.72rem; color:var(--text-muted); font-family:monospace; }
.page-card__delete { position:absolute; top:8px; right:8px; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.8rem; padding:4px; border-radius:4px; opacity:0; transition:all 0.2s; }
.page-card:hover .page-card__delete { opacity:1; }
.page-card__delete:hover { color:var(--danger); }
.badge-premium {display: inline-block;font-size: 0.5rem;font-weight: 500;background: #ffd700;color: #333;border: 1px solid #ffd700;padding: 1px 6px;border-radius: 10px;margin-left: 6px;text-transform: uppercase;vertical-align: middle;}
.btn-new-page { width:100%; padding:10px; background:linear-gradient(135deg,rgba(244,160,181,0.15),rgba(244,160,181,0.05)); border:1px dashed rgba(244,160,181,0.3); border-radius:var(--radius-md); color:var(--accent); font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.2s; font-family:var(--font-body); }
.btn-new-page:hover { background:linear-gradient(135deg,rgba(244,160,181,0.25),rgba(244,160,181,0.1)); border-color:var(--accent); box-shadow:var(--shadow-glow); }

/* Editor Panel */
.editor-panel { width:420px; min-width:380px; background:rgba(12,10,22,0.98); border-right:1px solid var(--border-glass); display:flex; flex-direction:column; overflow:hidden; }
.editor-panel__header { padding:16px 20px; border-bottom:1px solid var(--border-glass); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.editor-panel__title { font-size:0.95rem; font-weight:600; }
.editor-panel__body { flex:1; overflow-y:auto; padding:16px 20px; }

/* Template selector */
.template-selector { padding:12px 20px; border-bottom:1px solid var(--border-glass); display:flex; align-items:center; gap:10px; }
.template-selector label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.template-selector select { width: 80%; flex:1; padding:6px 10px; background:var(--bg-card); border:1px solid var(--border-glass); border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.85rem; font-family:var(--font-body); cursor:pointer; outline:none; }
.template-selector select:focus { border-color:var(--accent); }

/* Language manager */
.lang-manager { padding:12px 20px; border-bottom:1px solid var(--border-glass); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lang-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; background:rgba(244,160,181,0.08); border:1px solid rgba(244,160,181,0.15); border-radius:20px; font-size:0.72rem; font-weight:600; text-transform:uppercase; color:var(--accent); }
.lang-badge__remove { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.65rem; padding:0 2px; }
.lang-badge__remove:hover { color:var(--danger); }
.btn-add-lang { padding:3px 10px; border:1px dashed var(--border-glass); border-radius:20px; background:none; color:var(--text-muted); font-size:0.72rem; cursor:pointer; transition:all 0.2s; font-family:var(--font-body); }
.btn-add-lang:hover { border-color:var(--accent); color:var(--accent); }

/* Section blocks */
.section-block { margin-bottom:8px; border-radius:var(--radius-md); border:1px solid var(--border-glass); overflow:hidden; transition:border-color 0.2s; }
.section-block:hover { border-color:var(--border-glass-hover); }
.section-block--open { border-color:rgba(244,160,181,0.15); }
.section-block__header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; cursor:pointer; user-select:none; background:var(--bg-card); transition:background 0.2s; }
.section-block__header:hover { background:rgba(255,255,255,0.04); }
.section-block__header-left { display:flex; align-items:center; gap:10px; }
.section-block__icon { font-size:1.1rem; width:28px; text-align:center; }
.section-block__label { font-size:0.85rem; font-weight:500; }
.section-block__header-right { display:flex; align-items:center; gap:8px; }
.section-block__toggle-icon { font-size:0.7rem; color:var(--text-muted); transition:transform 0.2s; }
.section-block--open .section-block__toggle-icon { transform:rotate(180deg); }
.section-block__body { display:none; padding:14px; border-top:1px solid var(--border-glass); animation:fadeIn 0.25s ease-out; }
.section-block--open .section-block__body { display:block; }

/* Toggle switch */
.toggle-switch { position:relative; width:36px; height:20px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-switch__slider { position:absolute; inset:0; background:var(--slate-700); border-radius:10px; cursor:pointer; transition:background 0.2s; }
.toggle-switch__slider::before { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; background:var(--text-primary); border-radius:50%; transition:transform 0.2s; }
.toggle-switch input:checked+.toggle-switch__slider { background:var(--accent); }
.toggle-switch input:checked+.toggle-switch__slider::before { transform:translateX(16px); }

/* Form elements */
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:0.75rem; color:var(--text-secondary); margin-bottom:4px; font-weight:500; }
.form-group input[type="text"],.form-group input[type="date"],.form-group input[type="time"],.form-group input[type="url"],.form-group textarea,.form-group select { width:100%; padding:8px 12px; background:rgba(255,255,255,0.03); border:1px solid var(--border-glass); border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.85rem; font-family:var(--font-body); transition:all 0.2s; outline:none; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow); }
.form-group textarea { resize:vertical; min-height:60px; }
.form-row { display:flex; gap:10px; flex-wrap:wrap; }
.form-row .form-group { flex:1; min-width:0; }
/* Safari fix: date/time inputs inside flex containers */
.form-group input[type="date"],
.form-group input[type="time"] {
    min-width:0;
    width:100%;
    -webkit-appearance:none;
    appearance:none;
    box-sizing:border-box;
}

/* Upload zone */
.upload-zone { border:2px dashed var(--border-glass); border-radius:var(--radius-md); padding:20px; text-align:center; cursor:pointer; transition:all 0.2s; position:relative; overflow:hidden; }
.upload-zone:hover { border-color:var(--accent); background:rgba(244,160,181,0.03); }
.upload-zone__icon { font-size:1.5rem; margin-bottom:6px; opacity:0.5; }
.upload-zone__text { font-size:0.78rem; color:var(--text-muted); }
.upload-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-zone__preview { width:100%; height:120px; object-fit:cover; border-radius:var(--radius-sm); }

/* Gallery grid */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.gallery-item { position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border-glass); }
.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gallery-item__remove { position:absolute; top:4px; right:4px; width:20px; height:20px; background:rgba(0,0,0,0.7); border:none; border-radius:50%; color:#fff; font-size:0.65rem; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.2s; }
.gallery-item:hover .gallery-item__remove { opacity:1; }

/* Repeater items */
.repeater-item { padding:10px; background:rgba(255,255,255,0.02); border:1px solid var(--border-glass); border-radius:var(--radius-sm); margin-bottom:8px; position:relative; }
.repeater-item__remove { position:absolute; top:8px; right:8px; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.75rem; }
.repeater-item__remove:hover { color:var(--danger); }
.btn-add-item { width:100%; padding:8px; background:transparent; border:1px dashed var(--border-glass); border-radius:var(--radius-sm); color:var(--text-muted); font-size:0.8rem; cursor:pointer; transition:all 0.2s; font-family:var(--font-body); }
.btn-add-item:hover { border-color:var(--accent); color:var(--accent); }

/* Buttons */
.btn { padding:8px 18px; border-radius:var(--radius-sm); font-size:0.82rem; font-weight:500; cursor:pointer; transition:all 0.2s; border:1px solid transparent; font-family:var(--font-body); display:inline-flex; align-items:center; gap:6px; }
.btn--primary { background:linear-gradient(135deg,var(--rose-500),var(--rose-600)); color:#fff; border:none; }
.btn--primary:hover { background:linear-gradient(135deg,var(--rose-400),var(--rose-500)); box-shadow:0 4px 16px rgba(244,63,94,0.3); }
.btn--ghost {padding: 8px; background:transparent; color:var(--text-secondary); }
.btn--ghost:hover { color:var(--text-primary); }
.btn--sm { padding: 6px 12px; font-size:0.75rem;}

/* Preview panel */
.preview-panel { flex:1; display:flex; flex-direction:column; background:var(--slate-900); position:relative; }
.preview-panel__header { padding:10px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border-glass); background:rgba(15,23,42,0.8); backdrop-filter:blur(8px); position:relative; z-index:10; }
.preview-panel__url-bar { flex:1; max-width:500px; min-width:0; padding:6px 12px; background:rgba(255,255,255,0.05); border:1px solid var(--border-glass); border-radius:20px; font-size:0.78rem; color:var(--text-muted); font-family:monospace; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preview-panel__url-bar .lock-icon { color:var(--success); font-size:0.7rem; flex-shrink:0; }
.preview-panel__url-bar span#previewUrl { overflow:hidden; text-overflow:ellipsis; }
.preview-panel__actions { display:flex; align-items:center; gap:8px; }
.preview-mode-select { padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border-glass); background: var(--bg); color: var(--text); font-size: 0.85rem; outline: none; cursor: pointer; }
.preview-popup { position: absolute; top: calc(100% + 8px); right: 0; background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(10px); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 12px; min-width: 180px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 100; flex-direction: column; }
.preview-panel__frame-wrap { flex:1; position:relative; overflow:hidden; }
.preview-panel__frame-wrap iframe { width:100%; height:100%; border:none; background:#fff; }

/* Empty state */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; padding:40px; }
.empty-state__icon { font-size:4rem; margin-bottom:16px; animation:float 3s ease-in-out infinite; }
.empty-state__title { font-family:var(--font-display); font-size:1.6rem; color:var(--text-primary); margin-bottom:8px; }
.empty-state__desc { font-size:0.9rem; color:var(--text-muted); max-width:400px; line-height:1.7; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:1000; animation:fadeIn 0.2s ease-out; }
.modal { background:var(--slate-900); border:1px solid var(--border-glass); border-radius:var(--radius-lg); padding:28px; width:400px; max-width:90vw; animation:fadeInUp 0.3s ease-out; box-shadow:var(--shadow-lg); }
.modal__title { font-weight: 400; font-size:1.3rem; margin-bottom:16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

/* Custom Bank Select */
.bank-select { position: relative; width: 100%; user-select: none; }
.bank-select__trigger {color: #000; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: border-color 0.2s; }
.bank-select__trigger:hover { border-color: var(--accent); }
.bank-select__dropdown {color: #000; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: 6px; z-index: 100; display: none; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; }
.bank-select.open .bank-select__dropdown { display: block; }
.bank-select__search:focus,.bank-select__search:active,.bank-select__search:target {--text-primary: #000;}
.bank-select__search { width: 100%; padding: 12px; border: none; border-bottom: 1px solid #f0f0f0; background: #fafafa; font-size: 0.85rem; outline: none;color: #000; }
.bank-select__options-wrap { max-height: 250px; overflow-y: auto; }
.bank-select__option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; font-size: 0.85rem; border-bottom: 1px solid #f0f0f0; }
.bank-select__option:last-child { border-bottom: none; }
.bank-select__option:hover { background: #fafafa; color: var(--accent); }
.bank-select__option img, .bank-select__trigger img { height: 24px; width: 40px; object-fit: contain; }
.bank-select__search {background-color: #ffffff !important;border-bottom: 1px solid #dcdcdc !important;border-radius: 0 !important;}
/* Auth Modal Beauty */
.auth-overlay { background: rgba(10, 8, 20, 0.85); backdrop-filter: blur(12px); }
.auth-modal { background: linear-gradient(180deg, var(--slate-900) 0%, rgba(15,12,25,0.98) 100%); border: 1px solid rgba(244,160,181,0.2); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), 0 0 30px rgba(244,160,181,0.05); border-radius: var(--radius-xl); padding: 40px 32px; width: 420px; text-align: center; overflow: hidden; position: relative; }
.auth-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--rose-400), var(--accent), var(--rose-400)); }
.auth-modal__header { margin-bottom: 30px; }
.auth-modal__icon { font-size: 3rem; margin-bottom: 16px; animation: float 4s ease-in-out infinite; }
.auth-modal__title { font-family: var(--font-display); font-size: 2rem; color: var(--rose-50); margin-bottom: 8px; font-weight: 600; }
.auth-modal__subtitle { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; padding: 0 10px; }

.auth-group { text-align: left; margin-bottom: 20px; }
.auth-group label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; display: block; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-icon { position: absolute; left: 16px; font-size: 1.1rem; opacity: 0.5; transition: opacity 0.3s; z-index: 1;}
.auth-input-wrap input { width: 100%; padding: 14px 16px 14px 44px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-glass); border-radius: var(--radius-md); color: var(--text-primary); font-size: 1rem; transition: all 0.3s; position: relative; z-index: 0; }
.auth-input-wrap input:focus { background: rgba(255,255,255,0.05); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); outline: none; }
.auth-input-wrap input:focus ~ .auth-icon, .auth-input-wrap input:not(:placeholder-shown) ~ .auth-icon { opacity: 1; color: var(--accent); }

.auth-actions { display: flex; flex-direction: column; gap: 0; margin-top: 32px; align-items: stretch; }
.auth-btn-primary { width: 100%; padding: 14px; font-size: 1rem; font-weight: 600; border-radius: var(--radius-md); justify-content: center; letter-spacing: 0.5px; background: linear-gradient(135deg, var(--rose-500), var(--rose-600)); transition: all 0.3s; box-shadow: 0 4px 15px rgba(244,63,94,0.2); border: none; color: white; cursor: pointer; }
.auth-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(244,63,94,0.3); background: linear-gradient(135deg, var(--rose-400), var(--rose-500)); }
.auth-btn-primary:active { transform: translateY(0); }

.auth-divider { display: flex; align-items: center; margin: 20px 0; color: var(--text-muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 1px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-glass); }
.auth-divider span { padding: 0 14px; opacity: 0.6; }

.auth-btn-toggle { width: 100%; padding: 12px; font-size: 0.85rem; justify-content: center; border-radius: var(--radius-md); border: 1px transparent; color: var(--rose-600); transition: all 0.3s; background: transparent; cursor: pointer; }
.auth-btn-toggle:hover { color: var(--accent); border-color: rgba(244,160,181,0.4); background: rgba(244,160,181,0.05); }

/* Mobile Bottom Navigation */
.mobile-bottom-nav { display: none; }

@media (max-width: 768px) {
    .editor-layout { flex-direction: column; position: relative; height: 100dvh; }
    
    /* Full width for all panels */
    .sidebar, .editor-panel, .preview-panel {
        width: 100%;
        min-width: 100%;
        /* Use dynamic viewport height (dvh) for Safari, fallback to vh */
        height: calc(100vh - 60px);
        height: calc(100dvh - calc(60px + env(safe-area-inset-bottom, 0px)));
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease-in-out;
        z-index: 1;
    }
    
    /* View State Handling */
    .editor-layout.mobile-view-pages .sidebar { opacity: 1; pointer-events: auto; z-index: 10; }
    .editor-layout.mobile-view-editor .editor-panel { opacity: 1; pointer-events: auto; z-index: 10; }
    .editor-layout.mobile-view-preview .preview-panel { opacity: 1; pointer-events: auto; z-index: 10; }
    
    /* Fix preview panel header */
    .preview-panel__header { padding: 10px 12px; gap: 8px; }
    .preview-panel__actions { width: auto; }
    .preview-mode-select { margin-right: 0; }
    .preview-panel__url-bar { padding: 6px 10px; }
    
    /* Bottom Navigation Styles */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        min-height: 60px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(15,12,25,0.98);
        border-top: 1px solid var(--border-glass);
        z-index: 100;
        backdrop-filter: blur(10px);
    }
    .mobile-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text-muted);
        font-family: var(--font-body);
        font-size: 0.65rem;
        gap: 4px;
        cursor: pointer;
        transition: color 0.2s;
    }
    .mobile-nav-icon { font-size: 1.2rem; filter: grayscale(1); opacity: 0.7; transition: all 0.2s; }
    .mobile-nav-btn.active { color: var(--accent); }
    .mobile-nav-btn.active .mobile-nav-icon { filter: grayscale(0); opacity: 1; }
    
    /* Adjust modal for mobile */
    .modal { width: 95vw; padding: 20px; }
}