/* coconvo shared design tokens — colors, gradients, glass, buttons, inputs,
   aurora background, toasts, skeletons. Single source of truth for account,
   auth, admin, and legal surfaces. Matches the live coconvo aesthetic. */
:root{
  --coral:#FF6F61; --rose:#F2478E; --violet:#8B5CF6;
  --brand:linear-gradient(135deg,#FF6F61 0%,#F2478E 50%,#8B5CF6 100%);
  --brand-h:linear-gradient(90deg,#FF6F61 0%,#F2478E 50%,#8B5CF6 100%);
  --gold:linear-gradient(135deg,#E8B84B,#C2459B);
  --green:#2FA968; --greenbg:rgba(47,169,104,.14);
  --amber:#E0962B; --amberbg:rgba(224,150,43,.16);
  --red:#E2574F; --redbg:rgba(226,87,79,.14);
  --teal:#1D9E75;
  --r-sm:12px; --r:18px; --r-lg:24px;
  --shadow:0 22px 60px -30px rgba(242,71,142,.45);
  --shadow-soft:0 10px 30px -18px rgba(20,16,30,.4);
}
[data-theme="light"]{
  --bg:#FBF8F4; --ink:#26222E; --muted:#6B6675; --faint:#9A94A4;
  --panel:rgba(255,255,255,.74); --panel2:rgba(255,255,255,.55);
  --line:rgba(20,16,30,.09); --track:rgba(20,16,30,.07); --field:rgba(255,255,255,.85);
  --blob1:rgba(255,111,97,.30); --blob2:rgba(242,71,142,.26); --blob3:rgba(139,92,246,.30);
}
[data-theme="dark"]{
  --bg:#14121A; --ink:#F3F0F8; --muted:#A8A2B4; --faint:#7C7689;
  --panel:rgba(255,255,255,.055); --panel2:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.10); --track:rgba(255,255,255,.08); --field:rgba(255,255,255,.05);
  --blob1:rgba(255,111,97,.22); --blob2:rgba(242,71,142,.20); --blob3:rgba(139,92,246,.26);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--bg);
  min-height:100vh; -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden; line-height:1.5;
}
/* aurora-mesh background with drifting orbs + film grain */
body::before{
  content:""; position:fixed; inset:-20% -10% auto -10%; height:130%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 40% at 18% 12%,var(--blob1),transparent 70%),
    radial-gradient(38% 38% at 82% 8%,var(--blob3),transparent 70%),
    radial-gradient(45% 45% at 60% 62%,var(--blob2),transparent 72%);
  filter:blur(22px); animation:ccdrift 26s ease-in-out infinite alternate;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes ccdrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-3%,0) scale(1.06)}}
@media (prefers-reduced-motion: reduce){ body::before{animation:none} *{transition:none!important;animation:none!important} }

.cc-serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400}
.cc-wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:26px 20px 64px}
.cc-narrow{max-width:460px}
.cc-glass{background:var(--panel);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-soft)}
.cc-muted{color:var(--muted)} .cc-faint{color:var(--faint)}
.cc-h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(28px,5vw,40px);letter-spacing:-.5px;line-height:1.08}
.cc-h2{font-size:17px;font-weight:600}
.cc-label{font-size:12.5px;color:var(--muted);font-weight:500}
.cc-logo{font-family:'Instrument Serif',Georgia,serif;font-size:26px;font-weight:600;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none}

/* inputs */
.cc-field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.cc-input{font-family:inherit;font-size:15px;color:var(--ink);background:var(--field);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 14px;width:100%;transition:border-color .15s,box-shadow .15s}
.cc-input:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(242,71,142,.18)}
.cc-input::placeholder{color:var(--faint)}
.cc-pw-wrap{position:relative}
.cc-pw-wrap .cc-input{padding-right:46px}
.cc-pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:none;background:transparent;cursor:pointer;border-radius:8px;font-size:18px;line-height:1;color:var(--muted);display:flex;align-items:center;justify-content:center}
.cc-pw-toggle:hover{color:var(--ink);background:var(--track)}
.cc-pw-toggle:focus-visible{outline:2px solid var(--rose);outline-offset:2px}

/* buttons */
.cc-btn{font-family:inherit;font-size:15px;font-weight:600;color:#fff;border:none;cursor:pointer;width:100%;
  background:var(--brand-h);border-radius:30px;padding:14px 20px;transition:transform .12s,box-shadow .2s,filter .2s;
  box-shadow:var(--shadow);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.cc-btn:hover{filter:brightness(1.04)} .cc-btn:active{transform:translateY(1px)}
.cc-btn:disabled{opacity:.6;cursor:not-allowed;filter:grayscale(.2)}
.cc-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none;font-weight:500}
.cc-btn.ghost:hover{background:var(--track)}
.cc-btn.sm{width:auto;font-size:13px;padding:9px 16px}
.cc-btn.gold{background:var(--gold)}
.cc-btn.danger{background:transparent;color:var(--red);border:1px solid var(--redbg)}
a.cc-link{color:var(--rose);text-decoration:none;font-weight:500} a.cc-link:hover{text-decoration:underline}
.cc-focusable:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:6px}

/* pills */
.cc-pill{font-size:11.5px;padding:3px 11px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-weight:500}
.cc-pill.arch{background:var(--gold);color:#fff}
.cc-pill.plus{background:rgba(242,71,142,.15);color:#b13167}
[data-theme="dark"] .cc-pill.plus{color:#f59ec1}
.cc-pill.free{background:var(--track);color:var(--muted)}
.cc-pill.ok{background:var(--greenbg);color:var(--green)}
.cc-pill.pd{background:var(--amberbg);color:var(--amber)}
.cc-pill.bad{background:var(--redbg);color:var(--red)}

/* theme toggle */
.cc-theme{position:fixed;top:16px;right:16px;z-index:20;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(10px);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--ink)}

/* checkbox row */
.cc-check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);cursor:pointer;user-select:none}
.cc-check input{width:17px;height:17px;accent-color:var(--rose)}

/* toasts */
.cc-toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:10px;width:min(92vw,420px)}
.cc-toast{background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:14px;padding:13px 16px;
  font-size:14px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:flex-start;animation:cctoast .3s cubic-bezier(.2,.8,.2,1)}
.cc-toast.err{border-color:var(--redbg)} .cc-toast.ok{border-color:var(--greenbg)}
@keyframes cctoast{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* skeletons */
.cc-skel{background:linear-gradient(90deg,var(--track),var(--line),var(--track));background-size:200% 100%;
  animation:ccshimmer 1.3s infinite;border-radius:8px}
@keyframes ccshimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* progress ring helper (inline svg) */
.cc-grid{display:grid;gap:16px}
@media(max-width:760px){ .cc-wrap{padding:18px 14px 50px} }

/* password strength meter */
.cc-meter{height:6px;border-radius:5px;background:var(--track);overflow:hidden;margin-top:8px}
.cc-meter > i{display:block;height:100%;width:0;border-radius:5px;transition:width .3s,background .3s}