/* MediaZoo account control: log in / sign up in the top-right corner of the nav.
   Loaded after styles.css and reuses its tokens (colours, fonts, radii). */
.acct{flex-shrink:0}
.acct-b{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .875rem .3rem .3rem;cursor:pointer;
  font:inherit;font-size:.8438rem;font-weight:600;letter-spacing:-.01em;line-height:1.6;color:var(--tx);
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:var(--r-s);
  transition:background .22s,border-color .22s,transform .2s}
.acct-b:hover,.acct-b[aria-expanded="true"]{background:rgb(var(--ar) / .08);border-color:rgb(var(--ar) / .45)}
.acct-b:focus-visible,.acct-p :focus-visible{outline:2px solid var(--a3);outline-offset:2px}
.acct-av{width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;flex-shrink:0;overflow:hidden;
  box-shadow:0 0 0 1px rgb(var(--ar) / .5),0 0 .75rem -.25rem rgb(var(--ar) / .7);transition:box-shadow .3s}
.acct-av svg{width:100%;height:100%;display:block}
.acct-b:hover .acct-av,.acct-b[aria-expanded="true"] .acct-av{box-shadow:0 0 0 1px rgb(var(--ar) / .8),0 0 1rem -.125rem rgb(var(--ar) / .9)}
.acct-l{max-width:7.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct.in .acct-av,.ap-av{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;color:#fff;border:0;overflow:visible;
  background:linear-gradient(140deg,var(--t0),var(--a4) 60%,var(--a2));box-shadow:0 0 .75rem -.125rem rgb(var(--ar) / .8)}
.acct.in .acct-av{font-size:.625rem}
.acct.hi .acct-av{animation:acctHi 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes acctHi{0%{box-shadow:0 0 0 0 rgb(var(--ar) / .9)}100%{box-shadow:0 0 0 .875rem rgb(var(--ar) / 0)}}

.acct-p{position:absolute;top:calc(100% + .5rem);right:0;width:24rem;z-index:90;padding:1.25rem;
  border-radius:var(--r);color:var(--body);
  background:radial-gradient(120% 70% at 100% 0%,rgb(var(--ar) / .13),transparent 60%),linear-gradient(180deg,#10111A,#090A0E);
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1.75rem 3.5rem -1.25rem rgba(0,0,0,.9),0 1.25rem 3rem -2rem rgb(var(--ar) / .55);
  transform-origin:top right;animation:apIn .24s cubic-bezier(.2,.8,.2,1)}
.acct-p[hidden]{display:none}
@keyframes apIn{from{opacity:0;transform:translateY(-.375rem) scale(.985)}to{opacity:1;transform:none}}

.ap-hd{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem}
.ap-tt{flex:1;min-width:0}
.ap-t{font-family:var(--disp);font-weight:600;font-size:1.125rem;line-height:1.3;letter-spacing:-.03em;color:var(--tx);overflow-wrap:anywhere}
.ap-s{margin-top:.25rem;font-size:.8125rem;line-height:1.5;color:var(--mute);overflow-wrap:anywhere}
.ap-s b{color:var(--tx);font-weight:600}
.ap-av,.ap-ic{display:none;width:2.5rem;height:2.5rem;border-radius:50%;place-items:center;flex-shrink:0;font-size:.875rem}
.ap-ic{color:var(--a2);background:rgb(var(--ar) / .14);border:1px solid rgb(var(--ar) / .32)}
.ap-ic svg{width:1.125rem;height:1.125rem}
[data-view="account"] .ap-av,[data-view="sent"] .ap-ic{display:grid}
.ap-x{width:2rem;height:2rem;margin:-.375rem -.5rem 0 0;display:grid;place-items:center;flex-shrink:0;cursor:pointer;
  color:var(--mute);background:none;border:0;border-radius:var(--r-s);transition:color .2s,background .2s}
.ap-x:hover{color:var(--tx);background:rgba(255,255,255,.06)}
.ap-x svg{width:.875rem;height:.875rem}

.ap-seg{position:relative;display:none;grid-template-columns:1fr 1fr;padding:.1875rem;margin-bottom:1rem;
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--r-s)}
[data-view="login"] .ap-seg,[data-view="signup"] .ap-seg{display:grid}
.ap-seg button{position:relative;z-index:1;padding:.4375rem 0;cursor:pointer;font:inherit;font-size:.8125rem;font-weight:600;
  color:var(--mute);background:none;border:0;border-radius:.375rem;transition:color .2s}
.ap-seg button:hover,.ap-seg button[aria-pressed="true"]{color:var(--tx)}
.ap-ind{position:absolute;top:.1875rem;bottom:.1875rem;left:.1875rem;width:calc(50% - .1875rem);border-radius:.375rem;
  background:rgb(var(--ar) / .16);border:1px solid rgb(var(--ar) / .36);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
[data-view="signup"] .ap-ind{transform:translateX(100%)}

.ap-msg{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.875rem;padding:.625rem .75rem;font-size:.8125rem;line-height:1.5;border-radius:var(--r-s)}
.ap-msg[hidden]{display:none}
.ap-msg.err{color:#FFC4CB;background:rgba(255,96,118,.08);border:1px solid rgba(255,120,138,.24)}
.ap-msg.ok{color:var(--a1);background:rgb(var(--ar) / .1);border:1px solid rgb(var(--ar) / .32)}

.ap-f{display:none;gap:.875rem}
[data-view="login"] .ap-f[data-v="login"],[data-view="signup"] .ap-f[data-v="signup"],[data-view="forgot"] .ap-f[data-v="forgot"],
[data-view="reset"] .ap-f[data-v="reset"],[data-view="sent"] .ap-f[data-v="sent"],[data-view="account"] .ap-f[data-v="account"]{display:grid}
.ap-fl{display:grid;gap:.375rem;font-size:.75rem;font-weight:500;color:var(--body)}
.ap-row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.ap-f input{width:100%;height:2.75rem;padding:0 .875rem;font:inherit;font-size:.9375rem;font-weight:400;color:var(--tx);caret-color:var(--a3);
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:var(--r-s);outline:0;-webkit-appearance:none;appearance:none;
  transition:border-color .2s,background .2s,box-shadow .2s}
.ap-f input::placeholder{color:var(--faint)}
.ap-f input:hover{border-color:rgba(255,255,255,.2)}
.ap-f input:focus{border-color:rgb(var(--ar) / .75);background:rgb(var(--ar) / .05);box-shadow:0 0 0 .1875rem rgb(var(--ar) / .18)}
.ap-f input[aria-invalid="true"]{border-color:rgba(255,120,138,.6)}
.ap-f input[aria-invalid="true"]:focus{box-shadow:0 0 0 .1875rem rgba(255,120,138,.16)}
.ap-f input:-webkit-autofill{-webkit-text-fill-color:var(--tx);-webkit-box-shadow:0 0 0 100px #151624 inset;transition:background-color 9999s}
.ap-pw{position:relative}
.ap-pw input{padding-right:2.75rem}
.ap-eye{position:absolute;top:50%;right:.25rem;transform:translateY(-50%);width:2.25rem;height:2.25rem;display:grid;place-items:center;cursor:pointer;
  color:var(--mute);background:none;border:0;border-radius:.375rem;transition:color .2s}
.ap-eye:hover{color:var(--tx)}
.ap-eye svg{width:1.0625rem;height:1.0625rem}
.ap-slash{opacity:0;transition:opacity .15s}
.ap-eye[aria-pressed="true"] .ap-slash{opacity:1}
.ap-hint{font-size:.6875rem;font-weight:400;color:var(--faint)}
.ap-link{padding:0;cursor:pointer;font:inherit;font-size:.75rem;font-weight:500;color:var(--a3);background:none;border:0;text-decoration:none;transition:color .2s}
.ap-link:hover{color:var(--a1);text-decoration:underline;text-underline-offset:.1875rem}
.ap-msg .ap-link{font-size:inherit;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:.1875rem}
.ap-go{width:100%;min-height:2.75rem;margin-top:.125rem;font-family:inherit;font-size:.875rem;cursor:pointer;position:relative}
.ap-go:disabled{cursor:default;transform:none}
.ap-go.busy{color:transparent}
.ap-go.busy::after{content:"";position:absolute;width:1rem;height:1rem;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:apSpin .7s linear infinite}
@keyframes apSpin{to{transform:rotate(360deg)}}
.ap-back{justify-self:center}
.ap-ft{font-size:.75rem;line-height:1.55;color:var(--mute);text-align:center}

/* the account button sits in the far-right corner; on tablets and phones Menu sits beside it */
@media(max-width:1060px){.ntog{margin-left:auto}.acct{order:4}}
@media(max-width:600px){.acct-p{left:0;width:auto}}
@media(max-width:340px){.acct-l{display:none}.acct-b{padding:.3rem}}
@media(pointer:coarse){.ap-f input{font-size:max(16px,.9375rem)}}

/* ===== standalone page: /account (the panel on its own, centred, with a soft iris glow) ===== */
.ap-home{display:none}
.acct-page{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.75rem;padding:2.5rem 1rem}
.acct-page>.brand{font-size:1.125rem}
.acct-page .acct-p{position:relative;top:auto;right:auto;left:auto;z-index:auto;width:min(28rem,100%);padding:1.75rem;
  border-color:rgb(var(--ar) / .32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
    0 0 1.5rem -.25rem rgb(var(--ar) / .45),
    0 0 4.5rem 0 rgb(var(--ar) / .24),
    0 0 10rem 1.5rem rgb(var(--ar) / .12),
    0 2rem 4rem -1.5rem rgba(0,0,0,.9);
  animation:apIn .5s cubic-bezier(.2,.8,.2,1)}
.acct-page .acct-p:empty{min-height:26rem}
.acct-page .ap-x{display:none}
.acct-page .ap-home{display:inline-flex}