:root{
    --hajduk-blue: #003DA5;
    --hajduk-blue-deep: #001B41;
    --hajduk-red: #D2232A;
    --hajduk-gold: #F5B400;
    --hajduk-white: #FFFFFF;
    --cream: #F4F1EA;
    --ink: #0B1220;
    --muted: #6B7686;
    --error: #D2232A;
    --radius: 16px;
    --font-display: 'Oswald', sans-serif;
    --font-body: 'Inter', sans-serif;
  }

  *{ box-sizing: border-box; }

  html,body{ margin:0; padding:0; height:100%; font-family: var(--font-body); cursor: default; }

  body{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    min-height:100dvh;
    padding: 20px;
    background: linear-gradient(135deg,
      var(--hajduk-red) 0%,
      #7a1830 35%,
      var(--hajduk-blue) 70%,
      var(--hajduk-blue-deep) 100%);
    overflow-x:hidden;
  }

  .card{
    width:100%;
    max-width: 400px;
    background: var(--cream);
    border-radius: var(--radius);
    padding: clamp(28px, 6vw, 40px) clamp(22px, 6vw, 36px) clamp(24px, 5vw, 32px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.45);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  /* ---------- Grb kluba ---------- */
  .crest{
    width: clamp(100px, 28vw, 132px);
    height: clamp(100px, 28vw, 132px);
    margin-bottom: 20px;
    animation: crestIn 700ms cubic-bezier(.2,.8,.2,1) both;
  }

  .crest img{
    width:100%;
    height:100%;
    object-fit: contain;
    display:block;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
  }

  @keyframes crestIn{
    from{ opacity:0; transform: translateY(10px) scale(.85); }
    to{ opacity:1; transform: translateY(0) scale(1); }
  }

  h1{
    font-family: var(--font-display);
    font-size: clamp(22px, 5vw, 26px);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 24px;
  }

  form{ width:100%; display:flex; flex-direction:column; gap:16px; }

  .field{ display:flex; flex-direction:column; gap:6px; text-align:left; }

  .field label{
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.3px;
  }

  .input-wrap{ position:relative; }

  .field input[type="text"],
  .field input[type="email"],
  .field input[type="password"]{
    width:100%;
    padding: 13px 14px;
    border: 1.5px solid #DCD6C8;
    border-radius: 8px;
    font-size: 16px;
    font-family: var(--font-body);
    background: var(--hajduk-white);
    color: var(--ink);
    outline:none;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    -webkit-appearance: none;
    appearance: none;
  }

  .field input[type="text"]:focus,
  .field input[type="email"]:focus,
  .field input[type="password"]:focus{
    cursor: text;
  }

  .field input:focus{
    border-color: var(--hajduk-blue);
    box-shadow: 0 0 0 3px rgba(0,61,165,0.15);
  }

  .field input.error{
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(210,35,42,0.12);
  }

  #password{ padding-right: 44px; }

  .toggle-visibility{
    position:absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    cursor:pointer;
    color: var(--muted);
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
  }

  .toggle-visibility:hover{ color: var(--hajduk-blue); background: rgba(0,61,165,0.08); }
  .toggle-visibility svg{ width:20px; height:20px; }

  .row-between{
    display:flex;
    align-items:center;
    justify-content: flex-end;
    margin-top: -2px;
  }

  .forgot-link{
    font-size: 13px;
    color: var(--hajduk-blue);
    text-decoration:none;
    font-weight:600;
    cursor: pointer;
  }

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

  .field-error{
    font-size: 12px;
    color: var(--error);
    min-height: 14px;
    margin-top: -10px;
  }

  .submit-btn{
    margin-top: 6px;
    background: var(--hajduk-red);
    color: var(--hajduk-white);
    border: none;
    border-radius: 8px;
    padding: 14px 18px;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition: transform 120ms ease, box-shadow 120ms ease, background 150ms ease;
    box-shadow: 0 8px 18px rgba(210,35,42,0.35);
    -webkit-tap-highlight-color: transparent;
  }

  .submit-btn:hover{ background:#B71B21; transform: translateY(-1px); }
  .submit-btn:active{ transform: translateY(0); }
  .submit-btn:disabled{ opacity:0.65; cursor:not-allowed; transform:none; }

  .spinner{
    width:15px; height:15px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: var(--hajduk-white);
    border-radius:50%;
    animation: spin 700ms linear infinite;
    display:none;
  }

  .submit-btn.loading .spinner{ display:inline-block; }
  .submit-btn.loading .btn-text{ opacity:0.85; }

  @keyframes spin{ to{ transform: rotate(360deg); } }

  .status-msg{
    width:100%;
    font-size: 13px;
    text-align:center;
    padding: 10px 12px;
    border-radius: 8px;
    display:none;
  }

  .status-msg.show{ display:block; }
  .status-msg.error{ background: rgba(210,35,42,0.1); color:#8f171c; }
  .status-msg.success{ background: rgba(0,120,60,0.1); color:#0a6b3a; }

  .foot-note{
    margin-top: 22px;
    font-size: 11.5px;
    color: var(--muted);
  }

  /* ---------- Responzivnost ---------- */
  @media (max-width: 480px){
    body{ padding: 12px; align-items: center; }
    .card{
      max-width: 100%;
      border-radius: 14px;
    }
    .row-between{ justify-content: center; }
  }

  @media (max-width: 360px){
    .card{ padding: 24px 18px 22px; }
  }

  @media (max-height: 640px){
    .crest{ margin-bottom: 12px; }
    h1{ margin-bottom: 16px; }
    .foot-note{ margin-top: 14px; }
  }

  @media (min-width: 481px) and (max-width: 900px){
    .card{ max-width: 380px; }
  }

  @media (min-width: 901px){
    .card{ max-width: 410px; }
  }

  @media (prefers-reduced-motion: reduce){
    .crest{ animation:none; }
    .submit-btn, .toggle-visibility{ transition:none; }
  }

  :focus-visible{ outline: 2px solid var(--hajduk-blue); outline-offset: 2px; }