/* Duilink operational UI 2026
   Shared visual layer for authentication and account-support pages.
   It changes presentation only: no form names, actions or application logic. */

:root{
  --dui-op-radius:22px;
  --dui-op-radius-sm:14px;
  --dui-op-shadow:0 24px 70px rgba(15,23,42,.10),0 2px 10px rgba(15,23,42,.05);
  --dui-op-focus:0 0 0 4px rgba(var(--dui-accent-rgb),.18);
}

body.duilink-theme{
  background:
    radial-gradient(circle at 10% 0%,rgba(var(--dui-accent-rgb),.10),transparent 30rem),
    radial-gradient(circle at 92% 10%,rgba(15,23,42,.055),transparent 28rem),
    var(--dui-bg);
}

body.duilink-theme main{
  width:min(100%,1120px);
  min-height:clamp(520px,70vh,760px);
  padding-top:clamp(24px,5vw,64px);
  padding-bottom:clamp(48px,7vw,88px);
}

body.duilink-theme .topbar{
  border-bottom:1px solid color-mix(in srgb,var(--dui-border) 72%,transparent);
  background:color-mix(in srgb,var(--dui-bg) 82%,transparent);
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}

body.duilink-theme .duiTopNav{
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--dui-border) 70%,transparent);
  border-radius:0;
  box-shadow:none;
  background:transparent;
  backdrop-filter:none;
}

body.duilink-theme .duiNav{
  min-height:40px;
  border:0;
  box-shadow:none;
  background:transparent;
}

body.duilink-theme .flashBox{
  width:min(100%,620px);
  margin:0 auto 18px;
  padding:13px 15px;
  border-radius:var(--dui-op-radius-sm);
  box-shadow:0 8px 28px rgba(15,23,42,.06);
}

.authBlock{padding:0!important;margin:0!important;}
.authPanel{
  position:relative;
  overflow:hidden;
  width:min(100%,590px)!important;
  max-width:590px!important;
  padding:clamp(24px,5vw,46px)!important;
  border:1px solid color-mix(in srgb,var(--dui-border) 84%,transparent)!important;
  border-radius:var(--dui-op-radius)!important;
  background:color-mix(in srgb,var(--dui-surface) 94%,transparent)!important;
  box-shadow:var(--dui-op-shadow)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.authPanel::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--dui-accent),color-mix(in srgb,var(--dui-accent) 35%,#79e2c0));
}

.authTitle{
  max-width:12ch;
  margin:0 0 10px!important;
  font-size:clamp(2rem,7vw,3rem)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
}

.authLead{
  max-width:44ch;
  margin:0 0 24px!important;
  font-size:1.03rem;
  line-height:1.6;
}

.authPane h2{
  margin-bottom:18px!important;
  font-size:1.12rem!important;
  letter-spacing:-.015em;
}

.authPanel label{margin-top:18px;font-size:.91rem;}
.authPanel input:not([type="checkbox"]):not([type="radio"]){
  min-height:50px!important;
  padding:12px 14px;
  border-radius:13px;
  background:color-mix(in srgb,var(--dui-input-bg) 96%,transparent)!important;
}
.authPanel input:focus{box-shadow:var(--dui-op-focus)!important;}

.customerTypeChoice{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:20px 0 4px;
  padding:0;
  border:0;
}
.customerTypeChoice legend{
  grid-column:1/-1;
  margin-bottom:2px;
  font-size:.91rem;
  font-weight:700;
}
.authPanel .customerTypeChoice label{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:0;
  padding:13px;
  border:1px solid var(--dui-border);
  border-radius:13px;
  background:color-mix(in srgb,var(--dui-surface-2) 70%,transparent);
  cursor:pointer;
}
.customerTypeChoice input{margin-top:3px;accent-color:var(--dui-accent);}
.customerTypeChoice span{display:grid;gap:3px;}
.customerTypeChoice small{color:var(--dui-text-muted);line-height:1.35;}
.customerTypeChoice label:has(input:checked){
  border-color:var(--dui-accent);
  box-shadow:0 0 0 2px rgba(var(--dui-accent-rgb),.12);
}

.authPanel .btn{
  min-height:48px;
  padding-inline:20px;
  border-radius:13px;
  box-shadow:none;
}
.authPanel .btn.primary{
  color:#fff;
  border-color:var(--dui-accent);
  background:var(--dui-accent);
  box-shadow:0 12px 24px rgba(var(--dui-accent-rgb),.22);
}
.authPanel .btn:hover{transform:translateY(-1px);}

.authPanel form>.btn,
.authPanel form>div>.btn.primary{margin-top:20px;}

.googlePill{
  min-height:50px!important;
  border-radius:13px!important;
  box-shadow:none!important;
}

.authOr{margin:20px 0 14px!important;}
.authSwitch{
  margin-top:20px!important;
  padding-top:18px;
  border-top:1px solid var(--dui-border);
  line-height:1.55;
}
.authSwitch a{color:var(--dui-accent);}
.authHint{line-height:1.55;}
.authBuilderHint,.otpInline{
  border-radius:var(--dui-op-radius-sm)!important;
  background:color-mix(in srgb,var(--dui-surface-2) 86%,transparent)!important;
}

.passwordRow{grid-template-columns:minmax(0,1fr) 42px!important;}
.passwordToggle{
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
}
.passwordToggle:focus-visible{
  outline:0;
  box-shadow:var(--dui-op-focus)!important;
}

/* Reset password and account-support screens that use the shared renderer directly. */
body.duilink-theme main>h1,
body.duilink-theme main>.dangerPage{
  width:min(100%,760px);
  margin-left:auto;
  margin-right:auto;
}
body.duilink-theme main>h1{
  margin-top:0;
  margin-bottom:20px;
  font-size:clamp(2rem,6vw,3.2rem);
  line-height:1.04;
  letter-spacing:-.045em;
}
body.duilink-theme main>h1+form{
  width:min(100%,590px);
  padding:clamp(22px,4vw,38px);
  border:1px solid var(--dui-border);
  border-radius:var(--dui-op-radius);
  background:var(--dui-surface);
  box-shadow:var(--dui-op-shadow);
}
body.duilink-theme main>h1+form .btn{min-height:48px;border-radius:13px;}

.dangerPage{gap:18px!important;}
.dangerCard{
  padding:clamp(20px,4vw,30px)!important;
  border-radius:var(--dui-op-radius)!important;
  box-shadow:0 12px 40px rgba(15,23,42,.07);
}
.dangerCard:first-child{border-top:4px solid var(--dui-accent)!important;}

@media (max-width:640px){
  .customerTypeChoice{grid-template-columns:1fr;}
  body.duilink-theme main{padding:22px 14px 56px;}
  .authPanel{padding:24px 18px!important;border-radius:18px!important;}
  .authTitle{font-size:2.15rem!important;}
  .authPanel form>div[style*="display:flex"]{display:grid!important;grid-template-columns:1fr;}
  .authPanel .btn{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  .authPanel .btn{transition:none!important;}
}

@media (prefers-color-scheme:dark){
  body.duilink-theme{
    background:
      radial-gradient(circle at 10% 0%,rgba(var(--dui-accent-rgb),.14),transparent 30rem),
      radial-gradient(circle at 92% 10%,rgba(255,255,255,.035),transparent 28rem),
      var(--dui-bg);
  }
  .authPanel{box-shadow:0 26px 80px rgba(0,0,0,.28)!important;}
  .authPanel .btn.primary{color:#07120f;}
}