:root{
      --pg-text:#0f172a;
      --pg-muted:#475569;
      --pg-dark:#2b2834;
      --pg-dark-hover:#26232d;
      --pg-accent:#10b981;
      --pg-seam-left: 0px;
      --pg-seam-right: clamp(20px, 4vw, 48px);
      --pg-outer-gutter: clamp(24px, 5vw, 64px);
      --pg-page-bg: url('/static/brand/Landing-overlay-up.png');
    }
    html,body{height:100%}
    body{ margin:0; color:var(--pg-text); position:relative; background: transparent; }
    body::before{
      content:""; position:fixed; inset:0;
      background-image: var(--pg-page-bg);
      background-position: center -160px;
      background-repeat: no-repeat; background-size: 100%; z-index:-2;
    }
    .split{ min-height:100vh; display:grid; grid-template-columns: 50% 50%; gap:0; }
    /* mobile/tablet: jedna kolumna i pełne wycentrowanie */
    @media (max-width: 1200px){
      .split{
        grid-template-columns: 1fr;
        place-items: center;
      }
      .brand, .auth{
        justify-content: center !important;
        padding: var(--pg-outer-gutter) !important;
        width: 100%;
      }
      .brand{ border-right:0; border-bottom:0; }
      .brand-inner{ margin: 0 auto !important; text-align: center; }
      .auth-inner{ margin: 0 auto !important; }
     .brand::after{
        background: linear-gradient(to bottom, rgba(255,255,255,.62), rgba(255,255,255,0) 70%);
      }
    }
    .brand{
      display:flex; align-items:center; justify-content:flex-end;
      padding: var(--pg-outer-gutter) var(--pg-seam-left) var(--pg-outer-gutter) var(--pg-outer-gutter);
      background: transparent; position:relative; overflow:hidden;
    }
    .brand::after{
      content:""; position:absolute; inset:0;
      background: linear-gradient(to right, rgba(255,255,255,.62), rgba(255,255,255,.42) 45%, rgba(255,255,255,0) 70%);
      z-index:1;
    }
    .brand-inner{ margin: 0 0 0 auto; position:relative; z-index:2; }
    .brand .kicker{ color:var(--pg-muted); text-transform:uppercase; letter-spacing:.12em; font-weight:700 }
    .brand .accent{ color:var(--pg-accent) }
    .brand h1{ font-weight:800; letter-spacing:.2px }
    .auth{
      display:flex; align-items:center; justify-content:flex-start;
      padding: var(--pg-outer-gutter) var(--pg-outer-gutter) var(--pg-outer-gutter) var(--pg-seam-right);
      background: transparent;
    }
    .auth-inner{ width:min(480px, 100%); margin:0; position:relative; }
    .card-elevated{
      border-radius:16px; border:1px solid rgba(2,6,23,.06);
      box-shadow:0 12px 40px rgba(2,6,23,.10); background:#fff;
    }
    .input-icon .input-icon-addon .icon{ width:20px; height:20px }
    .btn-login{
      background-color:#008F29; padding:10px 20px; font-family:"Bai Jamjuree", Sans-serif;
      font-size:14px; font-weight:500; line-height:11px; color:#FFFFFF; border:none; border-radius:8px;
    }
    .btn-login:hover{ background-color:#008F29 }
    #errBox{ display:none }
    .input-group.input-group-flat{ background:#f1f5f9; border:1px solid rgba(2,6,23,.12); border-radius:.375rem; }
    .input-group.input-group-flat .form-control, .input-group.input-group-flat .input-group-text{ background:transparent; border:0; }
    .brand-logo{ display:block; height:28px; width:auto; object-fit:contain; }
    @media (min-width: 1200px){ .brand-logo{ height:50px; } }
    .hidden{ display:none !important; }
    .otp-input{ letter-spacing:6px; text-align:center; font-size:20px; }
    #resetModal .modal-footer{ border-top:0 !important; }
    #resetModal .modal-footer .btn-login{ width:100%; }