:root{
  --auth-bg:#f2f2f7;
  --auth-text:rgba(13,17,30,.92);
  --auth-muted:rgba(34,42,66,.76);
  --auth-border:rgba(0,0,0,.08);
  --auth-border-soft:rgba(0,0,0,.10);
  --auth-accent:#2f7cf6;
  --auth-accent-hover:#256de0;
  --auth-btn-bg:#ffffff;
  --auth-btn-bg-hover:#eef2f6;
  --auth-btn-border:#d1d5db;
  --auth-btn-text:#1f2937;
  --auth-btn-text-hover:#1f2937;
  --auth-primary-bg:#1d4ed8;
  --auth-primary-bg-hover:#1e40af;
  --auth-primary-border:#1e40af;
  --auth-card-bg:#ffffff;
  --auth-input-bg:#f6f7fb;
  --auth-alert-bg:#f6f7fb;
  --auth-shadow:0 10px 30px rgba(0,0,0,.10);
}

html[data-theme="dark"]{
  --auth-bg:#0b0b0d;
  --auth-text:rgba(241,245,255,.95);
  --auth-muted:rgba(218,226,245,.84);
  --auth-border:rgba(255,255,255,.08);
  --auth-border-soft:rgba(255,255,255,.12);
  --auth-accent:#5b9cff;
  --auth-accent-hover:#4a8dff;
  --auth-btn-bg:#1c1c1e;
  --auth-btn-bg-hover:color-mix(in srgb, var(--auth-btn-bg) 84%, #fff 16%);
  --auth-btn-border:rgba(255,255,255,.16);
  --auth-btn-text:rgba(156,163,175,1);
  --auth-btn-text-hover:#ffffff;
  --auth-primary-bg:#2563eb;
  --auth-primary-bg-hover:#1d4ed8;
  --auth-primary-border:#3b82f6;
  --auth-card-bg:#1c1c1e;
  --auth-input-bg:#20232a;
  --auth-alert-bg:#20232a;
  --auth-shadow:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
.hidden{display:none !important}
body.auth-modern{
  margin:0;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size:16px;
  line-height:1.5;
  color:var(--auth-text);
  position:relative;
  min-height:100dvh;
  overflow-x:hidden;
  background:var(--auth-bg);
}

html[data-theme="dark"] body.auth-modern{
  background:var(--auth-bg);
}

.auth-landscape{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.auth-landscape-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transition:opacity .24s ease;
}

.auth-landscape .landscape-night{opacity:0}
.auth-landscape .landscape-day{opacity:1}

html[data-theme="dark"] .auth-landscape .landscape-day{opacity:0}
html[data-theme="dark"] .auth-landscape .landscape-night{opacity:1}

.auth-page{
  position:relative;
  overflow:hidden;
}

a{color:inherit}

.auth-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  height:50px;
  border:0;
  background:transparent;
}

.auth-topbar-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
}

.auth-topbar-left{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.auth-burger-slot{
  width:40px;
  height:40px;
  flex:0 0 40px;
}

.auth-topbar-actions{display:flex;gap:10px;align-items:center}

.auth-topbar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  margin-left:8px;
}

.auth-topbar-brand .logo{
  width:32px;
  height:32px;
  border-radius:9px;
}

.auth-topbar-brand .name{
  font-weight:600;
  font-size:1.25rem;
  line-height:1.75rem;
  letter-spacing:normal;
  color:var(--auth-text);
}

@media (min-width:640px){
  .auth-topbar-brand .name{
    font-size:1.5rem;
    line-height:2rem;
  }
}

.auth-btn,
.auth-btn-primary,
.auth-btn-outline{
  border-radius:14px;
  border:1px solid transparent;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.auth-btn{
  font-weight:400;
  padding:10px 13px;
  background:var(--auth-btn-bg);
  color:var(--auth-btn-text);
  border-color:var(--auth-btn-border);
}
.auth-btn:hover{
  color:var(--auth-btn-text-hover);
  background:var(--auth-btn-bg-hover);
}
.auth-btn-primary{padding:12px 14px;width:100%;background:var(--auth-primary-bg);color:#fff;border-color:var(--auth-primary-border);box-shadow:none}
.auth-btn-primary:hover{background:var(--auth-primary-bg-hover)}
.auth-btn-outline{padding:11px 14px;width:100%;background:var(--auth-input-bg);border-color:var(--auth-border-soft);color:var(--auth-text)}
.auth-btn-outline:hover{background:color-mix(in srgb, var(--auth-input-bg) 88%, #000 12%)}

html[data-theme="dark"] .auth-btn{
  background:var(--auth-btn-bg);
  border-color:var(--auth-btn-border);
  color:var(--auth-btn-text);
}

html[data-theme="dark"] .auth-btn:hover{
  color:var(--auth-btn-text-hover);
  background:var(--auth-btn-bg-hover);
}

html[data-theme="dark"] .auth-btn-outline:hover{
  background:color-mix(in srgb, var(--auth-input-bg) 90%, #fff 10%);
}

html[data-theme="dark"] .auth-btn-primary:hover{
  background:var(--auth-primary-bg-hover);
}

#themeToggleBtn{
  width:36px;
  height:36px;
  border-radius:9999px;
  border:1px solid var(--auth-border-soft);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--auth-muted);
  background:var(--auth-card-bg);
  backdrop-filter:blur(12px) saturate(120%);
}

#themeToggleBtn:hover{background:color-mix(in srgb, var(--auth-card-bg) 82%, #fff 18%);color:var(--auth-text)}

#themeIconSun,
#themeIconMoon{
  width:20px;
  height:20px;
}

.auth-shell{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:78px 16px 24px;
  position:relative;
  z-index:1;
}

.auth-grid{
  width:min(480px,100%);
  display:block;
}

.auth-card{
  border:1px solid var(--auth-border);
  background:var(--auth-card-bg);
  border-radius:18px;
  box-shadow:var(--auth-shadow);
  padding:24px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  position:relative;
  overflow:hidden;
  z-index:1;
}

.auth-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"] .auth-card{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

html[data-theme="dark"] .auth-card::before{
  background:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.auth-logo{width:30px;height:30px;border-radius:8px;display:block}
.auth-brand-text{font-size:33px;font-weight:700;letter-spacing:-.02em}
.auth-heading{margin:4px 0 6px;font-size:40px;line-height:1.08;letter-spacing:-.03em}
.auth-sub{margin:0 0 14px;color:var(--auth-muted);font-size:14px}

.auth-switch-line{
  margin:0 0 14px;
  color:var(--auth-muted);
  font-size:16px;
}

.auth-switch-line button{
  border:none;
  background:none;
  color:var(--auth-accent);
  cursor:pointer;
  font-weight:600;
  font-size:inherit;
  padding:0;
}

.auth-pane{display:none}
.auth-pane.active{display:block}

.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-label{font-size:13px;font-weight:600;color:var(--auth-text);margin:2px 0 -4px}
.auth-input{
  width:100%;height:48px;padding:0 14px;border-radius:15px;
  border:1px solid var(--auth-border-soft);background:var(--auth-input-bg);
  color:var(--auth-text);font-size:14px;
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.auth-input::placeholder{color:color-mix(in srgb, var(--auth-muted) 94%, var(--auth-text) 6%)}
.auth-input:hover{border-color:color-mix(in srgb, var(--auth-accent) 24%, var(--auth-border-soft));background:var(--auth-input-bg)}
.auth-input:focus{outline:none;border-color:color-mix(in srgb, var(--auth-accent) 55%, var(--auth-border-soft));box-shadow:0 0 0 3px color-mix(in srgb, var(--auth-accent) 24%, transparent);background:var(--auth-input-bg)}

html[data-theme="dark"] .auth-input:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--auth-accent) 30%, transparent);
}

.auth-divider{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--auth-muted);font-size:13px}
.auth-divider::before,.auth-divider::after{content:"";height:1px;background:var(--auth-border);flex:1}

.auth-links{display:flex;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.auth-link{background:none;border:none;padding:0;color:var(--auth-accent);font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}

.auth-social-list{display:flex;flex-direction:column;gap:10px}
.auth-social-button{
  width:100%;
  min-height:46px;
  border:1px solid var(--auth-border);
  border-radius:10px;
  background:var(--auth-surface);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
}

.auth-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.auth-inline-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:2px;
}

.auth-check{
  display:flex;
  align-items:center;
  gap:8px;
  color:color-mix(in srgb, var(--auth-muted) 88%, var(--auth-text) 12%);
  font-size:14px;
}

.auth-check input{
  width:16px;
  height:16px;
  border:1px solid var(--auth-border);
}

.auth-dev-row{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.auth-dev-row .auth-btn{
  flex:1;
  font-weight:500;
}

.auth-msg{font-size:13px;line-height:1.4;min-height:18px;margin-top:10px;color:var(--auth-muted)}
.auth-msg.ok{color:#16a34a}
.auth-msg.err{color:#dc2626}

.auth-aside{
  min-height:460px;
  border-radius:20px;
  border:1px solid var(--auth-border);
  background:linear-gradient(180deg, color-mix(in srgb, var(--auth-surface-2) 92%, transparent), color-mix(in srgb, var(--auth-surface) 96%, transparent));
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.auth-aside-blob{position:absolute;border-radius:999px;filter:blur(36px);opacity:.35}
.auth-aside-blob.b1{width:220px;height:220px;background:#60a5fa;top:-40px;left:-40px}
.auth-aside-blob.b2{width:180px;height:180px;background:#93c5fd;bottom:20px;right:30px}
.auth-aside-figure{width:min(520px,90%);padding:24px 0 30px;display:flex;justify-content:center;align-items:center}
.auth-aside-figure img{width:100%;max-width:470px;opacity:.96}

.tg-wrap{
  margin-bottom:8px;
  border:0;
  border-radius:0;
  background:transparent;
  min-height:0;
  padding:0;
}

#tg-widget{
  width:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:10px;
  color:var(--auth-muted);
  font-size:15px;
}

#tg-widget iframe{
  max-width:100%;
}

.tg-login-preview{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:500;
}

.tg-login-icon,
.tg-login-preview svg{
  width:18px;
  height:18px;
  color:currentColor;
}

.tg-widget-mount{display:flex;justify-content:center;align-items:center;min-height:0}

.tg-domain-alert{
  border:1px solid color-mix(in srgb, #f59e0b 42%, var(--auth-border-soft));
  background:color-mix(in srgb, #f59e0b 10%, var(--auth-alert-bg));
  color:color-mix(in srgb, #f59e0b 72%, var(--auth-text));
  border-radius:12px;
  padding:10px 12px;
  margin-top:8px;
  font-size:13px;
  line-height:1.35;
}

.auth-aside{display:none !important}
.cf-turnstile{margin-top:4px}

@media (max-width: 1024px){
  .auth-grid{max-width:480px}
  .auth-brand-text{font-size:28px}
  .auth-heading{font-size:36px}
}

@media (max-width: 640px){
  .auth-topbar-inner{padding:0 16px}
  .auth-burger-slot{display:none}
  .auth-topbar-brand{margin-left:0;gap:10px}
  .auth-shell{padding:64px 10px 14px}
  .auth-grid{width:100%}
  .auth-card{padding:18px 16px;border-radius:18px}
  .auth-heading{font-size:34px;line-height:1.08}
  .auth-row-2{grid-template-columns:1fr}
  .auth-aside{display:none}
}

@media (min-width: 641px) and (max-width: 1023px){
  .auth-burger-slot{display:none}
  .auth-topbar-brand{margin-left:0}
}

@media (min-width: 1024px){
  .auth-topbar-inner{padding:0 20px 0 12px}
  .auth-burger-slot{display:none}
}

@media (min-width: 640px){
  .auth-topbar-brand .name{
    font-size:24px;
    line-height:2rem;
  }
}