/*
  MASAR 360 — Design System v2 — Login experience (Customer + Owner)
  Rebuilt from scratch per explicit instruction — not a skin over the
  old markup. Two-panel layout: cinematic brand hero (CSS/SVG network
  motif, no external photographic assets) + glass-effect auth card.
  Real form field IDs preserved exactly (#login-tenant-code etc.) so
  app.js's existing auth wiring keeps working unchanged.
*/
.ds-auth-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--brand-ink); padding:var(--space-6);
}
.ds-auth-screen-inner{
  width:100%; max-width:min(1600px,94vw); min-height:min(880px,calc(100vh - var(--space-9)));
  display:grid; grid-template-columns:.83fr 1fr; /* ~45.5% login / 54.5% experience, per approved direction */
  border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg);
}
@media (max-width:1023px){
  .ds-auth-screen{ padding:0; }
  .ds-auth-screen-inner{ grid-template-columns:1fr; border-radius:0; min-height:100vh; max-width:100%; }
}

.ds-auth-hero{
  position:relative; overflow:hidden; min-width:0; display:flex; flex-direction:column; justify-content:space-between;
  padding:var(--space-8) var(--space-9);
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(11,207,174,.22), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(10,132,201,.28), transparent 55%),
    linear-gradient(175deg,#020d1c 0%,var(--brand-ink) 55%,#0a2d52 100%);
  color:#fff;
}
@media (max-width:1023px){ .ds-auth-hero{ padding:var(--space-6); min-height:280px; } }

.ds-auth-hero-net{ position:absolute; inset:0; opacity:.55; pointer-events:none; }
.ds-auth-hero-net svg{ width:100%; height:100%; }
.ds-auth-hero-net .net-line{ stroke:url(#dsAuthGrad); stroke-width:1; fill:none; opacity:.5; }
.ds-auth-hero-net .net-node{ fill:var(--brand-teal); }
.ds-auth-hero-net .net-node.pulse{ animation:ds-auth-pulse 2.4s ease-in-out infinite; }
@keyframes ds-auth-pulse{ 0%,100%{ opacity:.55; r:3; } 50%{ opacity:1; r:4.5; } }
@media (prefers-reduced-motion:reduce){ .ds-auth-hero-net .net-node.pulse{ animation:none; } }

.ds-auth-brand{ position:relative; display:flex; align-items:center; gap:var(--space-2); z-index:1; }
.ds-auth-brand-mark{ width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.ds-auth-brand-name{ font-weight:700; font-size:19px; }
.ds-auth-brand-tag{ font-size:12.5px; color:rgba(255,255,255,.62); }

.ds-auth-hero-copy{ position:relative; z-index:1; max-width:520px; }
.ds-auth-hero-title{ font:var(--fw-display) 38px/1.2 var(--font-ui); margin:0 0 var(--space-3); overflow-wrap:break-word; }
.ds-auth-hero-title em{ font-style:normal; background:linear-gradient(90deg,var(--brand-teal),#7fe8d4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ds-auth-hero-sub{ font:var(--fw-body) 16px/1.6 var(--font-ui); color:rgba(255,255,255,.72); margin:0; }
@media (max-width:1023px){ .ds-auth-hero-title{ font-size:26px; } }

.ds-auth-carousel{ position:relative; z-index:1; margin-top:var(--space-7); }
.ds-auth-slide{ display:none; gap:var(--space-3); align-items:flex-start; }
.ds-auth-slide.is-active{ display:flex; animation:ds-auth-fade .4s var(--ease-standard); }
@keyframes ds-auth-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.ds-auth-slide-icon{ width:44px; height:44px; border-radius:var(--radius-md); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex:none; color:var(--brand-teal); }
.ds-auth-slide-title{ font-weight:700; font-size:15px; margin:0 0 4px; }
.ds-auth-slide-text{ font-size:13.5px; color:rgba(255,255,255,.65); margin:0; line-height:1.5; }
.ds-auth-dots{ display:flex; margin-top:var(--space-4); margin-inline-start:calc(var(--space-2) * -1); }
/* Visible dot stays a small 7px mark; the button itself is a 24px hit box
   (WCAG 2.5.8 target-size minimum) via padding, not a bigger visible dot. */
.ds-auth-dot{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; padding:0; cursor:pointer; }
.ds-auth-dot::before{ content:""; display:block; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); transition:width var(--duration-base) var(--ease-standard); }
.ds-auth-dot.is-active::before{ background:var(--brand-teal); width:20px; border-radius:var(--radius-pill); }

.ds-auth-hero-foot{ position:relative; z-index:1; display:flex; gap:var(--space-6); font-size:12px; color:rgba(255,255,255,.5); }
.ds-auth-hero-foot b{ display:block; color:#fff; font-size:15px; font-weight:700; }

.ds-auth-panel{ display:flex; align-items:center; justify-content:center; min-width:0; padding:var(--space-6); background:var(--surface-page); }
.ds-auth-card{ width:100%; max-width:460px; background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-8) var(--space-7); }
.ds-auth-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-6); }
.ds-auth-card-title{ font:var(--fw-page-title) 24px/1.3 var(--font-ui); color:var(--text-primary); margin:0 0 6px; }
.ds-auth-card-sub{ font:var(--fw-body) var(--fs-body)/1.5 var(--font-ui); color:var(--text-secondary); margin:0; }
.ds-auth-toolbar{ display:flex; gap:6px; }

.ds-auth-form{ display:flex; flex-direction:column; gap:var(--space-5); margin-top:var(--space-6); }
.ds-auth-options{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; }
.ds-auth-options a{ color:var(--brand-primary-strong); font-weight:700; text-decoration:none; }
.ds-auth-options a:hover{ text-decoration:underline; }
.ds-auth-error{ display:flex; align-items:flex-start; gap:8px; padding:var(--space-3); border-radius:var(--radius-md); background:var(--status-critical-soft); color:var(--status-critical); font-size:13px; }
.ds-auth-error.hidden{ display:none; }
.ds-auth-foot{ margin-top:var(--space-7); text-align:center; font-size:12.5px; color:var(--text-secondary); }

.ds-auth-owner .ds-auth-hero{ background:
    radial-gradient(1000px 700px at 100% -10%, rgba(242,169,59,.14), transparent 55%),
    linear-gradient(175deg,#020d1c 0%,#08172a 55%,#0a2340 100%); }
.ds-auth-owner .ds-auth-brand-mark{ background:linear-gradient(120deg,var(--brand-navy),var(--brand-sky)); }
.ds-auth-owner .ds-auth-slide-icon{ color:var(--brand-accent); }
.ds-auth-owner-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.65); margin-bottom:var(--space-2); }

/* ---------------------------------------------------------------- */
/* Owner login — approved direction: NOT the customer split layout.  */
/* Premium centered executive card, deep navy, no marketing carousel, */
/* no giant side panel. Subtle background motion only.               */
/* ---------------------------------------------------------------- */
.ds-auth-owner-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-6);
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 650px at 15% -10%, rgba(11,207,174,.14), transparent 55%),
    radial-gradient(800px 600px at 100% 110%, rgba(10,132,201,.18), transparent 55%),
    linear-gradient(175deg,#020d1c 0%,#08172a 55%,#0a2340 100%);
}
.ds-auth-owner-screen .ds-auth-hero-net{ position:absolute; inset:0; opacity:.28; pointer-events:none; }
.ds-auth-owner-card{
  position:relative; z-index:1; width:100%; max-width:420px; background:var(--surface-raised);
  border-radius:var(--radius-xl); box-shadow:0 30px 80px rgba(0,12,34,.42); padding:var(--space-8) var(--space-7);
}
.ds-auth-owner-brand{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-2); margin-bottom:var(--space-6); }
.ds-auth-owner-brand img{ height:52px; width:auto; object-fit:contain; }
.ds-auth-owner-badge-center{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--brand-primary-strong); background:var(--brand-primary-soft); padding:5px 12px; border-radius:var(--radius-pill); }
.ds-auth-owner-card .ds-auth-card-title{ text-align:center; }
.ds-auth-owner-card .ds-auth-card-sub{ text-align:center; }
.ds-auth-owner-card .ds-auth-card-top{ position:relative; display:block; padding-inline:46px; }
.ds-auth-owner-card .ds-auth-toolbar{ position:absolute; inset-block-start:0; inset-inline-end:0; }
.ds-auth-owner-card .ds-auth-form{ margin-top:var(--space-6); }
@media (max-width:480px){
  .ds-auth-owner-card{ padding:var(--space-6) var(--space-5); }
  .ds-auth-owner-card .ds-auth-card-top{ padding-inline:42px; }
}