.auth-showcase { position: relative; min-width: 0; overflow: hidden; padding: 36px 40px 28px; isolation: isolate; color: #eef5ff; background: radial-gradient(circle at 18% 18%,rgba(216,98,255,.42),transparent 34%), radial-gradient(circle at 84% 74%,rgba(47,221,216,.34),transparent 38%), linear-gradient(145deg,#192350 0%,#3d50be 45%,#2876d1 100%); }
.auth-showcase::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 40px 40px; -webkit-mask-image: linear-gradient(to bottom,black,transparent 88%); mask-image: linear-gradient(to bottom,black,transparent 88%); }
.auth-showcase::after { content: ""; position: absolute; right: -80px; bottom: -130px; z-index: -1; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 56px rgba(255,255,255,.035),0 0 0 112px rgba(255,255,255,.025); }
.showcase-kicker { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.78); font: 600 11px/1.2 var(--mono); letter-spacing: .12em; }
.showcase-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #66f7da; box-shadow: 0 0 0 5px rgba(102,247,218,.12); }
.showcase-copy { position: relative; z-index: 2; margin-top: 34px; }
.showcase-copy p { margin: 0; font-size: clamp(25px,2.1vw,34px); line-height: 1.38; letter-spacing: -.02em; }
.showcase-copy strong { color: #fff; font-weight: 700; }
.showcase-copy small { display: block; max-width: 470px; margin-top: 12px; color: rgba(239,246,255,.72); font-size: 13px; }
.showcase-stage { position: relative; height: 410px; margin-top: 10px; perspective: 1000px; }
.showcase-orbit { position: absolute; border: 1px dashed rgba(255,255,255,.22); border-radius: 50%; }
.orbit-a { top: 52px; left: 50%; width: 280px; height: 280px; transform: translateX(-50%); }
.orbit-b { top: 96px; left: 50%; width: 190px; height: 190px; transform: translateX(-50%); }
.showcase-card { position: absolute; border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius); background: rgba(248,251,255,.96); color: #1d2740; box-shadow: 0 24px 60px rgba(10,20,64,.22),inset 0 1px 0 rgba(255,255,255,.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
.showcase-card-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #66728a; font-size: 11px; }
.showcase-card-label b { color: #42506c; font: 600 10px/1.2 var(--mono); }
.showcase-status-dot { width: 7px; height: 7px; margin-right: auto; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.12); }
.showcase-search-card { top: 48px; left: 9%; z-index: 3; width: 70%; padding: 16px; transform: rotate(-2.2deg); animation: none; }
.showcase-search-input { display: flex; align-items: center; gap: 8px; height: 38px; margin-top: 10px; padding: 0 11px; border: 1px solid #dce4ef; border-radius: var(--radius-sm); background: #fff; }
.showcase-search-input span { color: #77849b; font-size: 19px; }
.showcase-search-input b { font: 600 13px/1 var(--mono); }
.showcase-search-input i { margin-left: auto; color: #7c899f; font-size: 10px; font-style: normal; }
.showcase-part-result { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border-radius: var(--radius-sm); background: #eef4ff; }
.showcase-chip { display: grid; width: 36px; height: 36px; place-items: center; border-radius: var(--radius-sm); background: #dbe8ff; color: #3168d8; font: 700 10px/1 var(--mono); }
.showcase-part-result strong,.showcase-part-result small { display: block; }
.showcase-part-result strong { font-size: 13px; }
.showcase-part-result small { margin-top: 2px; color: #77849b; font-size: 9px; }
.showcase-part-result em { color: #0b8d68; font-size: 10px; font-style: normal; font-weight: 700; }
.showcase-bom-card { top: 224px; right: 4%; z-index: 4; width: 48%; padding: 14px; transform: rotate(2.6deg); animation: none; }
.showcase-bom-card ul { margin: 9px 0 0; padding: 0; list-style: none; }
.showcase-bom-card li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid #e7ecf3; font: 500 10px/1.25 var(--mono); }
.showcase-bom-card i { font-style: normal; font-family: var(--font); font-weight: 700; }
.showcase-ok { color: #0b8d68; }
.showcase-low { color: #e34c57; }
.showcase-ledger-card { bottom: 9px; left: 2%; z-index: 2; width: 49%; padding: 14px; transform: rotate(-4deg); animation: none; }
.showcase-ledger-card > strong,.showcase-ledger-card > small { display: block; }
.showcase-ledger-card > strong { margin-top: 10px; font-size: 12px; }
.showcase-ledger-card > strong i { float: right; color: #0b8d68; font-style: normal; }
.showcase-ledger-card > small { margin-top: 4px; color: #77849b; font-size: 9px; }
body[data-auth-palette="dark"] .auth-showcase { background: radial-gradient(circle at 18% 18%,rgba(155,75,233,.32),transparent 34%),radial-gradient(circle at 84% 74%,rgba(36,184,181,.24),transparent 38%),linear-gradient(145deg,#111938 0%,#26377f 48%,#175785 100%); }
body[data-auth-palette="dark"] .showcase-card { border-color: rgba(136,167,214,.32); background: rgba(18,28,46,.84); color: #eef5ff; box-shadow: 0 24px 60px rgba(0,4,20,.34),inset 0 1px 0 rgba(255,255,255,.07); }
body[data-auth-palette="dark"] .showcase-card-label { color: #9eacc1; }
body[data-auth-palette="dark"] .showcase-card-label b { color: #c6d1df; }
body[data-auth-palette="dark"] .showcase-search-input { border-color: #34445d; background: #17243a; }
body[data-auth-palette="dark"] .showcase-search-input span,body[data-auth-palette="dark"] .showcase-search-input i { color: #93a1b7; }
body[data-auth-palette="dark"] .showcase-part-result { background: #1d3150; }
body[data-auth-palette="dark"] .showcase-chip { background: #294875; color: #8bb7ff; }
body[data-auth-palette="dark"] .showcase-part-result small,body[data-auth-palette="dark"] .showcase-ledger-card > small { color: #98a8be; }
body[data-auth-palette="dark"] .showcase-bom-card li { border-top-color: #34445d; }
.auth-screen{--auth-bg:#f4f6fb;--auth-pane:#fff;--auth-input:#f2f5fb;--auth-text:#1d2740;--auth-muted:#66728a;--auth-border:#dce4ef;--mono:Consolas,monospace;--font:'Segoe UI','Microsoft YaHei',sans-serif;--radius:12px;--radius-sm:8px;background:radial-gradient(ellipse at 0 0,#ecdfea,transparent 48%),radial-gradient(ellipse at 100% 90%,#dce9e3,transparent 50%),var(--auth-bg);min-height:100dvh;font-family:var(--font)}
.auth-screen[data-auth-palette=dark]{--auth-bg:#0d141a;--auth-pane:#171d23;--auth-input:#283345;--auth-text:#e9eef6;--auth-muted:#a6afbd;--auth-border:#303c49;color-scheme:dark;background:radial-gradient(ellipse at 0 0,#301929,transparent 48%),radial-gradient(ellipse at 100% 90%,#273331,transparent 50%),var(--auth-bg)}
.auth-screen>#sidebar,.auth-screen>.shell>header{display:none}.auth-screen>.shell{margin:0}.auth-screen #main{max-width:none;padding:72px 24px 36px;min-height:100dvh;display:grid;place-items:center}
.auth-screen .auth-shell{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);width:min(1240px,100%);min-height:710px;border:1px solid var(--auth-border);border-radius:18px;overflow:hidden;background:var(--auth-pane);box-shadow:0 24px 60px #0003;color:var(--auth-text)}
.auth-screen .auth-showcase{padding:38px 40px}.auth-screen .showcase-foot{display:flex;gap:24px;color:#c5d3ed;font-size:12px;padding-top:20px}.auth-screen .auth-form-pane{padding:34px 52px;align-self:center;min-width:0}.auth-logo{display:block;width:200px;height:132px;object-fit:contain;margin:0 auto 6px}.auth-brand-title{text-align:center;font-size:26px;font-weight:500;margin:0;color:var(--auth-text)}.auth-subtitle{text-align:center;font-size:13px;color:var(--auth-muted);margin:8px 0 28px}.auth-register-title{font-size:18px;margin:0 0 18px}
.auth-screen .form{gap:16px}.auth-screen .form label{color:var(--auth-muted);font-size:14px;font-weight:400;gap:6px}.auth-screen .form input{background:var(--auth-input);border-color:var(--auth-border);color:var(--auth-text);min-height:46px;font-size:15px}.auth-screen .form-actions button{width:100%;background:#4988ff;border-color:#4988ff;color:#fff;font-size:15px;min-height:44px}.auth-screen .form .error:empty{display:none}.auth-screen .form .error{color:#e76975}
.auth-password{position:relative}.auth-password input{padding-right:48px!important}.auth-password button{position:absolute;right:5px;top:3px;width:40px;height:40px;padding:0;border:0;background:transparent;color:var(--auth-muted);font-size:20px}.auth-links{display:flex;justify-content:space-between;gap:16px;margin-top:18px;font-size:13px}.auth-screen .text-button{color:var(--auth-muted);font-size:13px}.auth-demo{display:grid;gap:12px;text-align:center;margin-top:24px}.auth-demo>span{font-size:13px;color:var(--auth-muted);display:flex;align-items:center;gap:10px}.auth-demo>span:before,.auth-demo>span:after{content:'';height:1px;flex:1;background:var(--auth-border)}.auth-demo>a{display:block;padding:10px;border-radius:8px;border:1px solid #4988ff66;color:#4988ff;text-decoration:none;font-weight:600;background:#4988ff12}.auth-demo>small{font-size:12px;color:var(--auth-muted);line-height:1.6}
.auth-theme-switcher{position:fixed;z-index:20;right:18px;top:12px;display:flex;gap:4px;padding:4px;border:1px solid var(--auth-border);border-radius:13px;background:var(--auth-pane)}.auth-theme-switcher button{background:transparent;color:var(--auth-muted);border:0;padding:6px 10px;font-weight:500}.auth-theme-switcher button[aria-pressed=true]{background:#4988ff;color:white}.auth-screen #toast{left:50%}.auth-screen :focus-visible{outline:3px solid #79aaff;outline-offset:3px}
@media(max-width:900px){.auth-screen .auth-shell{grid-template-columns:1fr;max-width:520px;min-height:0}.auth-screen .auth-showcase{display:none}.auth-screen .auth-form-pane{padding:30px}.auth-screen #main{padding:76px 16px 24px}.auth-logo{width:155px;height:105px}}
@media(max-width:420px){.auth-screen .auth-form-pane{padding:26px 20px}.auth-links{flex-wrap:wrap}.auth-brand-title{font-size:24px}.auth-subtitle{font-size:12px}}

.auth-logo{position:relative}.auth-logo img{width:100%;height:100%;object-fit:contain}.auth-password svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;vertical-align:middle}
@supports(mask-image:url('/static/logo-transparent.png')){.auth-logo:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,#2edbd1 0%,#3d7cff 28%,#a45cff 52%,#ff6bb5 74%,#2edbd1 100%);background-size:240% 100%;background-position:50% 50%;mask:url('/static/logo-transparent.png') center/contain no-repeat}.auth-logo img{opacity:0}}

/* Keep the installed client a complete compact form, including at 768px screen height. */
@media(max-width:959px){
body.desktop-client.auth-screen #main{padding:52px 28px 20px;display:block;min-height:100dvh}
body.desktop-client.auth-screen .auth-shell{display:block;min-height:0;width:100%;max-width:480px;margin:auto;border:0;box-shadow:none;background:transparent;overflow:visible}
body.desktop-client.auth-screen .auth-showcase{display:none}
body.desktop-client.auth-screen .auth-form-pane{padding:0}
body.desktop-client.auth-screen .auth-logo{width:128px;height:84px}
body.desktop-client.auth-screen .auth-brand-title{font-size:24px}
body.desktop-client.auth-screen .auth-subtitle{font-size:12px;margin:6px 0 18px}
body.desktop-client.auth-screen .form{gap:12px}
body.desktop-client.auth-screen .form label{font-size:13px}
body.desktop-client.auth-screen .form input{min-height:42px}
body.desktop-client.auth-screen .remember-account input{min-height:16px}
body.desktop-client.auth-screen .auth-links{margin-top:16px}
body.desktop-client.auth-screen.auth-register .auth-logo{width:90px;height:58px}
body.desktop-client.auth-screen.auth-register .auth-brand-title{font-size:22px}
body.desktop-client.auth-screen.auth-register .auth-subtitle{display:none}
body.desktop-client.auth-screen.auth-register .auth-register-title{font-size:16px;margin:10px 0 12px}
body.desktop-client.auth-screen.auth-register .form{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
body.desktop-client.auth-screen.auth-register .form>*{grid-column:1 / -1;min-width:0}
body.desktop-client.auth-screen.auth-register .form>label:nth-of-type(-n+2){grid-column:auto}
body.desktop-client.auth-screen.auth-register .form label{line-height:1.4;gap:4px}
body.desktop-client.auth-screen.auth-register .form input{height:40px;min-height:40px;padding:8px 12px;font-size:14px;line-height:1.4}
body.desktop-client.auth-screen.auth-register .email-code-row button{padding:8px 12px;font-size:13px}
body.desktop-client.auth-screen.auth-register .auth-password button{height:36px;top:2px}
body.desktop-client.auth-screen.auth-register .form-actions button{min-height:40px;padding:8px 16px;font-size:14px}
body.desktop-client.auth-screen [data-code-status]:empty{display:none}
}
body.desktop-client.auth-screen .auth-demo{display:none}

/* The desktop client uses the full visual layout when the user widens it. */
@media(min-width:960px){
  body.desktop-client.auth-screen #main{padding:64px 32px 28px;display:grid;place-items:center}
  body.desktop-client.auth-screen .auth-shell{grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr);max-width:1280px;min-height:680px}
  body.desktop-client.auth-screen .auth-form-pane{padding:28px clamp(28px,3.3vw,52px)}
  body.desktop-client.auth-screen.auth-register .auth-logo{width:114px;height:76px}
  body.desktop-client.auth-screen.auth-register .auth-brand-title{font-size:24px}
  body.desktop-client.auth-screen.auth-register .auth-subtitle{margin:6px 0 20px}
  body.desktop-client.auth-screen.auth-register .form{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.desktop-client.auth-screen.auth-register .form>*{grid-column:1 / -1;min-width:0}
  body.desktop-client.auth-screen.auth-register .form>label:nth-of-type(-n+2){grid-column:auto}
  body.desktop-client.auth-screen.auth-register .form input{min-height:42px}
  body.desktop-client.auth-screen [data-code-status]:empty{display:none}
}
@media(min-width:600px) and (max-width:959px){
  body.desktop-client.auth-screen #main{padding:68px 30px 30px;display:grid;place-items:center}
  body.desktop-client.auth-screen .auth-shell{max-width:540px;padding:28px 38px;border:1px solid var(--auth-border);border-radius:18px;background:var(--auth-pane);box-shadow:0 20px 60px #0002}
}
@media(max-width:379px){
  body.desktop-client.auth-screen #main{padding:58px 18px 20px}
  body.desktop-client.auth-screen.auth-register .form{grid-template-columns:1fr}
  body.desktop-client.auth-screen.auth-register .form>label:nth-of-type(-n+2){grid-column:1 / -1}
  body.desktop-client.auth-screen .email-code-row button{padding:8px;font-size:12px}
}
@media(min-width:960px) and (max-height:800px){
  body.desktop-client.auth-screen .auth-shell{min-height:0}
  body.desktop-client.auth-screen .auth-showcase{padding-top:28px;padding-bottom:24px}
  body.desktop-client.auth-screen .showcase-copy{margin-top:24px}
  body.desktop-client.auth-screen .showcase-stage{height:370px}
  body.desktop-client.auth-screen .showcase-search-card{top:28px}
  body.desktop-client.auth-screen .showcase-bom-card{top:190px}
  body.desktop-client.auth-screen.auth-register .auth-logo{width:84px;height:56px}
  body.desktop-client.auth-screen.auth-register .auth-subtitle{display:none}
  body.desktop-client.auth-screen.auth-register .auth-register-title{margin:10px 0 12px}
  body.desktop-client.auth-screen.auth-register .form{gap:10px}
  body.desktop-client.auth-screen.auth-register .form label{font-size:13px;line-height:1.4}
  body.desktop-client.auth-screen.auth-register .form input{height:40px;min-height:40px;padding:8px 12px;font-size:14px}
}

.auth-password .password-slash{display:block}.auth-password button[aria-pressed=true] .password-slash{display:none}
/* Edge/WebView2 adds its own reveal control beside our accessible button. */
.auth-password input::-ms-reveal{display:none}

.auth-screen .form .remember-account{display:flex;align-items:center;gap:8px}.auth-screen .form .remember-account input{width:16px;min-height:16px;height:16px;padding:0}
.auth-screen .email-code-row button{background:var(--auth-input);color:var(--auth-text);border-color:var(--auth-border);font-weight:500}
.auth-screen .email-code-row button:hover:not(:disabled){background:#4988ff24;border-color:#4988ff}