/* ququduo auth pages — shared shell (login / register / forgot / reset) */
*{box-sizing:border-box}
html,body{height:100%}
:root{
  --bg:#08080c; --grid:rgba(255,255,255,.04); --glow:rgba(139,92,246,.14);
  --txt:#e9e9ef; --muted:#78788a; --muted2:#a2a2b2;
  --card:#101018; --cardbd:#1f1f2b; --shadow:0 30px 76px -34px rgba(0,0,0,.95);
  --in:#16161f; --inbd:#252532; --inph:#54546a; --infocus:#191924;
  --tg:#14141d; --tgbd:#26262f; --tgic:#a2a2b2;
}
html[data-theme="light"]{
  --bg:#f6f6f8; --grid:rgba(0,0,0,.035); --glow:rgba(139,92,246,.10);
  --txt:#17171c; --muted:#6b6b7a; --muted2:#5f5f6d;
  --card:#ffffff; --cardbd:#e6e6ee; --shadow:0 26px 64px -36px rgba(20,20,45,.24);
  --in:#fbfbfd; --inbd:#e4e4ec; --inph:#b4b4c0; --infocus:#fff;
  --tg:#ffffff; --tgbd:#e2e2ea; --tgic:#5f5f6d;
}

body{margin:0;background:var(--bg);color:var(--txt);
     font:15px/1.65 ui-sans-serif,system-ui,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
     display:flex;flex-direction:column;align-items:center;position:relative;overflow-x:hidden;
     transition:background .2s,color .2s}
body::before{content:"";position:fixed;inset:0;pointer-events:none;
     background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                      linear-gradient(90deg,var(--grid) 1px,transparent 1px);
     background-size:50px 50px;
     -webkit-mask-image:radial-gradient(ellipse at 50% 16%,#000 6%,transparent 64%);
             mask-image:radial-gradient(ellipse at 50% 16%,#000 6%,transparent 64%)}
body::after{content:"";position:fixed;width:940px;height:940px;border-radius:50%;pointer-events:none;
     background:radial-gradient(circle,var(--glow),transparent 62%);
     top:-420px;left:50%;transform:translateX(-50%)}

.wrap{position:relative;z-index:2;width:100%;max-width:542px;padding:70px 26px 0;
      display:flex;flex-direction:column;align-items:center;flex:1}

.head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:34px}
.head .mark{width:82px;height:82px;margin-bottom:18px}
.head b{font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.head span{font-size:13.5px;color:var(--muted);letter-spacing:.26em;margin-top:8px}
.head a{text-decoration:none;color:inherit}

.card{width:100%;background:var(--card);border:1px solid var(--cardbd);border-radius:20px;
      padding:38px 36px 34px;box-shadow:var(--shadow);transition:background .2s,border-color .2s}
.card h2{font-size:26px;font-weight:500;margin:0 0 7px;text-align:center;letter-spacing:-.01em}
.card .tip{font-size:15px;color:var(--muted);margin:0 0 30px;text-align:center}

label{display:block;font-size:15px;color:var(--muted2);margin:0 0 9px}
.field{margin-bottom:21px}
input{width:100%;height:55px;padding:0 17px;border-radius:12px;
      background:var(--in);border:1px solid var(--inbd);color:var(--txt);font-size:16px;outline:none;
      transition:border-color .15s,background .15s,box-shadow .15s}
input::placeholder{color:var(--inph)}
input:focus{border-color:#8b5cf6;background:var(--infocus);box-shadow:0 0 0 3px rgba(139,92,246,.16)}

.btn{width:100%;height:55px;border:0;border-radius:12px;cursor:pointer;
     background:linear-gradient(92deg,#f472b6,#8b5cf6 46%,#38bdf8);
     color:#fff;font-size:17px;font-weight:500;letter-spacing:.1em;
     box-shadow:0 12px 30px -14px rgba(139,92,246,.9);
     transition:transform .16s,box-shadow .16s,filter .16s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.07);
     box-shadow:0 18px 36px -14px rgba(139,92,246,1)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:disabled{opacity:.6;cursor:default;transform:none;filter:none}

.msg{display:none;margin:0 0 18px;padding:11px 14px;border-radius:10px;font-size:14px;line-height:1.55}
.msg.on{display:block}
.msg.err{background:rgba(185,28,28,.12);border:1px solid rgba(248,113,113,.34);color:#e05252}
html[data-theme="dark"] .msg.err{color:#fca5a5}
.msg.ok{background:rgba(21,128,61,.14);border:1px solid rgba(74,222,128,.32);color:#15803d}
html[data-theme="dark"] .msg.ok{color:#86efac}

.below{position:relative;z-index:2;margin:26px 0 0;font-size:15px;color:var(--muted);text-align:center}
.below a{color:#8b5cf6;text-decoration:none}
.below a:hover{text-decoration:underline}

footer{position:relative;z-index:2;padding:30px 0;font-size:13px;color:var(--muted)}

.tg{position:fixed;right:24px;top:22px;z-index:9;
    width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--tg);border:1px solid var(--tgbd);color:var(--tgic);cursor:pointer;
    box-shadow:0 8px 22px -14px rgba(0,0,0,.6);
    transition:transform .16s,border-color .16s,color .16s,background .2s}
.tg:hover{transform:scale(1.06);border-color:#8b5cf6;color:#8b5cf6}
.tg svg{width:19px;height:19px}
.tg .moon{display:none}
html[data-theme="dark"] .tg .sun{display:none}
html[data-theme="dark"] .tg .moon{display:block}

@media (max-width:560px){
  .wrap{padding-top:40px;max-width:100%}
  .head b{font-size:28px}
  .card{padding:30px 22px 28px}
  .tg{right:10px;width:40px;height:40px}
}