/* JualanVid — style dasar bersama (selaras landing) */
html, body { background:#0a0a0b; }
body { font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }
.font-display { font-family:'Plus Jakarta Sans',sans-serif; }

.grad-text{
  background:linear-gradient(100deg,#c6f24e 0%,#a9ff8f 45%,#7c5cff 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bg-grid{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
}
.glass{ background:rgba(22,22,26,.7); backdrop-filter:blur(12px); }
.noise:before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(1200px 600px at 50% -10%, rgba(124,92,255,.18), transparent 60%),
            radial-gradient(900px 500px at 85% 10%, rgba(198,242,78,.12), transparent 55%);
}
::selection{ background:#c6f24e; color:#0a0a0b; }
::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-thumb{background:#26262d;border-radius:20px}
[x-cloak]{display:none!important}

/* input dasar */
.field{
  width:100%; background:#111114; border:1px solid #26262d; color:#fff;
  border-radius:.75rem; padding:.7rem .9rem; font-size:.9rem; outline:none; transition:.15s;
}
.field:focus{ border-color:rgba(198,242,78,.6); box-shadow:0 0 0 3px rgba(198,242,78,.12); }
.field::placeholder{ color:#6b6b76; }
textarea.field{ resize:vertical; line-height:1.5; }

/* tombol */
.btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;
  border-radius:.75rem;padding:.7rem 1.2rem;transition:.15s;cursor:pointer;border:1px solid transparent; }
.btn-brand{ background:#c6f24e;color:#0a0a0b; }
.btn-brand:hover{ filter:brightness(.95); }
.btn-ghost{ background:rgba(22,22,26,.6);border-color:#26262d;color:#fff; }
.btn-ghost:hover{ background:#16161a; }
.btn[disabled]{ opacity:.5;cursor:not-allowed; }

/* chip pilihan */
.chip{ border:1px solid #26262d;background:#16161a;border-radius:.7rem;padding:.5rem .9rem;
  font-size:.85rem;cursor:pointer;transition:.15s;color:#cfcfd6; }
.chip:hover{ border-color:rgba(198,242,78,.45); }
.chip.active{ border-color:#c6f24e;background:rgba(198,242,78,.1);color:#fff; }

/* spinner */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{ width:1rem;height:1rem;border:2px solid rgba(255,255,255,.25);border-top-color:#c6f24e;
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block; }

/* skeleton shimmer */
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton{ position:relative;overflow:hidden;background:#16161a; }
.skeleton:after{ content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.4s infinite; }

/* toast */
#jv-toast{ position:fixed;z-index:100;left:50%;bottom:1.5rem;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none; }
.jv-toast-item{ background:#16161a;border:1px solid #26262d;color:#fff;padding:.65rem 1rem;border-radius:.7rem;
  font-size:.85rem;box-shadow:0 12px 40px -12px rgba(0,0,0,.6);display:flex;align-items:center;gap:.5rem; }
.jv-toast-item.ok{ border-color:rgba(198,242,78,.5); }
.jv-toast-item.err{ border-color:rgba(248,113,113,.5); }