/* Sign-in page of the student app (login.html), the neat, flat look of app.novaaiops.com:
   the Academy logo on top, an outlined Google button, a spaced "or use your email" line,
   small uppercase labels, "Forgot password?" on the right, and quiet footer links.
   Every rule starts with .al-page so it wins over the base .al-* styles in app-shell.css
   (nginx injects that file after this one). */
.al-page .al-wrap { background: radial-gradient(55% 45% at 50% 0%, rgba(31, 123, 255, 0.12), transparent 70%), #020817; }
.al-page .al-card { width: min(420px, 100%); overflow: hidden; padding: 34px 32px 24px; border-radius: 16px; }

/* Premium edge (founder: "ultra premium so I can easily recognize them"): a bright blue-violet
   gradient border and a light that slowly travels round the
   edge (conic gradient turned by --al-spin). Without @property support it is a still gradient. */
@property --al-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.al-page .al-card {
  border: 2px solid transparent;
  background:
    linear-gradient(#0a1122, #0a1122) padding-box,
    conic-gradient(from var(--al-spin), #38b6ff, #8b7bff 16%, #ffffff 22%, #4f8dff 30%, rgba(56, 182, 255, 0.55) 45%, rgba(124, 108, 255, 0.55) 60%, #8b7bff 78%, #38b6ff) border-box;
  box-shadow: none; /* the glow around the card was removed (founder request) */
  animation: al-edge 9s linear infinite;
}
@keyframes al-edge { to { --al-spin: 360deg; } }
@media (prefers-reduced-motion: reduce) { .al-page .al-card { animation: none; } }

/* logo only (the old "Tanimawo AI Academy" heading is gone; the logo says it) */
.al-page .al-logo { gap: 12px; margin-bottom: 24px; padding-bottom: 22px; }
/* the logo runs the full width of the card, edge to edge across the top (card padding: 34px 32px) */
.al-page .al-logo img { display: block; width: calc(100% + 64px); max-width: none; height: auto; aspect-ratio: 1; margin: -34px -32px 0; border-radius: 0; object-fit: cover; box-shadow: none; }
.al-page .al-logo p { font-size: 0.88rem; color: #8b93ad; }
.al-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Continue with Google: outlined, like Nova's sign-in buttons */
.al-gbox[hidden] { display: none; }
.al-google { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.al-google:focus-visible { outline: 3px solid #38b6ff; outline-offset: 2px; }
.al-google[aria-disabled="true"] { opacity: 0.7; pointer-events: none; }
.al-or { display: flex; align-items: center; gap: 12px; }
.al-or::before, .al-or::after { content: ""; flex: 1; height: 1px; }
.al-page .al-google { height: 46px; gap: 10px; border-radius: 10px; background: transparent; color: #e8ecf8; border: 1px solid rgba(255, 255, 255, 0.14); font: 600 0.92rem/1 Inter, system-ui, sans-serif; }
.al-page .al-google:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.24); box-shadow: none; }
.al-page .al-or { margin: 20px 0 16px; color: #6f7894; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.al-page .al-or::before, .al-page .al-or::after { background: rgba(255, 255, 255, 0.08); }

/* fields */
.al-page .al-label { margin-bottom: 8px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; color: #7d86a3; }
.al-page .al-input { height: 46px; border-radius: 10px; background: #060c1b; border-color: rgba(255, 255, 255, 0.12); }
.al-page .al-input::placeholder { color: #566079; }
.al-row { display: flex; justify-content: flex-end; margin: 10px 0 0; }
.al-forgot { padding: 0; border: 0; background: none; font: 500 0.8rem Inter, system-ui, sans-serif; color: #9aa3bd; cursor: pointer; }
.al-forgot:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.al-forgot:focus-visible { outline: 2px solid #38b6ff; outline-offset: 3px; border-radius: 4px; }
.al-page .al-btn { margin-top: 14px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; background: #1f7bff; box-shadow: none; transition: background 0.15s; }
.al-page .al-btn:hover:not(:disabled) { background: #2f88ff; }

/* password box with the show / hide eye */
.al-page .al-label.al-gap { margin-top: 16px; }
.al-pw { position: relative; }
.al-page .al-pw .al-input { padding-right: 48px; }
.al-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: #7d86a3; cursor: pointer; }
.al-eye:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.al-eye:focus-visible { outline: 2px solid #38b6ff; outline-offset: 0; }
.al-hint { margin: 8px 0 0; font-size: 0.78rem; color: #7d86a3; }
.al-note { margin: 0 0 16px; font-size: 0.86rem; line-height: 1.5; color: #aab2cb; }
.al-alt { margin: 14px 0 0; text-align: center; }
.al-linkbtn { padding: 0; border: 0; background: none; font: 500 0.84rem Inter, system-ui, sans-serif; color: #9aa3bd; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.al-linkbtn:hover { color: #fff; }
.al-linkbtn:focus-visible { outline: 2px solid #38b6ff; outline-offset: 3px; border-radius: 4px; }
.al-page form[hidden] { display: none; }

/* signup page (signup.html): two fields side by side, the eyebrow title */
.al-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.al-page select.al-input { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d86a3' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.al-page select.al-input:invalid { color: #566079; }
.al-page select.al-input option { color: #e8ecf8; background: #0a1122; }
.al-eyebrow { margin: 0; font-size: 0.72rem !important; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
@media (max-width: 420px) { .al-two { grid-template-columns: 1fr; } }

/* footer */
.al-page .al-msg { font-size: 0.84rem; }
.al-page .al-msg:empty { min-height: 0; margin: 0; }
.al-page .al-sep { margin-top: 20px; padding-top: 18px; font-size: 0.88rem; }
.al-page .al-sep a { text-decoration: underline; text-underline-offset: 3px; }
.al-page .al-links { gap: 0; margin-top: 12px; }
.al-page .al-links a + a::before { content: "\00b7"; margin: 0 10px; color: #4a536c; }

/* Computers: a wider card (founder request). The logo still runs edge to edge; it is cropped to
   5:4 here (only empty dark space above the cap and below the name goes) so the form stays in view. */
@media (min-width: 768px) {
  .al-page .al-card { width: min(540px, 100%); padding: 40px 48px 28px; }
  .al-page .al-logo img { width: calc(100% + 96px); margin: -40px -48px 0; aspect-ratio: 5 / 4; object-position: 50% 40%; }
  /* the class banner under the card (site-links.js sets its width inline) matches the card */
  .al-page #taaBanner { width: min(540px, 100%) !important; }
}
@media (max-width: 600px) {
  .al-page .al-card { padding: 28px 20px 20px; }
  .al-page .al-logo img { width: calc(100% + 40px); margin: -28px -20px 0; }
}
.al-center { text-align: center; }

/* No admin announcement banner (site-links.js #taaBanner) on sign-in and sign-up (founder request). */
.al-page #taaBanner { display: none !important; }

/* Heading under the logo: a small badge, a gradient title and one line (founder: "make it beautiful"). */
.al-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; text-align: center; }
/* In one box, styled like the account box at the bottom (.al-cta) (founder request). The box
   replaces the thin line that used to sit under the heading. */
.al-head { align-self: stretch; box-sizing: border-box; padding: 18px 16px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(56, 182, 255, 0.09), rgba(124, 108, 255, 0.09)); border: 1px solid rgba(124, 140, 255, 0.28); }
.al-page .al-logo { border-bottom: 0; padding-bottom: 0; margin-bottom: 22px; }
.al-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font: 600 0.66rem/1.4 Inter, system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #9fd8ff; background: rgba(56, 182, 255, 0.1); border: 1px solid rgba(56, 182, 255, 0.35); box-shadow: 0 0 18px -6px rgba(56, 182, 255, 0.6); }
.al-page .al-head h1 { margin: 0; font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #fff; background: linear-gradient(90deg, #ffffff 0%, #a9dcff 55%, #bcb1ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.al-page .al-head p { margin: 0; font-size: 0.92rem; color: #9aa3bd; }

/* Bottom: the account box ("New to the Academy?" / "Already have an account?") and the link chips. */
.al-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; padding: 14px 14px 14px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(56, 182, 255, 0.09), rgba(124, 108, 255, 0.09)); border: 1px solid rgba(124, 140, 255, 0.28); }
.al-cta > span { font-size: 0.92rem; font-weight: 500; color: #d4daf0; }
.al-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid transparent; font: 600 0.88rem/1.2 Inter, system-ui, sans-serif; color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(#0d1530, #0d1530) padding-box, linear-gradient(90deg, #38b6ff, #8b7bff) border-box; transition: box-shadow 0.2s, background 0.2s; }
.al-cta-btn svg { transition: transform 0.2s; }
.al-cta-btn:hover { background: linear-gradient(90deg, #1f7bff, #7a5cff) padding-box, linear-gradient(90deg, #38b6ff, #8b7bff) border-box; box-shadow: 0 8px 24px -8px rgba(79, 141, 255, 0.8); }
.al-cta-btn:hover svg { transform: translateX(3px); }
.al-cta-btn:focus-visible { outline: 2px solid #38b6ff; outline-offset: 3px; }
.al-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 2px; }
.al-foot a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 500 0.78rem/1.2 Inter, system-ui, sans-serif; color: #8f98b4; text-decoration: none; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); transition: color 0.15s, border-color 0.15s, background 0.15s; }
.al-foot a svg { color: #6fbfff; flex: 0 0 auto; }
.al-foot a:hover { color: #fff; border-color: rgba(56, 182, 255, 0.45); background: rgba(56, 182, 255, 0.08); }
.al-foot a:focus-visible { outline: 2px solid #38b6ff; outline-offset: 2px; }
@media (max-width: 600px) {
  .al-page .al-head h1 { font-size: 1.55rem; }
  .al-cta { flex-direction: column; justify-content: center; text-align: center; padding: 16px; }
  .al-cta-btn { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* Continue with Telegram (auth-telegram.js), under Continue with Google. */
.al-page .al-tg { margin-top: 10px; cursor: pointer; font: inherit; }
.al-page .al-tg[hidden] { display: none; }
.al-page .al-tg[aria-disabled="true"] { opacity: 0.7; pointer-events: none; }

/* Sign-in and sign-up look like app.tanimawoai.com/founder (founder 2026-10-08: "The login and signup page container size
   should be this exact one https://app.tanimawoai.com/founder and design, remove any unnecessary text"). Same card and
   logo; the corners stay round like /founder, which square.css (nginx, every app page) would otherwise make square, so
   these need !important. The bottom is one line under a divider (.al-sep) like /founder. */
.al-page .al-card { border-radius: 16px !important; }
.al-page .al-head { border-radius: 14px !important; }
.al-page .al-pill { border-radius: 999px !important; }
.al-page .al-input, .al-page .al-btn, .al-page .al-google, .al-page .al-note { border-radius: 10px !important; }
.al-page .al-logo img { border-radius: 0 !important; }
.al-page .al-or { margin: 16px 0 12px; }
.al-page .ach-toast { display: none !important; } /* no "Achievement unlocked" pop-up over the form */
@media (max-width: 600px) { .al-page .al-two { grid-template-columns: 1fr 1fr; } }