/* CityEL Teilekatalog
 * Layout: tab strip of assembly groups, then drawing (paper) beside a side pane
 * that shows either the parts list or the part detail; stacks in narrow containers.
 * Type and text colour come from the theme; surfaces use the theme's base colour.
 */
.ctk-app,
.ctk-cards,
.ctk-dl,
.ctk-lic {
	--ctk-accent: #0d5a75;
	--ctk-accent-ink: #fff;
	--ctk-surface: var(--wp--preset--color--base, #fff);
	--ctk-line: color-mix(in srgb, currentColor 16%, transparent);
	--ctk-soft: color-mix(in srgb, currentColor 5%, transparent);
	--ctk-muted: color-mix(in srgb, currentColor 62%, transparent);
	--ctk-hi: #ffc61a;
	--ctk-hi-soft: rgba(255, 198, 26, .3);
	--ctk-low: #c2410c;
	--ctk-ok: #15803d;
	--ctk-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--ctk-radius: 8px;
	--ctk-h: min(84vh, 920px);
	font-size: 15px;
	line-height: 1.45;
	box-sizing: border-box;
}
.ctk-app *, .ctk-app *::before, .ctk-app *::after, .ctk-cards * { box-sizing: border-box; }
.ctk-app.alignfull { padding-inline: max(16px, var(--wp--style--root--padding-left, 16px)); }
.ctk-app { container-type: inline-size; display: flex; flex-direction: column; gap: 10px; margin-block: 1.5em; }
.ctk-app [hidden] { display: none !important; }
.ctk-app button { font: inherit; color: inherit; }
.ctk-app h2, .ctk-app h3, .ctk-app h4, .ctk-app p, .ctk-app ul, .ctk-app dl, .ctk-app figure { margin: 0; }
.ctk-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ctk-loading { color: var(--ctk-muted); }
.ctk-ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.2em; }
.ctk-app :focus-visible { outline: 2px solid var(--ctk-accent); outline-offset: 2px; }

/* --- top: tabs ------------------------------------------------------ */
.ctk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ctk-tabs { display: flex; gap: 6px; overflow-x: auto; flex: 1 1 520px; min-width: 0; padding-bottom: 3px; scrollbar-width: thin; }
.ctk-tab { flex: none; display: flex; align-items: baseline; gap: 6px; padding: 6px 11px 7px; border: 1px solid var(--ctk-line); border-radius: 6px; background: var(--ctk-surface); cursor: pointer; text-align: left; }
.ctk-tab:hover { border-color: var(--ctk-accent); }
.ctk-tab__code { font-weight: 700; font-size: 1.1em; letter-spacing: -.01em; }
.ctk-tab__name { font-size: .84em; color: var(--ctk-muted); white-space: nowrap; }
.ctk-tab[aria-current="true"] { background: var(--ctk-accent); border-color: var(--ctk-accent); color: var(--ctk-accent-ink); }
.ctk-tab[aria-current="true"] .ctk-tab__name { color: inherit; opacity: .85; }
.ctk-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .86em; color: var(--ctk-muted); cursor: pointer; }

/* --- main panes ----------------------------------------------------- */
.ctk-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 420px); gap: 10px; height: var(--ctk-h); }
.ctk-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--ctk-surface); border: 1px solid var(--ctk-line); border-radius: var(--ctk-radius); overflow: hidden; }
.ctk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px solid var(--ctk-line); }
.ctk-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ctk-code { font-weight: 800; font-size: 2em; line-height: 1; color: var(--ctk-accent); min-width: 1.3em; letter-spacing: -.02em; }
.ctk-title { font-size: 1.2em; line-height: 1.15; font-weight: 650; text-wrap: balance; }
.ctk-subtitle { font-size: .8em; color: var(--ctk-muted); margin-top: 2px !important; }
.ctk-zoom { display: flex; gap: 4px; }
.ctk-zoom button { min-width: 34px; height: 32px; padding: 0 10px; border: 1px solid var(--ctk-line); border-radius: 6px; background: var(--ctk-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .85em; }
.ctk-zoom button:hover { border-color: var(--ctk-accent); color: var(--ctk-accent); }
.ctk-paper { flex: 1; min-height: 0; overflow: auto; background: var(--ctk-soft); padding: 12px; }
.ctk-stage { position: relative; margin: 0 auto; width: max-content; background: #fff; box-shadow: 0 0 0 1px var(--ctk-line); }
.ctk-stage img { display: block; max-width: none !important; height: auto !important; margin: 0; }
.ctk-marks { position: absolute; inset: 0; pointer-events: none; }
.ctk-mk { position: absolute; border-radius: 4px; background: var(--ctk-hi-soft); transition: background .12s, box-shadow .12s; }
.hide-marks .ctk-mk { background: transparent; }
.ctk-mk.is-hover { background: rgba(255, 198, 26, .55); box-shadow: 0 0 0 2px #16232c; }
.ctk-mk.is-sel { background: rgba(255, 198, 26, .75); box-shadow: 0 0 0 2px #16232c, 0 0 0 6px rgba(255, 198, 26, .5); }

/* --- list ----------------------------------------------------------- */
.ctk-listview { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ctk-listbar { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--ctk-line); }
.ctk-search, .ctk-input { width: 100%; font: inherit; font-size: .95em; padding: 7px 10px; border: 1px solid var(--ctk-line); border-radius: 6px; background: var(--ctk-surface); color: inherit; margin: 0; }
.ctk-stat { font-size: .78em; color: var(--ctk-muted); }
.ctk-tablewrap { flex: 1; min-height: 0; overflow: auto; }
.ctk-table { width: 100%; border-collapse: collapse; font-size: .86em; margin: 0; border: 0; }
.ctk-table th { position: sticky; top: 0; z-index: 1; background: var(--ctk-surface); text-align: left; font-size: .72em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--ctk-muted); padding: 8px 6px; border: 0; border-bottom: 1px solid var(--ctk-line); }
.ctk-table td { padding: 6px; border: 0; border-bottom: 1px solid var(--ctk-line); vertical-align: top; }
.ctk-table tbody tr { cursor: pointer; }
.ctk-table tbody tr:hover { background: var(--ctk-hi-soft); }
.ctk-table tbody tr.is-sel { background: color-mix(in srgb, var(--ctk-hi) 30%, var(--ctk-surface)); }
.ctk-table tbody tr.is-open td:first-child { box-shadow: inset 3px 0 0 var(--ctk-accent); }
.ctk-table .c-pos { width: 3em; font-family: var(--ctk-mono); font-variant-numeric: tabular-nums; }
.ctk-table .c-art { width: 5.8em; font-family: var(--ctk-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ctk-table .c-qty, .ctk-table .c-stock { width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.ctk-table .c-stock { font-weight: 650; }
.ctk-table .c-stock.is-empty { font-weight: 400; color: var(--ctk-muted); }
.ctk-table .c-stock.is-low { color: var(--ctk-low); }
.ctk-table .c-ico { width: 1px; white-space: nowrap; color: var(--ctk-accent); }
.ctk-table .c-ico .ctk-ico-wrap { margin-left: 2px; }
.ctk-table .is-nodraw .c-pos { color: var(--ctk-muted); }
.ctk-table .is-nodraw .c-pos::after { content: "·"; margin-left: 2px; }
.ctk-table .is-sub td { color: var(--ctk-muted); }
.ctk-de { display: block; }
.ctk-en { display: block; color: var(--ctk-muted); font-size: .9em; }

/* --- detail --------------------------------------------------------- */
.ctk-detail { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.ctk-dhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--ctk-surface); border-bottom: 1px solid var(--ctk-line); }
.ctk-dhead__pos { font-size: .8em; color: var(--ctk-muted); font-variant-numeric: tabular-nums; }
.ctk-dbody { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 16px; }
.ctk-dart { font-family: var(--ctk-mono); font-size: .85em; color: var(--ctk-accent); letter-spacing: .02em; }
.ctk-dtitle h3 { font-size: 1.35em; line-height: 1.2; font-weight: 700; text-wrap: balance; }
.ctk-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .88em; }
.ctk-facts dt { color: var(--ctk-muted); }
.ctk-facts dd { margin: 0; }
.ctk-also { display: flex; flex-wrap: wrap; gap: 4px; }
.ctk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--ctk-line); border-radius: 99px; background: var(--ctk-surface); font-size: .85em; cursor: pointer; text-decoration: none; color: inherit; line-height: 1.6; }
.ctk-chip:hover { border-color: var(--ctk-accent); color: var(--ctk-accent); }
.ctk-photo { border-radius: 6px; overflow: hidden; border: 1px solid var(--ctk-line); background: #fff; }
.ctk-photo img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.ctk-sec h4 { display: flex; align-items: center; gap: 6px; font-size: .78em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--ctk-muted); margin-bottom: 6px; }
.ctk-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ctk-links li { margin: 0; }
.ctk-link { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t i" "h i"; align-items: center; column-gap: 8px; padding: 8px 10px; border: 1px solid var(--ctk-line); border-radius: 6px; text-decoration: none !important; color: inherit !important; }
.ctk-link:hover { border-color: var(--ctk-accent); background: var(--ctk-soft); }
.ctk-link__t { grid-area: t; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ctk-link__h { grid-area: h; font-size: .8em; color: var(--ctk-muted); overflow-wrap: anywhere; }
.ctk-link .ctk-ico, .ctk-link .ctk-badge { grid-area: i; color: var(--ctk-accent); }
.ctk-link__n { display: block; font-size: .8em; color: var(--ctk-muted); padding: 2px 10px 0; }
.ctk-badge { font-size: .72em; padding: 1px 6px; border-radius: 4px; background: var(--ctk-soft); border: 1px solid var(--ctk-line); }
.ctk-note { white-space: pre-line; font-size: .92em; }
.ctk-empty { font-size: .9em; color: var(--ctk-muted); padding: 10px 12px; border: 1px dashed var(--ctk-line); border-radius: 6px; }
.ctk-hint { font-size: .8em; color: var(--ctk-muted); }

.ctk-stockbox { border: 1px solid var(--ctk-line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ctk-stockbox.is-low { border-color: var(--ctk-low); background: color-mix(in srgb, var(--ctk-low) 7%, var(--ctk-surface)); }
.ctk-stock__main { display: flex; align-items: center; gap: 10px; }
.ctk-stock__main > .ctk-ico { width: 1.6em; height: 1.6em; color: var(--ctk-accent); }
.ctk-stock__label { display: block; font-size: .75em; text-transform: uppercase; letter-spacing: .06em; color: var(--ctk-muted); }
.ctk-stock__qty { display: block; font-size: 1.7em; font-weight: 750; line-height: 1.05; font-variant-numeric: tabular-nums; }
.is-low .ctk-stock__qty { color: var(--ctk-low); }
.ctk-stock__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .84em; color: var(--ctk-muted); }
.ctk-stepper { margin-left: auto; display: flex; gap: 4px; }
.ctk-stepper button { width: 38px; height: 38px; border-radius: 6px; border: 1px solid var(--ctk-line); background: var(--ctk-surface); cursor: pointer; display: grid; place-items: center; }
.ctk-stepper button:hover { border-color: var(--ctk-accent); color: var(--ctk-accent); }
.ctk-stepper button:disabled { opacity: .5; cursor: progress; }

/* --- buttons -------------------------------------------------------- */
.ctk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctk-actions--sticky { position: sticky; bottom: -18px; padding: 10px 0 4px; background: var(--ctk-surface); border-top: 1px solid var(--ctk-line); }
.ctk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 6px; border: 1px solid var(--ctk-line); background: var(--ctk-surface); cursor: pointer; font-size: .9em; text-decoration: none !important; color: inherit !important; line-height: 1.3; }
.ctk-btn:hover { border-color: var(--ctk-accent); }
.ctk-btn--primary { background: var(--ctk-accent); border-color: var(--ctk-accent); color: var(--ctk-accent-ink) !important; font-weight: 600; }
.ctk-btn--primary:hover { filter: brightness(1.08); }
.ctk-btn--ghost { background: transparent; }
.ctk-btn:disabled { opacity: .6; cursor: progress; }
.ctk-iconbtn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ctk-muted); align-self: end; }
.ctk-iconbtn:hover { border-color: var(--ctk-low); color: var(--ctk-low); }

/* --- editor --------------------------------------------------------- */
.ctk-form { display: flex; flex-direction: column; gap: 14px; }
.ctk-fs { border: 1px solid var(--ctk-line); border-radius: 6px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ctk-fs legend { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: .78em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--ctk-muted); }
.ctk-rows { display: flex; flex-direction: column; gap: 10px; }
.ctk-rows:empty { display: none; }
.ctk-rowedit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--ctk-line); }
.ctk-rowedit > .ctk-field:nth-child(3):not(:last-child) { grid-column: 1 / 3; }
.ctk-rowedit > .ctk-iconbtn { grid-column: 3; grid-row: 1; }
.ctk-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctk-field__l { font-size: .75em; color: var(--ctk-muted); }
.ctk-file { font-family: var(--ctk-mono); font-size: .85em; padding: 7px 0; overflow-wrap: anywhere; }
.ctk-pagelink { padding: 7px 0; font-weight: 600; overflow-wrap: anywhere; }
.ctk-row-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ctk-photo-edit { display: flex; flex-direction: column; gap: 8px; }
.ctk-photo-edit img { max-width: 100%; max-height: 180px; object-fit: contain; align-self: flex-start; border-radius: 4px; border: 1px solid var(--ctk-line); background: #fff; }
.ctk-grid3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctk-grid3 > :last-child { grid-column: 1 / -1; }
.ctk-searchbox { position: relative; }
.ctk-sugg { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 2px); list-style: none; margin: 0; padding: 4px; background: var(--ctk-surface); border: 1px solid var(--ctk-line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); max-height: 260px; overflow: auto; }
.ctk-sugg li { margin: 0; }
.ctk-sugg button { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 4px; }
.ctk-sugg button:hover, .ctk-sugg button:focus { background: var(--ctk-soft); }
.ctk-sugg small { color: var(--ctk-muted); }
.ctk-sugg__none { padding: 7px 8px; color: var(--ctk-muted); font-size: .9em; }

/* --- toast ---------------------------------------------------------- */
.ctk-toast { position: fixed; z-index: 100000; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #16232c; color: #fff; padding: 9px 16px; border-radius: 6px; font-size: 14px; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
.ctk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ctk-toast.is-err { background: #9f1d1d; }

/* --- narrow containers ---------------------------------------------- */
@container (max-width: 860px) {
	.ctk-main { grid-template-columns: minmax(0, 1fr); height: auto; }
	.ctk-pane--draw .ctk-paper { height: 62vh; }
	.ctk-pane--side { max-height: 80vh; }
	.ctk-listview, .ctk-detail { min-height: 50vh; }
}
@container (max-width: 480px) {
	.ctk-rowedit { grid-template-columns: 1fr auto; }
	.ctk-rowedit > .ctk-field { grid-column: 1; }
	.ctk-rowedit > .ctk-iconbtn { grid-column: 2; grid-row: 1; }
	.ctk-grid3 { grid-template-columns: 1fr; }
	.ctk-tab__name { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ctk-mk, .ctk-toast { transition: none; } }

/* --- in wp-admin ---------------------------------------------------- */
.ctk-in-admin { --ctk-h: calc(100vh - 210px); --ctk-surface: #fff; font-size: 14px; }

/* --- part cards (shortcode / chapter box) ---------------------------- */
.ctk-cards { margin-block: 2em; }
.ctk-cards__h { font-size: 1.15em; margin: 0 0 .6em; }
.ctk-cards__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.ctk-card { margin: 0; display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 10px; border: 1px solid var(--ctk-line); border-radius: var(--ctk-radius); background: var(--ctk-surface); align-items: start; }
.ctk-card__img { width: 84px; height: 84px; border-radius: 6px; overflow: hidden; background: var(--ctk-soft); }
.ctk-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctk-card__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: .92em; }
.ctk-card__body p { margin: 0; }
.ctk-card__title { font-weight: 650; }
.ctk-mono { font-family: var(--ctk-mono); font-weight: 500; color: var(--ctk-accent); font-size: .9em; margin-right: 4px; }
.ctk-card__meta { font-size: .82em; color: var(--ctk-muted); }
.ctk-card__links { display: flex; flex-wrap: wrap; gap: 4px; }
.ctk-card__cat { font-size: .85em; }
.ctk-stock { font-size: .82em; font-weight: 600; color: var(--ctk-ok); }
.ctk-stock.is-low { color: var(--ctk-low); }

/* --- v1.1: type designation, guides, 3D pages ------------------------ */
.ctk-rowedit > :nth-child(n+4):not(.ctk-iconbtn) { grid-column: 1 / 3; }
.ctk-rowedit--wide2 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; }
.ctk-rowedit > .ctk-pageline { grid-column: 1 / -1; }
.ctk-type { display: inline-block; margin-top: 2px; font-family: var(--ctk-mono); font-size: .82em; padding: 0 5px; border-radius: 4px; background: var(--ctk-soft); border: 1px solid var(--ctk-line); }
.ctk-typedd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctk-typeval { font-family: var(--ctk-mono); font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--ctk-soft); border: 1px solid var(--ctk-line); }
.ctk-copy { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ctk-line); border-radius: 6px; background: var(--ctk-surface); cursor: pointer; }
.ctk-copy:hover { border-color: var(--ctk-accent); color: var(--ctk-accent); }
.ctk-input--mono { font-family: var(--ctk-mono); }
.ctk-model { display: flex; flex-direction: column; }
.ctk-model .ctk-link { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ctk-model__acts { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 10px; border: 1px solid var(--ctk-line); border-top: 0; border-radius: 0 0 6px 6px; font-size: .82em; }
.ctk-model__acts a { display: inline-flex; align-items: center; gap: 4px; color: var(--ctk-accent); text-decoration: none; }
.ctk-model__acts a:hover { text-decoration: underline; }
.ctk-pageline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .82em; color: var(--ctk-muted); margin: 0; }
.ctk-pageline a { color: var(--ctk-accent); font-weight: 600; }
.ctk-check { cursor: pointer; color: inherit; }
.ctk-card__type { font-size: .82em; }

/* download box on a 3D page */
.ctk-dl { display: flex; flex-direction: column; gap: 0; padding: 0 14px; margin-block: 0 1.5em; border: 1px solid var(--ctk-line); border-radius: var(--ctk-radius); background: var(--ctk-soft); }
.ctk-dl__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; }
.ctk-dl__row + .ctk-dl__row { border-top: 1px solid var(--ctk-line); }
.ctk-dl .ctk-dl__ext--link { background: transparent; color: var(--ctk-accent); border: 2px solid var(--ctk-accent); font-size: 1.4em; }
.ctk-dl__file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ctk-dl__file strong { display: block; overflow-wrap: anywhere; }
.ctk-dl__file small { display: block; color: var(--ctk-muted); }
.ctk-dl__ext { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 8px; background: var(--ctk-accent); color: var(--ctk-accent-ink); font-weight: 800; font-size: .85em; letter-spacing: .03em; }
.ctk-dl .ctk-btn--primary { font-size: 1em; }

/* 3D overview grid */
.ctk-mgrid { display: flex; flex-direction: column; gap: 12px; }
.ctk-mgrid__search { max-width: 420px; }
.ctk-mgrid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.ctk-mcard { margin: 0; }
.ctk-mcard[hidden] { display: none; }
.ctk-mcard__link { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--ctk-line); border-radius: var(--ctk-radius); overflow: hidden; background: var(--ctk-surface); color: inherit !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.ctk-mcard__link:hover { border-color: var(--ctk-accent); box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
.ctk-mcard__img { aspect-ratio: 4 / 3; background: var(--ctk-soft); overflow: hidden; max-width: 100%; }
.ctk-mcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.ctk-mcard__ph { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; font-size: 1.6em; letter-spacing: .04em; color: var(--ctk-accent); }
.ctk-mcard__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ctk-mcard__t { font-size: 1.05em; line-height: 1.25; margin: 0; text-wrap: balance; }
.ctk-mcard__ex { font-size: .88em; margin: 0; color: var(--ctk-muted); }
.ctk-mcard__meta { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8em; }
.ctk-mcard__parts { color: var(--ctk-muted); }
@media (prefers-reduced-motion: reduce) { .ctk-mcard__link { transition: none; } }

/* featured image on a 3D page (when the theme does not show it) */
.ctk-hero { margin: 0 0 1.25em; border-radius: var(--ctk-radius, 8px); overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); background: #fff; }
.ctk-hero a { display: block; }
.ctk-hero img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; margin: 0; }

/* narrow side pane: name + remove in one row, everything else full width */
@container (max-width: 480px) {
	.ctk-rowedit, .ctk-rowedit--wide2 { grid-template-columns: minmax(0, 1fr) auto; }
	.ctk-rowedit > .ctk-field:not(:first-child), .ctk-rowedit > .ctk-pageline { grid-column: 1 / -1; }
}

/* variants */
.ctk-app .ctk-linkbtn, .ctk-linkbtn { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--ctk-accent); cursor: pointer; font-size: inherit; font-weight: 600; }
.ctk-app .ctk-linkbtn:hover, .ctk-linkbtn:hover { text-decoration: underline; }
.ctk-newvar { flex-basis: 100%; color: var(--ctk-ok); }
.ctk-dl__row--all { background: transparent; }

/* preview images (1.3) */
.ctk-link.has-thumb { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img t i" "img h i"; }
.ctk-link__img { grid-area: img; width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--ctk-soft); margin: 0; }
.ctk-dl__ext.has-img { position: relative; padding: 0; overflow: hidden; background: #f2f4f6; text-decoration: none; }
.ctk-dl .ctk-dl__ext.has-img { width: 72px; height: 72px; }
.ctk-dl__ext.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.ctk-dl__ext.has-img em { position: absolute; left: 0; bottom: 0; padding: 1px 5px; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .04em; background: var(--ctk-accent); color: var(--ctk-accent-ink); border-top-right-radius: 4px; }

/* link preview control in the editor (1.3.1) */
.ctk-rowedit > .ctk-lp { grid-column: 1 / -1; }
.ctk-lp { display: flex; gap: 10px; align-items: center; font-size: .8em; color: var(--ctk-muted); }
.ctk-lp img, .ctk-lp__ph { flex: none; width: 44px; height: 44px; border-radius: 4px; object-fit: cover; background: var(--ctk-soft); border: 1px solid var(--ctk-line); display: grid; place-items: center; margin: 0; }
.ctk-lp__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctk-lp__err { color: var(--ctk-low); overflow-wrap: anywhere; }
.ctk-lp__acts { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.ctk-app .ctk-linkbtn:disabled { opacity: .5; cursor: progress; }

/* licence block on a 3D page (1.4) */
.ctk-lic { margin-block: 0 1.5em; padding: 12px 14px; border: 1px solid var(--ctk-line); border-radius: var(--ctk-radius); }
.ctk-lic p { margin: 0; }
.ctk-lic__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 4px !important; }
.ctk-lic__head strong { font-size: 1.05em; }
.ctk-lic__short { font-weight: 700; letter-spacing: .02em; font-size: .9em; }
.ctk-lic__icons { display: inline-flex; gap: 4px; color: var(--ctk-accent); }
.ctk-lic__ico { width: 26px; height: 26px; }
.ctk-lic__text { font-size: .92em; }
.ctk-lic__text a { color: var(--ctk-accent); }
.ctk-badge--lic { font-weight: 600; }
