:root{color-scheme:dark;--bg:#080e16;--panel:#121c2a;--border:#2a3b50;--text:#edf4ff;--muted:#a7b7ca;--gold:#f2cc7c;--cyan:#85d8d4;--red:#ff9ba5;--green:#8cddb0}*{box-sizing:border-box}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 15% 35%,#18304266,transparent 60%),var(--bg);font:15px/1.9 "Segoe UI",Tahoma,sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}button,input{font:inherit}button,.button{border:1px solid var(--border);background:#1b2b3b;color:var(--text);border-radius:10px;padding:9px 16px;cursor:pointer}button:hover,.button:hover{border-color:var(--cyan)}button:disabled{opacity:.45;cursor:default}.primary{background:var(--cyan);color:#061a20;font-weight:700;border-color:var(--cyan)}.danger{color:var(--red)}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px max(24px,calc((100vw - 1240px)/2));border-bottom:1px solid var(--border);background:#0c141de8}.brand{display:flex;align-items:center;gap:12px;direction:ltr}.brand img{width:56px;height:56px;border-radius:50%;border:1px solid #d5af5966}.brand strong{font-size:23px;color:var(--gold);letter-spacing:1.5px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.7px}.header-label{color:var(--muted)}.auth-shell{max-width:1160px;margin:auto;padding:70px 28px;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:80px}.auth-intro h1{font-size:clamp(30px,3.3vw,43px);line-height:1.5;margin:20px 0;color:var(--gold)}.auth-intro>p:not(.eyebrow){font-size:18px;color:var(--muted)}.eyebrow{font-size:11px;letter-spacing:1px;color:var(--cyan);direction:ltr;text-align:start}.panel{background:linear-gradient(145deg,#182435,#101923);border:1px solid var(--border);border-radius:20px;padding:28px;box-shadow:0 22px 60px #0004}.panel h2{font-size:22px;margin:20px 0 8px}.auth-tabs{display:flex;gap:6px;padding:5px;background:#080f17;border:1px solid var(--border);border-radius:12px}.auth-tabs a{flex:1;text-align:center;padding:8px;border-radius:8px;color:var(--muted)}.auth-tabs a.active{background:#203540;color:var(--cyan)}.hint{font-size:13px;color:var(--muted);margin:10px 0 16px}label{display:block;margin:14px 0 6px}input{width:100%;border-radius:10px;padding:11px 13px;background:#0a121d;color:var(--text);border:1px solid var(--border)}input:focus{outline:2px solid var(--cyan);outline-offset:2px}form .primary{width:100%;margin-top:22px;padding:12px}.approval-note{display:flex;gap:14px;align-items:start;border-top:1px solid var(--border);margin-top:30px;padding-top:24px}.approval-note>span{font-size:26px}.approval-note strong{color:var(--cyan)}.approval-note p{color:var(--muted);font-size:14px;margin:5px 0}.account-help{border-top:1px solid var(--border);padding-top:18px;margin-bottom:0}#account-message:not(:empty){margin-top:16px;padding:12px 15px;border:1px solid var(--border);border-radius:10px;background:#091522}#account-message.error{color:var(--red);border-color:#693843}#account-message.success{color:var(--green);border-color:#305f4e}footer{text-align:center;color:var(--muted);font-size:11px;direction:ltr;padding:20px}.users-page{max-width:1240px;margin:auto;padding:36px 24px}.page-heading,.table-toolbar{display:flex;gap:20px;justify-content:space-between;align-items:center}.page-heading h1{margin:3px 0;font-size:30px}.page-heading p{margin:4px 0;color:var(--muted)}.counts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:25px 0}.counts article{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:15px}.counts strong{display:block;font-size:26px;color:var(--cyan)}.table-toolbar h2{margin:0}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:800px;text-align:start}th,td{padding:14px 10px;border-bottom:1px solid var(--border);vertical-align:top}th{color:var(--muted);font-size:12px;white-space:nowrap}td small{display:block;color:var(--muted);font-size:11px}td .email{display:block;direction:ltr;text-align:right;overflow-wrap:anywhere}td .actions{display:flex;gap:7px;flex-wrap:wrap}td .actions button{padding:5px 10px;font-size:12px}.status{display:inline-block;border-radius:8px;padding:3px 9px;font-size:12px;white-space:nowrap;background:#1b2b3b}.status.pending{color:var(--gold)}.status.approved{color:var(--green)}.status.blocked{color:var(--red)}.pagination{display:flex;gap:15px;align-items:center;justify-content:center;margin-top:22px}.empty{padding:36px;text-align:center;color:var(--muted)}@media(max-width:850px){.auth-shell{grid-template-columns:1fr;gap:30px;padding:30px 18px;max-width:620px}.auth-intro h1{font-size:30px}.auth-intro>p:not(.eyebrow){font-size:16px}.approval-note{margin-top:20px;padding-top:16px}.counts{grid-template-columns:repeat(2,1fr)}.page-heading{align-items:start;flex-direction:column}.panel{padding:20px}header{padding:14px 18px}.header-label{font-size:12px}.users-page{padding:25px 15px}}
/* FANUS logo atmosphere on both account pages. */
body{isolation:isolate;background:var(--bg)}
.auth-atmosphere{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,#12435740,transparent 72%),#07121e}
.auth-logo-scene{position:absolute;inset:-3%;background:url('/assets/auth-background.png') center center/cover no-repeat;opacity:.62;animation:auth-depth-drift 18s ease-in-out infinite alternate;will-change:transform}
.auth-beam{position:absolute;left:50%;top:20%;width:0;height:0;transform-origin:0 0;animation:auth-light-sweep 13s ease-in-out infinite alternate;mix-blend-mode:screen}.auth-beam:before,.auth-beam:after{content:'';position:absolute;left:0;top:0;width:80vmax;height:32vmax;background:linear-gradient(90deg,#ffde843d,#f5c85f18 42%,transparent 90%);clip-path:polygon(0 50%,100% 15%,100% 85%);filter:blur(5px);transform:translateY(-50%)}.auth-beam:after{transform:translateY(-50%) rotate(180deg);transform-origin:0 50%}
.auth-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,#ffe4a422,transparent 25%),radial-gradient(ellipse at 35% 70%,#48c9d916,transparent 40%);animation:auth-light-breathe 7s ease-in-out infinite}
header,main,footer{position:relative;z-index:1}header{background:#09131dde;backdrop-filter:blur(10px)}.account-header-actions{display:flex;align-items:center;gap:18px}.account-back{color:var(--cyan);white-space:nowrap}.account-back:before{content:'←';margin-inline-end:8px}html[dir=rtl] .account-back:before{content:'→'}
.auth-intro{padding:22px 24px;border-radius:18px;background:#07121ec9;backdrop-filter:blur(6px);border:1px solid #75bdce24}.auth-panel{background:linear-gradient(145deg,#182435f2,#101923f5);backdrop-filter:blur(12px)}.brand img{border-radius:12px;object-fit:contain}
@keyframes auth-depth-drift{from{transform:translate3d(-5px,2px,0) scale(1.012)}to{transform:translate3d(5px,-3px,0) scale(1.025)}}
@keyframes auth-light-sweep{0%{transform:rotate(-9deg);opacity:.35}50%{opacity:.7}100%{transform:rotate(9deg);opacity:.4}}
@keyframes auth-light-breathe{0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:850px){.auth-logo-scene{background-position:center;opacity:.45}.auth-intro{padding:18px}.account-header-actions{gap:10px}.account-header-actions .header-label{display:none}.brand img{width:44px;height:44px}.account-back{padding:7px 10px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.auth-logo-scene,.auth-beam,.auth-glow{animation:none!important;will-change:auto}.auth-beam{opacity:.35}}
/* A quieter account layout with a clear, compact form. */
body{line-height:1.65}
header{padding-block:14px}
.brand img{width:46px;height:46px}.brand strong{font-size:21px}
.account-back{background:#10213080;font-size:13px;padding:8px 14px}
.header-label{font-size:13px}
.auth-shell{max-width:1120px;min-height:calc(100svh - 136px);padding:44px 28px;gap:64px;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.auth-logo-scene{opacity:.44}
.auth-atmosphere:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#06101b75,transparent 55%,#06101b30),linear-gradient(0deg,#07101cb0,transparent 60%)}
.auth-intro{background:linear-gradient(130deg,#07121ea8,#07121e38);border:0;border-inline-start:2px solid #e5c27666;border-radius:0 16px 16px 0;padding:18px 28px;backdrop-filter:blur(5px)}
html[dir=rtl] .auth-intro{border-radius:16px 0 0 16px}
.auth-intro h1{font-size:clamp(30px,3vw,42px);line-height:1.22;max-width:440px;margin:22px 0}
.auth-intro>p:not(.eyebrow){font-size:16px;line-height:1.8;max-width:450px}
.eyebrow{font-size:10px;letter-spacing:1.7px}
.approval-note{border-color:#a1bdce24;margin-top:28px;padding-top:20px;gap:12px}
.approval-note>span{font-size:20px}.approval-note strong{font-size:13px}.approval-note p{font-size:13px;line-height:1.7}
.auth-panel{padding:28px 30px;border-radius:18px;border-color:#728aab40;background:linear-gradient(145deg,#152335f5,#0c1623f7);box-shadow:0 24px 80px #0005}
.auth-tabs{border:0;background:#07101b;padding:4px;gap:4px;border-radius:10px;font-size:13px}
.auth-tabs a{padding:9px 12px;transition:background .18s,color .18s}.auth-tabs a:hover{color:var(--text)}
.auth-tabs a.active{color:#c0f0eb;background:#274250;box-shadow:0 1px 5px #0002}
.panel h2{font-size:25px;line-height:1.3;margin:26px 0 10px;letter-spacing:-.3px}
.auth-panel>.hint{line-height:1.7;margin-bottom:22px}
label{font-size:13px;font-weight:600;margin:16px 0 7px;color:#d4dfec}
input{font-size:14px;min-height:48px;padding:12px 14px;background:#07111d;border-color:#6e8caa40;transition:border-color .18s,box-shadow .18s}
input:hover{border-color:#6e8caa80}input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px #85d8d41c}
.password-field{position:relative;direction:ltr}.password-field input{padding-right:50px}
.password-toggle{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:40px;height:40px;padding:10px;border:0;background:transparent;color:var(--muted);border-radius:8px}
.password-toggle:hover{color:var(--cyan);background:#85d8d410}.password-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.eye-slash{display:none}.password-toggle[aria-pressed=true] .eye-slash{display:block}
form .primary{min-height:48px;padding:11px;margin-top:24px;font-size:14px;border-radius:10px;box-shadow:0 4px 18px #85d8d410;transition:background .18s,box-shadow .18s}form .primary:hover{background:#b2e9e4;box-shadow:0 5px 24px #85d8d426}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.account-help{font-size:12px;line-height:1.8;padding-top:16px;margin-top:20px;border-color:#728aab26}
footer{font-size:10px;padding:16px;opacity:.7}
.auth-light-points{position:absolute;inset:0;z-index:1;overflow:hidden}
.auth-light-points i{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#eacb88;box-shadow:0 0 8px 2px #f2cf8050;opacity:0;animation:auth-point-float var(--duration,22s) ease-in-out infinite;animation-delay:var(--delay,0s);will-change:transform,opacity}
.auth-light-points i:nth-child(3n){background:#88d9df;box-shadow:0 0 8px 2px #88d9df35;width:3px;height:3px}
.auth-light-points i:nth-child(1){--x:7%;--y:32%;--duration:23s;--delay:-8s}.auth-light-points i:nth-child(2){--x:16%;--y:76%;--duration:28s;--delay:-16s}.auth-light-points i:nth-child(3){--x:24%;--y:48%;--duration:25s;--delay:-4s}.auth-light-points i:nth-child(4){--x:34%;--y:18%;--duration:26s;--delay:-12s}.auth-light-points i:nth-child(5){--x:42%;--y:85%;--duration:30s;--delay:-22s}.auth-light-points i:nth-child(6){--x:51%;--y:55%;--duration:24s;--delay:-7s}.auth-light-points i:nth-child(7){--x:62%;--y:30%;--duration:29s;--delay:-19s}.auth-light-points i:nth-child(8){--x:70%;--y:78%;--duration:27s;--delay:-13s}.auth-light-points i:nth-child(9){--x:78%;--y:45%;--duration:22s;--delay:-3s}.auth-light-points i:nth-child(10){--x:87%;--y:20%;--duration:28s;--delay:-20s}.auth-light-points i:nth-child(11){--x:94%;--y:68%;--duration:25s;--delay:-11s}.auth-light-points i:nth-child(12){--x:5%;--y:90%;--duration:30s;--delay:-17s}
@keyframes auth-point-float{0%,100%{transform:translate3d(0,18px,0);opacity:0}25%{opacity:.32}55%{transform:translate3d(16px,-20px,0);opacity:.48}80%{opacity:.2}}
@media(max-width:850px){.auth-shell{display:flex;flex-direction:column;gap:26px;min-height:calc(100svh - 120px);padding:30px 20px;max-width:540px}.auth-panel{order:0;width:100%;padding:24px}.auth-intro{order:1;width:100%;padding:12px 18px}.auth-intro h1{font-size:28px;margin:12px 0}.auth-intro>p:not(.eyebrow){font-size:14px}.approval-note{margin-top:16px;padding-top:14px}.auth-logo-scene{opacity:.36}.auth-intro .eyebrow{display:none}.panel h2{font-size:23px}.brand small{font-size:8px;letter-spacing:1px}.brand strong{font-size:19px}}
@media(max-width:390px){header{padding:12px}.brand{gap:8px}.brand small{display:none}.account-back{padding:8px 10px}.auth-shell{padding-inline:14px}.auth-panel{padding:22px 18px}}
@media(prefers-reduced-motion:reduce){.auth-light-points i{animation:none;opacity:.2;will-change:auto}a,button,input{transition:none!important}}
/* Registration motion: slow depth, a sparse network and three orbiting nodes. */
body[data-account-page=register] .auth-logo-scene{animation:auth-register-depth 26s ease-in-out infinite alternate;opacity:.42}
body[data-account-page=register] .auth-beam{animation-duration:24s;filter:blur(2px)}
body[data-account-page=register] .auth-glow{animation-duration:12s;background:radial-gradient(ellipse at 50% 20%,#ffe4a41c,transparent 28%),radial-gradient(ellipse at 70% 65%,#48c9d912,transparent 44%)}
body[data-account-page=register] .auth-light-points i{width:3px;height:3px;box-shadow:0 0 7px 1px #f2cf8030}
.auth-network{position:absolute;inset:-8%;z-index:1;background-image:linear-gradient(#76b9cb12 1px,transparent 1px),linear-gradient(90deg,#76b9cb12 1px,transparent 1px);background-size:92px 92px;mask-image:radial-gradient(ellipse at 50% 35%,#0007,transparent 64%);transform:translate3d(calc(var(--auth-parallax-x,0px)*-.5),calc(var(--auth-parallax-y,0px)*-.5),0);transition:transform 1.2s ease-out}
.auth-orbits{position:absolute;left:50%;top:20%;width:clamp(260px,30vw,460px);height:180px;transform:translate(-50%,-50%) translate3d(var(--auth-parallax-x,0px),var(--auth-parallax-y,0px),0);z-index:1;opacity:.38;transition:transform 1.2s ease-out}
.auth-orbits i{position:absolute;inset:0;border:1px solid #9fc9dc16;border-radius:50%;transform:rotate(-24deg)}
.auth-orbits i:nth-child(2){inset:20px 12px;transform:rotate(26deg);opacity:.7}.auth-orbits i:nth-child(3){inset:8px 38px;transform:rotate(74deg);opacity:.6}
.auth-orbits span{position:absolute;width:4px;height:4px;border-radius:50%;background:#c5e9ed;box-shadow:0 0 9px 2px #95d9e54d;offset-path:ellipse(48% 44% at 50% 50%);offset-rotate:0deg;animation:auth-node-orbit 42s linear infinite}
.auth-orbits i:nth-child(2) span{background:#f4d694;box-shadow:0 0 9px 2px #f4d69440;animation-duration:56s;animation-delay:-24s;animation-direction:reverse}.auth-orbits i:nth-child(3) span{width:3px;height:3px;animation-duration:64s;animation-delay:-39s}
body[data-account-page=register] .auth-panel{background:radial-gradient(240px circle at var(--hover-x,50%) var(--hover-y,50%),#85d8d408,transparent 75%),linear-gradient(145deg,#152335f5,#0c1623f7);transition:border-color 1s ease,box-shadow 1s ease}
body[data-account-page=register] .auth-panel.motion-hover{border-color:#85d8d466;box-shadow:0 24px 80px #0005,0 0 32px #6ac6d208}
body.motion-paused .auth-atmosphere *,body.motion-paused .auth-atmosphere *:before,body.motion-paused .auth-atmosphere *:after{animation-play-state:paused!important}
@keyframes auth-register-depth{from{transform:translate3d(calc(var(--auth-parallax-x,0px) - 2px),calc(var(--auth-parallax-y,0px) + 1px),0) scale(1.016)}to{transform:translate3d(calc(var(--auth-parallax-x,0px) + 2px),calc(var(--auth-parallax-y,0px) - 1px),0) scale(1.024)}}
@keyframes auth-node-orbit{to{offset-distance:100%}}
@media(max-width:850px){.auth-network{opacity:.6;background-size:76px 76px}.auth-orbits{opacity:.23;width:300px}body[data-account-page=register] .auth-logo-scene{opacity:.34}}
@media(prefers-reduced-motion:reduce){.auth-orbits span{animation:none;offset-distance:30%}.auth-orbits i:nth-child(2) span{offset-distance:65%}.auth-orbits i:nth-child(3) span{offset-distance:85%}.auth-network,.auth-orbits{transform:none;transition:none}.auth-orbits{margin-left:-150px;margin-top:-90px;width:300px}body[data-account-page=register] .auth-logo-scene{animation:none!important;transform:none;will-change:auto}body[data-account-page=register] .auth-panel{transition:none}}
