@import url('/css/fonts-local.css');

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      height: 100%;
      background-image: var(--bg-image);
      background-size: cover;
      background-position: center 40%;
      background-attachment: fixed;
      background-color: #06090f;
      color: var(--text-primary);
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
    }

    /* Login — lighter overlay to show more of the image */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(4, 8, 16, 0.75) 0%,
        rgba(6, 10, 20, 0.65) 40%,
        rgba(10, 6, 4, 0.62) 65%,
        rgba(4, 8, 16, 0.75) 100%
      );
      z-index: 0;
      pointer-events: none;
    }
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background: radial-gradient(ellipse at center, transparent 25%, rgba(2,4,10,.5) 100%);
      z-index: 0;
      pointer-events: none;
    }
    body > * { position: relative; z-index: 1; }

    /* Map grid texture */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image:
        linear-gradient(rgba(201,168,76,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,0.022) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      z-index: 0;
    }

    /* Radial vignette */
    body::after {
      content: '';
      position: fixed; inset: 0;
      background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(5,11,20,0.85) 100%);
      pointer-events: none;
      z-index: 0;
    }

    /* ── Compass rose background ── */
    .bg-compass {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: min(700px, 100vw);
      height: min(700px, 100vw);
      opacity: 0.055;
      pointer-events: none;
      z-index: 0;
      animation: rotate-slow 120s linear infinite;
    }

    @keyframes rotate-slow {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* ── Floating particles ── */
    .particles {
      position: fixed; inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .particle {
      position: absolute;
      width: 1.5px; height: 1.5px;
      background: var(--gold);
      border-radius: 50%;
      opacity: 0;
      animation: float-up var(--dur, 12s) var(--delay, 0s) infinite ease-in;
    }

    @keyframes float-up {
      0%   { opacity: 0;    transform: translateY(100vh) scale(0.5); }
      10%  { opacity: 0.4; }
      80%  { opacity: 0.2; }
      100% { opacity: 0;    transform: translateY(-10vh) scale(1); }
    }

    /* ── Layout ── */
    .login-wrapper {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 16px;
    }

    /* ── Card ── */
    .login-card {
      width: 100%;
      max-width: 400px;
      background: rgba(11, 20, 34, 0.92);
      border: 1px solid rgba(201,168,76,0.2);
      border-radius: 18px;
      padding: 44px 40px 40px;
      backdrop-filter: blur(20px);
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 32px 80px rgba(0,0,0,0.6),
        0 0 60px rgba(201,168,76,0.05);
      animation: card-rise 0.6s cubic-bezier(0.22,1,0.36,1) both;
    }

    @keyframes card-rise {
      from { opacity: 0; transform: translateY(24px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0)    scale(1); }
    }

    /* Gold top accent line */
    .login-card::before {
      content: '';
      position: absolute;
      top: 0; left: 15%; right: 15%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      border-radius: 0 0 4px 4px;
    }

    /* ── Logo ── */
    .login-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-bottom: 36px;
    }

    .login-emblem {
      width: 58px; height: 58px;
      border-radius: 14px;
      background: rgba(201,168,76,0.08);
      border: 1px solid rgba(201,168,76,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold-light);
      box-shadow: 0 0 30px rgba(201,168,76,0.12);
      animation: emblem-glow 3s ease-in-out infinite;
    }

    @keyframes emblem-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,0.1); }
      50%       { box-shadow: 0 0 36px rgba(201,168,76,0.22); }
    }

    .login-emblem svg { width: 28px; height: 28px; }

    .login-title {
      text-align: center;
      line-height: 1;
    }

    .login-title-order {
      display: block;
      font-family: 'Cinzel', serif;
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.22em;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .login-title-name {
      display: block;
      font-family: 'Cinzel', serif;
      font-size: 21px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--gold-light);
    }

    .login-divider {
      width: 40px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      margin: 10px auto 0;
    }

    /* ── Form ── */
    .login-form { display: flex; flex-direction: column; gap: 16px; }

    .form-group { display: flex; flex-direction: column; gap: 7px; }

    .form-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }

    .input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .input-icon {
      position: absolute;
      left: 12px;
      width: 15px; height: 15px;
      color: var(--text-muted);
      pointer-events: none;
      transition: color 200ms;
    }

    .form-input {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 9px;
      padding: 11px 12px 11px 38px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--text-primary);
      outline: none;
      transition: border-color 200ms, box-shadow 200ms, background 200ms;
    }

    .form-input::placeholder { color: var(--text-muted); font-size: 13px; }

    .form-input:focus {
      border-color: rgba(201,168,76,0.4);
      background: rgba(201,168,76,0.04);
      box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
    }

    .form-group:focus-within .input-icon { color: var(--gold); }

    /* Password toggle */
    .toggle-vis {
      position: absolute;
      right: 10px;
      width: 28px; height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-muted);
      border: none;
      background: none;
      transition: color 150ms;
    }
    .toggle-vis:hover { color: var(--gold); }
    .toggle-vis svg { width: 14px; height: 14px; }

    .form-input.has-toggle { padding-right: 40px; }

    /* ── Error message ── */
    .error-msg {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 8px;
      background: rgba(239,68,68,0.08);
      border: 1px solid rgba(239,68,68,0.25);
      color: #f87171;
      font-size: 12.5px;
      font-weight: 500;
      animation: shake 0.35s ease;
    }

    .error-msg.show { display: flex; }

    .error-msg svg { width: 14px; height: 14px; flex-shrink: 0; }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20%       { transform: translateX(-5px); }
      40%       { transform: translateX(5px); }
      60%       { transform: translateX(-4px); }
      80%       { transform: translateX(4px); }
    }

    /* ── Login button ── */
    .login-btn {
      width: 100%;
      padding: 13px;
      border-radius: 9px;
      border: none;
      background: linear-gradient(135deg, #c9a84c 0%, #e8c87a 50%, #c9a84c 100%);
      background-size: 200% auto;
      color: #080d18;
      font-family: 'Cinzel', serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      cursor: pointer;
      transition: background-position 400ms ease, box-shadow 250ms ease, transform 150ms ease;
      margin-top: 4px;
      position: relative;
      overflow: hidden;
    }

    .login-btn:hover {
      background-position: right center;
      box-shadow: 0 0 28px rgba(201,168,76,0.35), 0 4px 16px rgba(0,0,0,0.4);
      transform: translateY(-1px);
    }

    .login-btn:active { transform: translateY(0); }

    .login-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    /* Spinner inside button */
    .btn-spinner {
      display: none;
      width: 16px; height: 16px;
      border: 2px solid rgba(8,13,24,0.3);
      border-top-color: #080d18;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      margin: 0 auto;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .login-btn.loading .btn-label { display: none; }
    .login-btn.loading .btn-spinner { display: block; }

    /* ── Footer ── */
    .login-footer {
      margin-top: 28px;
      text-align: center;
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 0.05em;
    }

    .login-footer span { color: var(--gold); opacity: 0.6; }

    /* ── Responsive — tablet & mobile ── */
    @media (max-width: 768px) {
      .bg-compass {
        width: min(520px, 90vw);
        height: min(520px, 90vw);
      }
    }

    @media (max-width: 480px) {
      .login-wrapper { padding: 16px 12px; }
      .login-card {
        max-width: 100%;
        padding: 28px 22px 26px;
        border-radius: 14px;
      }
      .login-logo { gap: 10px; margin-bottom: 24px; }
      .login-emblem { width: 50px; height: 50px; border-radius: 12px; }
      .login-emblem svg { width: 24px; height: 24px; }
      .login-title-name { font-size: 18px; letter-spacing: 0.04em; }
      .login-title-order { font-size: 9px; }
      .login-form { gap: 14px; }
      .form-input { font-size: 16px; padding: 12px 12px 12px 38px; } /* 16px evita zoom iOS */
      .form-input::placeholder { font-size: 14px; }
      .login-btn { padding: 14px; font-size: 12px; }
      .login-footer { margin-top: 22px; font-size: 10px; }
      .bg-compass {
        width: min(360px, 88vw);
        height: min(360px, 88vw);
        opacity: 0.04;
      }
    }

    @media (max-width: 360px) {
      .login-card { padding: 22px 18px 22px; }
      .login-title-name { font-size: 16px; }
    }