/* Sign-in page, dressed like the optimizer: same palette, same controls, same bottom bar. */
:root {
  --bg: #0b0f0d; --panel: #111814; --panel2: #0e1411; --line: #1f2b25; --line2: #2a3a32;
  --ink: #e6efea; --ink2: #a9b8b0; --muted: #6f7f77; --accent: #35d07f; --accent2: #1e9c5c; --bad: #e66767;
  --mono: ui-monospace, Consolas, "SF Mono", Menlo, monospace; --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column; overflow: hidden; color: var(--ink); font: 13px/1.35 var(--sans);
  /* The ocean of the optimizer's Dark map. Measured in the app itself from 3,231 miles up:
     the Pacific, the Atlantic and the Indian Ocean all read #282c33. */
  background: #282c33;
}

/* ---- the box is a real slab in 3D space ------------------------------------------
   The stage is the camera. The box is a front face with four side faces and a back
   folded round it, turned a few degrees so its thickness shows, and it turns to face the
   pointer (login.js sets --rx / --ry). Light comes from the top left: the top and left
   sides are bright, the right and bottom sides are in shadow. */
#stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px 16px 28px; perspective: 2200px; }
main {
  --d: 64px;                          /* how thick the slab is */
  --rx: -13deg; --ry: 19deg;          /* resting pose, before the pointer moves: seen from above and from the left, the two lit sides showing */
  position: relative; width: min(380px, 100%); border-radius: 8px;
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .2s ease-out;
  background: linear-gradient(160deg, #1d2a23 0%, #131c17 42%, #0d1411 100%);
  border: 1px solid #3a5245; border-right-color: #1c2922; border-bottom-color: #18231d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 1px 0 0 rgba(255, 255, 255, .06);
}
main > i { position: absolute; display: block; pointer-events: none; }
.back { inset: 0; border-radius: 8px; background: #050807; transform: translateZ(calc(var(--d) * -1)); }
.floor { inset: -4% -2%; border-radius: 30px; background: rgba(0, 0, 0, .78); filter: blur(26px); transform: translateZ(-170px) translateY(40px); }
.side.top    { left: 5px; right: 5px; bottom: 100%; height: var(--d); transform-origin: bottom; transform: rotateX(90deg);
               background: linear-gradient(0deg, #5b7d6c, #2f4439); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .25); }
.side.bottom { left: 5px; right: 5px; top: 100%; height: var(--d); transform-origin: top; transform: rotateX(-90deg);
               background: linear-gradient(180deg, #17221c, #0a0f0d); box-shadow: inset 0 2px 0 rgba(53, 208, 127, .45); }
.side.left   { top: 5px; bottom: 5px; right: 100%; width: var(--d); transform-origin: right; transform: rotateY(-90deg);
               background: linear-gradient(270deg, #3d5548, #1f2d26); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .16); }
.side.right  { top: 5px; bottom: 5px; left: 100%; width: var(--d); transform-origin: left; transform: rotateY(90deg);
               background: linear-gradient(90deg, #1a2720, #0b100e); box-shadow: inset 2px 0 0 rgba(53, 208, 127, .25); }

.tab {
  padding: 11px 12px; text-align: center; font-size: 11px; letter-spacing: .05em; color: var(--accent);
  background: linear-gradient(180deg, #1a2820, #0f1713); border-bottom: 2px solid var(--accent); border-radius: 7px 7px 0 0;
  box-shadow: 0 2px 12px rgba(53, 208, 127, .22); text-shadow: 0 1px 0 #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
form { padding: 16px 18px 20px; transform-style: preserve-3d; }
p.sub { margin: 0 0 10px; font-size: 11px; color: var(--muted); text-shadow: 0 1px 0 #000; }
label { display: block; margin: 10px 0 4px; font-size: 12px; color: var(--ink2); text-shadow: 0 1px 0 #000; }
/* the fields are cut into the face */
input {
  width: 100%; padding: 9px 10px; font: inherit; font-size: 14px; color: var(--ink);
  background: #060a08; border: 1px solid #050807; border-bottom-color: #2f4238; border-right-color: #1d2a23; border-radius: 6px;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .85), inset 2px 0 4px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .06);
}
input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 3px 7px rgba(0, 0, 0, .85), 0 0 0 2px #35d07f33; }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px #060a08 inset; caret-color: var(--ink); }
/* the button floats above the face and travels back down when pressed */
button {
  width: 100%; margin-top: 20px; padding: 10px; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #fff;
  background: linear-gradient(180deg, #3bd083 0%, #1e9c5c 55%, #178349 100%);
  border: 1px solid #55e89b; border-bottom-color: #0f6a3b; border-radius: 7px; cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  transform: translateZ(22px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 5px 0 #0e5e35, 0 14px 18px rgba(0, 0, 0, .6);
  transition: transform .09s, box-shadow .09s, filter .12s;
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateZ(5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 0 #0e5e35, 0 3px 6px rgba(0, 0, 0, .6); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: wait; }
#msg { min-height: 16px; margin: 16px 0 0; font-size: 12px; color: var(--bad); text-shadow: 0 1px 0 #000; }

@media (max-width: 600px) {
  input { font-size: 16px; }                           /* phones zoom the whole page when a field's text is under 16px */
  main { --d: 44px; --rx: -10deg; --ry: 12deg; }
}
@media (prefers-reduced-motion: reduce) { main, button { transition: none; } }

#bottom { flex: 0 0 26px; display: flex; align-items: center; gap: 14px; padding: 0 12px; background: var(--bg); border-top: 1px solid var(--line); font: 11px var(--mono); color: var(--ink2); position: relative; z-index: 2; }
#bottom .gap { flex: 1 1 auto; }
#bottom .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }