/* Chapster Studio — uses theme tokens (--bg, --surface, --brand …) with safe fallbacks. */
.cxs {
	--cxs-surface: var(--surface, #FBFAF7);
	--cxs-muted: var(--surface-muted, #EAE8E0);
	--cxs-border: var(--border, #D9D7CD);
	--cxs-text: var(--text, #0E0E0C);
	--cxs-text-2: var(--text-2, #34332E);
	--cxs-text-muted: var(--text-muted, #63625B);
	--cxs-brand: var(--brand, #FFC700);
	display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(20px, 3vw, 48px); align-items: start;
}

/* ---------- Stage ---------- */
.cxs__stagecol { position: sticky; top: calc(var(--header-h, 72px) + 8px); display: grid; gap: 12px; }
.cxs__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cxs-seg { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--cxs-muted); }
.cxs-seg button { position: relative; min-height: 40px; min-width: 76px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; color: var(--cxs-text-2); }
.cxs-seg button[aria-checked="true"] { background: var(--cxs-surface); color: var(--cxs-text); box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.cxs-seg__dot { position: absolute; top: 7px; inset-inline-end: 8px; inline-size: 7px; block-size: 7px; border-radius: 50%; background: #1D7A4C; }
.cxs-switch { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; cursor: pointer; }
.cxs-switch input { inline-size: 18px; block-size: 18px; accent-color: #0E0E0C; }

.cxs__stage {
	position: relative; border-radius: 24px; overflow: hidden; touch-action: none;
	background: radial-gradient(120% 90% at 50% 20%, #F9F8F4 0%, var(--cxs-muted) 70%);
	padding: clamp(12px, 3vw, 36px);
	outline: 2px dashed transparent; outline-offset: -10px; transition: outline-color 160ms;
}
.cxs__stage.is-dragover { outline-color: var(--cxs-text); background: #FFF6CC; }
.cxs__view[hidden] { display: none; }
.cxs__view .cxs-shirt { max-inline-size: 620px; margin-inline: auto; filter: drop-shadow(0 18px 24px rgb(14 14 12 / .14)); }
.cxs__drophint { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 8px; font-weight: 800; font-size: 1.125rem; pointer-events: none; background: rgb(255 199 0 / .18); }

/* Print area guide */
.cxs .cxs-print { outline: 1.5px dashed rgb(14 14 12 / .45); outline-offset: 0; border-radius: 4px; transition: outline-color 160ms; }
.cxs .cxs-shirt.is-dark .cxs-print { outline-color: rgb(255 255 255 / .55); }
.cxs.hide-guides .cxs-print { outline-color: transparent !important; }
.cxs.is-dragging .cxs-print { outline-color: var(--cxs-brand) !important; }

.cxs-empty {
	position: absolute; z-index: 3; inset-block-start: 20%; inset-inline-start: 50%; translate: -50% 0; inline-size: 32%; aspect-ratio: 28 / 30; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; padding: 4px; line-height: 1.5;
	border: 0; border-radius: 10px; background: rgb(255 255 255 / .55); color: #0E0E0C; font-weight: 800; font-size: clamp(.72rem, 1.3vw, .95rem);
	transition: background-color 160ms;
}
.cxs-empty small { font-weight: 500; font-size: .75em; opacity: .8; }
.cxs-empty:hover { background: rgb(255 255 255 / .8); }
.cxs .cxs-shirt.is-dark .cxs-empty { background: rgb(255 255 255 / .12); color: #F4F3EE; }
.cxs .cxs-shirt.is-dark .cxs-empty:hover { background: rgb(255 255 255 / .2); }

.cxs-art { position: absolute; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.cxs-art img { inline-size: 100%; block-size: 100%; object-fit: fill; pointer-events: none; }
.cxs-art__ph { inline-size: 100%; block-size: 100%; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 8px; background: rgb(255 199 0 / .85); color: #0E0E0C; border-radius: 4px; text-align: center; font-size: .75rem; overflow: hidden; }
.cxs-art__ph strong { font-size: 1.25rem; }
.cxs-art__ph span { overflow-wrap: anywhere; }
.cxs-art__handle {
	position: absolute; inset-inline-end: -12px; inset-block-end: -12px; inline-size: 24px; block-size: 24px; border-radius: 50%;
	background: #FFC700; border: 2px solid #0E0E0C; cursor: nwse-resize; opacity: 0; transition: opacity 140ms; touch-action: none;
}
.cxs-art::after { content: ""; position: absolute; inset: -2px; border: 1.5px solid #FFC700; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity 140ms; }
.cxs-art:hover::after, .cxs-art:focus-visible::after, .cxs-art:focus::after, .cxs.is-dragging .cxs-art::after,
.cxs-art:hover .cxs-art__handle, .cxs-art:focus .cxs-art__handle, .cxs.is-dragging .cxs-art__handle { opacity: 1; }
.cxs-art:focus-visible { outline: none; box-shadow: none; }
.cxs.is-dragging .cxs-art { cursor: grabbing; }
@media (hover: none) { .cxs-art::after, .cxs-art__handle { opacity: 1; } }

.cxs__controls { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--cxs-surface); border: 1.5px solid var(--cxs-border); }
.cxs__controls[hidden] { display: none; }
.cxs-range { display: grid; gap: 6px; }
.cxs-range__label { display: flex; justify-content: space-between; font-weight: 700; font-size: .9375rem; }
.cxs-range__label output { font-weight: 600; color: var(--cxs-text-2); }
.cxs-range input { inline-size: 100%; accent-color: #0E0E0C; block-size: 28px; }
.cxs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cxs-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--cxs-border); background: transparent; font-weight: 600; font-size: .875rem; }
.cxs-tool:hover { border-color: var(--cxs-text); }
.cxs-tool--danger:hover { border-color: #B8322A; color: #B8322A; }
.cxs-hint { margin: 0; font-size: .8125rem; color: var(--cxs-text-muted); }

/* ---------- Panel ---------- */
.cxs__panel { display: grid; gap: 12px; }
.cxs-block { padding: 18px; border-radius: 18px; background: var(--cxs-surface); border: 1.5px solid var(--cxs-border); }
.cxs-block__title { display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; margin: 0 0 14px; }
.cxs-block__n { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 8px; background: var(--cxs-brand); font-size: .875rem; }
.cxs-block__value { margin-inline-start: auto; font-weight: 600; font-size: .875rem; color: var(--cxs-text-muted); }

.cxs-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.cxs-color { position: relative; cursor: pointer; }
.cxs-color input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cxs-color__dot { display: block; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(14 14 12 / .2); transition: box-shadow 140ms; }
.cxs-color input:checked + .cxs-color__dot { box-shadow: inset 0 0 0 1px rgb(14 14 12 / .2), 0 0 0 3px var(--cxs-surface), 0 0 0 5px #0E0E0C; }
.cxs-color input:focus-visible + .cxs-color__dot { box-shadow: 0 0 0 3px var(--cxs-surface), 0 0 0 5px #0E0E0C, 0 0 0 9px rgb(255 199 0 / .6); }

.cxs-upload[hidden] { display: none; }
.cxs-upload__drop {
	display: grid; justify-items: center; gap: 6px; padding: 22px 16px; text-align: center; cursor: pointer;
	border: 1.5px dashed var(--border-strong, #BDBAAE); border-radius: 14px; background: var(--cxs-muted); font-weight: 500;
	transition: border-color 140ms, background-color 140ms;
}
.cxs-upload__drop:hover { border-color: var(--cxs-text); background: #FFF6CC; }
.cxs-upload__drop small { color: var(--cxs-text-muted); font-size: .8125rem; }
#cxs-file:focus-visible + .cxs-upload__drop { box-shadow: var(--focus-ring); }

.cxs-file { display: grid; gap: 12px; }
.cxs-file[hidden] { display: none; }
.cxs-file__row { display: flex; align-items: center; gap: 12px; }
.cxs-file__icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 10px; background: var(--cxs-muted); flex: none; }
.cxs-file__info { display: grid; min-width: 0; flex: 1; }
.cxs-file__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: end; }
.cxs-file__meta { font-size: .8125rem; color: var(--cxs-text-muted); }
.cxs-file__status { font-size: .8125rem; font-weight: 700; color: var(--cxs-text-muted); white-space: nowrap; }
.cxs-file__status.is-done { color: #1D7A4C; }
.cxs-progress { block-size: 6px; border-radius: 3px; background: var(--cxs-muted); overflow: hidden; }
.cxs-progress span { display: block; block-size: 100%; inline-size: 0; background: #0E0E0C; transition: inline-size 120ms; }

.cxs-quality__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 8px; }
.cxs-quality__bar i { block-size: 8px; border-radius: 4px; background: var(--cxs-muted); }
.cxs-quality[data-score="5"] i, .cxs-quality[data-score="4"] i:nth-child(-n+4) { background: #1D7A4C; }
.cxs-quality[data-score="3"] i:nth-child(-n+3) { background: #C99400; }
.cxs-quality[data-score="2"] i:nth-child(-n+2), .cxs-quality[data-score="1"] i:nth-child(1) { background: #B8322A; }
.cxs-quality__text { margin: 0; font-size: .875rem; color: var(--cxs-text-2); line-height: 1.8; }
.cxs-note { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #FBE9E7; color: #8A241D; font-size: .875rem; font-weight: 600; }
.cxs-note[hidden] { display: none; }

.cxs-sizes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cxs-size { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; padding-inline-start: 14px; border-radius: 14px; background: var(--cxs-muted); }
.cxs-size__name { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; }
.cxs-stepper { display: flex; align-items: center; background: var(--cxs-surface); border-radius: 10px; }
.cxs-stepper button { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 0; background: transparent; border-radius: 10px; }
.cxs-stepper button:hover { background: rgb(14 14 12 / .06); }
.cxs-stepper input { inline-size: 44px !important; min-height: 40px !important; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.cxs-stepper input::-webkit-outer-spin-button, .cxs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cxs-block--service { transition: border-color 160ms, background-color 160ms; }
.cxs-block--service.is-suggested { border-color: #C99400; background: #FFF8DB; }
.cxs-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 500; }
.cxs-check input { inline-size: 22px; block-size: 22px; margin-top: 3px; accent-color: #0E0E0C; flex: none; }
.cxs-check strong { display: block; }
.cxs-check small { color: var(--cxs-text-2); font-size: .8125rem; }

.cxs-summary { padding: 20px; border-radius: 18px; background: #0E0E0C; color: #F4F3EE; display: grid; gap: 8px; }
.cxs-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cxs-summary__row--muted { font-size: .875rem; color: rgb(244 243 238 / .7); }
.cxs-summary__total { padding-top: 10px; margin-top: 4px; border-top: 1px solid rgb(255 255 255 / .14); font-size: 1.125rem; }
.cxs-summary__total strong { font-size: 1.5rem; }
.cxs-summary__hint { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 199 0 / .14); color: #FFD84D; font-size: .875rem; font-weight: 600; }
.cxs-summary__hint[hidden] { display: none; }
.cxs-summary__ship { margin: 0; font-size: .8125rem; color: rgb(244 243 238 / .6); }
.cxs-summary .cx-btn { margin-top: 6px; }
.cxs-summary .cx-btn--ghost { color: #F4F3EE; border-color: rgb(255 255 255 / .3); }
.cxs-summary .cx-btn[hidden] { display: none; }
.cxs-summary__why { margin: 0; min-block-size: 1.5em; font-size: .8125rem; color: rgb(244 243 238 / .7); text-align: center; }

/* Mobile sticky action bar (glass — functional layer) */
.cxs-mbar { display: none; }

@media (max-width: 899px) {
	.cxs { grid-template-columns: 1fr; }
	.cxs__stagecol { position: static; }
	.cxs__stage { padding: 8px; border-radius: 20px; }
	.cxs-mbar {
		position: fixed; z-index: 40; inset-inline: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		padding: 10px; padding-inline-start: 16px; border-radius: 20px;
	}
	.cxs-mbar__info { display: grid; min-width: 0; line-height: 1.4; }
	.cxs-mbar__info span { font-weight: 800; }
	.cxs-mbar__info small { font-size: .75rem; color: var(--cxs-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.cxs-mbar .cx-btn { flex: none; }
	.cxs { padding-bottom: 88px; }
}
@media (max-width: 380px) { .cxs-sizes { grid-template-columns: 1fr; } }
.cxs [hidden] { display: none !important; }

/* Optional notes */
.cxs-notes { inline-size: 100%; min-block-size: 96px; resize: vertical; line-height: 1.8; padding: 12px 14px; border: 1.5px solid var(--border-strong, #BDBAAE); border-radius: 14px; background: var(--cxs-surface); font: inherit; }
.cxs-notes:focus-visible { outline: none; border-color: var(--cxs-text); box-shadow: 0 0 0 4px rgb(255 199 0 / .45); }
.cxs-notes__count { margin: 6px 0 0; font-size: .75rem; color: var(--cxs-text-muted); text-align: end; }