/* The webmail sign-in card is the console's sign-in card (control-plane/web/login.html), rule for rule:
   one glass card, floating labels, the gold button. Only what a mailbox has no use for is left out
   (Apple / Google, sign-up, password reset), and the faint mark behind the card is an envelope
   instead of the DartPanel logo (owner, 2026-10-05). The rules apply while <body> has class "signin". */
body.signin { --text:#f3f4f6; --muted:#9aa3b2; --border:rgba(255,255,255,.14); --input-bg:rgba(255,255,255,.06); --err:#f0605f; --ok:#6fbf73; --accent:#d4a24e; }
body.signin, body.signin .vw * { font-family:'Inter',system-ui,sans-serif; }
:where(body.signin .vw, body.signin .vw *) { box-sizing:border-box; margin:0; padding:0; }
body.signin { background:#07090d; color:var(--text); min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:10vh 16px 40px; overflow:auto;
  background-image:radial-gradient(900px 500px at 15% -10%, rgba(212,162,78,.16), transparent 60%), radial-gradient(700px 500px at 100% 110%, rgba(80,110,200,.14), transparent 60%); }
/* Page background: a very faint gold envelope behind the card (right of centre, its edges fading out), a soft gold glow under it and a dot grid
   that fades away from the middle. All of it sits behind the page (z-index:-1) and never takes a click. */
body.signin { position:relative; isolation:isolate; }
body.signin::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.07;
  background:url('/assets/images/mail-mark.svg') no-repeat 76% 50% / auto min(96vh,980px);
  -webkit-mask-image:radial-gradient(circle min(48vh,490px) at 76% 50%, #000 58%, transparent 100%); mask-image:radial-gradient(circle min(48vh,490px) at 76% 50%, #000 58%, transparent 100%); }
body.signin::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background:radial-gradient(circle at 76% 50%, rgba(212,162,78,.09), transparent 42%), radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px) 0 0 / 26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 0%, transparent 78%); mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 0%, transparent 78%); }
@media (max-width:760px) { body.signin::before { background-position:50% 30%; background-size:auto min(70vw,520px); -webkit-mask-image:radial-gradient(circle min(36vw,260px) at 50% 30%, #000 58%, transparent 100%); mask-image:radial-gradient(circle min(36vw,260px) at 50% 30%, #000 58%, transparent 100%); } }
.vw { display:none; }
body.signin .vw { display:block; position:relative; width:100%; max-width:400px; background:#313131; border:1px solid var(--border); border-radius:30px; box-shadow:0 24px 60px rgba(0,0,0,.45); }
body.signin .app-frame { display:none; }
.vc { padding:32px 32px 24px; }
.vlogo { text-align:center; margin-bottom:18px; }
.vlogo img { width:56px; height:auto; display:block; margin:0 auto; }
.vlogo p { font-size:13px; color:var(--muted); margin-top:16px; }
.screen { display:none; } .screen.active { display:block; animation:fadeUp .22s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.vfield { position:relative; margin-bottom:14px; }
.vfield input { width:100%; padding:20px 12px 8px; height:52px; border-radius:10px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); font-size:16px; outline:none; transition:.2s; }
.vfield input.pw { padding-right:42px; }
.vfield input:focus { border-color:rgba(212,162,78,.7); box-shadow:0 0 0 3px rgba(212,162,78,.14); background:rgba(255,255,255,.09); }
.vfield input.err { border-color:var(--err); }
.vfield label { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px; color:var(--muted); pointer-events:none; transition:.15s; }
.vfield input:focus ~ label, .vfield input.filled ~ label { top:8px; transform:none; font-size:11px; color:var(--accent); }
.vfield input.err ~ label { color:var(--err); }
.vtoggle { position:absolute; right:10px; top:13px; background:none; border:none; cursor:pointer; color:var(--muted); padding:2px; display:flex; }
.vtoggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.verr { font-size:11px; color:var(--err); margin-top:4px; display:none; } .verr.show { display:block; }
.vsubmit { margin-top:6px; width:100%; padding:14px; border-radius:14px; border:none; cursor:pointer; background:var(--accent); color:#1a1410; font-size:16px; font-weight:600; display:flex; justify-content:center; align-items:center; gap:8px; transition:.2s; margin-bottom:10px; }
.vsubmit:hover { filter:brightness(1.08); } .vsubmit:active { transform:scale(.99); } .vsubmit[disabled] { opacity:.7; cursor:default; }
.vw .spin { width:16px; height:16px; border:2px solid rgba(26,20,16,.3); border-top-color:#1a1410; border-radius:50%; animation:sp .7s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.vswitch { text-align:center; font-size:13px; color:var(--muted); margin-top:6px; }
.vswitch a { color:#fff; text-decoration:none; cursor:pointer; font-weight:500; } .vswitch a:hover { text-decoration:underline; }
.vreset-desc { font-size:13px; color:var(--muted); margin-bottom:20px; line-height:1.6; }
.vform-error { display:none; align-items:flex-start; gap:8px; font-size:13px; color:#ffb4b3; background:rgba(240,96,95,.12); border:1px solid rgba(240,96,95,.35); border-radius:10px; padding:10px 12px; margin:6px 0 10px; line-height:1.45; }
.vform-error.show { display:flex; } .vform-error.warn { color:#f5c97a; background:rgba(239,159,39,.12); border-color:rgba(239,159,39,.35); }
.vcode input { text-align:center; letter-spacing:4px; font-size:20px; }
/* Fields and buttons keep the colours above in every browser: dark native controls (no light autofill, no light focus ring),
   no browser button chrome. The autofill colours are the field's own colours over the #313131 card (#3d3d3d, #444 on focus). */
.vw { color-scheme:dark; }
.vfield input, .vcode input { -webkit-appearance:none; appearance:none; caret-color:var(--text); }
.vfield input:-webkit-autofill, .vfield input:-webkit-autofill:hover, .vfield input:-webkit-autofill:focus, .vfield input:-webkit-autofill:active {
  -webkit-text-fill-color:var(--text); caret-color:var(--text); -webkit-box-shadow:0 0 0 1000px #3d3d3d inset; box-shadow:0 0 0 1000px #3d3d3d inset; transition:background-color 99999s ease-in-out 0s; }
.vfield input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px #444 inset, 0 0 0 3px rgba(212,162,78,.14); box-shadow:0 0 0 1000px #444 inset, 0 0 0 3px rgba(212,162,78,.14); }
.vfield input:autofill { -webkit-text-fill-color:var(--text); box-shadow:0 0 0 1000px #3d3d3d inset; }
.vfield input::-ms-reveal, .vfield input::-ms-clear { display:none; }
.vfooter { margin-top:14px; text-align:center; font-size:11px; color:var(--muted); }
@media (max-width:480px) { body.signin { padding:0; align-items:stretch; } body.signin .vw { max-width:none; border-radius:0; border-width:0; min-height:100vh; display:flex; flex-direction:column; justify-content:center; } }