/* SecureFam login - cute cartoon 3D style */
:root{--a:#E8720C;--a2:#C05F0A;--ink3:#3a2414}
*{box-sizing:border-box}
body.s3{margin:0;min-height:100vh;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink3);overflow-x:hidden;
 background:#fff3e6;background:linear-gradient(180deg,color-mix(in srgb,var(--a) 14%,#fffaf3) 0%,color-mix(in srgb,var(--a) 26%,#ffeedd) 70%,color-mix(in srgb,var(--a) 34%,#ffe2c4) 100%);background-attachment:fixed}
.scene{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.sun3{position:absolute;right:7%;top:7%;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff6b0,#ffd54a 60%,#ffb703);box-shadow:0 0 0 18px rgba(255,214,74,.18),0 0 0 40px rgba(255,214,74,.09);animation:sunb 6s ease-in-out infinite}
.sun3:before,.sun3:after{content:'';position:absolute;top:44px;width:9px;height:9px;border-radius:50%;background:#7a4a00}.sun3:before{left:34px}.sun3:after{right:34px}
.sun3 i{position:absolute;left:38px;top:60px;width:34px;height:17px;border:4px solid #7a4a00;border-top:0;border-radius:0 0 34px 34px}
@keyframes sunb{50%{transform:translateY(8px) rotate(4deg)}}
.cloud3{position:absolute;height:44px;background:#fff;border-radius:44px;opacity:.92;box-shadow:0 8px 20px rgba(150,80,20,.08);animation:drift linear infinite}
.cloud3:before,.cloud3:after{content:'';position:absolute;background:#fff;border-radius:50%}
.cloud3:before{width:56%;height:150%;left:14%;top:-60%}.cloud3:after{width:38%;height:120%;right:12%;top:-42%}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.hills3{position:absolute;left:0;right:0;bottom:0;width:100%;height:30vh;min-height:170px}
.coin3{position:absolute;bottom:-70px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff6c9,#FFC93C 55%,#e9a400);box-shadow:inset 0 -4px 6px rgba(150,90,0,.35),0 8px 16px rgba(120,60,0,.18);animation:rise3 linear infinite}
.coin3:before,.coin3:after{content:'';position:absolute;top:36%;width:12%;height:14%;border-radius:50%;background:#6b4200}.coin3:before{left:30%}.coin3:after{right:30%}
.coin3 i{position:absolute;left:34%;top:56%;width:32%;height:15%;border:3px solid #6b4200;border-top:0;border-radius:0 0 40px 40px}
@keyframes rise3{0%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-58vh) rotate(8deg)}100%{transform:translateY(-118vh) rotate(-8deg)}}
.spark3{position:absolute;width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:tw 2.4s ease-in-out infinite;opacity:.9}
@keyframes tw{50%{transform:scale(.3) rotate(45deg);opacity:.3}}
.wrap3{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px 40px}
.brand3{text-align:center;margin-bottom:18px}
.brand3 h1{margin:0;font-size:clamp(22px,3.6vw,36px);font-weight:900;letter-spacing:-.4px;color:var(--ink3)}
.brand3 h1 span{color:var(--a2)}.brand3 p{margin:6px 0 0;color:#8a6a52;font-weight:600}
img.logo3{width:76px;height:76px;margin:0 auto 10px;display:block;border-radius:50%;object-fit:cover;background:#fff;border:4px solid #fff;box-shadow:0 10px 24px rgba(150,70,0,.22);animation:pop .8s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{transform:scale(.3)}}
/* portal chooser */
.portals{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;max-width:1080px;width:100%;perspective:1100px}
.pcard{position:relative;display:block;text-decoration:none;color:var(--ink3);text-align:center;padding:12px 14px 20px;border-radius:30px;background:#fff;border:3px solid #fff;
 box-shadow:0 10px 0 color-mix(in srgb,var(--a) 35%,#f3dcc6),0 22px 40px rgba(120,60,10,.18);transform-style:preserve-3d;transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s;animation:pop .7s cubic-bezier(.3,1.6,.5,1) both}
.pcard:nth-child(2){animation-delay:.07s}.pcard:nth-child(3){animation-delay:.14s}.pcard:nth-child(4){animation-delay:.21s}.pcard:nth-child(5){animation-delay:.28s}
.pcard:before{content:'';position:absolute;left:10px;right:10px;top:10px;height:46%;border-radius:22px;background:color-mix(in srgb,var(--a) 14%,#fff);z-index:0}
.pcard .mascot{position:relative;width:120px;height:132px;margin:2px auto 4px;display:block;transform:translateZ(50px)}
.pcard h3{position:relative;margin:2px 0 4px;font-size:18px;font-weight:900;transform:translateZ(30px)}
.pcard span{position:relative;display:block;font-size:12.5px;color:#8a6a52;transform:translateZ(20px)}
.pcard .go3{display:inline-block;margin-top:10px;padding:7px 16px;border-radius:99px;background:var(--a);color:#fff;font-weight:800;font-size:13px;box-shadow:0 4px 0 var(--a2);transform:translateZ(25px)}
.pcard:hover{box-shadow:0 14px 0 color-mix(in srgb,var(--a) 45%,#f3dcc6),0 30px 50px rgba(120,60,10,.25)}
.pcard:hover .bob{animation:jump .6s cubic-bezier(.3,1.6,.5,1)}.pcard:hover .hr{animation:wave .5s ease-in-out 2}
/* mascot animation */
.mascot .bob{animation:float3 3.2s ease-in-out infinite;transform-origin:110px 210px}
@keyframes float3{50%{transform:translateY(-6px)}}
@keyframes jump{30%{transform:translateY(-22px) scale(1.04,.96)}60%{transform:translateY(0) scale(.97,1.03)}}
.mascot .hand{transition:transform .35s cubic-bezier(.3,1.5,.5,1);transform-box:fill-box;transform-origin:center}
.mascot .pupils{transition:transform .12s}
.mascot .lids,.mascot .mouth-o,.mascot .mouth-sad{opacity:0;transition:opacity .2s}
.mascot .eyes{transition:transform .2s;transform-box:fill-box;transform-origin:center}
@keyframes wave{50%{transform:translate(4px,-26px) rotate(-25deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.mascot .eyes{animation:blink 5s infinite}
.mascot.wave .hr{animation:wave .55s ease-in-out 3}
.mascot.shy .hl{transform:translate(42px,-38px)}.mascot.shy .hr{transform:translate(-42px,-38px)}
.mascot.shy.peek .hr{transform:translate(-30px,-14px)}
.mascot.shy .mouth{opacity:0}.mascot.shy .mouth-o{opacity:1}
.mascot.sad .mouth{opacity:0}.mascot.sad .mouth-sad{opacity:1}.mascot.sad .eyes{animation:none;transform:scaleY(.75)}
.mascot.happy .eyes{opacity:0;animation:none}.mascot.happy .lids{opacity:1}
/* login card */
.lcard{position:relative;width:100%;max-width:430px;perspective:1000px;margin-top:150px}
.lcard .mascot.big{position:absolute;left:50%;top:-142px;width:150px;height:166px;margin-left:-75px;z-index:3;filter:drop-shadow(0 10px 12px rgba(120,60,10,.18))}
.lcard .inner{position:relative;background:#fff;color:var(--ink3);border-radius:32px;padding:34px 28px 24px;text-align:center;transform-style:preserve-3d;transition:transform .12s ease-out;
 border:3px solid #fff;box-shadow:0 12px 0 color-mix(in srgb,var(--a) 35%,#f3dcc6),0 34px 70px rgba(120,60,10,.22)}
.lcard h2{margin:6px 0 4px;font-size:25px;font-weight:900;transform:translateZ(30px)}.lcard p.sub{margin:0 0 16px;color:#8a6a52;font-size:13.5px}
.bubble3{position:absolute;left:calc(50% + 70px);top:-120px;z-index:4;background:#fff;color:var(--ink3);font-weight:800;font-size:13px;padding:9px 13px;border-radius:16px 16px 16px 4px;box-shadow:0 8px 18px rgba(120,60,10,.18);white-space:nowrap;animation:pop .6s .3s cubic-bezier(.3,1.6,.5,1) both}
.fld{position:relative;margin:14px 0;text-align:left;transform:translateZ(20px)}
.fld input{width:100%;padding:22px 46px 8px 16px;border:2.5px solid color-mix(in srgb,var(--a) 22%,#f1e1d1);border-radius:18px;background:color-mix(in srgb,var(--a) 4%,#fffaf5);font:inherit;font-size:15.5px;color:var(--ink3);transition:.2s}
.fld input:focus{outline:none;border-color:var(--a);background:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--a) 18%,transparent)}
.fld label{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#a08a78;font-size:14.5px;pointer-events:none;transition:.18s}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label{top:13px;transform:none;font-size:11px;font-weight:800;color:var(--a2)}
.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:12px;font-weight:800;color:var(--a2);user-select:none;background:color-mix(in srgb,var(--a) 12%,#fff);padding:6px 9px;border-radius:10px}
.btn3{width:100%;margin-top:12px;padding:15px;border:0;border-radius:18px;font:inherit;font-size:17px;font-weight:900;color:#fff;cursor:pointer;transform:translateZ(35px);letter-spacing:.3px;
 background:linear-gradient(180deg,color-mix(in srgb,var(--a) 80%,#fff),var(--a));box-shadow:0 7px 0 var(--a2),0 14px 24px color-mix(in srgb,var(--a) 40%,transparent);transition:transform .1s,box-shadow .1s}
.btn3:hover{filter:brightness(1.05)}.btn3:active{transform:translateZ(35px) translateY(6px);box-shadow:0 1px 0 var(--a2),0 5px 10px rgba(0,0,0,.15)}
.err3{background:#ffe3e3;color:#c92a2a;border-radius:14px;padding:10px;font-weight:700;font-size:13.5px;margin-bottom:6px}
.ok3{background:#e3fae8;color:#2b8a3e;border-radius:14px;padding:10px;font-weight:700;font-size:13.5px;margin-bottom:6px}
.back3{display:inline-block;margin-top:16px;color:var(--a2);font-size:13.5px;text-decoration:none;font-weight:800}
.foot3{margin-top:24px;font-size:12px;color:#8a6a52;text-align:center;font-weight:600}
.tabs3{display:flex;gap:6px;background:color-mix(in srgb,var(--a) 10%,#f8efe6);border-radius:16px;padding:5px;margin:0 0 12px;transform:translateZ(20px)}
.tabs3 a{flex:1;text-align:center;padding:9px;border-radius:12px;font-weight:800;font-size:13.5px;color:#8a6a52;text-decoration:none}
.tabs3 a.on{background:#fff;color:var(--a2);box-shadow:0 3px 0 color-mix(in srgb,var(--a) 25%,#eedcc8)}
.link3{background:none;border:0;color:var(--a2);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline}
.shake{animation:shk .45s}@keyframes shk{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
@media(max-width:640px){.portals{grid-template-columns:1fr 1fr;gap:14px}.pcard{padding:8px 8px 14px;border-radius:24px}.pcard .mascot{width:88px;height:98px}.pcard h3{font-size:15px}.pcard span{font-size:11.5px}
 .pcard:last-child{grid-column:1/-1}.sun3{width:70px;height:70px;right:4%;top:3%}.sun3:before,.sun3:after{top:26px;width:7px;height:7px}.sun3:before{left:20px}.sun3:after{right:20px}.sun3 i{left:23px;top:37px;width:24px;height:12px;border-width:3px}
 .bubble3{left:calc(50% + 50px);top:-112px;font-size:12px}.lcard .inner{padding:30px 18px 20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}