/* ================================================================
   Vitamin C Serum Calculator — prefix: vcs-
   Palette matches the site: cream #F8F3ED, ink #1A1A1B, accent #C4813A
   ================================================================ */

.vcs-calc {
	--vcs-bg: #F8F3ED;
	--vcs-card: #FFFFFF;
	--vcs-ink: #1A1A1B;
	--vcs-muted: #8A7F74;
	--vcs-line: #ECE2D3;
	--vcs-line-soft: #F3EBDD;
	--vcs-accent: #C4813A;
	--vcs-accent-strong: #B3722F;
	--vcs-low: #2F855A;
	--vcs-mid: #C4813A;
	--vcs-high: #B3261E;
	--vcs-radius: 12px;

	max-width: 1020px;
	margin: 28px auto;
	padding: 28px;
	background: var(--vcs-bg);
	border: 1px solid var(--vcs-line);
	border-radius: 16px;
	color: var(--vcs-ink);
	font-family: inherit;
	line-height: 1.5;
}

.vcs-title {
	font-size: 1.45rem;
	font-weight: 700;
	margin: 0 0 6px;
	line-height: 1.25;
	color: var(--vcs-ink);
}

.vcs-subtitle {
	font-size: 0.88rem;
	color: var(--vcs-muted);
	margin: 0 0 18px;
}

.vcs-inner {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 24px;
	align-items: start;
}

/* ---- Form ---- */
.vcs-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vcs-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vcs-field > label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--vcs-ink);
}

.vcs-field select,
.vcs-field input[type="date"] {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 10px 12px;
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--vcs-ink);
	background: #fff;
	border: 1px solid var(--vcs-line);
	border-radius: 8px;
	box-shadow: none;
}

.vcs-field select:focus,
.vcs-field input[type="date"]:focus {
	outline: none;
	border-color: var(--vcs-accent);
	box-shadow: 0 0 0 3px rgba(196, 129, 58, 0.18);
}

.vcs-conc-val {
	color: var(--vcs-accent);
	font-weight: 700;
	float: right;
}

.vcs-range {
	width: 100%;
	accent-color: var(--vcs-accent);
	height: 26px;
	cursor: pointer;
}

.vcs-range-hint {
	font-size: 0.76rem;
	color: var(--vcs-muted);
	margin-top: -2px;
}

.vcs-submit {
	align-self: flex-start;
	margin-top: 4px;
}

.vcs-form-note {
	font-size: 0.76rem;
	color: var(--vcs-muted);
	margin: 2px 0 0;
}

/* ---- Result card ---- */
.vcs-result {
	position: sticky;
	top: 24px;
}

.vcs-card {
	background: var(--vcs-card);
	border: 1px solid var(--vcs-line);
	border-radius: var(--vcs-radius);
	padding: 22px;
	box-shadow: 0 12px 34px rgba( 30, 27, 24, 0.08 );
}

.vcs-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.vcs-card-title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	color: var(--vcs-ink);
}

.vcs-chip {
	flex: 0 0 auto;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--vcs-accent-strong);
	background: #FDF3E8;
	border: 1px solid #F0DBBE;
	border-radius: 999px;
	padding: 5px 11px;
	display: inline-block;
}

.vcs-rows {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}

.vcs-stat {
	background: var(--vcs-bg);
	border: 1px solid var(--vcs-line-soft);
	border-radius: 10px;
	padding: 12px 14px;
}

.vcs-stat-label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vcs-muted);
	margin-bottom: 4px;
}

.vcs-stat-value {
	display: block;
	font-size: 1.22rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--vcs-ink);
}

.vcs-risk-low   { color: var(--vcs-low); }
.vcs-risk-medium{ color: var(--vcs-mid); }
.vcs-risk-high  { color: var(--vcs-high); }

.vcs-stat-sub {
	display: block;
	font-size: 0.74rem;
	color: var(--vcs-muted);
	margin-top: 3px;
}

/* ---- Risk gauge ---- */
.vcs-gauge {
	margin-bottom: 16px;
}

.vcs-gauge-bar {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient( 90deg, var(--vcs-low) 0%, var(--vcs-mid) 58%, var(--vcs-high) 100% );
}

.vcs-gauge-marker {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--vcs-ink);
	transform: translate( -50%, -50% );
	box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.vcs-gauge-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 0.72rem;
	color: var(--vcs-muted);
}

/* ---- Status line ---- */
.vcs-status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--vcs-ink);
	border-radius: 10px;
	padding: 10px 12px;
	border: 1px solid var(--vcs-line-soft);
	background: var(--vcs-bg);
	margin-bottom: 16px;
}

.vcs-status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--vcs-mid);
	flex: 0 0 auto;
}

.vcs-status-fresh   .vcs-status-dot { background: var(--vcs-low); }
.vcs-status-ending  .vcs-status-dot { background: var(--vcs-mid); }
.vcs-status-oxidized .vcs-status-dot { background: var(--vcs-high); }

.vcs-status-fresh   { border-color: #DCEEDF; background: #F2FAF4; }
.vcs-status-ending  { border-color: #F0DBBE; background: #FDF8EF; }
.vcs-status-oxidized { border-color: #F0CFCA; background: #FDF3F1; }
.vcs-status-fresh   .vcs-status-text { color: var(--vcs-low); }
.vcs-status-ending  .vcs-status-text { color: var(--vcs-mid); }
.vcs-status-oxidized .vcs-status-text { color: var(--vcs-high); }

.vcs-status-meta {
	font-weight: 500;
	font-size: 0.78rem;
	color: var(--vcs-muted);
}

/* ---- Oxidation color guide ---- */
.vcs-ox {
	margin-bottom: 10px;
}

.vcs-ox-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--vcs-ink);
	margin-bottom: 8px;
}

.vcs-ox-label strong {
	font-size: 0.95rem;
	color: var(--vcs-accent-strong);
}

.vcs-grad {
	position: relative;
	height: 18px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.06);
	background: linear-gradient( 90deg,
		#FFFEF8 0%, #FDF3D8 20%, #F6E29B 40%, #EFC963 58%,
		#D8A23E 74%, #A8632F 89%, #7A4321 100% );
}

.vcs-grad-marker {
	position: absolute;
	top: 50%;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vcs-card);
	border: 3px solid var(--vcs-ink);
	transform: translate( -50%, -50% );
	box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.vcs-grad-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 0.66rem;
	color: var(--vcs-muted);
}

.vcs-tint-note {
	font-size: 0.8rem;
	color: var(--vcs-ink);
	background: var(--vcs-bg);
	border: 1px dashed var(--vcs-line);
	border-radius: 8px;
	padding: 8px 11px;
	margin: 8px 0 14px;
}

/* ---- Actions ---- */
.vcs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.vcs-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 15px;
	font-size: 0.82rem;
	font-weight: 700;
	font-family: inherit;
	color: var(--vcs-accent-strong);
	background: transparent;
	border: 1px solid #E3C9A8;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vcs-btn:hover {
	background: #FDF3E8;
	border-color: var(--vcs-accent);
}

.vcs-btn-primary {
	background: var(--vcs-accent);
	border-color: var(--vcs-accent);
	color: #fff;
}

.vcs-btn-primary:hover {
	background: var(--vcs-accent-strong);
	border-color: var(--vcs-accent-strong);
	color: #fff;
}

.vcs-btn-ghost {
	width: 100%;
	margin-top: 6px;
	justify-content: center;
}

/* ---- Embed box ---- */
.vcs-embed {
	margin-bottom: 12px;
}

.vcs-embed-label {
	display: block;
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--vcs-ink);
	margin-bottom: 6px;
}

.vcs-embed-code {
	width: 100%;
	font-size: 0.72rem;
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
	color: #4B3F33;
	background: var(--vcs-bg);
	border: 1px solid var(--vcs-line);
	border-radius: 8px;
	padding: 10px;
	resize: vertical;
}

.vcs-disclaimer {
	font-size: 0.7rem;
	color: var(--vcs-muted);
	margin: 0;
}

/* ---- Embed mode (iframe view) ---- */
.vcs-embed-mode .vcs-inner {
	display: block;
}

.vcs-embed-mode .vcs-calc {
	max-width: 540px;
	margin: 0 auto;
	box-shadow: none;
}

.vcs-embed-mode .vcs-result {
	position: static;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.vcs-calc { padding: 20px; }
	.vcs-inner { grid-template-columns: 1fr; }
	.vcs-result { position: static; }
}

@media (max-width: 480px) {
	.vcs-rows { grid-template-columns: 1fr; }
	.vcs-btn { flex: 1 1 100%; justify-content: center; }
}