/* ── MODAL PERSONAL EPG ─────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 3000; display: none; align-items: center; justify-content: center; } .modal-overlay.visible { display: flex; } .modal-card { background: var(--surface); border: 1px solid var(--border-bright); padding: 28px; width: 100%; max-width: 420px; margin: 16px; } .modal-title { font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; } .modal-subtitle { font-size: 12px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.5; } .modal-field { margin-bottom: 14px; } .modal-field label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; } .modal-field input { width: 100%; background: var(--surface2); border: 1px solid var(--border-bright); color: var(--text-bright); font-family: var(--font-mono); font-size: 12px; padding: 9px 10px; outline: none; transition: border-color 0.15s; } .modal-field input:focus { border-color: var(--accent); } .modal-field input::placeholder { color: var(--text-dim); opacity: 0.4; } .modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; } .modal-btn-cancel { background: none; border: 1px solid var(--border-bright); color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 16px; cursor: pointer; transition: border-color 0.15s; } .modal-btn-cancel:hover { border-color: var(--text-dim); color: var(--text); } .modal-btn-apply { background: var(--accent); border: none; color: #000; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 20px; cursor: pointer; transition: opacity 0.15s; } .modal-btn-apply:hover { opacity: 0.85; }