/* ===== Bigul Connect — shared foundation (dark theme, static) ===== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root{
    --accent:#5367fc;
    --teal:#00ffc1;
    --card-bg:rgba(13,18,53,0.7);
    --card-border:rgba(83,103,252,0.2);
  }
  html { scroll-behavior: smooth; }
  body{
    font-family:"Poppins",ui-sans-serif,system-ui,sans-serif;
    color:#fff;
    background:linear-gradient(135deg,#050510 0%,#0a0f24 60%,#050518 100%);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  h1,h2,h3,h4{ font-family:"Poppins",sans-serif; letter-spacing:-0.02em; }
  a{ color:inherit; text-decoration:none; }

  .page{ min-height:100vh; display:flex; flex-direction:column; position:relative; }
  @media(min-width:768px){ .page{ flex-direction:row; } }

  /* ambient glows + grid */
  .glow{ position:fixed; border-radius:9999px; pointer-events:none; z-index:0; }
  .glow-1{ top:0; left:0; width:600px; height:600px; background:rgba(83,103,252,0.08); filter:blur(180px); }
  .glow-2{ bottom:0; right:0; width:400px; height:400px; background:rgba(0,255,193,0.05); filter:blur(150px); }
  .grid-overlay{ position:fixed; inset:0; width:100%; height:100%; opacity:.025; pointer-events:none; z-index:0;
    background-image:linear-gradient(to right,#5367fc 0.5px,transparent 0.5px),linear-gradient(to bottom,#5367fc 0.5px,transparent 0.5px);
    background-size:60px 60px; }

  /* ===== Left brand panel ===== */
  .brand-panel{ position:relative; display:none; flex-direction:column; justify-content:space-between;
    padding:64px 56px; width:42%; overflow:hidden; border-right:1px solid rgba(255,255,255,0.05); z-index:1; }
  @media(min-width:768px){ .brand-panel{ display:flex; } }
  .brand-logo{ width:96px; height:96px; object-fit:contain; filter:drop-shadow(0 0 20px rgba(83,103,252,0.5)); margin-bottom:48px; }
  .badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:9999px;
    font-size:12px; font-weight:600; letter-spacing:3px; text-transform:uppercase;
    border:1px solid rgba(83,103,252,0.3); background:rgba(83,103,252,0.1); color:var(--accent); width:fit-content; }
  .brand-title{ font-size:36px; font-weight:700; line-height:1.1; margin:24px 0; }
  @media(min-width:768px){ .brand-title{ font-size:48px; } }
  .grad-text{ background:linear-gradient(135deg,#5367fc,#00ffc1); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .brand-desc{ font-size:16px; line-height:1.7; max-width:20rem; color:rgba(255,255,255,0.4); }
  .brand-foot{ font-size:12px; letter-spacing:.05em; color:rgba(255,255,255,0.2); }
  .brand-orb{ position:absolute; bottom:-128px; left:-128px; width:320px; height:320px; border-radius:9999px; background:rgba(83,103,252,0.1); filter:blur(48px); }
  .brand-mid{ display:flex; flex-direction:column; gap:24px; }

  /* ===== Right form panel ===== */
  .form-panel{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; position:relative; z-index:1; }
  .topbar{ width:100%; max-width:28rem; display:flex; align-items:center; justify-content:space-between; margin-bottom:40px; }
  .link-btn{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#9ca3af; background:none; border:none; cursor:pointer; transition:color .2s; }
  .link-btn:hover{ color:#e5e7eb; }
  .pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:9999px; font-size:12px; font-weight:600;
    border:1px solid rgba(83,103,252,0.3); background:rgba(83,103,252,0.1); color:var(--accent); cursor:pointer; }

  .card{ width:100%; max-width:28rem; border-radius:24px; padding:32px; position:relative; overflow:hidden;
    background:var(--card-bg); border:1px solid var(--card-border);
    box-shadow:0 0 80px rgba(83,103,252,0.08),0 20px 60px rgba(0,0,0,0.4); backdrop-filter:blur(20px); }
  .card-topline{ position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,rgba(83,103,252,0.5),transparent); }

  .mobile-logo{ display:flex; align-items:center; gap:8px; margin-bottom:24px; }
  @media(min-width:768px){ .mobile-logo{ display:none; } }
  .mobile-logo img{ width:32px; height:32px; object-fit:contain; }
  .mobile-logo span{ font-weight:700; font-size:14px; }

  .card-head{ margin-bottom:28px; }
  .card-head h2{ font-size:24px; font-weight:700; }
  .card-head p{ font-size:14px; color:rgba(255,255,255,0.4); margin-top:4px; }

  .field{ margin-bottom:20px; }
  .field label{ display:block; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:8px; }
  .input-wrap{ position:relative; }
  .input-wrap input{ width:100%; padding:12px 16px; border-radius:12px; font-size:15px; color:#fff; outline:none;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); transition:all .2s; font-family:inherit; }
  .input-wrap input::placeholder{ color:rgba(255,255,255,0.2); }
  .input-wrap input:focus{ border-color:var(--accent); background:rgba(255,255,255,0.1); }
  .eye{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:rgba(255,255,255,0.4); cursor:pointer; display:flex; }
  .eye:hover{ color:rgba(255,255,255,0.6); }

  .btn-primary{ width:100%; padding:14px; border-radius:12px; font-weight:600; font-size:14px; color:#fff; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .2s;
    background:linear-gradient(135deg,#1a3fa0,#5367fc); box-shadow:0 4px 24px rgba(83,103,252,0.35); font-family:inherit; margin-top:4px; }
  .btn-primary:hover{ transform:scale(1.02); }
  .icon{ width:15px; height:15px; }

  /* ===== Page-specific: date input dark color-scheme ===== */
  .input-wrap input[type="date"]{ color-scheme: dark; }

  /* ===== Responsive ===== */
  @media (max-width:768px){
    .form-panel{ padding:32px 16px; }
    .card{ padding:20px; max-width:100%; }
  }
  @media (max-width:400px){
    .card{ padding:16px; border-radius:18px; }
    .card-head h2{ font-size:20px; }
    .topbar{ margin-bottom:28px; }
  }

  /* ===== Light theme ===== */
  html.light body{ background:#f1f5f9; color:#0f172a; }
  html.light .glow{ opacity:.5; }
  html.light .brand-panel{ border-right-color:#e2e8f0; }
  html.light .brand-desc{ color:#475569; }
  html.light .brand-foot{ color:#475569; }  /* was #94a3b8 = 2.34:1 on the light panel */
  html.light .link-btn{ color:#475569; }
  html.light .link-btn:hover{ color:#0f172a; }
  html.light .card{ background:#ffffff; border-color:#e2e8f0; box-shadow:0 8px 30px rgba(15,23,42,0.08); }
  html.light .card-head p{ color:#475569; }
  html.light .field label{ color:#475569; }
  html.light .input-wrap input{ background:#ffffff; color:#0f172a; border-color:#cbd5e1; }
  html.light .input-wrap input::placeholder{ color:#94a3b8; }
  html.light .input-wrap input:focus{ background:#f8fafc; border-color:var(--accent); }
  html.light .input-wrap input[type="date"]{ color-scheme: light; }
  html.light .eye{ color:#475569; }
  html.light .eye:hover{ color:#0f172a; }


/* ===== Keyboard focus ring (shared design system) =========================
   Mirrors the existing .checkbox-input:focus-visible pattern so every page
   gives keyboard users the same affordance. :focus-visible only matches
   keyboard / programmatic focus, so pointer users see no visual change. */
:where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{
  outline:2px solid var(--groww,#5367FC);
  outline-offset:2px;
}