@import url('/static/vendor/css/fonts.css');

:root {
    --paper:#fffdf7;
    --paper-deep:#f9f1dd;
    --ink:#263238;
    --muted:#697177;
    --line:#2e3a3f;
    --coral:#f76f51;
    --coral-dark:#de5438;
    --leaf:#55b98a;
    --leaf-pale:#d9f3e7;
    --yellow:#f6ca58;
    --blue:#77b7df;
    --danger:#d84c43;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { min-height:100%; }
body { margin:0; color:var(--ink); background:var(--paper-deep); font-family:'Inter','Microsoft YaHei',sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.32; background-image:radial-gradient(circle at 16% 14%, rgba(50,60,60,.12) 0 1px, transparent 1.6px),radial-gradient(circle at 83% 74%, rgba(246,111,81,.13) 0 1px, transparent 1.8px); background-size:21px 19px, 27px 25px; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }

.auth-shell { position:relative; min-height:100vh; display:grid; grid-template-columns:minmax(360px, 560px) minmax(350px, 440px); align-items:center; justify-content:center; gap:clamp(42px, 8vw, 118px); padding:48px clamp(28px, 6vw, 96px); overflow:hidden; }
.auth-sketch { min-height:520px; display:flex; flex-direction:column; justify-content:center; }
.auth-brand { width:max-content; display:inline-flex; align-items:center; gap:13px; color:var(--ink); text-decoration:none; transform:rotate(-1.2deg); }
.auth-brand img { width:58px; height:58px; object-fit:contain; border:3px solid var(--line); border-radius:17px 13px 16px 12px; background:#fff; box-shadow:5px 6px 0 rgba(38,50,56,.14); }
.auth-brand > span { display:flex; flex-direction:column; line-height:1; }
.auth-brand strong { font-family:'Space Grotesk','Microsoft YaHei',sans-serif; font-size:25px; font-weight:850; }
.auth-brand small { margin-top:8px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.13em; }

.doodle-scene { position:relative; width:min(100%, 520px); height:390px; margin-top:28px; }
.doodle-scene i,.doodle-scene svg { width:100%; height:100%; stroke-width:2.4; }
.doodle-sun,.doodle-cloud,.doodle-star,.doodle-pencil { position:absolute; display:block; color:var(--line); }
.doodle-sun { right:15px; top:2px; width:74px; height:74px; color:var(--yellow); transform:rotate(8deg); }
.doodle-cloud { width:74px; height:48px; color:var(--blue); }
.doodle-cloud-one { left:10px; top:66px; transform:rotate(-7deg); }
.doodle-cloud-two { right:88px; top:92px; width:56px; transform:rotate(5deg); }
.doodle-star { width:30px; height:30px; color:var(--coral); }
.doodle-star-one { left:92px; top:8px; transform:rotate(-10deg); }
.doodle-star-two { right:14px; top:190px; color:var(--leaf); transform:rotate(12deg); }
.doodle-paper { position:absolute; left:50%; top:54%; width:285px; height:238px; transform:translate(-50%,-50%) rotate(-2.5deg); border:3px solid var(--line); border-radius:9px 13px 8px 15px; background:var(--paper); box-shadow:9px 11px 0 rgba(38,50,56,.12); }
.doodle-paper::before,.doodle-paper::after { content:""; position:absolute; width:35px; height:85px; border:3px solid var(--line); border-radius:4px; background:var(--yellow); opacity:.8; }
.doodle-paper::before { left:-38px; bottom:20px; transform:rotate(-10deg); }
.doodle-paper::after { right:-38px; bottom:17px; height:110px; background:var(--blue); transform:rotate(9deg); }
.doodle-paper-pin { position:absolute; left:50%; top:-11px; width:55px; height:20px; transform:translateX(-50%) rotate(4deg); background:rgba(246,202,88,.7); border:2px solid rgba(46,58,63,.6); }
.doodle-leaf { position:absolute; left:27px; top:33px; width:64px !important; height:64px !important; color:var(--leaf); transform:rotate(-9deg); }
.doodle-picture { position:absolute; right:29px; top:28px; width:112px; height:90px; padding:16px; color:var(--coral); border:3px dashed var(--coral); border-radius:10px 6px 12px 8px; transform:rotate(3deg); }
.doodle-line { position:absolute; left:30px; height:8px; border-radius:999px; background:var(--blue); opacity:.72; }
.doodle-line-one { bottom:70px; width:210px; transform:rotate(1deg); }
.doodle-line-two { bottom:44px; width:155px; background:var(--yellow); transform:rotate(-2deg); }
.doodle-pencil { left:21px; bottom:14px; width:130px; height:130px; color:var(--coral); transform:rotate(-21deg); }
.doodle-stroke { position:absolute; display:block; height:11px; border:3px solid var(--line); border-radius:50%; border-left-color:transparent; border-right-color:transparent; }
.doodle-stroke-one { right:23px; bottom:36px; width:128px; transform:rotate(8deg); }
.doodle-stroke-two { left:128px; bottom:6px; width:88px; border-color:var(--leaf) transparent; transform:rotate(-8deg); }

.auth-panel { position:relative; width:min(430px, 100%); padding:38px 38px 30px; border:3px solid var(--line); border-radius:14px 10px 16px 12px; background:var(--paper); box-shadow:12px 14px 0 rgba(38,50,56,.14); transform:rotate(.35deg); }
.auth-panel::before { content:""; position:absolute; inset:7px; z-index:-1; border:1px dashed rgba(46,58,63,.22); border-radius:8px; }
.auth-tape { position:absolute; left:50%; top:-15px; width:92px; height:29px; transform:translateX(-50%) rotate(-2deg); background:rgba(119,183,223,.65); border:2px solid rgba(46,58,63,.62); }
.auth-admin-badge { width:max-content; height:29px; margin:0 0 18px; padding:0 10px; display:flex; align-items:center; gap:6px; border:2px solid var(--coral); border-radius:7px 10px 6px 9px; color:var(--coral-dark); background:#fff2ed; font-size:11px; font-weight:800; transform:rotate(-1.5deg); }
.auth-admin-badge i,.auth-admin-badge svg { width:14px; height:14px; }
.auth-head h1 { margin:0; font-family:'Space Grotesk','Microsoft YaHei',sans-serif; font-size:27px; line-height:1.2; letter-spacing:0; }
.auth-head h1::after { content:""; display:block; width:70px; height:8px; margin-top:8px; border-radius:50%; background:var(--yellow); transform:rotate(-2deg); opacity:.82; }
.auth-head p { margin:8px 0 0; color:var(--muted); font-size:13px; }
.auth-announcement { margin:17px 0 0; padding:10px 12px; border:2px dashed var(--leaf); border-radius:8px 5px 9px 6px; background:var(--leaf-pale); color:#27644e; font-size:12px; line-height:1.55; }

#authForm { margin-top:24px; display:flex; flex-direction:column; gap:15px; }
.auth-field { display:flex; flex-direction:column; gap:7px; }
.auth-field > span:first-child { color:#4f585d; font-size:12px; font-weight:800; }
.auth-input-wrap { height:48px; display:flex; align-items:center; gap:10px; padding:0 12px; border:2px solid #718087; border-radius:9px 6px 10px 7px; background:#fff; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.auth-field:nth-of-type(even) .auth-input-wrap { transform:rotate(-.25deg); }
.auth-input-wrap:focus-within { border-color:var(--coral); box-shadow:4px 5px 0 rgba(247,111,81,.15); transform:translateY(-1px) rotate(0); }
.auth-input-wrap > i,.auth-input-wrap > svg { width:18px; height:18px; flex:0 0 auto; color:var(--leaf); stroke-width:2.4; }
.auth-input-wrap input { min-width:0; flex:1; height:100%; padding:0; border:0; outline:0; color:var(--ink); background:transparent; font-size:14px; }
.auth-input-wrap input::placeholder { color:#9aa1a5; }
.auth-password-toggle { width:31px; height:31px; display:flex; align-items:center; justify-content:center; flex:0 0 31px; border:0; border-radius:7px; color:#798388; background:transparent; cursor:pointer; }
.auth-password-toggle:hover { color:var(--ink); background:#f3ead5; }
.auth-password-toggle i,.auth-password-toggle svg { width:16px; height:16px; }

.auth-submit { height:49px; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:8px; border:3px solid var(--line); border-radius:10px 7px 11px 8px; color:#fff; background:var(--coral); font-size:14px; font-weight:850; cursor:pointer; box-shadow:5px 6px 0 rgba(38,50,56,.16); transform:rotate(-.35deg); transition:background .15s ease, transform .15s ease, box-shadow .15s ease; }
.auth-submit:hover:not(:disabled) { background:var(--coral-dark); transform:translateY(-2px) rotate(0); box-shadow:6px 8px 0 rgba(38,50,56,.16); }
.auth-submit:disabled { opacity:.58; cursor:wait; }
.auth-submit i,.auth-submit svg { width:17px; height:17px; }
.auth-message { min-height:18px; color:var(--danger); font-size:12px; line-height:1.5; text-align:center; }
.auth-message.success { color:#26845f; }
.auth-switch { margin:5px 0 0; color:var(--muted); font-size:13px; text-align:center; }
.auth-switch a { color:var(--coral-dark); font-weight:850; text-decoration:underline; text-decoration-style:wavy; text-underline-offset:4px; }
.auth-foot { margin:22px 0 0; color:#8d9293; font-size:10px; font-weight:750; letter-spacing:.08em; text-align:center; }

@media (max-width:900px) {
    .auth-shell { grid-template-columns:1fr; gap:24px; padding:34px 20px 46px; overflow:visible; }
    .auth-sketch { min-height:auto; align-items:center; }
    .doodle-scene { height:180px; margin-top:10px; overflow:hidden; }
    .doodle-paper { top:69%; width:220px; height:150px; }
    .doodle-picture { width:78px; height:62px; padding:10px; }
    .doodle-leaf { width:48px !important; height:48px !important; }
    .doodle-line { display:none; }
    .doodle-pencil { bottom:-44px; }
    .doodle-paper::before,.doodle-paper::after { height:55px; }
    .auth-panel { justify-self:center; }
}

@media (max-width:520px) {
    .auth-shell { padding:24px 14px 34px; }
    .auth-brand img { width:48px; height:48px; }
    .auth-brand strong { font-size:21px; }
    .doodle-scene { height:116px; }
    .doodle-paper { top:88%; width:180px; height:112px; }
    .doodle-sun { width:48px; height:48px; }
    .doodle-cloud { width:48px; }
    .doodle-picture,.doodle-pencil,.doodle-paper::before,.doodle-paper::after { display:none; }
    .auth-panel { padding:32px 22px 24px; border-width:2px; box-shadow:7px 8px 0 rgba(38,50,56,.14); transform:none; }
    .auth-head h1 { font-size:23px; }
}

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; }
}