/* vjerk Clips — creator space (inherits the vjerk theme tokens) */
.vjc {
	--c-surface: var(--surface, #17121f);
	--c-surface-2: var(--surface-2, #221b2e);
	--c-line: var(--line, rgba(255, 255, 255, .08));
	--c-line-2: var(--line-2, rgba(255, 255, 255, .14));
	--c-muted: var(--muted, #a39bb2);
	--c-faint: var(--faint, #6f6780);
	--c-pink: var(--pink, #ff2e7e);
	--c-grad: var(--grad, linear-gradient(135deg, #ff2e7e, #8b3dff));
	display: flex; flex-direction: column; gap: 16px; font-size: 15px; line-height: 1.5; color: var(--text, #f5f2f9);
}
.vjc * { box-sizing: border-box; }
.vjc a:not(.vj-btn) { color: var(--c-pink); text-decoration: underline; text-underline-offset: 3px; }
.vjc .vj-btn { text-decoration: none; color: #fff; }
.vjc .vj-btn--ghost { color: var(--text, #f5f2f9); }
.vjc h3, .vj-prose .vjc h3 { margin: 0 0 10px; font: 700 18px/1.3 var(--font, system-ui, sans-serif); color: var(--text, #fff); }
.vjc p { margin: 0 0 10px; }
.vjc-small { font-size: 13px; color: var(--c-muted); }

.vjc-card { padding: 20px; border-radius: 18px; background: var(--c-surface); border: 1px solid var(--c-line); }
.vjc-info { border-color: rgba(255, 176, 46, .35); }

/* Hero */
.vjc-hero { padding: 24px 20px; border-radius: 22px; background: radial-gradient(circle at 15% 0%, rgba(255, 46, 126, .22), transparent 55%), radial-gradient(circle at 100% 100%, rgba(139, 61, 255, .22), transparent 55%), var(--c-surface); border: 1px solid var(--c-line); }
.vjc-hero__kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-pink); }
.vjc .vjc-hero__title { margin: 0 0 8px; font: 900 clamp(26px, 5vw, 36px)/1.08 var(--display, system-ui, sans-serif); letter-spacing: -.02em; color: #fff; }
.vjc-hero__lead { color: #ddd6e8; font-size: 16px; }
.vjc-perks { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.vjc-perks li { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--c-line); font-size: 14px; color: var(--c-muted); }
.vjc-perks strong { display: block; color: #fff; font-size: 15px; }
.vjc .vjc-rules { margin: 0; font-size: 13px; color: var(--c-faint); }

/* Tabs */
.vjc-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-line); }
.vjc a.vjc-tab { flex: 1; text-align: center; padding: 10px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--c-muted); text-decoration: none; }
.vjc a.vjc-tab.is-active { background: var(--c-surface-2); color: #fff; box-shadow: inset 0 0 0 1px var(--c-line-2); }
.vjc-js .vjc-pane { display: none; }
.vjc-js .vjc-pane.is-active { display: block; }

/* Forms */
.vjc-form { display: flex; flex-direction: column; gap: 14px; }
.vjc-grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.vjc-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.vjc-field > span { font-weight: 600; font-size: 14px; color: #fff; }
.vjc-field small { color: var(--c-faint); font-size: 12.5px; }
.vjc input[type=text], .vjc input[type=email], .vjc input[type=password], .vjc input[type=url], .vjc input[type=date], .vjc select, .vjc textarea {
	width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--c-surface-2); border: 1px solid var(--c-line); color: #fff; font: 500 15px var(--font, system-ui, sans-serif); outline: none; color-scheme: dark;
}
.vjc input:focus, .vjc select:focus, .vjc textarea:focus { border-color: var(--c-pink); }
.vjc input[type=file] { color: var(--c-muted); font-size: 14px; }
.vjc-file { padding: 14px; border-radius: 14px; border: 1px dashed var(--c-line-2); background: rgba(255, 255, 255, .02); }
.vjc-checks { display: flex; flex-direction: column; gap: 10px; }
.vjc-checks label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #ddd6e8; }
.vjc-checks input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--c-pink); flex: none; }
.vjc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vjc-steps { margin: 0 0 4px; padding-left: 20px; color: #ddd6e8; }
.vjc-steps li { margin-bottom: 8px; }
.vjc-code { display: inline-block; margin-top: 6px; padding: 6px 12px; border-radius: 8px; background: #fff; color: #111; font: 800 18px/1.2 ui-monospace, monospace; letter-spacing: .08em; }

/* Login form from wp_login_form() */
#vjc-loginform p { margin: 0 0 14px; }
#vjc-loginform label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; color: #fff; }
#vjc-loginform .login-remember label { display: flex; gap: 8px; align-items: center; font-weight: 500; color: var(--c-muted); }
#vjc-loginform .button { display: inline-flex; justify-content: center; width: 100%; min-height: 46px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--c-grad); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }

/* Alerts & badges */
.vjc-alert { padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; }
.vjc-alert--ok { background: rgba(46, 255, 154, .1); border: 1px solid rgba(46, 255, 154, .35); color: #b6ffd9; }
.vjc-alert--err { background: rgba(255, 59, 77, .1); border: 1px solid rgba(255, 59, 77, .4); color: #ffc3c9; }
.vjc-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--c-surface-2); color: var(--c-muted); }
.vjc-badge--verified, .vjc-badge--ok { background: rgba(46, 255, 154, .14); color: #7dffbd; }
.vjc-badge--pending { background: rgba(255, 176, 46, .14); color: #ffcf7d; }
.vjc-badge--rejected { background: rgba(255, 59, 77, .14); color: #ff8e99; }

/* Dashboard */
.vjc-me { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vjc-me__name { margin: 0 0 4px; font: 900 22px/1.1 var(--display, system-ui, sans-serif); color: #fff; }
.vjc-me__links { display: flex; gap: 16px; font-size: 14px; }

.vjc-drop { display: flex; gap: 12px; align-items: stretch; }
.vjc-drop__zone { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 18px; border-radius: 16px; border: 2px dashed var(--c-line-2); background: rgba(255, 255, 255, .02); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.vjc-drop__zone:hover { border-color: var(--c-pink); background: rgba(255, 46, 126, .05); }
.vjc-drop__zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vjc-drop__text { font-weight: 700; color: #fff; }
.vjc-drop__name { font-size: 13px; color: var(--c-muted); word-break: break-all; }
.vjc-drop__cover { width: 72px; flex: none; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.vjc-drop__cover img { width: 72px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: #000; }
.vjc-drop__cover small { font-size: 11px; color: var(--c-faint); }
.vjc-progress { height: 8px; border-radius: 99px; background: var(--c-surface-2); overflow: hidden; }
.vjc-progress span { display: block; height: 100%; width: 0; background: var(--c-grad); transition: width .2s; }
.vjc-upload__msg { margin: 0; font-size: 14px; color: var(--c-muted); min-height: 0; }
.vjc-upload__msg.is-err { color: #ff8e99; }
.vjc-upload.is-busy button[type=submit] { opacity: .5; pointer-events: none; }

.vjc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.vjc-stats div { padding: 12px; border-radius: 14px; background: var(--c-surface-2); }
.vjc-stats strong { display: block; font: 900 24px/1.1 var(--display, system-ui, sans-serif); color: #fff; }
.vjc-stats span { font-size: 12.5px; color: var(--c-muted); }
.vjc-clips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vjc-clip { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--c-line); }
.vjc-clip__thumb { flex: none; width: 44px; aspect-ratio: 9 / 16; border-radius: 8px; background: var(--c-surface-2) center / cover no-repeat; }
.vjc-clip__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.vjc-clip__body strong { color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vjc-clip__body small { color: var(--c-faint); font-size: 12px; }
.vjc-clip__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: 13px; }
.vjc-del { margin: 0; }
.vjc-del button { color: #ff8e99; font-size: 13px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* Creator page header (/creator/name/) */
.vjc-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.vjc-profile__bio { flex-basis: 100%; margin: 0; color: var(--c-muted, #a39bb2); max-width: 60ch; }

@media (min-width: 640px) {
	.vjc-grid2 { grid-template-columns: 1fr 1fr; }
	.vjc-perks { grid-template-columns: 1fr 1fr; }
	.vjc-stats { grid-template-columns: repeat(4, 1fr); }
	.vjc-card { padding: 24px; }
	.vjc-hero { padding: 32px 28px; }
}