/* Temp mail — v1 painted panel, structured 2-column layout + motion (v3) */
.tempbody{min-height:100svh;background:#1a0b33}
.tempwrap{position:relative;min-height:100svh;display:flex;align-items:center;padding:110px clamp(16px,5vw,72px) 60px;overflow:hidden}
.tempwrap::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,11,51,.35),rgba(26,11,51,.8));z-index:1}
.tempwrap .bgpar{z-index:0}
.tempgrid{position:relative;z-index:3;width:min(1200px,100%);margin:0 auto;display:grid;grid-template-columns:1fr minmax(0,600px);gap:clamp(28px,6vw,80px);align-items:center}
.intro h1{font-size:clamp(4rem,11vw,8.5rem);margin:.12em 0}
.intro h1 .brush{font-size:.62em;transform:rotate(-4deg)}
.intro p{max-width:40ch;color:#f1e9ff;font-size:1.08rem;margin:0}
.steps{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:12px}
.steps li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-left:3px solid var(--lime);background:rgba(26,11,51,.55);border-radius:0 18px 4px 0;transition:transform .25s var(--ease)}
.steps li:hover{transform:translateX(6px)}
.steps b{font:400 1.1rem 'Permanent Marker',cursive;color:var(--lime)}
.panel{position:relative;width:100%;background:rgba(26,11,51,.78);border:2px solid rgba(198,255,61,.55);border-radius:6px 36px 6px 36px;padding:clamp(20px,4vw,38px);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 6px rgba(26,11,51,.4);backdrop-filter:blur(6px)}
.panel::before{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:var(--lime);filter:blur(60px);opacity:.25;animation:pglow 5s ease-in-out infinite;pointer-events:none}
@keyframes pglow{50%{opacity:.45;transform:scale(1.25)}}
.box{position:relative;margin-top:16px;padding:18px;border-radius:4px 22px 4px 22px;background:rgba(255,255,255,.05);border:1px solid rgba(183,156,255,.25);display:flex;flex-direction:column;gap:12px}
#login.box{margin-top:0}
.box label{display:flex;flex-direction:column;gap:6px;font-size:.75rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--lilac)}
.box input:not([type=radio]){font:500 1rem Inter,sans-serif;padding:.85em 1em;border-radius:6px;border:2px solid rgba(183,156,255,.4);background:rgba(10,4,24,.6);color:#fff;letter-spacing:normal;text-transform:none;transition:border-color .2s,box-shadow .2s}
.box input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(198,255,61,.25)}
.muted{color:#cbbdf0;margin:0}
.who{margin-bottom:4px}
.err{color:#ff8fb8;margin:0;min-height:1.2em;font-weight:600}
.err:not(:empty){animation:shake .4s var(--ease)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.valid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.valid label{cursor:pointer;position:relative}
.valid input{position:absolute;opacity:0}
.valid span{display:block;text-align:center;padding:.8em .2em;border-radius:6px 14px 6px 14px;border:2px solid rgba(183,156,255,.4);font:400 1.35rem/1 'Bebas Neue',sans-serif;letter-spacing:.08em;color:#fff;transition:transform .2s var(--ease),background .2s,border-color .2s}
.valid label:hover span{transform:translateY(-2px);border-color:var(--lime)}
.valid label:active span{transform:scale(.95)}
.valid input:checked+span{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:rotate(-2deg)}
.valid input:focus-visible+span{outline:2px solid #fff}
.result{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px;border:2px dashed var(--lime);border-radius:8px;background:rgba(198,255,61,.08);animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
.result code{font-size:1.05rem;word-break:break-all;flex:1 1 220px}
.result small{flex-basis:100%;color:var(--lilac)}
.list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:6px;background:rgba(10,4,24,.5);border-left:3px solid var(--lime);animation:pop .4s var(--ease) both;transition:transform .2s var(--ease)}
.list li:hover{transform:translateX(4px)}
.list li:nth-child(2){animation-delay:.05s}.list li:nth-child(3){animation-delay:.1s}.list li:nth-child(4){animation-delay:.15s}
.list li code{flex:1 1 200px;word-break:break-all}
.list li small{color:var(--lilac);flex-basis:100%}
.list button{background:transparent;border:1px solid rgba(255,143,184,.6);color:#ff8fb8;border-radius:6px;padding:.35em .7em;cursor:pointer;font-weight:700;transition:transform .15s,background .15s}
.list button:hover{background:rgba(255,143,184,.12)}
.list button:active{transform:scale(.94)}
.list button.cp{border-color:rgba(198,255,61,.6);color:var(--lime)}
.list button.cp:hover{background:rgba(198,255,61,.12)}
@media(max-width:900px){.tempgrid{grid-template-columns:1fr}.steps{display:none}.intro h1{font-size:clamp(3.6rem,16vw,6rem)}}
@media(max-width:720px){.nav nav a#logout:not([hidden]){display:inline}}
@media(max-width:520px){.valid{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.panel::before,.result,.list li,.err{animation:none!important}}
[hidden]{display:none!important}