/* ==========================================================================
   hc-ui.css — Hentaicop shared design system (rose). Namespaced .hc-* so it
   never fights the theme. Dark-first; light via body.lightmode (existing toggle).
   Load together with Sora (display) + Inter (body) from Google Fonts.
   ========================================================================== */
:root{
  --hc-primary:#f43f5e; --hc-primary-strong:#e11d48; --hc-primary-soft:rgba(244,63,94,.14); --hc-primary-ring:rgba(244,63,94,.35);
  --hc-vip:#fcc419; --hc-vip-soft:rgba(252,196,25,.13);
  --hc-bg:#0b0c0f; --hc-surface:#14151a; --hc-surface-2:#191a21; --hc-surface-3:#20222b;
  --hc-border:#2a2c36; --hc-border-soft:#1e1f27;
  --hc-text:#f4f4f6; --hc-text-muted:#9ca1ad; --hc-text-dim:#6a6e7a;
  --hc-success:#22c55e; --hc-danger:#ef4444; --hc-info:#38bdf8;
  --hc-r-sm:10px; --hc-r:14px; --hc-r-lg:20px; --hc-pill:999px;
  --hc-shadow:0 22px 55px -24px rgba(0,0,0,.72); --hc-shadow-sm:0 8px 22px -12px rgba(0,0,0,.6);
  --hc-ff-display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --hc-ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
body.lightmode{
  --hc-primary-soft:rgba(244,63,94,.10); --hc-vip:#c98a00; --hc-vip-soft:rgba(201,138,0,.12);
  --hc-bg:#f5f5f8; --hc-surface:#ffffff; --hc-surface-2:#f3f3f6; --hc-surface-3:#ebebf0;
  --hc-border:#e4e4ea; --hc-border-soft:#eeeef2;
  --hc-text:#17181c; --hc-text-muted:#5a5e6b; --hc-text-dim:#8c909b;
  --hc-shadow:0 20px 46px -26px rgba(24,24,28,.28); --hc-shadow-sm:0 8px 20px -14px rgba(24,24,28,.22);
}

/* ---- primitives ---- */
.hc-scope{font-family:var(--hc-ff-body);color:var(--hc-text);letter-spacing:-.01em;line-height:1.5}
.hc-scope *{box-sizing:border-box}
.hc-scope h1,.hc-scope h2,.hc-scope h3,.hc-scope h4{font-family:var(--hc-ff-display);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance}
.hc-muted{color:var(--hc-text-muted)}
.hc-dim{color:var(--hc-text-dim)}

.hc-card{background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:var(--hc-r-lg);box-shadow:var(--hc-shadow-sm)}
.hc-pad{padding:22px}

/* ---- buttons ---- */
.hc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:var(--hc-pill);
  font:700 14px/1 var(--hc-ff-body);letter-spacing:-.01em;background:var(--hc-surface-2);border:1px solid var(--hc-border);
  color:var(--hc-text);cursor:pointer;transition:.16s;text-decoration:none;white-space:nowrap}
.hc-btn:hover{border-color:var(--hc-text-dim);transform:translateY(-1px)}
.hc-btn svg{width:18px;height:18px;flex:none}
.hc-btn-primary{background:linear-gradient(135deg,var(--hc-primary),var(--hc-primary-strong));border-color:transparent;color:#fff !important;box-shadow:0 12px 26px -12px var(--hc-primary-ring)}
.hc-btn-primary:hover{filter:brightness(1.07);color:#fff !important}
.hc-btn-gold{background:linear-gradient(135deg,#fcc419,#f59f00);border-color:transparent;color:#3a2a00 !important}
.hc-btn-block{width:100%}
.hc-btn-lg{padding:15px 22px;font-size:15px}
.hc-btn-white{background:#fff;color:#111 !important;border-color:transparent}
.hc-btn-white:hover{color:#111 !important;box-shadow:var(--hc-shadow-sm)}

/* ---- form ---- */
.hc-field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px;text-align:left}
.hc-field label{font-size:12px;font-weight:700;color:var(--hc-text-muted)}
.hc-input{width:100%;background:var(--hc-surface-2);border:1px solid var(--hc-border);border-radius:var(--hc-r-sm);
  padding:14px 15px;color:var(--hc-text);font:400 14.5px/1.3 var(--hc-ff-body);outline:none;transition:.15s}
.hc-input::placeholder{color:var(--hc-text-dim)}
.hc-input:focus{border-color:var(--hc-primary);box-shadow:0 0 0 3px var(--hc-primary-soft);background:var(--hc-surface)}
.hc-input-wrap{position:relative}
.hc-input-wrap .hc-input{padding-right:48px}
.hc-eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--hc-text-dim);display:flex;background:none;border:0;padding:0}
.hc-eye:hover{color:var(--hc-primary)}
.hc-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hc-hint{font-size:11.5px;color:var(--hc-text-dim);text-align:left;margin:-8px 0 14px}
.hc-forgot{display:block;text-align:right;font-size:12.5px;color:var(--hc-text-muted);text-decoration:none;margin:-4px 0 18px;transition:.15s}
.hc-forgot:hover{color:var(--hc-primary)}

/* ---- alerts ---- */
.hc-alert{padding:12px 14px;border-radius:var(--hc-r-sm);margin-bottom:18px;font-size:13px;font-weight:600;text-align:left;border:1px solid transparent}
.hc-alert-error{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.3);color:#fca5a5}
body.lightmode .hc-alert-error{color:#b91c1c;background:#fee2e2;border-color:#fca5a5}
.hc-alert-success{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.3);color:#86efac}
body.lightmode .hc-alert-success{color:#15803d;background:#dcfce7;border-color:#86efac}

/* ---- badges ---- */
.hc-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--hc-pill);font-size:11px;font-weight:800;letter-spacing:.02em}
.hc-badge svg{width:12px;height:12px}
.hc-badge-vip{background:var(--hc-vip-soft);color:var(--hc-vip);border:1px solid color-mix(in srgb,var(--hc-vip) 35%,transparent)}
.hc-badge-free{background:var(--hc-surface-3);color:var(--hc-text-muted);border:1px solid var(--hc-border)}

/* ---- divider ---- */
.hc-divider{display:flex;align-items:center;gap:14px;color:var(--hc-text-dim);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;margin:26px 0}
.hc-divider::before,.hc-divider::after{content:"";flex:1;height:1px;background:var(--hc-border)}

/* ---- auth layout ---- */
.hc-auth{display:flex;align-items:center;justify-content:center;padding:44px 16px;min-height:78vh}
.hc-auth-card{width:100%;max-width:410px;background:var(--hc-surface);border:1px solid var(--hc-border);
  border-radius:24px;padding:40px 32px;text-align:center;box-shadow:var(--hc-shadow);position:relative;overflow:hidden}
.hc-auth-card::before{content:"";position:absolute;top:-60%;left:-10%;width:120%;height:140%;
  background:radial-gradient(circle at 50% 0,var(--hc-primary-soft),transparent 60%);pointer-events:none}
.hc-auth-in{position:relative;z-index:1}
.hc-auth .hc-mark{width:56px;height:56px;border-radius:16px;margin:0 auto 16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--hc-primary),var(--hc-primary-strong));box-shadow:0 14px 30px -12px var(--hc-primary-ring)}
.hc-auth .hc-mark svg{width:28px;height:28px;fill:#fff}
.hc-auth h2{font-size:23px;margin-bottom:6px}
.hc-auth .hc-sub{font-size:13.5px;color:var(--hc-text-muted);margin-bottom:26px}
.hc-auth .hc-foot-link{font-size:13px;color:var(--hc-text-muted);margin-top:24px;display:block}
.hc-auth .hc-foot-link a{color:var(--hc-primary);font-weight:700;text-decoration:none}
.hc-auth .hc-foot-link a:hover{text-decoration:underline}
.hc-captcha{display:flex;justify-content:center;margin:4px 0 18px}

@media (max-width:460px){ .hc-auth-card{padding:32px 22px;border-radius:20px} }
@media (prefers-reduced-motion:reduce){ .hc-btn{transition:none} }