/* chillvibes.com — curator login and other auth screens.
   Everything is scoped under .cv-auth so Flux components on the other auth pages keep their own styles. */
.cv-auth {
  --paper: #fff6dc;
  --ink: #1b1530;
  --ink-soft: #3a3152;
  --white: #ffffff;
  --sun: #ffd23f;
  --sun-tint: #fff1bf;
  --mint: #3ddc97;
  --mint-tint: #d4f7e7;
  --pink: #ff8fc7;
  --sky: #4da3ff;
  --tomato: #ff5a36;
  --tomato-tint: #ffe0d8;
  --grape: #7b5cff;
  --violet: #5b3fe0;
  --scribble: #d63d1c;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: Nunito, ui-rounded, system-ui, sans-serif;
  --hand: Caveat, cursive;
  --line: 3px solid var(--ink);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  background-image: radial-gradient(#1b153014 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  color: var(--ink);
  font: 500 17px/1.55 var(--body);
  overflow-x: clip;
}
.cv-auth *, .cv-auth *::before, .cv-auth *::after { box-sizing: border-box; }
.cv-auth a:focus-visible, .cv-auth button:focus-visible, .cv-auth input:focus-visible { outline: 3px dashed var(--violet); outline-offset: 4px; }

.cv-auth-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px 20px; }
.cv-auth-mark { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); text-decoration: none; font: 800 26px var(--display); letter-spacing: -0.03em; }
.cv-auth-mark:hover { color: var(--ink); }
.cv-auth-mark svg { width: 48px; height: 48px; flex: none; animation: cv-auth-spin 14s linear infinite; }
.cv-dotcom { color: var(--tomato); }
.cv-auth-card { width: 100%; max-width: 27rem; padding: 32px 30px; background: var(--white); border: var(--line); border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); transform: rotate(-1deg); animation: cv-auth-pop 650ms var(--bounce) both; }
.cv-auth-back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 3px 3px 0 var(--ink); transition: transform 150ms, background 150ms; }
.cv-auth-back:hover { background: var(--sun); color: var(--ink); transform: rotate(-2deg); }

.cv-auth-doodle { position: fixed; z-index: 0; pointer-events: none; }
.cv-auth-doodle-a { left: 8%; top: 12%; width: 76px; animation: cv-auth-bob 5s ease-in-out infinite; }
.cv-auth-doodle-b { right: 9%; top: 18%; width: 64px; animation: cv-auth-bob 6.5s ease-in-out -2s infinite; }
.cv-auth-doodle-c { right: 14%; bottom: 12%; width: 90px; animation: cv-auth-bob 4.2s ease-in-out -1s infinite; }
.cv-auth-doodle-d { left: 12%; bottom: 14%; width: 52px; animation: cv-auth-bob 6s ease-in-out -3s infinite; }

/* Login card contents */
.cv-login { display: flex; flex-direction: column; gap: 22px; }
.cv-login-head { display: flex; flex-direction: column; gap: 4px; }
.cv-scribble { font: 700 26px/1 var(--hand); color: var(--scribble); transform: rotate(-3deg); align-self: flex-start; }
.cv-login-head h1 { margin: 6px 0 0; font: 800 44px/1 var(--display); letter-spacing: -0.04em; color: var(--ink); }
.cv-login-head p { margin: 6px 0 0; color: var(--ink-soft); font-weight: 600; }
.cv-status { margin: 0; padding: 12px 16px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--mint-tint); font-weight: 700; }

.cv-form { display: flex; flex-direction: column; gap: 18px; }
.cv-field { display: flex; flex-direction: column; gap: 6px; }
.cv-field label, .cv-label-row label { font-weight: 800; font-size: 15px; color: var(--ink); }
.cv-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cv-label-row a { font-weight: 700; font-size: 14px; color: var(--violet); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cv-field input { display: block; width: 100%; min-height: 50px; margin: 0; padding: 10px 14px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--white); color: var(--ink); font: 600 16px var(--body); box-shadow: inset 0 3px 0 #1b15300f; }
.cv-field input::placeholder { color: #6b6382; }
.cv-field input:focus { outline: none; background: var(--sun-tint); box-shadow: 4px 4px 0 var(--ink); }
.cv-field input[aria-invalid="true"] { border-color: #b8321a; background: var(--tomato-tint); }
.cv-password { position: relative; }
.cv-password input { padding-right: 56px; }
.cv-peek { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.cv-peek:hover { background: var(--sun); }
.cv-peek svg { width: 22px; height: 22px; }
.cv-error { margin: 0; color: #b8321a; font-weight: 700; font-size: 15px; }
.cv-center { text-align: center; }

.cv-check { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; cursor: pointer; align-self: flex-start; }
.cv-check input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 0; border: 2.5px solid var(--ink); border-radius: 8px; background: var(--white); display: grid; place-content: center; cursor: pointer; }
.cv-check input::after { content: ''; width: 12px; height: 7px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 150ms var(--bounce); }
.cv-check input:checked { background: var(--mint); }
.cv-check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

.cv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 24px; border: var(--line); border-radius: 999px; font: 800 18px var(--body); text-decoration: none; cursor: pointer; box-shadow: 5px 5px 0 var(--ink); transition: transform 160ms var(--bounce), box-shadow 160ms; }
.cv-btn:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 8px 8px 0 var(--ink); }
.cv-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.cv-btn:disabled { opacity: .6; cursor: progress; transform: none; }
.cv-btn svg { width: 22px; height: 22px; flex: none; }
.cv-btn-primary { background: var(--grape); color: var(--white); }
.cv-btn-white { background: var(--white); color: var(--ink); }
.cv-btn-block { width: 100%; }

.cv-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font: 700 22px/1 var(--hand); color: var(--ink-soft); }
.cv-divider::before, .cv-divider::after { content: ''; flex: 1; border-top: 2.5px dashed #1b153040; }

[x-cloak] { display: none !important; }

@keyframes cv-auth-spin { to { transform: rotate(360deg); } }
@keyframes cv-auth-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(12deg); } }
@keyframes cv-auth-pop { from { opacity: 0; transform: scale(.9) rotate(-4deg); } to { opacity: 1; transform: rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) {
  .cv-auth *, .cv-auth *::before, .cv-auth *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  .cv-auth-doodle-b, .cv-auth-doodle-d { display: none; }
  .cv-auth-card { padding: 26px 20px; }
  .cv-login-head h1 { font-size: 38px; }
}