/* Standalone sign-in pages: one centred card on the shared tokens. */
*, *::before, *::after { box-sizing: border-box; }
.auth-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--f-body); color: var(--ink); -webkit-font-smoothing: antialiased; background: radial-gradient(900px 480px at 85% -8%, rgba(74, 222, 222, .2), transparent 62%), radial-gradient(700px 420px at -5% 105%, rgba(2, 27, 249, .07), transparent 60%), linear-gradient(180deg, var(--soft), #fff 70%); }
.auth-top { display: flex; justify-content: space-between; align-items: center; padding: 20px clamp(20px, 4vw, 48px); }
.auth-brand img { height: 26px; width: auto; display: block; }
.auth-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; color: var(--muted); font: 600 14px var(--f-body); text-decoration: none; transition: color .2s, border-color .2s; }
.auth-back:hover { color: var(--ink); border-color: var(--ink); }
.auth-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 20px 32px; }
.auth-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: clamp(24px, 5vw, 40px); }
.auth-card h1 { margin: 0 0 8px; font: 700 28px/1.15 var(--f-display); letter-spacing: -.01em; }
.auth-sub { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.auth-field { margin-bottom: 16px; }
.auth-field label, .auth-lrow label { font: 600 13px var(--f-body); color: var(--ink); }
.auth-field > label { display: block; margin-bottom: 6px; }
.auth-lrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.auth-link, .auth-switch a, .auth-fine a, .auth-foot a:hover { color: var(--volt); font-weight: 600; text-decoration: none; }
.auth-link { font-size: 13px; }
.auth-pw { position: relative; display: block; } .auth-pw input { padding-right: 52px; }
.auth-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; transition: color .2s, background .2s; }
.auth-eye:hover, .auth-eye[aria-pressed="true"] { color: var(--volt); background: var(--soft); } .auth-eye:focus-visible { outline: none; box-shadow: var(--focus); }
.auth-err { display: block; margin-top: 5px; color: var(--st-danger); font-size: 13px; } .auth-err:empty { display: none; }
.auth-msg { margin: 14px 0 0; font-size: 14px; line-height: 1.45; } .auth-msg:empty { display: none; }
.auth-msg.bad { color: var(--st-danger); background: var(--st-danger-bg); padding: 10px 14px; border-radius: 12px; } .auth-msg.ok { color: var(--st-done); background: var(--st-done-bg); padding: 10px 14px; border-radius: 12px; }
.auth-google { margin-bottom: 4px; } .auth-gmount { display: flex; justify-content: center; min-height: 44px; }
.auth-gnote { margin: 8px 0 0; font-size: 13px; color: var(--muted); text-align: center; } .auth-gnote[hidden] { display: none; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 18px 0 20px; color: var(--faint); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-fine { margin: 16px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
.auth-switch { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 15px; }
.auth-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 20px 28px; font-size: 13px; color: var(--faint); } .auth-foot a { color: var(--muted); text-decoration: none; }
.cap-wrap:empty { display: none; } .auth-form .cap-wrap { margin: 0 0 16px; }
@media (max-width: 480px) { .auth-back span { display: none; } .auth-back { padding: 8px 12px; } .auth-card h1 { font-size: 24px; } }
.cap-fail { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--st-danger-bg); color: var(--st-danger); font-size: 13.5px; line-height: 1.45; }

/* email verification */
.auth-code { text-align: center; font: 700 28px var(--f-display); letter-spacing: .5em; padding-left: .5em; min-height: 58px; }
.auth-resend { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--muted); } .auth-link-btn { background: none; border: 0; padding: 0; font: 600 14px var(--f-body); color: var(--volt); cursor: pointer; } .auth-link-btn:hover { text-decoration: underline; } .auth-link-btn:disabled { color: var(--faint); cursor: default; text-decoration: none; }

/* Professional tools auth. richer, not a flat white page */
.auth-body {
  background:
    radial-gradient(900px 520px at 90% -10%, rgba(74, 222, 222, .28), transparent 60%),
    radial-gradient(700px 480px at -10% 110%, rgba(2, 27, 249, .12), transparent 55%),
    linear-gradient(160deg, #f4f6ff 0%, #ffffff 45%, #f7f8fc 100%);
}
.auth-card {
  max-width: 460px;
  border: 1px solid rgba(1, 0, 82, .08);
  border-radius: 22px;
  box-shadow: 0 24px 60px -28px rgba(1, 0, 82, .35);
  background: #fff;
}
.auth-card h1 {
  font: 700 32px/1.15 var(--f-display);
  letter-spacing: -.02em;
  color: #010052;
}
.auth-sub { font-size: 15.5px; color: #5c6080; }
.ds-btn--primary, .auth-form .ds-btn--primary {
  background: linear-gradient(135deg, #021bf9, #010052);
  border: 0;
  border-radius: 12px;
  min-height: 46px;
  font-weight: 600;
}
.auth-field input.ds-input {
  border-radius: 12px;
  border: 1.5px solid #e4e7f2;
  min-height: 46px;
}
.auth-field input.ds-input:focus {
  border-color: #021bf9;
  box-shadow: 0 0 0 3px rgba(2, 27, 249, .12);
}
.auth-top { background: transparent; }
.auth-foot { color: #8b90a8; }


/* PenXtool typography unification: one shared font system across marketing, tools, account and admin. */
:root{--px-font-body:"Owners XWide",system-ui,-apple-system,"Segoe UI",sans-serif;--px-font-display:"Owners XWide",var(--px-font-body);}
body *:not(code):not(pre):not(.code):not(svg){font-family:var(--px-font-body)!important}html,body,button,input,select,textarea,option,label,small,summary,table,th,td{font-family:var(--px-font-body)!important}
h1,h2,h3,h4,h5,h6,.dx-hi h1,.dx-card h2,.pagehead h1,.ph-row h1,.welcome h2,.stat b,.dx-stats b{font-family:var(--px-font-display)!important;font-stretch:normal!important}
button,input,select,textarea{font-size:inherit;letter-spacing:inherit}
.site-header,.site-header *,.mobile-menu,.mobile-menu *,.tools-bar,.tools-bar *{font-family:var(--px-font-body)!important}
/* A considered mobile navigation rather than a bare full-screen link list. */
.mobile-menu{padding:calc(82px + env(safe-area-inset-top)) clamp(22px,6vw,36px) calc(28px + env(safe-area-inset-bottom));background:linear-gradient(155deg,#fff 0%,#f6f8ff 100%);}
.mobile-menu::before{content:"PENXTOOL";position:absolute;top:calc(28px + env(safe-area-inset-top));left:clamp(22px,6vw,36px);font-family:var(--px-font-display)!important;font-size:13px;font-weight:800;letter-spacing:.13em;color:var(--volt);}
.mobile-menu nav{gap:8px;}
.mobile-menu nav a{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:14px 16px;border:1px solid #e4e9f8;border-radius:15px;background:rgba(255,255,255,.9);font-size:17px;font-weight:650;letter-spacing:-.015em;box-shadow:0 3px 12px rgba(1,0,82,.025);transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.mobile-menu nav a::after{content:"↗";font-size:16px;color:var(--volt);opacity:.65;}
.mobile-menu nav a:hover,.mobile-menu nav a[aria-current="page"]{background:#eef2ff;border-color:#cbd7ff;color:var(--volt);transform:translateX(2px);}
.mobile-menu .mm-foot{padding:18px 4px 0;border-top:1px solid #e0e6f5;margin-top:22px;font-size:13px;gap:10px;}
.menu-btn{width:46px;height:46px;border-radius:15px;background:#f2f5ff;border:1px solid #e3e8f8;box-shadow:0 3px 10px rgba(1,0,82,.04);}
.site-header:not(.is-scrolled) .menu-btn{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.18);}
.menu-open .site-header .menu-btn{background:#eef2ff;border-color:#dce3fa;}
@media(max-width:640px){body{font-size:16px;line-height:1.62}.site-header .bar{min-height:72px}.mobile-menu nav a{font-size:16px;min-height:52px}.menu-btn{width:44px;height:44px}}

/* Brand typography: Owners XWide is the single family across all site interfaces. */
html,body,body button,body input,body select,body textarea,body option,body label,body small,body summary,body table,body th,body td,
body p,body a,body span,body strong,body b,body em,body i,body li,body dt,body dd,body h1,body h2,body h3,body h4,body h5,body h6,
body div:not([class*="icon-font"]):not([class^="fa-"]):not([class*=" fa-"]) {font-family:"Owners XWide",sans-serif!important;}


/* Single brand typeface: Owners XWide throughout PenXtool. */
html,body,body *:not(svg):not(path):not([class*="icon-font"]):not([class^="fa-"]):not([class*=" fa-"]){font-family:"Owners XWide",sans-serif!important;}

/* v29: Owners XWide font family throughout this interface. */
html,body,body *:not(svg):not(path):not([class*="icon-font"]):not([class^="fa-"]):not([class*=" fa-"]){font-family:"Owners XWide",sans-serif!important;}

/* v32: restore the original clean mobile menu — white canvas, bold wide labels, divider lines only. */
.mobile-menu {
  background: #fff !important;
  background-image: none !important;
  color: #010052 !important;
  padding: calc(88px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)) !important;
}
.mobile-menu::before { content: none !important; display: none !important; }
.mobile-menu nav { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.mobile-menu nav a {
  display: block !important;
  min-height: 0 !important;
  padding: 16px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid #e3e5f2 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #010052 !important;
  font-family: "Owners XWide", sans-serif !important;
  font-size: clamp(18px, 2.2vw, 21px) !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  letter-spacing: -0.015em !important;
  text-decoration: none !important;
  transform: none !important;
}
.mobile-menu nav a::after { content: none !important; display: none !important; }
.mobile-menu nav a:hover,
.mobile-menu nav a[aria-current="page"] {
  background: transparent !important;
  border-color: #cbd2e6 !important;
  color: #021bf9 !important;
  transform: none !important;
}
.mobile-menu .mm-foot {
  border-top: 1px solid #e3e5f2 !important;
  border-radius: 0 !important;
  padding: 18px 4px 0 !important;
  margin-top: 22px !important;
  background: transparent !important;
}
.menu-btn { box-shadow: none !important; }
@media (max-width: 640px) {
  .mobile-menu nav a { font-size: 20px !important; min-height: 0 !important; padding: 17px 4px !important; }
}