.cw-auth{--cw-bg:#0b1f14;--cw-card:#13291d;--cw-fg:#e8f2ec;--cw-muted:#a9c3b5;--cw-b1:#1f7a4c;--cw-b2:#2da66a;--cw-err:#ff4d4f;--cw-ring:0 0 0 3px rgba(45,166,106,.35);display:grid;place-items:center;min-height:calc(100vh - 80px);padding:24px;background:var(--cw-bg);color:var(--cw-fg)}
@media(prefers-color-scheme:light){.cw-auth{--cw-bg:#f5faf7;--cw-card:#fff;--cw-fg:#14281e;--cw-muted:#516a5d;--cw-b1:#2da66a;--cw-b2:#1f7a4c;--cw-err:#d9363e;--cw-ring:0 0 0 3px rgba(31,122,76,.25)}}
.cw-auth__card{width:100%;max-width:420px;background:var(--cw-card);border-radius:16px;padding:24px 22px;box-shadow:0 10px 30px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06)}
.cw-auth__title{margin:0 0 10px;font-size:24px;letter-spacing:.2px}
.cw-auth__alert{margin:8px 0 14px;padding:10px 12px;border-radius:10px;background:rgba(255,77,79,.12);border:1px solid rgba(255,77,79,.35)}
.cw-f{display:block;margin:10px 0}
.cw-f__label{display:block;margin:0 0 6px;font-size:13px;color:var(--cw-muted)}
.cw-f__input{width:100%;height:44px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:transparent;color:inherit;padding:10px 12px;outline:none;transition:border .15s,box-shadow .15s}
.cw-f__input:focus{border-color:var(--cw-b1);box-shadow:var(--cw-ring)}
.cw-pw{position:relative}
.cw-pw .cw-f__input{padding-right:42px}
.cw-pw__toggle{position:absolute;right:6px;top:6px;height:32px;width:32px;border:0;background:transparent;border-radius:8px;cursor:pointer;font-size:16px;line-height:32px}
.cw-pw__toggle:hover{background:rgba(255,255,255,.06)}
.cw-pw__toggle[data-on]{color:var(--cw-b2)}
.cw-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:8px;height:46px;border:0;border-radius:12px;background:linear-gradient(180deg,var(--cw-b1),var(--cw-b2));color:#fff;font-weight:600;letter-spacing:.3px;cursor:pointer;transition:transform .06s ease,filter .15s ease;text-decoration:none}
.cw-btn:hover{filter:brightness(1.05)}
.cw-btn:active{transform:translateY(1px)}
.cw-auth__meta{margin-top:10px;text-align:center}
.cw-auth__link{text-decoration:none;color:var(--cw-muted)}
.cw-auth__link:hover{color:var(--cw-b1)}
@media(max-width:480px){.cw-auth__card{padding:20px 16px;border-radius:14px}.cw-btn{height:44px}}
/* foutstate optioneel */
.cw-f__input.is-err{border-color:var(--cw-err);box-shadow:0 0 0 3px rgba(255,77,79,.2)}
/* themavariabelen */
.cw-auth{
    --cw-fg:        #14281e;
    --cw-muted:     #516a5d;
    --cw-card:      #ffffff;
    --cw-ok-bg:     #eef9f2;
    --cw-ok-bord:   #cdebdc;
    --cw-info-bg:   #eef2ff;
    --cw-info-bord: #c7d2fe;
    --cw-warn-bg:   #fff7ed;
    --cw-warn-bord: #fed7aa;
    --cw-err-bg:    #fff1f0;
    --cw-err-bord:  #ffa39e;
    color: var(--cw-fg);
  }
  
  /* dark via class .dark */
  .dark .cw-auth{
    --cw-fg:        #e5e7eb;
    --cw-muted:     #94a3b8;
    --cw-card:      #101827;
    --cw-ok-bg:     #0f1f17;
    --cw-ok-bord:   #163826;
    --cw-info-bg:   #0f1628;
    --cw-info-bord: #1d2a46;
    --cw-warn-bg:   #241a0e;
    --cw-warn-bord: #3a2a14;
    --cw-err-bg:    #2a1515;
    --cw-err-bord:  #592b2b;
  }
  
  /* kaartkleur */
  .cw-auth__card{ background: var(--cw-card); }
  
  /* flash */
  .cw-auth__alert{
    margin:8px 0 14px;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid var(--cw-ok-bord);
    background: var(--cw-ok-bg);
    color: var(--cw-fg);
  }
  
  /* typed varianten */
  .cw-auth__alert.is-ok   { border-color: var(--cw-ok-bord);   background: var(--cw-ok-bg); }
  .cw-auth__alert.is-info { border-color: var(--cw-info-bord); background: var(--cw-info-bg); }
  .cw-auth__alert.is-warn { border-color: var(--cw-warn-bord); background: var(--cw-warn-bg); }
  .cw-auth__alert.is-err  { border-color: var(--cw-err-bord);  background: var(--cw-err-bg);  }