/* ========================================
   HORIZON SUITE — Login/Register Page
   assets/css/pages/horizon-suite-login.css
======================================== */

.hsl-page { background:linear-gradient(168deg,#0b1120 0%,#070a14 55%,#05070d 100%); color:#fff; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
.hsl-page::before { content:''; position:fixed; inset:0; background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px); background-size:24px 24px; pointer-events:none; }

.hsl-main { flex:1; display:flex; align-items:center; justify-content:center; padding:6rem 2rem 3rem; position:relative; z-index:1; }
.hsl-card { width:100%; max-width:420px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:2.5rem; }

/* Tabs */
.hsl-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:2rem; position:relative; }
.hsl-tab { flex:1; text-align:center; padding:.85rem 0; font-size:.85rem; font-weight:600; color:rgba(255,255,255,.35); cursor:pointer; background:none; border:none; transition:color .2s; }
.hsl-tab.active { color:#fff; }
.hsl-tab-indicator { position:absolute; bottom:-1px; height:2px; background:#10b981; transition:left .2s, width .2s; border-radius:1px; }

/* Panels */
.hsl-panel { display:none; }
.hsl-panel.active { display:block; }
.hsl-panel-title { font-family:'DM Sans',sans-serif; font-size:1.3rem; font-weight:700; margin-bottom:.5rem; }
.hsl-panel-desc { font-size:.85rem; color:rgba(255,255,255,.4); margin-bottom:1.75rem; line-height:1.55; }

/* Fields */
.hsl-field { margin-bottom:1.15rem; }
.hsl-field label { display:block; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.4); margin-bottom:.4rem; }
.hsl-field-wrap { position:relative; }
.hsl-field input { width:100%; font-family:inherit; font-size:.9rem; padding:.8rem 1rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:10px; color:#fff; outline:none; transition:border-color .25s; }
.hsl-field input:focus { border-color:rgba(16,185,129,.3); }
.hsl-toggle-pw { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:rgba(255,255,255,.3); padding:4px; }
.hsl-toggle-pw svg { width:18px; height:18px; }

/* Password strength */
.hsl-strength { display:flex; gap:4px; margin-top:.5rem; }
.hsl-strength-bar { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.06); transition:background .3s; }
.hsl-strength-bar.weak { background:#ef4444; }
.hsl-strength-bar.good { background:#eab308; }
.hsl-strength-bar.strong { background:#10b981; }
.hsl-strength-label { font-size:.62rem; color:rgba(255,255,255,.3); margin-top:.3rem; }

/* Button */
.hsl-submit { width:100%; padding:.85rem; border-radius:100px; background:transparent; color:#fff; font-family:'DM Sans',sans-serif; font-size:.9rem; font-weight:600; border:1.5px solid rgba(255,255,255,.2); cursor:pointer; transition:all .35s; margin-top:.5rem; }
.hsl-submit:hover { border-color:#10b981; color:#10b981; }
.hsl-submit:disabled { opacity:.4; cursor:not-allowed; }

/* Links */
.hsl-links { display:flex; justify-content:center; gap:1.5rem; margin-top:1.25rem; }
.hsl-links a { font-size:.75rem; color:rgba(255,255,255,.3); text-decoration:none; transition:color .3s; }
.hsl-links a:hover { color:#10b981; }

/* Banner */
.hsl-banner { border-radius:10px; padding:1rem 1.25rem; margin-bottom:1.25rem; font-size:.84rem; font-weight:500; }
.hsl-banner--error { background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.15); color:#f87171; }
.hsl-banner--success { background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.2); color:#10b981; }
.hsl-banner--info { background:rgba(59,130,246,.06); border:1px solid rgba(59,130,246,.15); color:#60a5fa; }

/* Back link */
.hsl-back { text-align:center; margin-top:1.5rem; }
.hsl-back a { font-size:.75rem; color:rgba(255,255,255,.25); text-decoration:none; }
.hsl-back a:hover { color:#10b981; }

/* Responsive */
@media(max-width:480px) { .hsl-card{padding:1.75rem;border-radius:16px} .hsl-main{padding:5rem 1rem 2rem} }