:root{
  --bg-1: linear-gradient(180deg,#f6fbff 0%,#eef6ff 100%);
  --bg-2: linear-gradient(180deg,#f3f9ff 0%,#ffffff 100%);
  --card-bg: #ffffff;
  --text-1: #0f172a;
  --muted: #64748b;
  --accent: #0b74ff;
  --surface-border: #e6eefc;
  --provider-bg: #eef2ff;
  --error-bg: #fff1f0;
  --error-border: #fecaca;
  --shadow: 0 12px 30px rgba(2,6,23,0.08);
  --glass: rgba(255,255,255,0.6);
  --radius: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Dark theme variables */
.ln-page.dark,
.ln-page.dark * {
  --bg-1: linear-gradient(180deg,#071227 0%,#08132a 100%);
  --bg-2: linear-gradient(180deg,#061426 0%,#07162b 100%);
  --card-bg: #071026;
  --text-1: #e6eef6;
  --muted: #9aa6b2;
  --accent: #22c55e;
  --surface-border: rgba(255,255,255,0.06);
  --provider-bg: rgba(255,255,255,0.03);
  --error-bg: rgba(255,50,50,0.06);
  --error-border: rgba(255,50,50,0.18);
  --shadow: 0 12px 30px rgba(2,6,23,0.6);
  --glass: rgba(255,255,255,0.03);
}

/* Page layout */
.ln-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-1);
  padding:48px 20px;
  color:var(--text-1);
}

/* Card */
.ln-card{
  width:900px;
  max-width:96%;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:var(--card-bg);
  display:flex;
  overflow:hidden;
  border:1px solid var(--surface-border);
}

/* Left / Right */
.ln-left{
  flex:1.1;
  padding:42px;
  background:var(--bg-2);
}
.ln-right{
  flex:0.9;
  padding:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
}

/* Branding / text */
.ln-title{
  font-size:22px;
  font-weight:700;
  color:var(--text-1);
  margin-bottom:6px;
}
.ln-sub{
  color:var(--muted);
  font-size:13px;
  margin-bottom:18px;
}

/* Providers */
.provider-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:8px 0 20px 0;
}
.provider-btn{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--surface-border);
  background:var(--card-bg);
  cursor:pointer;
  font-weight:700;
  color:var(--text-1);
  transition:transform .12s ease, box-shadow .12s ease;
}
.provider-btn:focus, .provider-btn:hover {
  outline:none;
  transform:translateY(-4px);
  box-shadow:0 20px 30px rgba(3,10,30,0.12);
}
.provider-icon{
  width:42px;
  height:42px;
  border-radius:8px;
  background:var(--provider-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-1);
  font-weight:800;
  font-size:16px;
  flex-shrink: 0;
}
.provider-icon svg{
  width:24px;
  height:24px;
}
.provider-icon-text{
  width:42px;
  height:42px;
  border-radius:8px;
  background:var(--provider-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-1);
  font-weight:800;
  font-size:16px;
  flex-shrink: 0;
}

/* Divider */
.divider{
  height:1px;
  background:var(--surface-border);
  margin:22px 0;
  border-radius:2px;
}

/* Form */
.form-control{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--surface-border);
  background:transparent;
  color:var(--text-1);
  font-size:14px;
  box-sizing:border-box;
}
.form-control:focus{
  outline:none;
  box-shadow:0 6px 18px rgba(3,10,30,0.06);
  border-color:var(--accent);
}

/* Primary button */
.submit{
  background:linear-gradient(90deg,var(--accent), #0b5fe0);
  color:#fff;
  padding:12px 16px;
  border-radius:10px;
  border:none;
  font-weight:800;
  cursor:pointer;
  width:100%;
  box-shadow:0 8px 24px rgba(11,92,255,0.12);
  transition:transform .12s ease, box-shadow .12s ease;
}
.submit:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(11,92,255,0.16); }

/* Muted / error */
.muted{ color:var(--muted); font-size:13px; }
.error{
  background:var(--error-bg);
  border:1px solid var(--error-border);
  color:var(--text-1);
  padding:12px;
  border-radius:10px;
  margin-bottom:12px;
  display:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
}

/* Responsive */
@media (max-width:900px){
  .ln-card{flex-direction:column;width:94%;}
  .ln-right{order:2;padding:24px;}
  .ln-left{order:1;padding:24px;}
}

/* Modal & misc */
.modal-back{position:fixed;inset:0;background:rgba(2,6,23,0.6);display:none;align-items:center;justify-content:center;z-index:60;transition:opacity .18s ease}
.modal-back.open{display:flex;opacity:1}
.modal{background:var(--card-bg);padding:18px;border-radius:8px;width:520px;max-width:92%;box-shadow:0 20px 40px rgba(2,6,23,0.15);opacity:0;transform:translateY(8px);transition:opacity .18s ease, transform .18s ease;display:flex;flex-direction:column}
.modal-back.open .modal{opacity:1;transform:translateY(0)}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.provider-btn[disabled], .provider-btn[aria-disabled="true"]{opacity:0.5;cursor:not-allowed}
.provider-icon.large{width:56px;height:56px;border-radius:8px}
.error .close{background:transparent;border:none;font-weight:800;color:#601a1a;cursor:pointer}

/* small visual helpers */
.ln-right img{max-width:230px;}

/* theme toggle small styles */
#themeToggle, .theme-btn{ 
  padding:8px; 
  border-radius:8px; 
  font-weight:700; 
  background:transparent; 
  border:1px solid var(--surface-border); 
  color:var(--text-1); 
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
#themeToggle:hover, .theme-btn:hover{ 
  background:var(--provider-bg); 
}
.theme-icon {
  width:20px;
  height:20px;
  transition:opacity .2s ease, transform .2s ease;
}
.sun-icon {
  display:block;
}
.moon-icon {
  display:none;
}
.ln-page.dark .sun-icon {
  display:none;
}
.ln-page.dark .moon-icon {
  display:block;
}

/* accessibility focus */
.provider-btn:focus-visible, .submit:focus-visible, #themeToggle:focus-visible, .theme-btn:focus-visible { outline:3px solid rgba(34,197,94,0.16); outline-offset:3px; }

/* helper: hide elements */
.hidden{ display:none !important; }