/* family-ui: home-login */
:root{ --purple:#5b3db4; --purple-2:#432a82; --bg:#F8F8F5; --ink:#0f1720; }
html,body{height:100%}
body{margin:0; background:linear-gradient(to bottom, var(--bg) 0%, var(--bg) 75%, #919191 100%); color:var(--ink); font:15px/1.5 "PT Sans", system-ui,-apple-system,Segoe UI,Roboto,Arial}
.top{position:fixed; inset:0 0 auto 0; background:var(--purple); color:#fff; padding:12px clamp(18px,6vw,20%); font-family:"Montserrat",sans-serif; font-weight:700;}
.center{min-height:100%; display:grid; place-items:center; padding:24px}
.card{max-width:max(600px, 75vw); width:min(500px, 55vw); background:#fff; border-radius:18px; border:1px solid rgba(0,0,0,.08); box-shadow:0 10px 30px rgba(0,0,0,.15); padding:24px; margin-top:72px}
h1{margin:0 0 12px; font-size:22px; font-family:"Montserrat",sans-serif;}
form{display:grid; gap:12px}
.f{display:grid; gap:6px}
label{font-weight:700}
input{padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.2); outline:none; font:inherit}
button{padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.2); background:var(--purple); color:#fff; font-weight:700; cursor:pointer}
button:hover{background:var(--purple-2)}
.err{color:#b91c1c; font-weight:700}

.back a{color:#fff; text-decoration:none}
@media (max-width: 800px){
.tabs{flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{flex: 0 0 auto;}
#pageTabs{display:flex !important; grid-template-columns:none !important;}
}