/* Kirjautumis- ja käyttöoikeussivun yhteiset tyylit (referenssi: ainio-kirjautuminen.html).
   Teema: html.dark, sama valinta ja localStorage-avain kuin etusivulla (landing-theme.js + login-theme.js). */
:root{--page:#f3efe7;--dots:rgba(60,52,40,.13);--card:#fff;--cardb:rgba(255,255,255,.7);--tx:#16202e;--tx2:#5b6474;--tx3:#535862;--ph:#6b707c;--lab:#16202e;--in:#f4f6fa;--inb:#8a94a3;--inf:#2f5fa8;--brand:#2f5fa8;--brand2:#3d6fbf;--link:#2f5fa8;--logo:#3d5a85;--line:#ece6da;--err:#c4362d;--errb:#e0453c;--errbg:#fdf0ee;--ok:#1f7a55;--okbg:#eaf6f0;--shadow:0 40px 80px -30px rgba(20,28,45,.45),0 12px 24px -12px rgba(20,28,45,.18);color-scheme:light}
html.dark{--page:#0b0f17;--dots:rgba(255,255,255,.06);--card:#141a26;--cardb:rgba(255,255,255,.08);--tx:#f4f6fa;--tx2:#98a3ba;--tx3:#7c869a;--ph:#838da0;--lab:#e2e8f2;--in:rgba(255,255,255,.05);--inb:rgba(255,255,255,.45);--inf:#6fa0e0;--brand:#3b6fd1;--brand2:#4174ce;--link:#9dc0f2;--logo:#9dc0f2;--line:rgba(255,255,255,.08);--err:#f08a82;--errb:#e0453c;--errbg:rgba(224,69,60,.12);--ok:#7fd3a8;--okbg:rgba(46,160,110,.12);--shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.04);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--font-body);color:var(--tx);background:var(--page);background-image:radial-gradient(var(--dots) 1px,transparent 1.3px);background-size:22px 22px;min-height:100vh;min-height:100svh;position:relative;overflow-x:hidden;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}
a,button{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:3px solid var(--inf);outline-offset:3px}
/* banneri taustalla – kaikki elementit ovat pelkkää koristetta */
.bnr{position:absolute;left:0;right:0;top:0;height:56vh;min-height:440px;pointer-events:none}
.bnr *{pointer-events:none}
.bnr-clip{position:absolute;inset:0;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 78px),87.5% calc(100% - 60px),73.75% calc(100% - 86px),59.4% calc(100% - 58px),43.75% calc(100% - 92px),29.4% calc(100% - 54px),15% calc(100% - 82px),0 calc(100% - 48px));background:linear-gradient(128deg,#0d1119 0%,#182644 48%,#2f5fa8 100%)}
.glow{position:absolute;border-radius:50%;filter:blur(30px)}
.g1{width:760px;height:760px;right:-160px;top:-320px;background:radial-gradient(closest-side,rgba(111,160,224,.42),transparent)}
.g2{width:620px;height:620px;left:12%;bottom:-380px;background:radial-gradient(closest-side,rgba(47,95,168,.55),transparent)}
.nodes{position:absolute;right:5%;top:70px;width:420px;height:200px}
.nodes circle{fill:#fff;opacity:.45}.nodes path{stroke:#fff;stroke-width:1;opacity:.28}
.nodes2{position:absolute;left:4%;right:auto;top:150px;width:300px;height:150px;transform:scaleX(-1);opacity:.7}
.ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:170px}
/* yläpalkki */
.topbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:22px 28px}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:rgba(244,246,250,.85);text-decoration:none;min-height:40px}
.back:hover{color:#fff}
.theme{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.theme:hover{background:rgba(255,255,255,.16)}
/* kortti */
.wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:14px 20px 60px}
.card{width:100%;max-width:448px;background:var(--card);border:1px solid var(--cardb);border-radius:24px;padding:36px 44px 30px;box-shadow:var(--shadow)}
.logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:26px;text-decoration:none}
.lm{width:34px;height:34px;object-fit:contain;display:block}
.lw{font-weight:800;font-size:26px;letter-spacing:.02em;color:var(--logo)}
h1{font-family:var(--font-heading);font-weight:600;font-size:31px;line-height:1.2;text-align:center;margin:0 0 8px;letter-spacing:-.01em}
.sub{text-align:center;font-size:14.5px;color:var(--tx2);margin:0 auto 26px;line-height:1.5;max-width:340px}
.lab{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;font-weight:700;color:var(--lab);margin:0 0 8px}
.lab small{font-weight:500;font-size:12.5px;color:var(--tx3)}
.field{position:relative;margin-bottom:20px}
.in{width:100%;height:50px;border-radius:12px;background:var(--in);border:1px solid var(--inb);padding:0 16px;font-family:inherit;font-size:14.5px;color:var(--tx);outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.in::placeholder{color:var(--ph);opacity:1}
.in:focus{border-color:var(--inf);box-shadow:0 0 0 4px rgba(111,160,224,.2)}
.in[aria-invalid="true"]{border-color:var(--errb)}
.in[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(224,69,60,.16)}
.pwf .in{padding-right:48px}
textarea.in{height:auto;min-height:104px;padding:13px 16px;line-height:1.5;resize:vertical}
select.in{padding-right:42px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8f99' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
select.in:invalid{color:var(--ph)}
select.in option{color:#16202e;background:#fff}
.eye{position:absolute;right:6px;top:25px;transform:translateY(-50%);width:38px;height:38px;border-radius:9px;color:var(--tx3);display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:0;padding:0}
.eye:hover{color:var(--tx)}
.eye .eye-off,.eye[aria-pressed="true"] .eye-on{display:none}
.eye[aria-pressed="true"] .eye-off{display:block}
.err{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;font-size:13px;font-weight:600;line-height:1.4;color:var(--err)}
.err:empty{display:none}
.err svg{flex:none;margin-top:1px;color:var(--errb)}
.status{margin:0 0 16px;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.45;font-weight:500}
.status:empty{display:none}
.status.success{background:var(--okbg);color:var(--ok)}
.status.error{background:var(--errbg);color:var(--err)}
.status.notice{background:var(--in);color:var(--tx);box-shadow:inset 0 0 0 1px var(--inb)}
.status a{color:inherit;font-weight:700}
.btn{width:100%;height:52px;border:0;border-radius:12px;background:linear-gradient(180deg,var(--brand2),var(--brand));color:#fff;font-family:inherit;font-size:15.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;box-shadow:0 12px 24px -12px rgba(47,95,168,.8)}
.btn:hover{filter:brightness(1.06)}
.btn:disabled,.sb:disabled{cursor:progress;filter:saturate(.85);opacity:.85}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}
.div{height:1px;background:var(--line);margin:28px 0 20px}
.inv{text-align:center;font-size:13.5px;color:var(--tx2);line-height:1.55}
.inv b{color:var(--tx);font-weight:700}
.sso{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.sb{width:100%;height:50px;border-radius:12px;border:1px solid var(--inb);background:var(--card);color:var(--tx);font-family:inherit;font-size:14.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:border-color .15s,background .15s}
.sb:hover{border-color:var(--inf)}
.sb.apple{background:#0d1119;border-color:#0d1119;color:#fff}
html.dark .sb.apple{background:#fff;border-color:#fff;color:#0d1119}
html.dark .sb.google{background:rgba(255,255,255,.04)}
.or{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--tx3);margin:0 0 20px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.pwf{margin-bottom:8px}
.forgot{text-align:right;margin-bottom:18px}
.linkbtn{background:none;border:0;padding:0;font-size:13px;font-weight:600;color:var(--link);text-decoration:none;cursor:pointer}
.linkbtn:hover,.req:hover,.backlink:hover{text-decoration:underline}
.backlink{display:block;margin:16px auto 0;text-align:center;font-size:13.5px;font-weight:600;color:var(--link);text-decoration:none}
.req{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--link);text-decoration:none;margin-left:4px}
.note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:22px;font-size:12.5px;color:var(--tx3);text-align:center}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* käyttöoikeuspyynnön kiitosnäkymä */
.thanks{text-align:center;padding:6px 0 4px}
.thanks-ic{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--okbg);color:var(--ok)}
.thanks p{margin:0;font-size:15.5px;line-height:1.55;color:var(--tx)}
.thanks .btn{margin-top:24px;text-decoration:none}
/* "Pysy kirjautuneena 7 päivää": ilman valintaa kirjautuminen päättyy, kun selain suljetaan (server/auth.mjs). */
.keep{display:flex;align-items:center;gap:9px;margin:2px 0 14px;font-size:13.5px;color:var(--tx2);cursor:pointer;user-select:none}.keep input{width:17px;height:17px;margin:0;flex:none;accent-color:var(--brand)}.keep[hidden]{display:none}
.fine{margin:14px 0 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--tx3)}
/* Viimeistely: tähtitaivas, liikkuvat tähtikuviot, kortin hohto ja integraatiorivi */
:root{--halo:rgba(61,111,191,.28)}
html.dark{--halo:rgba(59,111,209,.35)}
.bnr{height:60vh;min-height:480px}
.stars{position:absolute;inset:0;opacity:.75;background-image:
 radial-gradient(1.2px 1.2px at 8% 22%,#fff,transparent),radial-gradient(1px 1px at 18% 64%,rgba(255,255,255,.8),transparent),radial-gradient(1.4px 1.4px at 27% 12%,#fff,transparent),radial-gradient(1px 1px at 35% 44%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 46% 8%,rgba(255,255,255,.8),transparent),radial-gradient(1.3px 1.3px at 58% 30%,#fff,transparent),radial-gradient(1px 1px at 66% 58%,rgba(255,255,255,.7),transparent),radial-gradient(1.2px 1.2px at 74% 16%,#fff,transparent),radial-gradient(1px 1px at 83% 48%,rgba(255,255,255,.7),transparent),radial-gradient(1.4px 1.4px at 92% 26%,#fff,transparent),radial-gradient(1px 1px at 4% 48%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 52% 70%,rgba(255,255,255,.5),transparent);animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.45}to{opacity:.85}}
.g3{width:560px;height:560px;left:-180px;top:-220px;background:radial-gradient(closest-side,rgba(61,111,191,.3),transparent)}
.nodes{animation:drift 48s ease-in-out infinite alternate}
.nodes2{animation:drift2 56s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-30px,12px) rotate(-2deg)}}
@keyframes drift2{to{transform:scaleX(-1) translate(-24px,10px)}}
@media (prefers-reduced-motion:reduce){.stars,.nodes,.nodes2{animation:none}}
.wrap{padding-top:22px}
.halo{position:absolute;left:50%;top:40px;width:760px;height:560px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--halo),transparent);filter:blur(20px);pointer-events:none;z-index:-1}
.card{position:relative;max-width:460px;padding:40px 46px 32px}
.card::before{content:"";position:absolute;inset:-1px;border-radius:25px;padding:1px;background:linear-gradient(160deg,rgba(111,160,224,.85),rgba(255,255,255,.35) 38%,rgba(47,95,168,.2) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.lm{width:40px;height:40px}
.lw{font-size:28px}
h1{font-size:34px;letter-spacing:-.02em}
.in{transition:border-color .15s,box-shadow .15s,background .15s}
.in:hover{border-color:#c9d3e2}
html.dark .in:hover{border-color:rgba(255,255,255,.2)}
.in:focus{background:var(--card)}
.btn{position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s,filter .15s}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .6s}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(47,95,168,.9)}
.btn:hover::after{left:120%}
.btn svg{transition:transform .15s}.btn:hover svg{transform:translateX(3px)}
@media (max-width:499px){.halo{width:420px}.card{padding:30px 22px 24px}h1{font-size:29px}}
.sub{max-width:360px;white-space:pre-line}
html,body{overflow-x:clip}.halo{max-width:100%}
@media (max-width:499px){
 .bnr{height:45vh;min-height:360px}
 .topbar{padding:16px}
 .back-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .back{width:40px;justify-content:center;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
 .wrap{padding:6px 16px 44px}
 .card{padding:28px 22px 24px;border-radius:22px}
 .nodes{width:300px;height:150px;right:-40px;top:60px}
 .nodes2{display:none}
 h1{font-size:28px}
}


/* Alaosan pehmeä kuviointi: värilaikut ja aaltoviivat reunoilla, kortin alue jää rauhalliseksi */
:root{--dl:#c9bfae;--db1:rgba(111,160,224,.22);--db2:rgba(232,196,150,.30)}
html.dark{--dl:rgba(157,192,242,.22);--db1:rgba(59,111,209,.20);--db2:rgba(157,192,242,.08)}
.deco{position:absolute;left:0;right:0;top:calc(max(60vh,480px) - 60px);bottom:0;overflow:hidden;pointer-events:none;z-index:0}
.deco *{pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px)}
.deco .b1{width:620px;height:620px;left:-160px;bottom:-260px;background:var(--db1)}
.deco .b2{width:560px;height:560px;right:-140px;bottom:-220px;background:var(--db2)}
.side{position:absolute;bottom:0;width:min(46vw,760px);height:auto;-webkit-mask-image:linear-gradient(to right,#000 45%,transparent 100%);mask-image:linear-gradient(to right,#000 45%,transparent 100%)}
.side path{stroke:var(--dl);stroke-width:1.2}
.sl{left:0}.sr{right:0;transform:scaleX(-1)}
@media (max-width:499px){.deco{top:calc(max(45vh,360px) - 60px)}.side{width:80vw;opacity:.7}.sr{display:none}}
/* Isoilla näytöillä kortti keskitetään pystysuunnassa ja sitä suurennetaan hieman, ettei se jää pieneksi ylälaitaan */
@media (min-width:500px) and (min-height:720px){
 .wrap{min-height:calc(100vh - 84px);min-height:calc(100svh - 84px);justify-content:center;padding-top:0;padding-bottom:84px}
}
@media (min-width:1700px) and (min-height:900px){.card,.note{zoom:1.12}.halo{zoom:1.12}}
@media (min-width:2200px) and (min-height:1100px){.card,.note{zoom:1.25}.halo{zoom:1.25}}

/* Yhteydenotto (/yhteydenotto): räätälöidyn paketin edut */
.perks{list-style:none;margin:6px 0 20px;padding:0;display:grid;gap:7px;font-size:13.5px;color:#4b5a70}.perks li{display:flex;gap:9px;align-items:center}.perks li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:#e7f4ec url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%232e9b5c%27 stroke-width=%273.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 12.5l4 4L18 8%27/%3E%3C/svg%3E") center/11px no-repeat}html.dark .perks{color:#b7c0d0}html.dark .perks li::before{background-color:rgba(46,155,92,.18)}
.mfa-help{font-size:13px;color:var(--tx2);line-height:1.5;margin:8px 0 18px}
#mfaCode{letter-spacing:.2em;font-variant-numeric:tabular-nums}

/* Rekisteröinti (/rekisteroidy): käyttöehtojen rasti, koodikenttä ja tervetulokortin päivämäärä */
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--tx2);cursor:pointer;margin:0}
.chk input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--brand);cursor:pointer}
.chk a{font-weight:700;color:var(--link);text-decoration:none}.chk a:hover{text-decoration:underline}
#code{letter-spacing:.2em;font-variant-numeric:tabular-nums}
.sub b{color:var(--tx);font-weight:700}

/* Tervetulokortti (/rekisteroidy): jokainen lause omalla rivillään ja edut yhtenä listana viivan alla (Taneli 22.10.2026) */
.reg-done .sub{max-width:none;font-size:15px;line-height:1.75;margin:0}
.reg-done .perks{width:max-content;max-width:100%;margin:20px auto 0;padding-top:18px;border-top:1px solid var(--line);gap:9px;font-size:13.5px;text-align:left}
.reg-done .btn{margin-top:22px}