:root{--xq-primary:#824437;--xq-primary-hover:#6b352a;--xq-ink:#302720;--xq-muted:#6b6056;--xq-line:#d8cec1;--xq-paper:#fffdf8;--xq-canvas:#f7f3eb}
.xq-demo{margin:0;background:var(--xq-canvas);color:var(--xq-ink);font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;line-height:1.7}
.demo-header{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1080px;padding:26px 32px;margin:auto;border-bottom:1px solid var(--xq-line)}
.demo-brand{font:700 25px "Songti SC",SimSun,serif;text-decoration:none;color:var(--xq-ink)}.demo-header nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.demo-header nav a{color:var(--xq-primary);text-underline-offset:4px}.demo-main{max-width:1080px;margin:90px auto;padding:0 32px}.demo-main h1{font:700 clamp(28px,5vw,42px)/1.45 "Songti SC",SimSun,serif;margin:0 0 20px;text-wrap:balance}.demo-main>p{color:var(--xq-muted);max-width:65ch;margin-bottom:32px}.demo-login{display:inline-flex;align-items:center;min-height:48px;padding:10px 26px;color:white;background:var(--xq-primary);border-radius:6px;text-decoration:none}.demo-login:hover{color:white;background:var(--xq-primary-hover)}
.xq-login{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:var(--xq-ink)}.xq-login .modal-dialog{max-width:430px}.xq-login .modal-content{background:var(--xq-paper);border:0;border-radius:12px;box-shadow:0 16px 60px #30272030}.xq-login .modal-header{border-bottom:0;padding:26px 28px 12px}.xq-login .modal-title{font-size:23px;font-weight:650;line-height:1.5}.xq-login .btn-close{min-width:32px;min-height:32px;margin-right:-8px;padding:6px;background-size:12px}.xq-login .modal-body{padding:12px 28px 24px;max-height:calc(100dvh - 130px);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--xq-line) var(--xq-paper);scrollbar-width:thin}
.xq-login button,.xq-login input{font:inherit}.xq-login .wechat-entry{display:flex;justify-content:center;margin:0 0 24px}.wechat-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#087d3e;color:#fff;border:1px solid #087d3e;border-radius:6px;min-height:46px;padding:9px 35px}.wechat-button:hover{background:#066633}.login-divider{display:flex;align-items:center;gap:14px;color:var(--xq-muted);font-size:13px;margin-bottom:22px}.login-divider:before,.login-divider:after{content:"";height:1px;background:var(--xq-line);flex:1}
.xq-login .floating-field{position:relative;margin-bottom:24px}.xq-login .floating-field input{width:100%;height:60px;padding:16px 14px;color:var(--xq-ink);caret-color:var(--xq-primary);background:var(--xq-paper);border:1px solid #b9ad9f;border-radius:6px;outline-offset:3px}.xq-login .floating-field label{position:absolute;z-index:1;top:18px;left:9px;margin:0;padding:0 5px;line-height:24px;color:var(--xq-muted);font-size:16px;background:var(--xq-paper);pointer-events:none;transition:top .15s ease,font-size .15s ease,line-height .15s ease}.xq-login .floating-field input:is(:focus,:not(:placeholder-shown),:autofill,:-webkit-autofill)+label{top:-10px;line-height:20px;font-size:13px;color:var(--xq-primary)}.xq-login .floating-field input:focus{border-color:var(--xq-primary)}
.account-button{width:100%;min-height:46px;background:var(--xq-primary);border:1px solid var(--xq-primary);color:white;border-radius:6px;padding:10px 20px}.account-button:hover{background:var(--xq-primary-hover)}.xq-login button:disabled{opacity:.55;cursor:wait}.account-links{display:flex;justify-content:space-between;margin:20px 0 0;font-size:14px}.account-links a,.back-account{color:var(--xq-primary);text-underline-offset:3px}.back-account{background:none;border:0;padding:0 0 10px;min-height:44px;text-decoration:underline}.xq-login #account-error{color:#a12621;font-size:14px;line-height:1.6;margin:0 0 16px;overflow-wrap:anywhere}.xq-login .captcha-area{margin-bottom:16px}.captcha-area:empty{display:none}.xq-login .captcha-area .shape-svg{width:100%;height:100%}.xq-login #wechat-frame{display:block;width:100%;height:450px;border:0;background:var(--xq-paper)}.xq-login #wechat-loading{font-size:14px;color:var(--xq-muted)}
.xq-login [hidden]{display:none!important}.xq-login :focus-visible,.xq-demo a:focus-visible{outline:2px solid var(--xq-primary);outline-offset:4px}.xq-login ::selection,.xq-demo ::selection{background:#e9c9ba;color:var(--xq-ink)}
@media(max-width:480px){.demo-header{padding:20px;gap:16px}.demo-header nav{gap:10px}.demo-main{margin-top:64px;padding:0 20px}.xq-login .modal-dialog{margin:12px auto;width:calc(100% - 24px)}.xq-login .modal-header{padding:22px 22px 8px}.xq-login .modal-body{padding:12px 22px 22px;max-height:calc(100dvh - 110px)}}@media(prefers-reduced-motion:reduce){.xq-login *{transition:none!important;animation:none!important}}
.xq-login #register-error{color:#a12621;font-size:14px;line-height:1.6}.xq-login #account-error.is-success{color:#087d3e}.captcha-area>button{border:0;background:none;color:var(--xq-primary);text-decoration:underline;text-underline-offset:3px;min-height:44px}
.xq-login .floating-field label{background:transparent}
.xq-login .floating-field.outlined input,.xq-login .floating-field.outlined input:focus{border-color:transparent;outline:none}
.xq-login .outlined fieldset{position:absolute;inset:-10px 0 0;margin:0;padding:0 8px;border:1px solid #b9ad9f;border-radius:6px;min-width:0;pointer-events:none}
.xq-login .outlined legend{float:none;width:auto;max-width:0;height:20px;overflow:hidden;margin:0;padding:0;font-family:inherit;line-height:20px;font-size:13px;white-space:nowrap;visibility:hidden}
.xq-login .outlined legend span{display:inline-block;padding:0 5px;font:inherit}
.xq-login .outlined input:is(:focus,:not(:placeholder-shown),:autofill,:-webkit-autofill)~fieldset legend{max-width:100%}
.xq-login .outlined input:focus~fieldset{border-color:var(--xq-primary);border-width:2px}
.xq-login #wechat-panel .back-account{min-height:36px;padding:0;margin:0 0 8px;font-size:14px}
.xq-login #wechat-loading{margin:4px 0 8px}
.xq-login.is-binding .modal-header{padding-bottom:6px}
.xq-login.is-binding .modal-body{padding-top:6px}
.xq-login.is-binding #wechat-panel .back-account{margin-bottom:8px;min-height:32px}
.xq-login #back-account:focus-visible{outline:none;text-decoration-thickness:2px;text-underline-offset:5px;color:var(--xq-primary-hover)}