/* SpaceLogin × MagicLinkOtpLogin, adapted to Kiến Học without dependencies. */
.auth-modal,.auth-account-menu{--bg:var(--paper,#090a11);--card:var(--surface,#15151e);--text:var(--ink,#f2edf7);--accent:var(--red,#b9a8e9);color:var(--text);font-family:'Be Vietnam Pro',system-ui,sans-serif}
.auth-modal{width:min(860px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:0;margin:auto;overflow:auto;overscroll-behavior:contain;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(130deg,color-mix(in srgb,var(--card) 90%,transparent),color-mix(in srgb,var(--bg) 94%,transparent));box-shadow:0 40px 140px #0009,0 10px 40px #0006,inset 0 1px 0 #fff2;backdrop-filter:blur(30px) saturate(1.35);-webkit-backdrop-filter:blur(30px) saturate(1.35);isolation:isolate;scrollbar-width:thin}
.auth-modal:not([open]){display:none}.auth-modal[open]{animation:auth-enter .32s cubic-bezier(.2,.8,.2,1)}.auth-modal::backdrop{background:#05050caf;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.auth-modal *{box-sizing:border-box}.auth-modal button,.auth-modal input{font:inherit}.auth-modal button{cursor:pointer}.auth-modal button:disabled{cursor:wait;opacity:.55}.auth-modal [data-auth-resend]:disabled{cursor:default}.auth-modal button:focus-visible,.auth-modal input:focus-visible,.btn-auth:focus-visible,.auth-sync-link:focus-visible,.auth-account-menu button:focus-visible{outline:2px solid var(--accent,var(--red));outline-offset:4px}.auth-modal svg,.btn-auth svg,.auth-account-menu svg{width:20px;height:20px;flex-shrink:0}
.auth-starfield{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:.8}.auth-orbit{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 10% 90%,#6d76a62b,transparent 60%),radial-gradient(ellipse at 90% 0%,#bf97d81c,transparent 50%)}
.auth-close{position:absolute;right:18px;top:18px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #ffffff1c;border-radius:50%;color:var(--text);background:#ffffff08;z-index:3;transition:background .2s,transform .2s}.auth-close:hover{background:#ffffff18;transform:rotate(8deg)}
.auth-layout{display:grid;grid-template-columns:.88fr 1.12fr;min-height:570px}.auth-story{position:relative;padding:34px 32px;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--line);background:linear-gradient(160deg,#a292c30c,#6d9ca60a 70%,#d8b48614)}
.auth-wordmark{display:flex;align-items:center;gap:12px;color:var(--text)!important;text-decoration:none;font:italic 30px/1 Georgia,serif}.auth-wordmark>span{font:600 16px/1.5 'Be Vietnam Pro',system-ui,sans-serif;letter-spacing:-.6px}.auth-story-copy{position:relative;margin-top:auto;z-index:1}.auth-story-copy>span{font-size:8px;letter-spacing:1.6px;color:var(--gold);line-height:1.8}.auth-story h2{font:400 44px/1.15 Lora,Georgia,serif;letter-spacing:-1.5px;margin:15px 0 18px;color:var(--text)}.auth-story h2 em{color:var(--accent);font-weight:400}.auth-story p{font-size:11px;line-height:1.95;color:var(--muted)}.auth-story-bottom{display:flex;align-items:center;gap:8px;margin-top:38px;font-size:7px;letter-spacing:1.25px;color:var(--muted)}.auth-status-dot,.auth-demo-badge>span{height:4px;width:4px;background:var(--green);border-radius:50%;box-shadow:0 0 10px color-mix(in srgb,var(--green) 45%,transparent)}
.auth-planet{position:absolute;top:84px;right:-80px;height:260px;width:330px;transform:rotate(-26deg);opacity:.9;pointer-events:none}.auth-planet>span{position:absolute;top:38px;left:73px;width:156px;height:156px;border-radius:50%;background:radial-gradient(circle at 34% 24%,#c6b2df7a,#706c9573 30%,#171b31 65%);box-shadow:inset 7px 4px 16px #e3d3ff2e,-10px -7px 55px #aa8bc825,20px 20px 35px #05060a}.auth-planet>i{position:absolute;top:96px;left:16px;width:280px;height:45px;border:2px solid #b3a0cc58;border-left:14px solid #cbb4e552;border-right:10px solid #6d9aa046;border-radius:50%;box-shadow:0 0 20px #ad99cd16;transform:rotate(-5deg)}
.auth-content{position:relative;padding:46px 40px 26px;display:flex;flex-direction:column;justify-content:center;min-width:0}.auth-demo-badge{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:8px;letter-spacing:1.4px;margin:0 0 30px;line-height:1.5}.auth-demo-badge>span{background:var(--gold);box-shadow:0 0 9px #d8b48644}.auth-kicker{font-size:8px;letter-spacing:1.6px;color:var(--accent);font-weight:500}.auth-modal #auth-title{font:500 29px/1.28 Lora,Georgia,serif;letter-spacing:-.8px;color:var(--text);margin:12px 0 10px;outline:none}.auth-modal .auth-description{font-size:11px;line-height:1.85;color:var(--muted);margin:0 0 24px;max-width:320px}
.auth-field{display:block;margin:16px 0 0}.auth-field>span:first-child{display:block;font-size:10px;margin-bottom:9px;color:var(--text)}.auth-input-shell{height:52px;display:flex;align-items:center;gap:11px;padding:0 14px;border:1px solid #ffffff20;border-radius:14px;background:linear-gradient(150deg,#ffffff09,#ffffff03);box-shadow:inset 0 1px 0 #ffffff0a,0 4px 12px #0001;transition:border-color .2s,box-shadow .2s}.auth-input-shell:focus-within{border-color:color-mix(in srgb,var(--accent) 65%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent),inset 0 1px 0 #ffffff0d}.auth-input-shell>svg{width:17px;height:17px;color:var(--muted);opacity:.75}.auth-modal .auth-input-shell input{width:100%;height:100%;min-width:0;color:var(--text);background:transparent;border:0;outline:none;box-shadow:none;border-radius:0;font-size:12px;padding:0;caret-color:var(--accent);letter-spacing:0;user-select:text}.auth-modal .auth-input-shell input::placeholder{color:var(--muted);opacity:.55}.auth-modal input:-webkit-autofill{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 1000px var(--card) inset}.auth-eye{display:grid;place-items:center;width:32px;height:40px;padding:6px;flex-shrink:0;background:none;border:0;color:var(--muted)}.auth-eye svg{width:18px;height:18px}
.auth-primary{min-height:48px;width:100%;padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #eee1ff4a;border-radius:13px;background:linear-gradient(125deg,#c9b7eb,#a9a7d5);color:#171322;font-size:12px!important;font-weight:600!important;box-shadow:inset 0 1px 0 #fff6,0 8px 25px #aca1d41c;transition:filter .2s,transform .2s}.auth-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}.auth-primary:active{transform:translateY(0)}.auth-primary svg{width:17px;height:17px}.auth-error{color:var(--red)!important;font-size:10px;line-height:1.8;margin:9px 0;min-height:5px}.auth-error:not(:empty){color:#f2a9a9!important;padding:7px 10px;border:1px solid #f2a9a92b;border-radius:8px;background:#f2a9a908}
.auth-divider{display:flex;align-items:center;gap:12px;margin:25px 0 17px;color:var(--muted);font-size:6px;letter-spacing:1.25px}.auth-divider:before,.auth-divider:after{content:'';height:1px;background:var(--line);flex:1}.auth-switch{min-height:40px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px!important;line-height:1.7!important;padding:7px 4px;color:var(--muted);border:0;background:none;border-radius:8px;transition:color .2s,background .2s}.auth-switch:hover{color:var(--text);background:#ffffff05}.auth-switch svg{width:15px;height:15px}.auth-demo-notice{border-top:1px solid var(--line);padding-top:16px;margin:22px 0 0!important;font-size:8px!important;line-height:1.85!important;color:var(--muted)!important;opacity:.8}.auth-form-options{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:15px 0 5px;font-size:9px;color:var(--muted)}.auth-form-options label{display:flex;align-items:center;gap:7px}.auth-form-options input{width:13px;height:13px;accent-color:var(--accent)}.auth-form-options button,.auth-email-display button{padding:6px 0;border:0;background:none;color:var(--accent);font-size:9px}
.auth-email-display{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--text)!important;overflow-wrap:anywhere;line-height:1.7;margin:0 0 22px}.auth-email-display button{border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);padding:0}.auth-modal[data-step="code"] .auth-description{margin-bottom:5px}.auth-otp-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.auth-modal .auth-otp-grid input{width:100%;min-width:0;height:56px;text-align:center;border:1px solid #ffffff29;border-radius:12px;color:var(--text);background:#ffffff06;font:500 24px/1 'Be Vietnam Pro',sans-serif;padding:0;caret-color:var(--accent);box-shadow:inset 0 1px 0 #ffffff08;transition:border-color .2s,box-shadow .2s}.auth-modal .auth-otp-grid input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent),0 0 22px #b9a8e910}.auth-modal[aria-busy="true"] .auth-otp-grid input{border-color:color-mix(in srgb,var(--green) 55%,transparent);color:var(--green)}.auth-code-help{font-size:9px!important;line-height:1.9;margin:14px 0 0;color:var(--muted)}.auth-code-help b{color:var(--accent);letter-spacing:2px;font-weight:500}.auth-verify-status{display:flex;align-items:center;gap:7px;min-height:18px;font-size:9px;color:var(--green)!important;margin:8px 0 0;line-height:1.7}.auth-resend{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:9px;color:var(--muted);border-top:1px solid var(--line);padding-top:13px}.auth-resend button{min-height:36px;border:0;padding:5px 0;background:none;color:var(--accent);font-size:9px;font-variant-numeric:tabular-nums}.auth-code-switch{margin-top:10px}
.auth-envelope{position:relative;perspective:400px;width:88px;height:78px;margin:0 0 25px}.auth-envelope-back{position:absolute;left:8px;top:28px;height:48px;width:72px;border:1px solid #b9a8e94d;border-radius:8px;background:#252435}.auth-envelope-flap{position:absolute;left:8px;top:28px;width:72px;height:32px;transform-origin:top;background:#756592;clip-path:polygon(0 0,100% 0,50% 100%);transform:rotateX(180deg);animation:auth-envelope-flap .58s cubic-bezier(.2,.8,.2,1)}.auth-envelope-paper{position:absolute;left:19px;top:24px;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:8px;width:50px;height:50px;border:1px solid #ffffff25;border-radius:6px;background:#333040;transform:translateY(-10px);animation:auth-envelope-paper .72s cubic-bezier(.2,.8,.2,1)}.auth-envelope-paper>span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--green);color:#15251f}.auth-envelope-paper svg{width:12px;height:12px;stroke-width:2.5}.auth-envelope-paper>i{display:block;width:24px;height:2px;border-radius:2px;background:#b9a8e940}.auth-envelope-paper>i:last-child{width:16px}.auth-envelope-front{position:absolute;left:7px;top:27px;width:74px!important;height:50px!important}.auth-envelope-front path:first-child{fill:#292637;stroke:#b9a8e947;stroke-width:.7}.auth-envelope-front path:last-child{fill:none;stroke:#b9a8e94d;stroke-width:.8}
.auth-success-stamp{display:grid;place-items:center;width:64px;height:64px;margin-bottom:28px;border-radius:20px;border:1px solid color-mix(in srgb,var(--green) 40%,transparent);color:var(--green);background:linear-gradient(145deg,#95d8bf26,#95d8bf08);box-shadow:0 0 40px #95d8bf13,inset 0 1px 0 #ffffff15;animation:auth-stamp .5s cubic-bezier(.2,.8,.2,1)}.auth-success-stamp svg{width:28px;height:28px}.auth-success-caption{font-size:11px!important;line-height:1.9;margin:8px 0 27px;color:var(--muted)}.auth-spinner{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;flex-shrink:0;animation:auth-spin .7s linear infinite}
.auth-trigger-wrap{position:relative;flex-shrink:0}.night-theme .btn.btn-auth{font-size:10px;padding:8px 12px;min-height:42px;gap:9px;white-space:nowrap;color:var(--ink);border-color:#c2a7df33;background:linear-gradient(140deg,#c2a7df14,#ffffff05)}.avatar-dot{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;flex:0 0 25px;border:1px solid #d6c3f045;border-radius:50%;background:linear-gradient(140deg,#cbb5e938,#9badd414);color:var(--ink);font-size:9px;font-weight:600}.avatar-dot svg{width:14px;height:14px}.auth-chevron{opacity:.6;font-size:12px}.auth-sync-link{display:block;width:100%;padding:7px 2px;background:none;border:0;border-radius:5px;color:var(--muted);font-size:8px;line-height:1.7;text-align:center;transition:color .2s}.auth-sync-link:hover{color:var(--ink)}.auth-sidebar-status{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin-top:7px;font-size:8px;color:var(--muted);line-height:1.8;min-width:0}.auth-sidebar-status>span:last-child{min-width:0}.auth-sidebar-status b{display:block;font-weight:500;color:var(--ink);overflow-wrap:anywhere;max-width:180px}.night-theme .sidebar-bottom .auth-sidebar-status small{display:block;text-align:left;margin:3px 0 0;font-size:7px;color:var(--muted)}.auth-connected-dot{width:4px;height:4px;flex-shrink:0;border-radius:50%;background:var(--green);margin-top:5px}
.auth-account-menu{position:fixed;width:280px;max-width:calc(100vw - 24px);z-index:100;padding:20px;border:1px solid #ffffff26;border-radius:18px;background:linear-gradient(145deg,#2d2839f5,#15151ef5);box-shadow:0 16px 70px #0008,inset 0 1px 0 #ffffff12;backdrop-filter:blur(24px)}.auth-account-menu[hidden]{display:none}.auth-menu-label{display:block;font-size:7px;letter-spacing:1.1px;color:var(--gold);margin-bottom:10px}.auth-account-menu strong{font-size:12px;font-weight:500;overflow-wrap:anywhere}.auth-account-menu p{font-size:10px;line-height:1.9;color:var(--muted);margin:10px 0 15px}.auth-account-menu button{width:100%;padding:12px;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;color:var(--text);background:#ffffff06;font:11px 'Be Vietnam Pro',sans-serif}.auth-account-menu button:hover{background:#ffffff10}.auth-account-menu svg{width:15px;height:15px}.auth-mobile-btn{display:none!important}
@keyframes auth-enter{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes auth-envelope-flap{from{transform:rotateX(0)}to{transform:rotateX(180deg)}}@keyframes auth-envelope-paper{from{transform:translateY(14px)}to{transform:translateY(-10px)}}@keyframes auth-stamp{0%{opacity:0;transform:scale(1.25) rotate(-16deg)}70%{opacity:1;transform:scale(.94) rotate(3deg)}100%{transform:none}}@keyframes auth-spin{to{transform:rotate(360deg)}}
@media(min-width:801px) and (max-width:1450px){.header-actions{gap:12px}.header-actions .live-label{display:none}.night-theme .night-breadcrumb{min-width:0}.night-breadcrumb strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32vw}}
@media(max-width:800px){.auth-mobile-btn{display:inline-flex!important}.mobile-topbar .btn.auth-mobile-btn{padding:4px;width:40px;height:40px;min-height:40px;flex:0 0 40px}.mobile-topbar{gap:9px}.mobile-brand{margin-right:auto}.auth-modal{width:min(470px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border-radius:24px}.auth-layout{grid-template-columns:1fr;min-height:0}.auth-story{display:none}.auth-content{padding:35px 28px 25px;min-height:520px}.auth-demo-badge{margin-bottom:28px}.auth-modal #auth-title{font-size:30px}.auth-modal .auth-description{font-size:12px}.auth-close{right:14px;top:14px}.auth-demo-notice{font-size:9px!important}.auth-field>span:first-child{font-size:11px}.auth-modal .auth-input-shell input{font-size:16px}.auth-primary{font-size:12px!important}.auth-switch{font-size:11px!important}.auth-otp-grid{gap:7px}.auth-modal .auth-otp-grid input{height:55px;font-size:23px}.auth-code-help,.auth-resend,.auth-resend button{font-size:10px!important}.auth-form-options{font-size:10px}.auth-form-options button{font-size:10px}.auth-code-switch{margin-top:14px}.auth-sidebar-status{font-size:9px}.auth-sync-link{font-size:9px;min-height:35px}}
@media(max-width:360px){.auth-content{padding:32px 20px 22px}.auth-otp-grid{gap:5px}.auth-modal .auth-otp-grid input{height:48px;border-radius:9px}.auth-form-options{gap:5px}.auth-demo-badge{font-size:7px}.mobile-brand{font-size:20px}.auth-modal #auth-title{font-size:27px}}
@media(prefers-reduced-motion:reduce){.auth-modal,.auth-modal *{animation:none!important;transition:none!important}.auth-spinner{border-style:dotted}}.motion-paused .auth-modal,.motion-paused .auth-modal *{animation:none!important;transition:none!important}