/* Stratefy brand styling – layered on top of styles.css */
:root{
  --brand-primary:#0B5FFF;
  --brand-accent:#14B8A6;
  --brand-ink:#0B1220;
  --brand-surface:#0C1430;
}

/* Topbar brand block */
.brand{ display:flex; align-items:center; gap:.6rem }
.brand img{ max-height:72px; height:auto; width:auto; vertical-align:middle }
.brand .brand-glyph{ display:none !important }
@media (max-width: 860px){ .brand img{ max-height:28px } }
.brand .brand-glyph{ max-height:22px; display:inline-block }
.brand .brand-logo-dark{ display:inline }
.brand .brand-logo-light{ display:none }
[data-theme="light"] .brand .brand-logo-dark{ display:none }
[data-theme="light"] .brand .brand-logo-light{ display:inline }
.brand .tagline{ display:none }
@media (max-width: 860px){
  /* Compact: show glyph only, hide the full logo to save space */
  .brand .brand-logo-dark, .brand .brand-logo-light{ display:none }
  .brand .brand-glyph{ display:inline-block }
}
.brand .tagline{ display:none; color:var(--text-soft); font-weight:500; font-size:12.5px }
@media (min-width: 1100px){ .brand .tagline{ display:inline } }

/* Login hero background with subtle glyph watermark */
.login-hero{
  min-height:100vh;
  /* Match logo tile background exactly */
  background:#0B1220;
  position:relative; display:flex; align-items:flex-start; justify-content:center; padding:24px; padding-top:1.5vh;
}
@media (max-height:700px){ .login-hero{ padding-top:.75vh } }
.login-hero *{ box-sizing:border-box }

/* Auth card polish */
.auth-card{ background:var(--panel); border:1px solid var(--hairline); border-radius:16px; padding:28px; width:min(480px, 92vw); box-shadow:0 14px 46px rgba(0,0,0,.38) }
.auth-card .logo{ display:block; height:38px; margin:0 auto 10px }
.auth-card h1{ margin:4px 0 6px; font-size:24px; text-align:center }
.auth-card .muted{ color:var(--text-soft); text-align:center }
.auth-card .btn-row{ display:flex; flex-direction:column; gap:.75rem; margin-top:16px }
.auth-card .foot{ text-align:center }
[data-theme="light"] .login-hero{ background:linear-gradient(180deg, #F7F9FC, #ECF2FB) }

/* Login hero composition */
.login-wrap{ width:min(920px, 96vw); display:grid; gap:10px; justify-items:center }
.hero-logo{ display:block; width:auto; height:auto; max-width:520px }
.hero-logo-dark{ display:block }
.hero-logo-light{ display:none }
[data-theme="light"] .hero-logo-dark{ display:none }
[data-theme="light"] .hero-logo-light{ display:block }

/* Soft tile behind full-logo to hide harsh square and blend edges */
/* No tile — match page background so logo blends naturally */
.hero-logo-wrap{ position:relative; padding:0; background:transparent }
.hero-logo-wrap::before{ display:none }
.hero-tagline{ font-weight:600; letter-spacing:.2px; color:var(--text-soft); text-align:center; margin-top:-4px }
@media (max-width:700px){ .hero-logo{ max-width:420px } }
@media (max-width:520px){ .hero-logo{ max-width:320px } }

/* Brand button (optional use) */
.btn.primary{ background:linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); color:#0b0e14; border:1px solid color-mix(in srgb, var(--brand-primary) 60%, #0000); }
.btn.primary:hover{ filter:brightness(1.03) }
.hdr-glyph{ height:28px; width:auto; vertical-align:middle; margin-right:8px; opacity:.95 }
[data-theme="light"] .hdr-glyph{ height:32px }
.topbar{ min-height:80px }
.empty-state{ display:flex; align-items:center; justify-content:center; gap:.5rem }
.empty-state .empty-glyph{ height:16px; width:auto; opacity:.6 }

/* Toast: add a tiny brand dot */
.toast{ position:relative; padding-left:28px }
.toast::before{ content:""; position:absolute; left:10px; top:50%; margin-top:-6px; width:12px; height:12px; border-radius:50%; background:linear-gradient(180deg, var(--brand), var(--accent)); opacity:.85 }
.app-foot{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:18px 0; color:var(--text-soft) }
.app-foot .foot-glyph{ height:16px; width:auto; opacity:.8 }
.app-foot .foot-text{ font-size:12.5px }
.top-progress{ position:fixed; left:0; top:0; right:0; height:2px; background:linear-gradient(90deg, var(--brand), var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; z-index:9999; }
.top-progress.on{ transform:scaleX(1) }