/* ── Toola Login Gate ─────────────────────────────────────────────────────── Odstránenie: zmazať tento súbor + import v index.html ──────────────────────────────────────────────────────────────────────── */ /* Landing page is visible before login; gate appears on demand. */ #login-gate { display: none; position: fixed; inset: 0; z-index: 99999; background: linear-gradient(135deg, #1a252f 0%, #2c3e50 60%, #0d7a72 100%); align-items: center; justify-content: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .lg-card { background: #ffffff; border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); padding: 48px 40px 40px; width: 100%; max-width: 420px; box-sizing: border-box; text-align: center; animation: lg-fadein 0.3s ease; } @keyframes lg-fadein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .lg-logo { width: 56px; height: 56px; background: linear-gradient(135deg, #11b1a3, #0d8a7e); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 26px; color: white; font-weight: 700; letter-spacing: -1px; } .lg-title { font-size: 22px; font-weight: 700; color: #2c3e50; margin: 0 0 6px; } .lg-subtitle { font-size: 14px; color: #7f8c8d; margin: 0 0 28px; } .lg-input { width: 100%; box-sizing: border-box; padding: 13px 16px; border: 1.5px solid #dfe6e9; border-radius: 8px; font-size: 15px; color: #2c3e50; outline: none; transition: border-color 0.2s; margin-bottom: 14px; } .lg-input:focus { border-color: #11b1a3; box-shadow: 0 0 0 3px rgba(17, 177, 163, 0.12); } .lg-login-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #95a5a6; font-size: 13px; } .lg-login-divider::before, .lg-login-divider::after { content: ''; flex: 1; height: 1px; background: #dfe6e9; } .lg-btn { width: 100%; padding: 13px; background: linear-gradient(135deg, #11b1a3, #0d8a7e); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.1s; letter-spacing: 0.2px; } .lg-btn:hover { opacity: 0.9; } .lg-btn:active { transform: scale(0.98); } .lg-btn:disabled { opacity: 0.6; cursor: not-allowed; } .lg-btn-secondary { background: transparent; color: #11b1a3; border: 1.5px solid #11b1a3; margin-top: 10px; } .lg-btn-secondary:hover { background: rgba(17,177,163,0.07); opacity: 1; } .lg-back-btn { margin-top: 12px; } /* ── Stavy panelu ── */ .lg-panel-icon { font-size: 48px; margin-bottom: 16px; } .lg-sent-title, .lg-error-title { font-size: 20px; font-weight: 700; color: #2c3e50; margin: 0 0 8px; } .lg-sent-text, .lg-error-text { font-size: 14px; color: #7f8c8d; line-height: 1.6; margin: 0 0 24px; } #lg-error-msg { display: block; color: #e74c3c; font-size: 13px; margin-top: 8px; min-height: 18px; } /* Loading spinner */ .lg-spinner { width: 40px; height: 40px; border: 3px solid #ecf0f1; border-top-color: #11b1a3; border-radius: 50%; animation: lg-spin 0.8s linear infinite; margin: 8px auto 20px; } @keyframes lg-spin { to { transform: rotate(360deg); } } /* Pätička */ .lg-footer { margin-top: 28px; font-size: 12px; color: #b2bec3; }