/* Schriften liegen auf dem eigenen Server (kein Abruf bei Google) */
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:600 800; font-display:swap; src:url(/fonts/unbounded-latin.woff2) format('woff2'); }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/manrope-latin.woff2) format('woff2'); }

  :root{
    --ink:#070509;
    --ink-2:#130a10;
    --panel:rgba(21,12,18,0.46);
    --panel-border:rgba(255,190,210,0.14);
    --line:rgba(255,205,220,0.10);
    --text:#F5ECEF;
    --text-soft:#C2A3AF;
    --text-faint:#7A5A65;
    --accent:#B80F72;
    --accent-2:#FF3FB0;
    --accent-soft:rgba(255,63,176,0.16);
    --pulse:#FFE9F1;
    --focus:#FF6FC7;
    --warn:#FFB454;
    --font-display:'Unbounded', 'Segoe UI', system-ui, sans-serif;
    --font-body:'Manrope', 'Segoe UI', system-ui, sans-serif;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    min-height:100dvh;
    background:var(--ink);
    color:var(--text);
    font-family:var(--font-body);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }

  #net{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    background:var(--ink);
  }

  .depth-fog{
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 70% 55% at 50% 42%, rgba(5,7,11,0) 0%, rgba(5,7,11,0.55) 78%, rgba(5,7,11,0.86) 100%);
    z-index:1;
  }

  .stage{
    position:relative;
    z-index:2;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }

  .login-wrap{
    width:100%;
    max-width:420px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:opacity .8s ease, filter .8s ease, transform .8s ease;
  }
  .login-wrap.is-warping{
    opacity:0;
    filter:blur(14px);
    transform:scale(0.90) translateY(-16px);
    pointer-events:none;
  }

  /* ---- Logo: typographic placeholder, swap-ready ---- */
  /* SWAP POINT: replace the two spans below with
     <img src="your-logo.svg" alt="Central-360" class="logo-img">
     .logo-slot already constrains height so any image drops in at the right scale. */
  .logo-slot{
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5ch;
    line-height:1;
    user-select:none;
  }
  .logo-img{ display:block; height:100%; width:auto; }
  .logo-word{
    font-family:var(--font-display);
    font-weight:700;
    font-size:42px;
    letter-spacing:.1em;
    color:var(--text);
  }
  .logo-num{
    font-family:var(--font-display);
    font-weight:800;
    font-size:42px;
    letter-spacing:.01em;
    background:linear-gradient(120deg, var(--accent), var(--accent-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  /* ---- Tagline: single steady word, very slight ambient motion ---- */
  .tagline{
    margin-top:16px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .tagline-word{
    display:inline-block;
    font-family:var(--font-body);
    font-weight:500;
    font-size:19px;
    letter-spacing:.04em;
    color:var(--text-soft);
    transform-origin:center;
    animation:taglineBreathe 5.5s ease-in-out infinite;
    will-change:transform;
  }
  @keyframes taglineBreathe{
    0%, 100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-1.5px) scale(1.012); }
  }

  /* ---- Form ---- */
  .login-form{
    margin-top:34px;
    width:100%;
    padding:22px 22px 24px;
    border-radius:18px;
    background:var(--panel);
    border:1px solid var(--panel-border);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.65);
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .field{
    position:relative;
  }
  .field label{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .field input{
    width:100%;
    appearance:none;
    background:rgba(255,255,255,0.035);
    border:1px solid var(--line);
    border-radius:11px;
    padding:13px 14px;
    font-family:var(--font-body);
    font-size:14.5px;
    font-weight:500;
    color:var(--text);
    outline:none;
    transition:border-color .2s ease, background .2s ease;
  }
  .field input::placeholder{ color:rgba(245,236,239,0.72); }
  .field input:focus{
    border-color:var(--focus);
    background:rgba(255,255,255,0.055);
  }
  .field input:focus-visible{
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .field.has-toggle input{ padding-right:44px; }

  .eye-btn{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    border-radius:8px;
    color:var(--text);
    cursor:pointer;
    transition:color .2s ease, background .2s ease;
  }
  .eye-btn:hover{ color:var(--accent-2); background:rgba(255,255,255,0.05); }
  .eye-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
  .eye-btn svg{ width:18px; height:18px; }
  .eye-btn .off-line{ display:none; }
  .eye-btn.is-visible .off-line{ display:block; }

  .row-forgot{
    display:flex;
    justify-content:flex-end;
    margin-top:-2px;
  }
  .forgot-link{
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:500;
    color:var(--text);
    text-decoration:none;
    transition:color .2s ease;
  }
  .forgot-link:hover{ color:var(--accent-2); }
  .forgot-link:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }

  .submit-btn{
    margin-top:6px;
    position:relative;
    width:100%;
    padding:13px 16px;
    border:none;
    border-radius:11px;
    font-family:var(--font-body);
    font-size:14.5px;
    font-weight:700;
    letter-spacing:.02em;
    color:#fff;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    cursor:pointer;
    transition:transform .15s ease, box-shadow .25s ease, opacity .25s ease;
    box-shadow:0 12px 30px -12px rgba(255,63,176,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
    overflow:hidden;
  }
  .submit-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%);
    pointer-events:none;
  }
  .submit-btn:hover{ transform:translateY(-1px); box-shadow:0 16px 34px -12px rgba(255,63,176,0.55), inset 0 1px 0 rgba(255,255,255,0.28); }
  .submit-btn:active{ transform:translateY(0); }
  .submit-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
  .submit-btn .btn-label{ transition:opacity .2s ease; }
  .submit-btn .btn-spinner{
    position:absolute;
    left:50%; top:50%;
    width:16px; height:16px;
    margin:-8px 0 0 -8px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.32);
    border-top-color:#fff;
    opacity:0;
    transform:scale(.6);
    transition:opacity .2s ease, transform .2s ease;
  }
  .submit-btn.is-loading .btn-label{ opacity:0; }
  .submit-btn.is-loading .btn-spinner{ opacity:1; transform:scale(1); animation:spin .7s linear infinite; }
  .submit-btn.is-loading{ pointer-events:none; }

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

  @media (max-width:520px){
    .login-wrap{ max-width:320px; }
    .login-form{ padding:20px 18px 22px; border-radius:16px; }
    .logo-slot{ height:44px; }
    .logo-word, .logo-num{ font-size:30px; }
    .tagline{ height:26px; }
    .tagline-word{ font-size:16px; }
  }

  /* ---- Forgot / reset password panels ---- */
  .panel[hidden]{ display:none; }
  .panel-enter{ animation:panelIn .45s ease both; }
  @keyframes panelIn{
    from{ opacity:0; transform:translateY(6px); filter:blur(4px); }
    to{ opacity:1; transform:none; filter:none; }
  }
  .panel-head{ margin-bottom:2px; }
  .panel-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:19px;
    color:var(--text);
    margin:0 0 6px;
  }
  .panel-sub{
    font-size:13px;
    line-height:1.55;
    color:var(--text-soft);
    margin:0 0 6px;
  }
  .back-link{
    background:none;
    border:none;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:500;
    color:var(--text-soft);
    cursor:pointer;
    padding:6px 2px;
    text-align:center;
    transition:color .2s ease;
  }
  .back-link:hover{ color:var(--text); }
  .back-link:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }

  .demo-link{
    background:none;
    border:1px dashed var(--panel-border);
    border-radius:9px;
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:500;
    color:var(--text-soft);
    padding:10px 12px;
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease;
  }
  .demo-link:hover{ border-color:var(--accent-2); color:var(--text); }
  .demo-link:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

  .field-error{
    font-size:12.5px;
    color:var(--warn);
    margin:-4px 0 2px;
  }

  .success-check{
    width:46px; height:46px;
    margin:0 auto 12px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent-2);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .success-check svg{ width:22px; height:22px; }

  @media (prefers-reduced-motion: reduce){
    .tagline-word{ animation:none; transform:none; }
    .submit-btn, .submit-btn *{ transition-duration:.01ms; }
    .login-wrap{ transition-duration:.2s; }
    .login-wrap.is-warping{ transform:none; filter:none; }
    .panel-enter{ animation-duration:.01ms; }
  }

.login-wrap.is-checking .panel-stack{ visibility:hidden; }