/* ================================================
   Modal Overlay — full-screen backdrop for modals
   ================================================ */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.25); z-index: 190; display: none; opacity: 0; transition: opacity 0.3s;
}
.modal-overlay.active { display: block; opacity: 1; }

/* ================================================
   Custom Popup — centered dialog (confirm, input, preset, app-log)
   ================================================ */
.custom-popup {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9);
    background: var(--surface); backdrop-filter: blur(50px) saturate(200%); -webkit-backdrop-filter: blur(50px) saturate(200%);
    padding: 32px; border-radius: 12px; width: 85%; max-width: 320px; z-index: 300;
    box-shadow: 0 30px 80px rgba(0,0,0,0.2); border: 1px solid var(--border);
    text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.custom-popup.active { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); }

.popup-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 12px; color: var(--text); letter-spacing: -0.5px; }
.popup-desc { font-size: 1rem; opacity: 0.7; margin-bottom: 32px; color: var(--text); line-height: 1.5; }
.popup-actions { display: flex; gap: 12px; justify-content: center; }
.popup-btn { flex: 1; padding: 16px; border-radius: 12px; font-weight: 700; border: none; cursor: pointer; font-size: 1rem; transition: all 0.2s; }
.btn-cancel { background: rgba(0,0,0,0.05); color: var(--text); }
.btn-confirm { background: var(--danger); color: white; box-shadow: 0 8px 20px rgba(255, 59, 48, 0.3); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3); }

.power-prompt-opt {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 16px; font-size: 0.85rem; opacity: 0.7; color: var(--text);
    cursor: pointer; user-select: none;
}
.power-prompt-opt input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.power-prompt-opt:hover { opacity: 1; }
.power-prompt-note { margin-top: 14px; font-size: 0.78rem; opacity: 0.55; color: var(--text); }

.input-row { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; }
.popup-input { width: 100px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); text-align: center; font-size: 1.1rem; font-weight: 700; background: rgba(255,255,255,0.5); font-family: inherit; }

.solver-selection { display: flex; gap: 10px; margin-bottom: 20px; background: rgba(0,0,0,0.05); padding: 6px; border-radius: 12px; }
.solver-opt { flex: 1; padding: 12px; border-radius: 10px; border: none; cursor: pointer; background: transparent; color: var(--text); font-weight: 600; opacity: 0.6; transition: all 0.2s; display: flex; flex-direction: column; gap: 4px; }
.solver-opt span { font-size: 0.7rem; font-weight: 400; opacity: 0.8; }
.solver-opt.active { background: var(--surface); color: var(--primary); opacity: 1; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

.coffee-popup {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 300; display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.3);
}
.coffee-popup.active { display: flex; }
.coffee-card {
    background: #fef6e4; border-radius: 20px; padding: 32px; text-align: center;
    width: 85%; max-width: 340px; position: relative;
    border: 1px solid rgba(255,149,0,0.2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    opacity: 0; transition: opacity 0.15s ease;
}
.coffee-popup.active .coffee-card { opacity: 1; }
.coffee-icon-wrap { margin-bottom: 6px; }
.coffee-cup { width: 48px; height: 48px; }
.coffee-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 10px; color: #3d2b1f; }
.coffee-text { font-size: 0.9rem; line-height: 1.6; opacity: 0.7; margin-bottom: 24px; color: #3d2b1f; }
.coffee-actions { display: flex; flex-direction: column; gap: 10px; }
.coffee-btn-primary {
    padding: 16px; border-radius: 14px; font-weight: 700; font-size: 1rem; border: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #ff9500, #ff6b00); color: #fff;
    box-shadow: 0 8px 24px rgba(255,149,0,0.35);
}
.coffee-btn-secondary {
    padding: 14px; border-radius: 14px; font-weight: 600; font-size: 0.95rem; border: none;
    cursor: pointer; background: transparent; color: #3d2b1f; opacity: 0.5;
}
.coffee-btn-secondary:hover { opacity: 1; background: rgba(0,0,0,0.05); }

/* ================================================
   Update Modal — forced update prompt (must layer above loading screen)
   ================================================ */
#update-modal { z-index: 10000; }
.update-progress-wrap { margin-bottom: 24px; }
.update-progress-track { height: 8px; border-radius: 4px; background: rgba(0,0,0,0.08); overflow: hidden; margin-bottom: 8px; }
.update-progress-fill { height: 100%; width: 0; border-radius: 4px; background: var(--primary); transition: width 0.2s ease; }
.update-progress-label { font-size: 0.8rem; opacity: 0.6; color: var(--text); font-weight: 600; }