@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { margin:0; padding:0; box-sizing:border-box; font-family:"Poppins", sans-serif; text-decoration:none; list-style:none; }

/* LOGIN / REGISTER */
.sx-login { display:flex; justify-content:center; align-items:center; min-height:100vh; background: transparent !important; position:relative; isolation:isolate; padding: max(16px, env(safe-area-inset-top)) 16px; }
.sx-login::before { content:''; position: fixed; inset: 0; background: #1E1E1E; z-index: 0; }
.sx-login .container { position: relative; z-index: 1; }
body.sx-login-page { background: #1E1E1E !important; background-image: none !important; }
html:has(body.sx-login-page) { background: #1E1E1E !important; }

.sx-login .sx-alert{ background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35); color:#fecaca; padding:.6rem .8rem; border-radius:10px; margin:0 0 12px; }
.sx-login .sx-alert.ok{ background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.35); color:#bbf7d0; }

.sx-login .container { position:relative; width:clamp(320px, 92vw, 850px); height:550px; background: rgba(0,0,0,0.3); backdrop-filter: blur(8px); margin:0; border-radius:30px; box-shadow:0 0 30px rgba(0,0,0,0.2); overflow:hidden; }
.sx-login h1 { font-size:36px; margin:-10px 0; color:#fff; }
.sx-login p { font-size:14.5px; margin:15px 0; color:#fff; }
.sx-login form { width:100%; background:transparent; border:none; padding:0; margin:0; }

/* Forms */
.sx-login .form-box { position:absolute; right:0; width:50%; height:100%; background:transparent; display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; padding:40px; z-index:20; transition: .6s ease-in-out; }
.sx-login .container.active .form-box { right:50%; }
.sx-login .form-box.register { opacity:0; pointer-events:none; }
.sx-login .container.active .form-box.register { opacity:1; pointer-events:auto; }
.sx-login .container.active .form-box.login { opacity:0; pointer-events:none; }

/* Overlay sweep — ABOVE forms but NOT clickable */
.sx-login .toggle-box { position:absolute; width:100%; height:100%; z-index:30; pointer-events:none; }
.sx-login .toggle-box::before { content:''; position:absolute; left:-250%; top:0; width:300%; height:100%; background:#000; border-radius:150px; z-index:30; transition:1.8s ease-in-out; pointer-events:none !important; }
.sx-login .container.active .toggle-box::before { left:50%; }

/* Panels: text above sweep; only their buttons accept clicks */
.sx-login .toggle-panel { position:absolute; width:50%; height:100%; color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:32; transition:.6s ease-in-out; padding:20px; pointer-events:none; text-align:center; }
.sx-login .toggle-panel .btn { pointer-events:auto; position:relative; z-index:33; }
.sx-login .toggle-panel.toggle-left { left:0; transition-delay:1.2s; }
.sx-login .container.active .toggle-panel.toggle-left { left:-50%; transition-delay:.6s; }
.sx-login .toggle-panel.toggle-right { right:-50%; transition-delay:.6s; }
.sx-login .container.active .toggle-panel.toggle-right { right:0; transition-delay:1.2s; }
.sx-login .toggle-panel p { margin-bottom:20px; }
.sx-login .toggle-panel .btn { width:160px; height:46px; background:transparent; border:2px solid #fff; box-shadow:none; }

/* Inputs clickable priority */
.sx-login .input-box { position:relative; margin:30px 0; width:min(520px, 100%); z-index:40; }
.sx-login .input-box input { width:100%; padding:13px 50px 13px 20px; background: rgba(255,255,255,0.3); border-radius:8px; border:none; outline:none; font-size:16px; color:#fff; font-weight:500; position:relative; z-index:41; }
.sx-login .input-box input::placeholder { color:#fff; font-weight:400; }
.sx-login .input-box i { position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:20px; color:#fff; z-index:41; }
.sx-login .forgot-link { margin:-15px 0 15px; z-index:41; position:relative; }
.sx-login .forgot-link a { font-size:14.5px; color:#fff; }
.sx-login .btn { width:min(520px, 100%); height:48px; background:#000; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,.1); border:none; cursor:pointer; font-size:16px; color:#fff; font-weight:600; position:relative; z-index:41; }

.sx-login .social-icons { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.sx-login .social-icons a { display:inline-flex; padding:10px; font-size:24px; color:#fff; transition: color .3s ease; }
.sx-login .social-icons a:hover { color:#7E0D0D; }

/* PHONE: vertical slide + extra breathing room */
@media (max-width: 650px){
  .sx-login { padding: max(12px, env(safe-area-inset-top)) 12px; }
  .sx-login .container { height: 100dvh; border-radius:22px; }

  .sx-login .form-box { left:0; right:auto; top:0; width:100%; height:100%; padding: 36px 24px; z-index:20; transform: translateY(0); }
  .sx-login .form-box.login { transform: translateY(0); opacity:1; pointer-events:auto; padding-top: 62%; padding-bottom: 24px; }
  .sx-login .form-box.register { transform: translateY(2.4rem); opacity:0; pointer-events:none; padding-top: 24px; padding-bottom: 62%; }
  .sx-login .container.active .form-box.login { transform: translateY(-2.4rem); opacity:0; pointer-events:none; }
  .sx-login .container.active .form-box.register { transform: translateY(0); opacity:1; pointer-events:auto; }

  .sx-login .toggle-box::before { top:-260%; left:0; width:100%; height:320%; border-radius:150px; z-index:30; pointer-events:none !important; }
  .sx-login .container.active .toggle-box::before { top:60%; left:0; }

  .sx-login .toggle-panel { width:100%; height:34%; left:0; padding:16px; transition:opacity .35s ease, transform .35s ease; z-index:32; pointer-events:none; text-align:center; }
  .sx-login .toggle-panel .btn { pointer-events:auto; }
  .sx-login .toggle-panel.toggle-left { top:0; left:0; opacity:1; transform: translateY(0); }
  .sx-login .toggle-panel.toggle-right { bottom:0; right:auto; opacity:0; transform: translateY(12px); }
  .sx-login .container.active .toggle-panel.toggle-left { opacity:0; transform: translateY(-12px); }
  .sx-login .container.active .toggle-panel.toggle-right { opacity:1; transform: translateY(0); }
}

/* ACCOUNT */
.sx-shell{ display:grid; grid-template-columns: 82px 1fr; gap:1rem; max-width: 1400px; margin: 2rem auto; padding: 0 1rem; color:#e5e7eb; }
.sx-surface{ background: rgba(17,17,17,.55); border:1px solid rgba(255,255,255,.08); border-radius:16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.5); }

.sx-sidebar{ position: sticky; top: 12px; height: calc(100vh - 24px); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:12px; }
.sx-brand{ width:100%; display:flex; align-items:center; justify-content:center; padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.06); }
.sx-brand img{ max-width: 48px; max-height:48px; object-fit:contain; }
.sx-brand-fallback{ font-weight:700; letter-spacing:1px; }

.sx-nav{ display:flex; flex-direction:column; gap:8px; align-items:stretch; width:100%; padding:12px 4px; }
.sx-nav-item{ display:flex; align-items:center; justify-content:center; gap:10px; padding:10px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#e5e7eb; cursor:pointer; }
.sx-nav-item span{ display:none; }
.sx-nav-item.active, .sx-nav-item:hover{ background: radial-gradient(120% 120% at 0% 0%, rgba(120,72,24,.18) 0%, rgba(0,0,0,.12) 60%, rgba(255,255,255,.06) 100%); border-color: rgba(120,72,24,.45); }

.sx-social{ display:flex; gap:10px; padding:8px; }
.sx-social a{ color:#e5e7eb; opacity:.9; }
.sx-social a:hover{ opacity:1; }

@media (min-width: 1100px){
  .sx-shell{ grid-template-columns: 220px 1fr; }
  .sx-nav-item{ justify-content:flex-start; padding:10px 12px; }
  .sx-nav-item span{ display:inline; font-size:.95rem; }
  .sx-brand img{ max-width: 120px; max-height:40px; }
}

.sx-main{ min-height:70vh; }
.sx-hero{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; padding: 1rem; gap:.75rem; }
.sx-hero-title{ margin:0; font-size:1.75rem; letter-spacing:.2px; }
.sx-hero-sub{ color:#9ca3af; }
.sx-badge{ display:inline-block; padding:.2rem .6rem; border-radius:9999px; font-size:.85rem; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); }
.sx-badge.tier-none{ color:#e5e7eb; border-color: rgba(120,72,24,.35); }
.sx-badge.tier-basic{ color:#a5b4fc; border-color: rgba(99,102,241,.35); }
.sx-badge.tier-plus{ color:#86efac; border-color: rgba(34,197,94,.35); }
.sx-badge.tier-pro{ color:#fca5a5; border-color: rgba(239,68,68,.35); }
.sx-badge.sx-trial{ color:#fde68a; border-color: rgba(217,119,6,.45); }

.sx-pane{ display:none; }
.sx-pane.active{ display:block; }

.sx-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1rem; }
.sx-card{ padding:1rem; }
.sx-card-title{ margin:0 0 .75rem; font-weight:600; }
.sx-row{ display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px dashed rgba(255,255,255,.06); }
.sx-row:last-child{ border-bottom:0; }
.sx-actions-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.sx-muted{ color:#9ca3af; margin-top:.75rem; }

.sx-empty{ padding:1rem; text-align:center; color:#9ca3af; }
.sx-notes{ list-style:none; padding:0; display:grid; gap:1rem; }
.sx-note-item{ padding: .85rem; border-radius:14px; }
.sx-note-meta{ display:flex; align-items:center; justify-content:space-between; color:#9ca3af; font-size:.95rem; margin-bottom:.4rem; }
.sx-note-text{ white-space:pre-wrap; color:#e5e7eb; background:transparent; margin:0; }
.sx-iconbtn{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#e5e7eb; border-radius:10px; padding:.35rem .55rem; cursor:pointer; }
.sx-iconbtn:hover{ background:rgba(255,255,255,.08); }

.sx-card-list{ display:grid; gap:1rem; }
.sx-download{ display:flex; align-items:center; justify-content:space-between; padding:1rem; border-radius:14px; text-decoration:none; color:#e5e7eb; }
.sx-download-title{ font-weight:600; }
.sx-download-sub{ color:#9ca3af; font-size:.95rem; }

@media (max-width: 900px){
  .sx-grid{ grid-template-columns: 1fr; }
  .sx-hero-title{ font-size:1.4rem; }
}

/* Pointer fixes — ensure overlays never block typing/clicks */
.sx-login .toggle-box,
.sx-login .toggle-box::before,
.sx-login .toggle-panel { pointer-events: none !important; }
.sx-login .toggle-panel .btn,
.sx-login .form-box,
.sx-login .form-box *,
.sx-login .input-box input,
.sx-login .btn,
.sx-login .forgot-link a { pointer-events: auto !important; }
.sx-login .toggle-box::before { z-index: 10; }
.sx-login .toggle-panel { z-index: 12; }
.sx-login .form-box { z-index: 20; }
.sx-login .input-box,
.sx-login .input-box input,
.sx-login .btn,
.sx-login .forgot-link { position: relative; z-index: 30; }