/* ==========================================================================
   科技熊 · 深空终端 — auth re-skin (login / register / password reset / token)
   Override layer loaded AFTER Metronic bundle. Scoped under .login so it only
   touches auth pages. Form markup unchanged; this only re-skins.
   ========================================================================== */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/theme/deepspace/fonts/spacegrotesk.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+2074,U+20AC,U+2212,U+2215;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/theme/deepspace/fonts/jetbrainsmono.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+2074,U+20AC,U+2212,U+2215;}

:root{--bg:#07080C;--bg-elev:#0C0E16;--panel:#11141F;--hair:rgba(255,255,255,.08);
  --text:#EAEEF7;--muted:#8A93A6;--cyan:#38E1FF;--iris:#6E7BFF;--mint:#34F5C5;--gold:#E8C37A;
  --fsans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --fmono:"JetBrains Mono",ui-monospace,Menlo,monospace;}

body#kt_body{background:var(--bg)!important;font-family:var(--fsans)!important;color:var(--text)}

/* ---- deepspace field (replaces purple bg image; inline bg removed in head.tpl) ---- */
.login.login-1 .bgi-size-cover{background:var(--bg)!important;position:relative;overflow:hidden}
.kjx-bgfx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.kjx-bgfx .grid{position:absolute;inset:0;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:54px 54px;opacity:.3;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%)}
.kjx-bgfx .au{position:absolute;border-radius:50%;filter:blur(100px)}
.kjx-bgfx .a1{width:680px;height:560px;left:28%;top:-220px;background:radial-gradient(circle,rgba(42,59,255,.5),transparent 62%)}
.kjx-bgfx .a2{width:560px;height:460px;left:52%;top:-120px;background:radial-gradient(circle,rgba(0,224,255,.32),transparent 60%)}
.kjx-bgfx .a3{width:480px;height:400px;left:-120px;top:42%;background:radial-gradient(circle,rgba(110,123,255,.2),transparent 60%)}

/* ---- glass card (the existing .login-form becomes the card) ---- */
.login.login-1 .login-form{position:relative;z-index:2;width:100%!important;max-width:440px;
  border:1px solid var(--hair);border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent),rgba(12,14,22,.72);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  padding:42px 38px 34px!important;margin:24px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .login.login-1 .login-form{background:#0e1119}
}

/* ---- brand mark + kicker ---- */
.login .kjx-logo img{height:62px;width:auto}
.login .kjx-kicker{font-family:var(--fmono);font-size:11px;letter-spacing:3px;color:var(--cyan);margin-top:14px}

/* ---- headings / text ---- */
.login h3{color:var(--text)!important;font-weight:800;letter-spacing:-.5px;font-size:24px}
.login .text-white{color:var(--text)!important}
.login .opacity-70,.login .text-muted{color:var(--muted)!important;opacity:1}

/* ---- inputs ---- */
.login .form-control{height:52px!important;border:1px solid var(--hair)!important;border-radius:13px!important;
  background:var(--bg-elev)!important;color:var(--text)!important;font-size:15px;padding:0 18px!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:border-color .2s,box-shadow .2s;opacity:1!important}
.login .form-control::placeholder{color:#6b7488!important;opacity:1}
.login .form-control:focus{border-color:var(--cyan)!important;box-shadow:0 0 0 3px rgba(56,225,255,.14)!important;background:var(--bg-elev)!important}
.login select.form-control,.login .input-group-append .btn{border-radius:13px!important}

/* ---- primary action buttons (login / register / reset / token) ---- */
.login #login_submit,.login #register_submit,.login #reset_submit,.login #token_submit{
  display:flex!important;align-items:center;justify-content:center;width:100%;height:52px;line-height:1;
  color:#04121b!important;font-weight:700!important;border:none!important;border-radius:13px!important;
  background:linear-gradient(120deg,var(--cyan),var(--iris))!important;box-shadow:0 10px 30px rgba(56,225,255,.3)!important;
  padding:0 28px!important;transition:transform .2s,box-shadow .2s}
.login #login_submit:hover,.login #register_submit:hover,.login #reset_submit:hover,.login #token_submit:hover{
  transform:translateY(-1px);box-shadow:0 14px 40px rgba(56,225,255,.45)!important}

/* ---- secondary / ghost buttons (telegram login, etc.) ---- */
.login .btn-outline-white{display:flex!important;align-items:center;justify-content:center;height:52px;line-height:1;
  color:var(--text)!important;border:1px solid var(--hair)!important;background:transparent!important;
  border-radius:13px!important;font-weight:600!important;padding:0 22px!important}
.login .btn-outline-white:hover{border-color:rgba(255,255,255,.25)!important;background:rgba(255,255,255,.03)!important;color:var(--text)!important}

/* ---- login page: stack 登录 / 或 / Telegram full-width (override inline nowrap) ---- */
.login #login_submit{margin:0 0 12px}
.login #login_submit + span{display:block;color:var(--muted)!important;font-size:12px;margin:0 0 12px}
.login [data-target="#telegram-login-modal"]{width:100%;margin:0}

/* ---- verify-code button + email postfix select (register) ---- */
.login .btn-outline-code{color:var(--cyan)!important;border:1px solid var(--hair)!important;
  background:rgba(56,225,255,.06)!important;border-radius:13px!important;opacity:1!important;font-weight:600!important}

/* ---- checkbox ---- */
.login .checkbox > span{background:var(--bg-elev)!important;border:1px solid var(--cyan)!important;border-radius:5px}
.login .checkbox > input:checked ~ span{background:rgba(56,225,255,.16)!important}
.login .checkbox > input:checked ~ span:after{border-color:var(--cyan)!important}

/* ---- links / separators ---- */
.login a.text-white,.login .font-weight-bold a,.login a.font-weight-bold{color:var(--cyan)!important}
.login a.text-white:hover{color:#7eeaff!important}

/* ---- telegram modal -> dark ---- */
.login .modal-content,#telegram-login-modal .modal-content{background:var(--panel)!important;border:1px solid var(--hair)!important;color:var(--text)!important;border-radius:18px}
#telegram-login-modal .modal-header,#telegram-login-modal .modal-footer{border-color:var(--hair)!important}
#telegram-login-modal .modal-title{color:var(--cyan)!important}
#telegram-login-modal .btn-light-primary{background:rgba(56,225,255,.1)!important;color:var(--cyan)!important;border:1px solid var(--hair)!important}

/* ---- mobile ---- */
@media (max-width:560px){
  .login.login-1 .login-form{max-width:none;margin:14px;padding:34px 22px 28px!important}
}