/* Car Care Label Designer – front-end styles ("studio" look).
 * Everything is scoped to .ccld-app / .ccld-modal so theme styles interfere as little as possible.
 * The accent colour is a setting (Label Designer → Instellingen) and arrives as --c-accent on .ccld-app. */

:root .ccld-app, :root .ccld-modal {
	--c-accent: #2156e8;
	--c-accent-dark: #1843b8;
	--c-accent-soft: #edf2fe;
	--c-accent-ring: rgba(33, 86, 232, .28);
	--c-ink: #101828;
	--c-ink-2: #344054;
	--c-muted: #667085;
	--c-line: #e4e7ec;
	--c-line-strong: #d0d5dd;
	--c-bg: #ffffff;
	--c-page: #f5f6f8;
	--c-soft: #f2f4f7;
	--c-soft-2: #eaecf0;
	--c-chrome: #0f1728;
	--c-chrome-2: #1a2539;
	--c-ok: #067647;
	--c-ok-soft: #ecfdf3;
	--c-warn: #b54708;
	--c-warn-soft: #fffaeb;
	--c-bad: #b42318;
	--c-bad-soft: #fef3f2;
	--c-demo: #6941c6;
	--c-demo-soft: #f4f3ff;
	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
	--shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
	--shadow: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
	--shadow-lg: 0 16px 32px -8px rgba(16, 24, 40, .16), 0 6px 12px -4px rgba(16, 24, 40, .06);
	--ease: cubic-bezier(.2, .7, .3, 1);
	--f-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--f-display: "CCLD Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-family: var(--f-ui);
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Accent variants derived from the configured accent (modern browsers; the fixed values above are the fallback). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root .ccld-app, :root .ccld-modal {
		--c-accent-dark: color-mix(in srgb, var(--c-accent) 78%, #000);
		--c-accent-soft: color-mix(in srgb, var(--c-accent) 9%, #fff);
		--c-accent-ring: color-mix(in srgb, var(--c-accent) 30%, transparent);
	}
}
:root .ccld-app *, :root .ccld-app *::before, :root .ccld-app *::after, :root .ccld-modal *, :root .ccld-modal *::before, :root .ccld-modal *::after { box-sizing: border-box; }

:root .ccld-app { position: relative; width: 100%; max-width: 1600px; margin: 0 auto; text-align: left; }
:root .ccld-app h2, :root .ccld-app h3, :root .ccld-app h4, :root .ccld-app p, :root .ccld-app ul, :root .ccld-app ol, :root .ccld-modal h2, :root .ccld-modal h4, :root .ccld-modal p { margin: 0; padding: 0; }
:root .ccld-app ul, :root .ccld-app ol { list-style: none; }
/* Low specificity on purpose: component classes below (.ccld-btn, .ccld-tab, …) set their own font. */
:root :where(.ccld-app, .ccld-modal) button { font: inherit; }
/* Defence against generic theme styles (uppercase buttons, letter-spaced light headings, ...). Only properties that
 * the component classes below never set on purpose are reset here. */
:root .ccld-app button, :root .ccld-modal button, :root .ccld-app input, :root .ccld-app select, :root .ccld-app textarea, :root .ccld-modal input, :root .ccld-modal select, :root .ccld-modal textarea, :root .ccld-app label, :root .ccld-modal label {
	text-transform: none; letter-spacing: normal; text-shadow: none; word-spacing: normal; font-style: normal;
}
:root .ccld-app h2, :root .ccld-app h3, :root .ccld-app h4, :root .ccld-modal h2, :root .ccld-modal h4 { font-family: var(--f-display); letter-spacing: 0; text-transform: none; font-style: normal; color: var(--c-ink); }
:root .ccld-app label, :root .ccld-modal label { margin-bottom: 0; }
:root .ccld-app .ccld-section__title, :root .ccld-modal .ccld-dialog__sub { text-transform: uppercase; letter-spacing: .06em; }
:root .ccld-app li, :root .ccld-modal li { margin-left: 0; }
:root .ccld-app img { max-width: none; }
:root .ccld-muted { color: var(--c-muted); }
:root .ccld-spacer { flex: 1 1 auto; }
:root .ccld-sep { width: 1px; align-self: stretch; min-height: 22px; background: var(--c-line); margin: 0 6px; flex: none; }
:root .ccld-icon { display: inline-flex; flex: none; vertical-align: middle; }
:root .ccld-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
:root .ccld-noscript { padding: 16px; background: var(--c-warn-soft); border-radius: var(--radius); }

/* -------------------------------------------------------------- shell */
:root .ccld-shell { background: var(--c-page); border: 1px solid var(--c-line); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -12px rgba(16, 24, 40, .12); }
:root .ccld-view { min-height: 200px; padding: 24px; }

/* -------------------------------------------------------------- boot */
:root .ccld-boot { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 72px 16px; color: var(--c-muted); }
:root .ccld-boot__spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--c-line); border-top-color: var(--c-accent); animation: ccld-spin .8s linear infinite; }
@keyframes ccld-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { :root .ccld-boot__spinner { animation-duration: 3s; } }

/* ------------------------------------------------------------- header */
:root .ccld-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 16px 24px; background: radial-gradient(120% 180% at 0% 0%, var(--c-chrome-2) 0%, var(--c-chrome) 60%); color: #fff; }
:root .ccld-head__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
:root .ccld-head__mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--c-accent); color: #fff; box-shadow: 0 6px 16px -4px var(--c-accent-ring), inset 0 0 0 1px rgba(255, 255, 255, .18); }
:root .ccld-app .ccld-head__title h2 { font-size: 18px; line-height: 1.25; font-weight: 600; margin: 0 0 2px; color: #fff; }
:root .ccld-head__title p, :root .ccld-head .ccld-muted { font-size: 13px; color: rgba(255, 255, 255, .62); }
:root .ccld-head .ccld-btn--ghost { color: rgba(255, 255, 255, .85); }
:root .ccld-head .ccld-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: #fff; }

:root .ccld-app .ccld-steps { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
:root .ccld-app .ccld-steps li { display: flex; align-items: center; gap: 4px; }
:root .ccld-app .ccld-steps li + li::before { content: ""; width: 18px; height: 1px; background: rgba(255, 255, 255, .22); }
:root .ccld-step { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border: 1px solid transparent; background: transparent; border-radius: 999px; color: rgba(255, 255, 255, .6); cursor: pointer; font-family: var(--f-display); font-weight: 500; font-size: 13.5px; transition: background .15s var(--ease), color .15s var(--ease); }
:root .ccld-step:disabled { opacity: .45; cursor: not-allowed; }
:root .ccld-step:not(:disabled):not(.is-current):hover { background: rgba(255, 255, 255, .08); color: #fff; }
:root .ccld-step__num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3); color: #fff; font-size: 12.5px; font-weight: 600; transition: background .15s var(--ease), border-color .15s var(--ease); }
:root .ccld-step.is-current { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .14); color: #fff; }
:root .ccld-step.is-current .ccld-step__num { background: var(--c-accent); border-color: var(--c-accent); }
:root .ccld-step.is-done .ccld-step__num { background: #12b76a; border-color: #12b76a; }

/* ------------------------------------------------------------ buttons */
:root .ccld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 15px; border: 1px solid var(--c-line-strong); border-radius: 10px; background: #fff; color: var(--c-ink-2); font-family: var(--f-display); font-weight: 500; font-size: 13.5px; line-height: 1.2; cursor: pointer; text-decoration: none; box-shadow: var(--shadow-xs); transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
:root .ccld-btn:hover:not(:disabled) { background: var(--c-soft); border-color: var(--c-line-strong); color: var(--c-ink); }
:root .ccld-btn:active:not(:disabled) { transform: translateY(1px); }
:root .ccld-btn:focus-visible, :root .ccld-iconbtn:focus-visible, :root .ccld-tab:focus-visible, :root .ccld-step:focus-visible, :root .ccld-ptab:focus-visible, :root .ccld-input:focus-visible, :root .ccld-drop:focus-visible, :root .ccld-tile:focus-visible, :root .ccld-card__check:focus-visible + .ccld-card__tick {
	outline: none; box-shadow: 0 0 0 4px var(--c-accent-ring);
}
:root .ccld-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
:root .ccld-btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .14); }
:root .ccld-btn--primary:hover:not(:disabled) { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff; }
:root .ccld-btn--danger { background: var(--c-bad); border-color: var(--c-bad); color: #fff; }
:root .ccld-btn--danger:hover:not(:disabled) { background: #912018; border-color: #912018; color: #fff; }
:root .ccld-btn--ghost { border-color: transparent; background: transparent; color: var(--c-muted); box-shadow: none; }
:root .ccld-btn--ghost:hover:not(:disabled) { background: var(--c-soft); border-color: transparent; color: var(--c-ink); }
:root .ccld-btn--small { min-height: 32px; padding: 5px 11px; font-size: 13px; border-radius: 9px; }
:root .ccld-btn--large { min-height: 46px; padding: 10px 22px; font-size: 15px; border-radius: 12px; }
:root .ccld-btn--block { display: flex; width: 100%; margin-bottom: 8px; }

:root .ccld-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--c-ink-2); cursor: pointer; flex: none; transition: background .12s var(--ease), color .12s var(--ease); }
:root .ccld-iconbtn:hover:not(:disabled) { background: var(--c-soft); color: var(--c-ink); }
:root .ccld-iconbtn:disabled { opacity: .35; cursor: not-allowed; }
:root .ccld-iconbtn.is-on { background: var(--c-accent-soft); color: var(--c-accent); border-color: transparent; }
:root .ccld-iconbtn--tb { width: 36px; height: 36px; }
:root .ccld-iconbtn--tiny { width: 24px; height: 24px; border-radius: 6px; color: var(--c-muted); }

/* --------------------------------------------------------- form bits */
:root .ccld-field { margin-bottom: 12px; min-width: 0; }
:root .ccld-field__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--c-ink-2); margin-bottom: 5px; }
:root .ccld-input { display: block; width: 100%; min-height: 38px; padding: 7px 11px; border: 1px solid var(--c-line-strong); border-radius: 9px; background: #fff; color: var(--c-ink); font: inherit; font-size: 14px; box-shadow: var(--shadow-xs); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
:root .ccld-input:hover:not(:disabled) { border-color: #98a2b3; }
:root .ccld-input:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-ring); }
:root .ccld-input:disabled { background: var(--c-soft); color: var(--c-muted); }
:root .ccld-textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
:root .ccld-textarea[rows="1"] { min-height: 38px; }
:root .ccld-numwrap { position: relative; }
:root .ccld-numwrap .ccld-input { padding-right: 34px; }
:root .ccld-unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--c-muted); pointer-events: none; }
:root .ccld-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:root .ccld-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
:root .ccld-toolrow { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin-bottom: 8px; padding: 3px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; width: fit-content; max-width: 100%; }
:root .ccld-segment { display: inline-flex; gap: 1px; }
:root .ccld-colorwrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:root .ccld-color { width: 40px; height: 34px; padding: 3px; border: 1px solid var(--c-line-strong); border-radius: 9px; background: #fff; cursor: pointer; box-shadow: var(--shadow-xs); }
:root .ccld-color::-webkit-color-swatch-wrapper { padding: 0; }
:root .ccld-color::-webkit-color-swatch { border: 0; border-radius: 6px; }
:root .ccld-color::-moz-color-swatch { border: 0; border-radius: 6px; }
:root .ccld-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
:root .ccld-swatch { width: 22px; height: 22px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .18); cursor: pointer; padding: 0; transition: transform .12s var(--ease); }
:root .ccld-swatch:hover { transform: scale(1.15); }
:root .ccld-hint { font-size: 12.5px; color: var(--c-muted); margin-top: 4px; line-height: 1.45; }
:root .ccld-hint--pad { padding: 4px 2px 0; }
:root .ccld-hint--ok { color: var(--c-ok); }
:root .ccld-hint--error { color: var(--c-bad); }

/* ----------------------------------------------------------- callouts */
:root .ccld-callout { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius); border: 1px solid var(--c-line); background: #fff; margin-bottom: 12px; font-size: 14px; box-shadow: var(--shadow-xs); }
:root .ccld-callout > .ccld-icon { margin-top: 2px; }
:root .ccld-callout p { margin-top: 3px; color: var(--c-ink-2); }
:root .ccld-callout .ccld-btn { margin-top: 10px; }
:root .ccld-callout--info { background: var(--c-accent-soft); border-color: transparent; }
:root .ccld-callout--info > .ccld-icon { color: var(--c-accent); }
:root .ccld-callout--ok { background: var(--c-ok-soft); border-color: #abefc6; }
:root .ccld-callout--ok > .ccld-icon { color: var(--c-ok); }
:root .ccld-callout--warning { background: var(--c-warn-soft); border-color: #fedf89; }
:root .ccld-callout--warning > .ccld-icon { color: var(--c-warn); }
:root .ccld-callout--error { background: var(--c-bad-soft); border-color: #fecdca; }
:root .ccld-callout--error > .ccld-icon { color: var(--c-bad); }
:root .ccld-callout--wide { margin-top: 20px; }

/* ------------------------------------------------------ pills / badges */
:root .ccld-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--c-soft-2); color: var(--c-ink-2); white-space: nowrap; }
:root .ccld-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
:root .ccld-pill--ok { background: var(--c-ok-soft); color: var(--c-ok); }
:root .ccld-pill--bad { background: var(--c-bad-soft); color: var(--c-bad); }
:root .ccld-pill--warn { background: var(--c-warn-soft); color: var(--c-warn); }
:root .ccld-pill--demo { background: var(--c-demo-soft); color: var(--c-demo); }
:root .ccld-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--c-soft-2); color: var(--c-ink-2); margin-left: 6px; }
:root .ccld-badge--ok { background: var(--c-ok-soft); color: var(--c-ok); }
:root .ccld-badge--warning { background: #fef0c7; color: var(--c-warn); }
:root .ccld-badge--error { background: var(--c-bad); color: #fff; }
:root .ccld-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-line-strong); flex: none; box-shadow: 0 0 0 2px #fff; }
:root .ccld-dot--ok { background: #12b76a; }
:root .ccld-dot--warning { background: #f79009; }
:root .ccld-dot--error { background: #f04438; }

/* --------------------------------------------------- step 1: products */
:root .ccld-intro { margin-bottom: 20px; max-width: 780px; }
:root .ccld-app .ccld-intro h3 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
:root .ccld-intro p { color: var(--c-ink-2); }
:root .ccld-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
:root .ccld-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; cursor: pointer; box-shadow: var(--shadow-xs); transition: border-color .15s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
:root .ccld-card:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
:root .ccld-card__check { position: absolute; opacity: 0; width: 1px; height: 1px; }
:root .ccld-card__tick { position: absolute; top: 12px; right: 12px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--c-line-strong); background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; color: transparent; transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease); }
:root .ccld-card.is-selected { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-ring), var(--shadow); }
:root .ccld-card.is-selected .ccld-card__tick { background: var(--c-accent); border-color: var(--c-accent); color: #fff; transform: scale(1.06); }
:root .ccld-card__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; padding: 0; background: #eef2f6; border-bottom: 1px solid var(--c-line); }
:root .ccld-card__img { overflow: hidden; }
:root .ccld-card__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s var(--ease); }
:root .ccld-card:hover .ccld-card__img img { transform: scale(1.04); }
:root .ccld-card__body { display: flex; flex-direction: column; gap: 2px; padding: 13px 16px 4px; }
:root .ccld-card__name { font-family: var(--f-display); font-weight: 600; font-size: 15px; line-height: 1.3; }
:root .ccld-card__meta { font-size: 12.5px; color: var(--c-muted); }
:root .ccld-card__flags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 16px; min-height: 36px; }

:root .ccld-actionbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding: 12px 14px 12px 18px; background: rgba(255, 255, 255, .94); border: 1px solid var(--c-line); border-radius: var(--radius-lg); position: sticky; bottom: 12px; z-index: 5; box-shadow: var(--shadow-lg); backdrop-filter: saturate(1.4) blur(6px); }
:root .ccld-actionbar__info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; }
:root .ccld-submitnote { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------- step 2: designer */
:root .ccld-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
:root .ccld-ptabs { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; padding: 4px; background: #fff; border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--shadow-xs); }
:root .ccld-ptab { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; font-family: var(--f-display); font-weight: 500; font-size: 13.5px; color: var(--c-ink-2); max-width: 260px; transition: background .15s var(--ease), color .15s var(--ease); }
:root .ccld-ptab:hover { background: var(--c-soft); color: var(--c-ink); }
:root .ccld-ptab.is-active { background: var(--c-chrome); color: #fff; box-shadow: var(--shadow-sm); }
:root .ccld-ptab__img { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: var(--c-soft); flex: none; }
:root .ccld-ptab__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .ccld-ptab .ccld-dot { box-shadow: none; }
:root .ccld-topactions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

:root .ccld-toolbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--c-line); border-bottom-color: var(--c-soft-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: #fff; position: relative; z-index: 1; }
:root .ccld-zoomlabel { min-width: 60px; height: 32px; padding: 0 8px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-soft); font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--c-ink-2); }
:root .ccld-zoomlabel:hover { background: var(--c-soft-2); }
:root .ccld-productinfo { display: inline-flex; gap: 6px; margin-right: 10px; flex-wrap: wrap; }
:root .ccld-saveinfo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-muted); margin-right: 8px; }
:root .ccld-saveinfo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0; }
:root .ccld-saveinfo.is-saved { color: var(--c-ok); }
:root .ccld-saveinfo.is-saved::before, :root .ccld-saveinfo.is-dirty::before, :root .ccld-saveinfo.is-busy::before { opacity: 1; }
:root .ccld-saveinfo.is-dirty, :root .ccld-saveinfo.is-busy { color: var(--c-warn); }
:root .ccld-saveinfo.is-error { color: var(--c-bad); font-weight: 600; }

:root .ccld-editorgrid { display: grid; grid-template-columns: 364px minmax(0, 1fr) 304px; border: 1px solid var(--c-line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: #fff; height: clamp(580px, calc(100vh - 200px), 900px); overflow: hidden; box-shadow: var(--shadow-sm); }
:root .ccld-tools, :root .ccld-props { display: flex; flex-direction: column; min-height: 0; background: #fff; }
:root .ccld-tools { flex-direction: row; border-right: 1px solid var(--c-line); }
:root .ccld-props { border-left: 1px solid var(--c-line); }

/* Left: vertical icon rail + panel (like professional design tools). */
:root .ccld-tabs { display: flex; gap: 2px; flex: none; }
:root .ccld-tools > .ccld-tabs { flex-direction: column; width: 88px; padding: 10px 6px; gap: 4px; background: #fafbfc; border-right: 1px solid var(--c-line); }
:root .ccld-tab { flex: 1 1 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 9px 2px; border: 0; border-radius: 10px; background: transparent; font-family: var(--f-display); font-size: 11px; font-weight: 500; line-height: 1.1; white-space: nowrap; overflow: hidden; color: var(--c-muted); cursor: pointer; min-width: 0; transition: background .15s var(--ease), color .15s var(--ease); }
:root .ccld-tools .ccld-tab { flex: none; }
:root .ccld-tab:hover { color: var(--c-ink); background: var(--c-soft-2); }
:root .ccld-tab.is-active { color: var(--c-accent); background: var(--c-accent-soft); }
:root .ccld-tools .ccld-tab .ccld-icon svg { width: 20px; height: 20px; }
/* Right: underlined tabs. */
:root .ccld-props > .ccld-tabs { padding: 0 12px; border-bottom: 1px solid var(--c-line); gap: 8px; }
:root .ccld-props .ccld-tab { flex-direction: row; gap: 5px; font-size: 13px; padding: 13px 2px 11px; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; }
:root .ccld-props .ccld-tab:hover { background: transparent; }
:root .ccld-props .ccld-tab.is-active { color: var(--c-ink); background: transparent; border-bottom-color: var(--c-accent); }
:root .ccld-panelbody { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding: 18px 16px; scrollbar-width: thin; }

:root .ccld-section { margin-bottom: 22px; }
:root .ccld-section + .ccld-section { padding-top: 18px; border-top: 1px solid var(--c-soft-2); }
:root .ccld-app .ccld-section__title { font-family: var(--f-ui); letter-spacing: .06em; }
:root .ccld-section__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin: 0 0 10px; }
:root .ccld-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
:root .ccld-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; cursor: pointer; text-align: left; color: var(--c-ink); box-shadow: var(--shadow-xs); transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
:root .ccld-tile:hover { border-color: var(--c-accent); box-shadow: var(--shadow); transform: translateY(-1px); }
:root .ccld-tile strong { font-family: var(--f-display); font-weight: 600; font-size: 14px; margin-top: 8px; }
:root .ccld-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--c-accent-soft); color: var(--c-accent); }
:root .ccld-tile__sub { font-size: 12px; color: var(--c-muted); }
:root .ccld-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 20px 12px; border: 1.5px dashed var(--c-line-strong); border-radius: var(--radius); background: #fafbfc; cursor: pointer; font-size: 13.5px; color: var(--c-ink); position: relative; transition: border-color .15s var(--ease), background .15s var(--ease); }
:root .ccld-drop strong { font-family: var(--f-display); font-weight: 600; }
:root .ccld-drop:hover, :root .ccld-drop.is-over { border-color: var(--c-accent); background: var(--c-accent-soft); }
:root .ccld-drop .ccld-icon { color: var(--c-accent); }
:root .ccld-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
:root .ccld-thumb { position: relative; aspect-ratio: 1; padding: 5px; border: 1px solid var(--c-line); border-radius: 10px; background: repeating-conic-gradient(#f2f4f7 0% 25%, #fff 0% 50%) 50% / 12px 12px; cursor: pointer; overflow: hidden; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
:root .ccld-thumb:hover { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-ring); }
:root .ccld-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
:root .ccld-thumb__dim { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 3px; font-size: 10px; background: rgba(255, 255, 255, .9); color: var(--c-muted); font-variant-numeric: tabular-nums; }
:root .ccld-bginfo { display: flex; gap: 10px; align-items: center; margin: 10px 0; font-size: 13px; }
:root .ccld-bginfo__img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-line); }

:root .ccld-protected { display: flex; gap: 11px; padding: 13px; margin-bottom: 18px; border-radius: var(--radius); background: linear-gradient(180deg, var(--c-accent-soft), #fff); border: 1px solid var(--c-line); font-size: 13px; }
:root .ccld-protected > .ccld-icon { color: var(--c-accent); margin-top: 1px; }
:root .ccld-protected strong { font-family: var(--f-display); font-weight: 600; }
:root .ccld-protected p { margin-top: 4px; }
:root .ccld-partcolors { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; margin: 10px 0 8px; }
:root .ccld-partcolor { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px 7px 12px; font-size: 13px; cursor: pointer; }
:root .ccld-partcolor + .ccld-partcolor { border-top: 1px solid var(--c-soft-2); }
:root .ccld-partcolor:hover { background: #fafbfc; }
:root .ccld-partcolor__name { font-weight: 500; color: var(--c-ink-2); }
:root .ccld-partcolor--all { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; background: #fafbfc; cursor: default; }
:root .ccld-partcolor--all .ccld-partcolor__name { font-weight: 600; color: var(--c-ink); }
:root .ccld-colorwrap--compact .ccld-color { width: 36px; height: 28px; padding: 2px; border-radius: 7px; }
:root .ccld-role { padding: 12px; border: 1px solid var(--c-line); border-radius: var(--radius); }
:root .ccld-role__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; }
:root .ccld-role__head strong { font-family: var(--f-display); font-weight: 600; font-size: 13.5px; }
:root .ccld-role__status { font-size: 11.5px; font-weight: 600; color: var(--c-ok); background: var(--c-ok-soft); padding: 1px 8px; border-radius: 999px; }
:root .ccld-role__status:empty { display: none; }
:root .ccld-role__status.is-changed { color: var(--c-warn); background: var(--c-warn-soft); }
:root .ccld-role__status.is-off { color: var(--c-muted); background: var(--c-soft); }
:root .ccld-rolenote { margin-bottom: 8px; font-size: 13px; }

:root .ccld-layers { display: flex; flex-direction: column; gap: 4px; }
:root .ccld-layer { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; border: 1px solid var(--c-line); border-radius: 9px; background: #fff; cursor: pointer; font-size: 13px; transition: background .12s var(--ease), border-color .12s var(--ease); }
:root .ccld-layer:hover { background: #fafbfc; border-color: var(--c-line-strong); }
:root .ccld-layer.is-selected { border-color: var(--c-accent); background: var(--c-accent-soft); }
:root .ccld-layer.is-fixed { background: var(--c-soft); color: var(--c-muted); cursor: default; }
:root .ccld-layer.is-fixed { cursor: pointer; }
:root .ccld-layer.is-fixed.is-selected { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-ink); }
:root .ccld-layer__tag { font-size: 11px; font-weight: 600; color: var(--c-accent); background: var(--c-accent-soft); padding: 0 7px; border-radius: 999px; }
:root .ccld-layer__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .ccld-layer--empty { padding: 8px 2px; }

:root .ccld-empty { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-bottom: 16px; }
:root .ccld-empty > .ccld-icon { color: var(--c-accent); }
:root .ccld-legend { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
:root .ccld-legend li { display: flex; gap: 9px; align-items: flex-start; }
:root .ccld-key { display: inline-block; flex: none; width: 22px; height: 14px; margin-top: 3px; border-radius: 3px; }
:root .ccld-key--bleed { background: rgba(226, 0, 60, .22); }
:root .ccld-key--trim { border: 2px dashed #e2003c; background: #fff; }
:root .ccld-key--safe { border: 2px dashed #12a150; background: #fff; }

:root .ccld-imginfo { padding: 11px; border-radius: 10px; background: var(--c-ok-soft); border: 1px solid #abefc6; margin-bottom: 10px; font-size: 13px; }
:root .ccld-imginfo[data-level="warning"] { border-color: #fedf89; background: var(--c-warn-soft); }
:root .ccld-imginfo[data-level="error"] { border-color: #fecdca; background: var(--c-bad-soft); }
:root .ccld-imginfo__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
:root .ccld-imginfo__msg { margin-top: 6px; }

:root .ccld-issues { display: flex; flex-direction: column; gap: 6px; }
:root .ccld-issue { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; font-size: 13px; background: var(--c-soft); line-height: 1.45; }
:root .ccld-issue > .ccld-icon { margin-top: 1px; }
:root .ccld-issue--error { background: var(--c-bad-soft); color: #912018; }
:root .ccld-issue--warning { background: var(--c-warn-soft); color: #93370d; }
:root .ccld-issue--ok { background: var(--c-ok-soft); color: #05603a; }
:root .ccld-issue--info { background: var(--c-accent-soft); color: var(--c-accent-dark); }
:root .ccld-issue.is-link { cursor: pointer; }
:root .ccld-issue.is-link:hover { filter: brightness(.97); text-decoration: underline; }
:root .ccld-issues--compact { gap: 3px; margin-top: 6px; }
:root .ccld-issues--compact .ccld-issue { padding: 5px 9px; font-size: 12.5px; }

/* ----------------------------------------------------------- workspace */
:root .ccld-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #eef0f4; }
:root .ccld-workspace { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; padding: 40px; background:
	radial-gradient(circle, #d3d8e0 1px, transparent 1.2px) 0 0 / 20px 20px, #eef0f4; outline: none; }
:root .ccld-workspace.is-drop { box-shadow: inset 0 0 0 3px var(--c-accent); }
:root .ccld-zoomwrap { position: relative; margin: auto; flex: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 20px 40px -12px rgba(16, 24, 40, .3); background: #fff; border-radius: 2px; }
:root .ccld-scaler { position: absolute; left: 0; top: 0; transform-origin: 0 0; --z: 1; }
:root .ccld-preview { position: relative; overflow: hidden; }
:root .ccld-preview .ccld-scaler { position: absolute; }
:root .ccld-legendbar { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--c-line); background: #fff; font-size: 12px; color: var(--c-ink-2); }
:root .ccld-legendbar .ccld-key { margin: 0 6px 0 0; vertical-align: -2px; }

:root .ccld-stage { position: absolute; left: 0; top: 0; overflow: hidden; background: #fff; user-select: none; -webkit-user-select: none; text-rendering: geometricPrecision; }
:root .ccld-bgcolor, :root .ccld-bgimg { position: absolute; inset: 0; }
:root .ccld-bgimg { overflow: hidden; }
:root .ccld-bgimg img, :root .ccld-el img { position: absolute; max-width: none; max-height: none; pointer-events: none; -webkit-user-drag: none; }
:root .ccld-content { position: absolute; overflow: visible; }
:root .ccld-el { position: absolute; box-sizing: border-box; transform-origin: 50% 50%; cursor: move; }
:root .ccld-el--text { white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; margin: 0; padding: 0; }
:root .ccld-el--image { overflow: hidden; }
:root .ccld-el--shape { box-sizing: border-box; }
:root .ccld-el.is-missing { display: flex; align-items: center; justify-content: center; background: #f2f4f7; color: #98a2b3; font-size: 40px; border: 2px dashed #c3ccd6; }
:root .ccld-el.is-flash { animation: ccld-flash 1.4s ease-out; }
@keyframes ccld-flash { 0%, 40% { outline: calc(4px / var(--z, 1)) solid rgba(247, 144, 9, .95); outline-offset: calc(2px / var(--z, 1)); } 100% { outline: calc(4px / var(--z, 1)) solid rgba(247, 144, 9, 0); } }
:root .ccld-edit { position: absolute; margin: 0; padding: 0; border: 0; outline: calc(2px / var(--z, 1)) solid var(--c-accent, #1e6bff); outline-offset: calc(2px / var(--z, 1)); background: rgba(255, 255, 255, .5); resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: border-box; transform-origin: 50% 50%; user-select: text; -webkit-user-select: text; z-index: 5; }

/* The protected information block */
/* Label content is rendered exactly as designed, whatever the surrounding page (theme or wp-admin) says about p/div/b. */
:root .ccld-stage :where(p, div, span, b) { font-size: inherit; line-height: inherit; font-family: inherit; letter-spacing: inherit; }
:root .ccld-stage :where(b) { font-weight: 700; }
:root .ccld-block { position: absolute; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; cursor: default; }
:root .ccld-block__demo { flex: none; font-weight: 700; color: #6941c6; text-transform: uppercase; font-size: .85em; letter-spacing: .02em; }
:root .ccld-block__head { flex: none; display: flex; flex-wrap: wrap; align-items: center; } /* the signal word stands beside the pictograms when it fits, otherwise below them; the pictograms fill rows across the block (mirrors Block_Fit) */
:root .ccld-block__pictos { flex: 0 1 auto; min-width: 0; }
:root .ccld-block__pictos { display: flex; flex-wrap: wrap; align-items: center; }
:root .ccld-block__pictos img { display: block; object-fit: contain; position: static; }
:root .ccld-block__signal { font-weight: 700; text-transform: uppercase; line-height: 1.1; }
:root .ccld-block__body { flex: 1 1 auto; min-height: 0; column-fill: auto; overflow: hidden; }
:root .ccld-block__body p { break-inside: avoid-column; overflow-wrap: break-word; }
:root .ccld-block.is-overflow { outline: calc(3px / var(--z, 1)) solid #d92d20; outline-offset: calc(-3px / var(--z, 1)); }

/* Guides + overlay (screen only – never part of the design) */
:root .ccld-guides { position: absolute; left: 0; top: 0; pointer-events: none; }
:root .ccld-guides.is-hidden { display: none; }
:root .ccld-g { position: absolute; box-sizing: border-box; pointer-events: none; }
:root .ccld-g-bleed { inset: 0; }
:root .ccld-g-trim { border: calc(1.5px / var(--z, 1)) dashed #e2003c; }
:root .ccld-g-safe { border: calc(1.5px / var(--z, 1)) dashed #12a150; }
:root .ccld-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
:root .ccld-sel { position: absolute; box-sizing: border-box; pointer-events: none; outline: calc(1.5px / var(--z, 1)) solid var(--c-accent, #1e6bff); transform-origin: 50% 50%; }
:root .ccld-sel.is-locked { outline-style: dashed; outline-color: #98a2b3; }
:root .ccld-sel--block { outline-style: dashed; outline-color: var(--c-accent, #2156e8); background: rgba(33, 86, 232, .04); }
:root .ccld-sel__tag { position: absolute; left: 0; bottom: 100%; margin-bottom: calc(4px / var(--z, 1)); padding: calc(2px / var(--z, 1)) calc(6px / var(--z, 1)); border-radius: calc(4px / var(--z, 1)); background: var(--c-accent, #2156e8); color: #fff; font: 600 calc(11px / var(--z, 1)) / 1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; white-space: nowrap; }
:root .ccld-zoomwrap .ccld-block { cursor: move; }
:root .ccld-handle { position: absolute; pointer-events: auto; width: calc(12px / var(--z, 1)); height: calc(12px / var(--z, 1)); margin: calc(-6px / var(--z, 1)) 0 0 calc(-6px / var(--z, 1)); background: #fff; border: calc(1.5px / var(--z, 1)) solid var(--c-accent, #1e6bff); border-radius: 2px; touch-action: none; }
:root .ccld-handle--nw { left: 0; top: 0; cursor: nwse-resize; }
:root .ccld-handle--ne { left: 100%; top: 0; cursor: nesw-resize; }
:root .ccld-handle--sw { left: 0; top: 100%; cursor: nesw-resize; }
:root .ccld-handle--se { left: 100%; top: 100%; cursor: nwse-resize; }
:root .ccld-handle--e { left: 100%; top: 50%; cursor: ew-resize; }
:root .ccld-handle--w { left: 0; top: 50%; cursor: ew-resize; }
:root .ccld-rot { left: 50%; top: calc(-28px / var(--z, 1)); border-radius: 50%; cursor: grab; }
:root .ccld-rotline { position: absolute; left: 50%; top: calc(-28px / var(--z, 1)); width: calc(1.5px / var(--z, 1)); height: calc(28px / var(--z, 1)); margin-left: calc(-0.75px / var(--z, 1)); background: var(--c-accent, #1e6bff); pointer-events: none; }
:root .ccld-snap { position: absolute; background: #e2003c; pointer-events: none; }
:root .ccld-snap--v { top: 0; bottom: 0; width: calc(1px / var(--z, 1)); }
:root .ccld-snap--h { left: 0; right: 0; height: calc(1px / var(--z, 1)); }
:root .is-dragging, :root .is-dragging * { cursor: grabbing !important; }


/* ------------------------------------------------------------- review */
:root .ccld-reviewgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
:root .ccld-review { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; box-shadow: var(--shadow-xs); }
:root .ccld-review__thumb { display: flex; align-items: center; justify-content: center; padding: 22px; min-height: 210px; background: radial-gradient(circle, #d3d8e0 1px, transparent 1.2px) 0 0 / 18px 18px, #eef0f4; }
:root .ccld-review__thumb .ccld-preview { box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 14px 28px -10px rgba(16, 24, 40, .3); background: #fff; }
:root .ccld-review__body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
:root .ccld-app .ccld-review__name { font-size: 16px; font-weight: 600; margin: 0; }
:root .ccld-review__body .ccld-btn { margin-top: 6px; }

/* ------------------------------------------------------------- dialogs */
:root .ccld-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(16, 24, 40, .5); backdrop-filter: blur(3px); animation: ccld-fade .15s ease-out; }
@keyframes ccld-fade { from { opacity: 0; } }
:root .ccld-dialog { width: min(560px, 100%); max-height: 92vh; overflow: auto; padding: 24px 26px; background: #fff; border-radius: var(--radius-xl); box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .35); animation: ccld-pop .18s var(--ease); }
@keyframes ccld-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
:root .ccld-modal .ccld-dialog__title { font-family: var(--f-display); font-size: 19px; font-weight: 600; margin: 0 0 10px; color: var(--c-ink); }
:root .ccld-dialog__sub { font-size: 11.5px; font-weight: 700; margin: 18px 0 8px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; }
:root .ccld-dialog p { margin-bottom: 10px; color: var(--c-ink-2); }
:root .ccld-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--c-soft-2); }
:root .ccld-checklist { display: flex; flex-direction: column; gap: 4px; }
:root .ccld-check { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; }
:root .ccld-check:hover { background: var(--c-soft); }
:root .ccld-check input { width: 18px; height: 18px; flex: none; accent-color: var(--c-accent); }
:root .ccld-check .ccld-muted { margin-left: auto; font-size: 12.5px; }

:root .ccld-submitok { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 6px 6px; text-align: center; }
:root .ccld-submitok > .ccld-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: var(--c-ok); background: var(--c-ok-soft); box-shadow: 0 0 0 8px #f6fef9; }
:root .ccld-submitok p { margin: 0; font-size: 15px; color: var(--c-ink); max-width: 380px; }

:root .ccld-crop { width: min(940px, 100%); }
:root .ccld-crop__presets { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
:root .ccld-crop__stage { position: relative; margin: 0 auto; background: repeating-conic-gradient(#e6e9ee 0% 25%, #fff 0% 50%) 50% / 16px 16px; touch-action: none; user-select: none; -webkit-user-select: none; }
:root .ccld-crop__stage > img { position: absolute; left: 0; top: 0; display: block; max-width: none; }
:root .ccld-crop__rect { position: absolute; border: 2px solid #fff; outline: 1px solid rgba(0, 0, 0, .5); box-shadow: 0 0 0 9999px rgba(16, 24, 40, .55); cursor: move; }
:root .ccld-crop__h { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #fff; border: 2px solid var(--c-accent); border-radius: 3px; touch-action: none; }
:root .ccld-crop__h--nw { left: 0; top: 0; cursor: nwse-resize; } :root .ccld-crop__h--n { left: 50%; top: 0; cursor: ns-resize; }
:root .ccld-crop__h--ne { left: 100%; top: 0; cursor: nesw-resize; } :root .ccld-crop__h--e { left: 100%; top: 50%; cursor: ew-resize; }
:root .ccld-crop__h--se { left: 100%; top: 100%; cursor: nwse-resize; } :root .ccld-crop__h--s { left: 50%; top: 100%; cursor: ns-resize; }
:root .ccld-crop__h--sw { left: 0; top: 100%; cursor: nesw-resize; } :root .ccld-crop__h--w { left: 0; top: 50%; cursor: ew-resize; }
:root .ccld-crop__info { text-align: center; margin-top: 8px; font-size: 13px; color: var(--c-muted); }

/* --------------------------------------------------------------- toasts */
:root .ccld-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100001; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
:root .ccld-toast { display: flex; align-items: center; gap: 9px; max-width: min(420px, 90vw); padding: 12px 16px; border-radius: var(--radius); background: var(--c-chrome); color: #fff; font-size: 13.5px; box-shadow: var(--shadow-lg); pointer-events: auto; transition: opacity .3s, transform .3s; animation: ccld-pop .2s var(--ease); }
:root .ccld-toast--error { background: var(--c-bad); }
:root .ccld-toast--ok, :root .ccld-toast--success { background: #067647; }
:root .ccld-toast.is-out { opacity: 0; transform: translateY(8px); }

/* ---------------------------------------------------------- responsive
 * Driven by the width the app actually gets (data-w on .ccld-app, set in ccld-app.js), not by the window width:
 * wide >= 1000px, mid >= 780px, narrow >= 520px, xs below that. */
:root .ccld-app[data-w="mid"] .ccld-editorgrid { grid-template-columns: 312px minmax(0, 1fr) 264px; }
:root .ccld-app[data-w="mid"] .ccld-tools > .ccld-tabs { width: 80px; padding: 8px 4px; }
:root .ccld-app[data-w="mid"] .ccld-tools .ccld-tab { font-size: 10px; }
:root .ccld-app[data-w="mid"] .ccld-view { padding: 18px; }
:root .ccld-app[data-w="narrow"] .ccld-editorgrid, :root .ccld-app[data-w="xs"] .ccld-editorgrid { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
:root .ccld-app[data-w="narrow"] .ccld-center, :root .ccld-app[data-w="xs"] .ccld-center { order: -1; height: 62vh; min-height: 380px; }
:root .ccld-app[data-w="narrow"] .ccld-tools, :root .ccld-app[data-w="xs"] .ccld-tools { flex-direction: column; }
:root .ccld-app[data-w="narrow"] .ccld-tools > .ccld-tabs, :root .ccld-app[data-w="xs"] .ccld-tools > .ccld-tabs { flex-direction: row; width: auto; border-right: 0; border-bottom: 1px solid var(--c-line); padding: 6px; }
:root .ccld-app[data-w="narrow"] .ccld-tools .ccld-tab, :root .ccld-app[data-w="xs"] .ccld-tools .ccld-tab { flex: 1 1 auto; }
:root .ccld-app[data-w="narrow"] .ccld-tools, :root .ccld-app[data-w="narrow"] .ccld-props, :root .ccld-app[data-w="xs"] .ccld-tools, :root .ccld-app[data-w="xs"] .ccld-props { border: 0; border-top: 1px solid var(--c-line); }
:root .ccld-app[data-w="narrow"] .ccld-panelbody, :root .ccld-app[data-w="xs"] .ccld-panelbody { overflow: visible; }
:root .ccld-app[data-w="narrow"] .ccld-workspace, :root .ccld-app[data-w="xs"] .ccld-workspace { padding: 16px; }
:root .ccld-app[data-w="narrow"] .ccld-view, :root .ccld-app[data-w="xs"] .ccld-view { padding: 14px 12px 18px; }
:root .ccld-app[data-w="narrow"] .ccld-head, :root .ccld-app[data-w="xs"] .ccld-head { padding: 14px 14px; }
:root .ccld-app[data-w="narrow"] .ccld-shell, :root .ccld-app[data-w="xs"] .ccld-shell { border-radius: var(--radius-lg); }
:root .ccld-app[data-w="xs"] .ccld-head__title p { display: none; }
:root .ccld-app[data-w="xs"] .ccld-step__label { display: none; }
:root .ccld-app[data-w="xs"] .ccld-step.is-current .ccld-step__label { display: inline; }
:root .ccld-app[data-w="xs"] .ccld-steps li + li::before { width: 8px; }
:root .ccld-app[data-w="xs"] .ccld-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
:root .ccld-app[data-w="xs"] .ccld-reviewgrid, :root .ccld-app[data-w="narrow"] .ccld-reviewgrid { grid-template-columns: 1fr; }
@media (max-width: 600px) { :root .ccld-dialog { padding: 18px; } }
@media (prefers-reduced-motion: reduce) {
	:root .ccld-el.is-flash, :root .ccld-toast, :root .ccld-modal, :root .ccld-dialog { animation: none; transition: none; }
	:root .ccld-card, :root .ccld-card__img img, :root .ccld-tile { transition: none; }
}

/* ================================================================== ordering (0.2) */
:root .ccld-linkbtn { background: none; border: 0; padding: 0; color: var(--c-accent); cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
:root .ccld-linkbtn:hover { color: var(--c-accent-dark); }
:root .ccld-h { font-size: 16px; font-weight: 600; margin-bottom: 12px !important; }
:root .ccld-panelcard { border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #fff; padding: 18px; box-shadow: var(--shadow-xs); margin-bottom: 18px; }
:root .ccld-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Step 1: products and quantities */
:root .ccld-shop { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
:root .ccld-cards--shop { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
:root .ccld-pcard { cursor: default; }
:root .ccld-pcard:hover { transform: none; }
:root .ccld-pcard.is-disabled .ccld-card__img img { filter: grayscale(.6); opacity: .75; }
:root .ccld-pcard__order { padding: 0 14px 10px; }
:root .ccld-pcard__label { display: block; font-size: 12px; font-weight: 600; color: var(--c-muted); margin-bottom: 6px; }
:root .ccld-qtys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
:root .ccld-app .ccld-qty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 48px; padding: 5px 4px; border: 1px solid var(--c-line-strong); border-radius: 10px; background: #fff; color: var(--c-ink); cursor: pointer; font-family: var(--f-ui); line-height: 1.15; transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease); }
:root .ccld-qty b { font-family: var(--f-display); font-size: 15px; font-weight: 600; }
:root .ccld-qty span { font-size: 11.5px; color: var(--c-muted); }
:root .ccld-qty:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }
:root .ccld-qty:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--c-accent-ring); border-color: var(--c-accent); }
:root .ccld-qty.is-on { border-color: var(--c-accent); background: var(--c-accent); color: #fff; box-shadow: 0 0 0 3px var(--c-accent-ring); }
:root .ccld-qty.is-on span { color: rgba(255, 255, 255, .88); }
:root .ccld-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 14px; border-top: 1px dashed var(--c-line); margin-top: auto; font-size: 13px; }
:root .ccld-pcard__sub { color: var(--c-ink-2); }
:root .ccld-app .ccld-pcard__na { padding: 4px 14px 16px; color: var(--c-muted); font-size: 13px; }
:root .ccld-shopsum { position: sticky; top: 16px; }
:root .ccld-shopsum__card { border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #fff; padding: 18px; box-shadow: var(--shadow); }
:root .ccld-app .ccld-shopsum__title { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; margin-bottom: 10px; }
:root .ccld-shopsum__busy { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-line); border-top-color: var(--c-accent); opacity: 0; }
:root .ccld-shopsum.is-pending .ccld-shopsum__busy { opacity: 1; animation: ccld-spin .8s linear infinite; }
:root .ccld-shopsum .ccld-btn--block { margin: 14px 0 0; }
:root .ccld-actionbar--mobile { display: none; }

/* Cost table */
:root .ccld-costs.is-pending { opacity: .55; transition: opacity .2s; }
:root .ccld-costtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
:root .ccld-costtable th, :root .ccld-costtable td { padding: 7px 0; border-bottom: 1px solid var(--c-soft-2); vertical-align: top; text-align: left; font-weight: 400; }
:root .ccld-costtable td { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
:root .ccld-costtable th span { display: block; color: var(--c-ink); }
:root .ccld-costtable th small { display: block; color: var(--c-muted); font-size: 12px; }
:root .ccld-costtable tr.is-sep th, :root .ccld-costtable tr.is-sep td { border-top: 1px solid var(--c-line); }
:root .ccld-costtable tr.is-total th span, :root .ccld-costtable tr.is-total td { font-weight: 600; }
:root .ccld-costtable tr.is-final th span, :root .ccld-costtable tr.is-final td { font-family: var(--f-display); font-size: 16px; font-weight: 600; border-bottom: 0; color: var(--c-ink); }
:root .ccld-costs .ccld-callout { margin-top: 12px; }
:root .ccld-costs .ccld-hint { margin-top: 10px; }

/* Step 2: design tabs show the approval */
:root .ccld-ptab__state { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--c-soft-2); color: var(--c-muted); flex: none; }
:root .ccld-ptab__state.is-ok { background: var(--c-ok-soft); color: var(--c-ok); }

/* Step 3: review */
:root .ccld-review2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
:root .ccld-olist { display: flex; flex-direction: column; gap: 16px; }
:root .ccld-orow { display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: #fff; overflow: hidden; box-shadow: var(--shadow-xs); }
:root .ccld-orow__thumb { display: flex; align-items: center; justify-content: center; padding: 18px; background: radial-gradient(circle, #d3d8e0 1px, transparent 1.2px) 0 0 / 18px 18px, #eef0f4; }
:root .ccld-orow__thumb .ccld-preview { box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 14px 28px -10px rgba(16, 24, 40, .3); background: #fff; }
:root .ccld-orow__main { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
:root .ccld-orow__head { display: flex; flex-direction: column; gap: 2px; }
:root .ccld-app .ccld-orow__name { font-size: 17px; font-weight: 600; }
:root .ccld-orow__qtyrow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
:root .ccld-orow__qtyrow .ccld-field { margin: 0; flex: 1 1 220px; }
:root .ccld-orow__subwrap { display: flex; flex-direction: column; align-items: flex-end; padding-bottom: 6px; }
:root .ccld-orow__sub { font-family: var(--f-display); font-size: 16px; }
:root .ccld-approvebox { border: 1.5px solid var(--c-line-strong); border-radius: 12px; padding: 8px 10px 10px; background: #fcfcfd; transition: border-color .15s, background .15s; }
:root .ccld-approvebox.is-ok { border-color: #75e0a7; background: var(--c-ok-soft); }
:root .ccld-approvebox.is-blocked { opacity: .8; }
:root .ccld-approvebox .ccld-hint { margin: 0 10px; }
:root .ccld-approve__state { margin: 4px 10px 0; font-size: 12.5px; color: var(--c-muted); }
:root .ccld-approvebox.is-ok .ccld-approve__state { color: var(--c-ok); font-weight: 600; }
:root .ccld-check--strong { font-weight: 600; align-items: flex-start; }
:root .ccld-check--strong input { margin-top: 1px; }
:root .ccld-check--strong a { color: var(--c-accent); }
:root .ccld-orow__actions { gap: 8px; }
:root .ccld-review2__side { position: sticky; top: 16px; }

/* Customer form */
:root .ccld-fieldset { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
:root .ccld-fieldset legend { font-family: var(--f-display); font-weight: 600; font-size: 13.5px; color: var(--c-ink); margin-bottom: 8px; padding: 0; }
:root .ccld-cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
:root .ccld-cform .ccld-field { margin-bottom: 10px; }
:root .ccld-input.is-invalid { border-color: var(--c-bad); box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }
:root .ccld-radios { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
:root .ccld-radios input { accent-color: var(--c-accent); }

/* Step 4: choice */
:root .ccld-choosesum { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; padding: 14px 18px; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-page); margin-bottom: 18px; }
:root .ccld-choosesum > div { display: flex; flex-direction: column; min-width: 150px; }
:root .ccld-choosesum strong { font-family: var(--f-display); font-size: 16px; }
:root .ccld-choosesum span { font-size: 12.5px; }
:root .ccld-choosesum .ccld-btn { margin-left: auto; }
:root .ccld-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
:root .ccld-choice { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow); }
:root .ccld-choice--order { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-ring), var(--shadow); }
:root .ccld-choice.is-disabled { border-color: var(--c-line); box-shadow: var(--shadow-xs); }
:root .ccld-choice__badge { position: absolute; top: -13px; left: 20px; width: 28px; height: 28px; border-radius: 50%; background: var(--c-chrome); color: #fff; font-family: var(--f-display); font-weight: 600; display: flex; align-items: center; justify-content: center; }
:root .ccld-app .ccld-choice h4 { font-size: 18px; font-weight: 600; }
:root .ccld-choice p { color: var(--c-ink-2); }
:root .ccld-choice__list li { position: relative; padding-left: 22px; margin: 4px 0; color: var(--c-ink-2); }
:root .ccld-choice__list li::before { content: "✓"; position: absolute; left: 2px; color: var(--c-ok); font-weight: 700; }
:root .ccld-choice .ccld-btn--block { margin: auto 0 0; }
:root .ccld-obligation { display: flex; gap: 10px; padding: 11px 13px; border-radius: 12px; background: var(--c-warn-soft); border: 1px solid #fedf89; color: var(--c-ink-2); font-size: 13.5px; }
:root .ccld-obligation > .ccld-icon { color: var(--c-warn); margin-top: 2px; }
:root .ccld-btn.is-busy { position: relative; color: transparent !important; }
:root .ccld-btn.is-busy span { color: #fff; }
:root .ccld-hint--error { color: var(--c-bad); }

/* Confirmation */
:root .ccld-done { max-width: 720px; margin: 10px auto; padding: 30px; border: 1px solid var(--c-line); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
:root .ccld-done__icon { width: 58px; height: 58px; border-radius: 50%; background: var(--c-ok-soft); color: var(--c-ok); display: flex; align-items: center; justify-content: center; }
:root .ccld-app .ccld-done h3 { font-size: 22px; font-weight: 600; }
:root .ccld-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--c-page); }
:root .ccld-facts dt { color: var(--c-muted); }
:root .ccld-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
:root .ccld-done__actions { gap: 10px; flex-wrap: wrap; }

/* Quote page */
:root .ccld-qpills { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
:root .ccld-pill--info { background: var(--c-accent-soft); color: var(--c-accent); }
:root .ccld-qtable { width: 100%; border-collapse: collapse; font-size: 14px; }
:root .ccld-qtable th, :root .ccld-qtable td { padding: 9px 10px; border-bottom: 1px solid var(--c-soft-2); text-align: left; vertical-align: top; }
:root .ccld-qtable thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); background: var(--c-page); }
:root .ccld-qtable .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
:root .ccld-qtable th small { display: block; color: var(--c-muted); font-weight: 400; font-size: 12px; }
:root .ccld-qtable tbody th { font-weight: 600; }
:root .ccld-qtable tfoot th { text-align: right; font-weight: 500; }
:root .ccld-qtable tfoot tr.is-final th, :root .ccld-qtable tfoot tr.is-final td { font-family: var(--f-display); font-size: 16px; font-weight: 600; border-bottom: 0; }
:root .ccld-panelcard .ccld-row { margin-top: 12px; gap: 8px; flex-wrap: wrap; }
:root .ccld-acceptbox { display: flex; flex-direction: column; gap: 10px; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-ring); }
:root .ccld-acceptbox .ccld-btn { align-self: flex-start; }

/* Responsive (width the app really gets) */
:root .ccld-app[data-w="mid"] .ccld-shop { grid-template-columns: minmax(0, 1fr) 290px; }
:root .ccld-app[data-w="mid"] .ccld-review2 { grid-template-columns: minmax(0, 1fr) 330px; }
:root .ccld-app[data-w="mid"] .ccld-orow { grid-template-columns: 240px minmax(0, 1fr); }
:root .ccld-app[data-w="narrow"] .ccld-shop, :root .ccld-app[data-w="xs"] .ccld-shop, :root .ccld-app[data-w="narrow"] .ccld-review2, :root .ccld-app[data-w="xs"] .ccld-review2, :root .ccld-app[data-w="narrow"] .ccld-choices, :root .ccld-app[data-w="xs"] .ccld-choices { grid-template-columns: minmax(0, 1fr); }
:root .ccld-app[data-w="narrow"] .ccld-shopsum, :root .ccld-app[data-w="xs"] .ccld-shopsum, :root .ccld-app[data-w="narrow"] .ccld-review2__side, :root .ccld-app[data-w="xs"] .ccld-review2__side { position: static; }
:root .ccld-app[data-w="narrow"] .ccld-orow, :root .ccld-app[data-w="xs"] .ccld-orow { grid-template-columns: minmax(0, 1fr); }
:root .ccld-app[data-w="narrow"] .ccld-shopsum .ccld-btn--block, :root .ccld-app[data-w="xs"] .ccld-shopsum .ccld-btn--block { display: none; }
:root .ccld-app[data-w="narrow"] .ccld-actionbar--mobile, :root .ccld-app[data-w="xs"] .ccld-actionbar--mobile { display: flex; }
:root .ccld-app[data-w="xs"] .ccld-cards--shop { grid-template-columns: minmax(0, 1fr); }
:root .ccld-app[data-w="xs"] .ccld-cform__row { grid-template-columns: minmax(0, 1fr); }
:root .ccld-app[data-w="xs"] .ccld-done { padding: 18px; }
:root .ccld-app[data-w="xs"] .ccld-choosesum .ccld-btn { margin-left: 0; }
:root .ccld-app[data-w="xs"] .ccld-orow__thumb { padding: 12px; }

:root .ccld-alloc { margin-top: 14px; }
:root .ccld-qtable--small { font-size: 12.5px; }
:root .ccld-qtable--small tbody th { font-weight: 500; }

/* ---------------------------------------------------------------- 0.3: design route, brief, stock, proofs, shapes */
:root .ccld-el--shape > svg.ccld-shape { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
:root .ccld-skipbtn { margin-top: 8px !important; }
:root .ccld-app[data-w="narrow"] .ccld-shopsum .ccld-skipbtn, :root .ccld-app[data-w="xs"] .ccld-shopsum .ccld-skipbtn { display: inline-flex; }
:root .ccld-shopsum__labels { margin-top: 14px; }
:root .ccld-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root .ccld-app[data-w="mid"] .ccld-choices--3 { grid-template-columns: 1fr 1fr; }
:root .ccld-app[data-w="narrow"] .ccld-choices--3, :root .ccld-app[data-w="xs"] .ccld-choices--3 { grid-template-columns: minmax(0, 1fr); }
:root .ccld-routecard.is-current { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-ring), var(--shadow); }
:root .ccld-routecard__cur { font-size: 12px; font-weight: 600; color: var(--c-accent); }
:root .ccld-routeprice { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius); background: var(--c-accent-soft); }
:root .ccld-routeprice strong { font-family: var(--f-display); font-size: 16px; color: var(--c-ink); }
:root .ccld-routetiers { margin-top: 8px; font-size: 13px; }
:root .ccld-routetiers summary { cursor: pointer; color: var(--c-accent); font-weight: 600; }
:root .ccld-routetiers ul { margin-top: 6px; }
:root .ccld-routetiers li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--c-line); }
:root .ccld-briefform { display: flex; flex-direction: column; gap: 16px; }
:root .ccld-briefform .ccld-field { margin-bottom: 12px; }
:root .ccld-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
:root .ccld-chipbtn { border: 1px solid var(--c-line-strong); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; color: var(--c-ink-2); }
:root .ccld-chipbtn:hover, :root .ccld-chipbtn:focus-visible { border-color: var(--c-accent); color: var(--c-accent); outline: none; }
:root .ccld-briefupload { align-items: center; gap: 8px; flex-wrap: wrap; }
:root .ccld-briefkind { width: auto; min-width: 140px; }
:root .ccld-brieffiles { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
:root .ccld-brieffile { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-page); flex-wrap: wrap; }
:root .ccld-brieffile__name { font-weight: 600; flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
:root .ccld-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root .ccld-serviceinfo p { color: var(--c-ink-2); margin-bottom: 8px; }
:root .ccld-routesum .ccld-linkbtn { margin-top: 6px; }
:root .ccld-orow--nodesign .ccld-orow__thumb { display: flex; align-items: center; justify-content: center; }
:root .ccld-orow__product { display: flex; flex-direction: column; align-items: center; gap: 8px; }
:root .ccld-orow__product img { width: 110px; height: 110px; object-fit: contain; border-radius: var(--radius); background: var(--c-page); }
:root .ccld-orow__routenote { color: var(--c-ink-2); margin: 6px 0; }
:root .ccld-labelsection { margin-top: 18px; }
:root .ccld-labeltable .ccld-tablewrap { overflow-x: auto; }
:root .ccld-labeltable .is-strong { font-weight: 700; }
:root .ccld-labelfacts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; color: var(--c-ink-2); }
:root .ccld-labelfacts strong { font-family: var(--f-display); font-size: 16px; color: var(--c-ink); }
:root .ccld-stocknote { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--c-ok-soft); color: #05603a; font-size: 13px; }
:root .ccld-stocknote .ccld-icon { margin-top: 1px; }
:root .ccld-labeltable.is-compact .ccld-stocknote { margin-top: 0; }
:root .ccld-labeldetails { margin-top: 8px; font-size: 13px; }
:root .ccld-labeldetails summary { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 600; }
:root .ccld-labeldetails .ccld-tablewrap { margin-top: 6px; }
:root .ccld-qdesign .ccld-facts, :root .ccld-proof .ccld-obligation { margin: 10px 0; }
:root .ccld-proof .ccld-review.is-ok { border-color: var(--c-ok); }
:root .ccld-proof .ccld-review__body .ccld-btn { margin-top: 8px; }
:root .ccld-okline { display: flex; align-items: center; gap: 6px; color: var(--c-ok); font-weight: 600; margin-top: 6px; }
:root .ccld-proofchanges, :root .ccld-prooffeedback { margin-top: 14px; }
:root .ccld-proofchanges summary, :root .ccld-prooffeedback summary { cursor: pointer; font-weight: 600; color: var(--c-accent); }
:root .ccld-proofchanges .ccld-field { margin-top: 8px; }
:root .ccld-pending .ccld-btn { margin: 6px 0 0 6px; }
/* Shape picker */
:root .ccld-shapepicker { margin: 4px 0 12px; }
:root .ccld-shapepicker summary { cursor: pointer; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
:root .ccld-shapegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
:root .ccld-shapebtn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 5px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; color: var(--c-ink-2); font-size: 10.5px; line-height: 1.2; text-align: center; }
:root .ccld-shapebtn:hover, :root .ccld-shapebtn:focus-visible { border-color: var(--c-accent); color: var(--c-accent); outline: none; box-shadow: 0 0 0 3px var(--c-accent-ring); }
:root .ccld-shapebtn__img { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
:root .ccld-shapebtn__img svg { overflow: visible; }
/* Font picker */
:root .ccld-fontpick { position: relative; }
:root .ccld-fontpick__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; text-align: left; cursor: pointer; }
:root .ccld-fontpick__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
:root .ccld-fontpick__pop { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; }
:root .ccld-fontpick__search { margin-bottom: 6px; }
:root .ccld-fontpick__list { max-height: 320px; overflow-y: auto; }
:root .ccld-fontpick__group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); padding: 8px 6px 3px; }
:root .ccld-fontpick__opt { display: flex; flex-direction: column; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; text-align: left; color: var(--c-ink); }
:root .ccld-fontpick__opt:hover, :root .ccld-fontpick__opt:focus-visible, :root .ccld-fontpick__opt.is-active { background: var(--c-accent-soft); outline: none; }
:root .ccld-fontpick__opt.is-on { box-shadow: inset 3px 0 0 var(--c-accent); }
:root .ccld-fontpick__name { font-size: 18px; line-height: 1.25; }
:root .ccld-fontpick__meta { font-size: 11px; color: var(--c-muted); font-family: var(--f-ui); }
:root .ccld-fontpick__none { padding: 10px; color: var(--c-muted); }

/* ===================================================== accounts (0.4) */
:root .ccld-head__account { display: flex; gap: 8px; margin-left: auto; }
:root .ccld-head .ccld-head__account .ccld-btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }
:root .ccld-head .ccld-head__account .ccld-btn--ghost:hover { background: rgba(255,255,255,.1); }
:root .ccld-accountbox { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0 0 14px; border: 1px dashed var(--c-line-strong); border-radius: var(--radius); background: var(--c-accent-soft); font-size: 14px; }
:root .ccld-accountbox.is-in { border-style: solid; background: var(--c-page); }
:root .ccld-accountbox > .ccld-icon { flex: none; color: var(--c-accent); margin-top: 2px; }
:root .ccld-accountbox p { margin: 4px 0 8px; }
:root .ccld-accountbox .ccld-row { gap: 8px; flex-wrap: wrap; }
:root .ccld-accountbox .ccld-field { margin-top: 8px; }
:root .ccld-done .ccld-accountbox { text-align: left; margin-top: 18px; }
:root .ccld-auth__intro { margin: 0 0 12px; color: var(--c-ink-2); }
:root .ccld-auth__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-line); margin-bottom: 14px; flex-wrap: wrap; }
:root .ccld-auth__tab { appearance: none; border: 0; background: none; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--c-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
:root .ccld-auth__tab.is-on { color: var(--c-ink); border-bottom-color: var(--c-accent); font-weight: 600; }
:root .ccld-auth__tab:focus-visible { outline: 2px solid var(--c-accent-ring); outline-offset: 2px; }
:root .ccld-authform { display: grid; gap: 10px; max-width: 460px; }
:root .ccld-authform .ccld-btn { justify-self: start; }
:root .ccld-dialog--auth { max-width: 520px; width: 100%; }

/* Delivery choice (0.5): deliver or storage for fulfilment. */
:root .ccld-delivery__opts { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
:root .ccld-delivery__opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--c-line-strong); border-radius: 12px; background: #fff; cursor: pointer; }
:root .ccld-delivery__opt.is-on { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-ring); }
:root .ccld-delivery__opt input { accent-color: var(--c-accent); margin-top: 3px; }
:root .ccld-delivery__opt strong { display: block; font-size: 14px; }
:root .ccld-delivery__opt small { display: block; color: var(--c-ink-2); font-size: 12.5px; margin-top: 2px; }
:root .ccld-delivery__explain { color: var(--c-ink-2); font-size: 13.5px; margin: 4px 0 8px; }
:root .ccld-delivery .ccld-callout { margin-top: 6px; }