/* ===========================
   Global Background Theme (Lightened, warm, non-blue)
   =========================== */

:root{
  /* Lightened warm gradient */
  --bg-top:    #F4EDE4;  /* soft sand (light brownish) */
  --bg-mid:    #FAF4EA;  /* bridge stop */
  --bg-bottom: #FFFAF0;  /* very faint warm daylight */

  /* Fallback if gradients are disabled */
  --bg-fallback: #FAF4EA;
}

.background{
  min-height: 100vh;
  background-color: var(--bg-fallback);
  background-image:
    linear-gradient(
      to bottom,
      var(--bg-top) 0%,
      var(--bg-mid) 40%,
      var(--bg-bottom) 100%
    );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Optional, ultra-subtle banding guard (safe to keep or delete) */
@supports (background-image: radial-gradient(circle, #0000, #0000)){
  .background{
    background-image:
      linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-mid) 40%, var(--bg-bottom) 100%),
      radial-gradient(1000px 600px at 20% 10%, #00000006, #0000 60%),
      radial-gradient(800px 500px at 80% 90%, #00000004, #0000 60%);
  }
}

/* Dark mode variant (still warm; no blues) */
@media (prefers-color-scheme: dark){
  :root{
    --bg-top:    #3A332B;
    --bg-mid:    #443B30;
    --bg-bottom: #4A4035;
    --bg-fallback: #3A332B;
  }
}
/* =========================
   Panel (Google-style)
   ========================= */
.panel {
  max-width: 900px;         /* panel width limit */
  margin: 5vh auto;         /* center panel vertically & horizontally */
  background: #fff;
  border-radius: 20px;      /* rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  min-height: 60vh;         /* give space inside */
  display: flex;
  flex-direction: column;
}

/* =========================
   Logo (Sweet Spot)
   ========================= */
.logo {
  text-align: left;
  margin-bottom: 2rem;
}

.logo-line1 {
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);  /* was 1.5rem */
    font-weight: 400;
}

.logo-line2 {
    font-size: clamp(1.1rem, 2vw, 1.6rem);  /* was 2rem */
    font-weight: bold;
}
.logo-divider {
  width: 100%;               /* never exceed 80% of the panel */
  margin: 0.5rem auto 1.5rem auto;  /* top, sides auto = centered, bottom */
  border: none;             /* remove default */
  border-top: 1px solid #ccc; /* thin subtle line */
}

/* Ensure brand text stays inline so the ™ follows naturally */
.brand { display: inline; }

/* Force a neutral ™ regardless of parent fonts */
.logo .logo-line2 .brand::after {
  content: "\2122";                /* ™ */
  display: inline;                 /* keep flow */
  font-family: Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 0.5em;
  vertical-align: text-top;        /* or try baseline if you prefer it lower */
  margin-left: 1px;
  opacity: 0.55;
  letter-spacing: 0;               /* avoid decorative tracking from parent */
}
/* Locked, style-proof ™ */
.brand::after {
  content: " \2122";           /* ™ */
  font-family: Arial, sans-serif;
  font-size: 0.55em;
  vertical-align: baseline;
  margin-left: 2px;
  opacity: 0.55;
  font-weight: normal;
}

.tm-lock::before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'>\
<text x='0' y='10' font-family='Arial, sans-serif' font-size='10' font-weight='400'>™</text>\
</svg>") no-repeat center / contain;
}
/* ===========================
   Site Footer
   =========================== */
.site-footer {
  margin: 0 24px 24px;       /* spacing to echo panel padding */
  margin-top: auto;          /* sticks to bottom when content is short */
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.75;             /* softer so it doesn’t compete with logo */
  line-height: 1.6;
}

.site-footer .legal {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.site-footer a:hover {
  text-decoration: underline;
}

/* Responsive tweaks for very small screens */
@media (max-width: 480px) {
  .site-footer {
    margin: 0 16px 16px;
    font-size: 0.85rem;
  }
  .site-footer .legal {
    gap: 4px;
  }
}
.login-box {
  max-width: 300px;
  margin: 40px auto;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-box input[type="text"],
.login-box input[type="password"] {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.login-button {
  padding: 12px;
  font-size: 1rem;
  background-color: #1877f2;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.login-button:hover {
  background-color: #165cdb;
}

.forgot-link {
  text-align: center;
  margin-top: 10px;
}

.forgot-link a {
  color: #1877f2;
  text-decoration: none;
}

.forgot-link a:hover {
  text-decoration: underline;
}