/*!
 * TRW Thumbnail & Banner Maker — editor styles. Everything is scoped to .trw-tbm.
 * License: GPL-2.0-or-later
 */
@font-face { font-family: 'TRW Poppins'; src: url('../fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TRW Poppins'; src: url('../fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'TRW Poppins'; src: url('../fonts/Poppins-Bold.ttf') format('truetype'); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'TRW Poppins'; src: url('../fonts/Poppins-Italic.ttf') format('truetype'); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'TRW Poppins'; src: url('../fonts/Poppins-BoldItalic.ttf') format('truetype'); font-weight: 600 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'TRW Lora'; src: url('../fonts/Lora-Variable.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'TRW Lora'; src: url('../fonts/Lora-Italic-Variable.ttf') format('truetype'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'TRW Condensed'; src: url('../fonts/DejaVuSansCondensed-Bold.ttf') format('truetype'); font-weight: 400 900; font-style: normal; font-display: swap; }

.trw-tbm {
	--trw-ink: #16202a;
	--trw-muted: #5a6670;
	--trw-line: #d9e0dd;
	--trw-panel: #ffffff;
	--trw-soft: #f2f5f4;
	--trw-mat: #1d5646;
	--trw-accent: #ffc21a;
	--trw-accent-ink: #16202a;
	--trw-select: #2e7dff;
	--trw-safe: #22d3ee;
	--trw-warn: #e5392f;
	--trw-radius: 10px;
	--trw-font: 'TRW Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	display: block;
	max-width: 100%;
	margin: 1.5em 0;
	color: var(--trw-ink);
	font: 14px/1.45 var(--trw-font);
	text-align: left;
}
.trw-tbm *, .trw-tbm *::before, .trw-tbm *::after { box-sizing: border-box; }
.trw-tbm button, .trw-tbm input, .trw-tbm select, .trw-tbm textarea {
	font: inherit; color: inherit; letter-spacing: normal; text-transform: none; margin: 0; line-height: 1.3; box-shadow: none; text-shadow: none;
}
.trw-tbm button { cursor: pointer; background: none; border: 0; padding: 0; min-height: 0; width: auto; border-radius: 0; }
.trw-tbm button:disabled { cursor: not-allowed; opacity: .45; }
.trw-tbm :focus-visible { outline: 2px solid var(--trw-select); outline-offset: 2px; }
.trw-tbm h3, .trw-tbm h4, .trw-tbm p { margin: 0; padding: 0; border: 0; letter-spacing: normal; text-transform: none; }
.trw-tbm img { max-width: 100%; height: auto; border: 0; box-shadow: none; }
.trw-tbm ol, .trw-tbm ul { margin: 0; padding: 0; list-style: none; }
.trw-tbm [hidden] { display: none !important; }
.trw-tbm .trw-ico { display: block; flex: none; }
.trw-tbm .trw-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trw-tbm noscript, .trw-tbm .trw-tbm__boot { display: block; padding: 2em; background: var(--trw-soft); border-radius: var(--trw-radius); }
html.trw-noscroll, html.trw-noscroll body { overflow: hidden !important; }

/* ---------------------------------------------------------------- app frame */
.trw-tbm .trw-app {
	display: grid;
	grid-template-rows: auto 1fr;
	height: clamp(640px, 88vh, 1000px);
	background: var(--trw-panel);
	border: 1px solid var(--trw-line);
	border-radius: 14px;
	overflow: hidden;
	position: relative;
}
.trw-tbm .trw-app.is-fullscreen { position: fixed; inset: 0; z-index: 999999; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }

/* header */
.trw-tbm .trw-top {
	display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; align-items: center; gap: 12px;
	padding: 8px 12px; border-bottom: 1px solid var(--trw-line); background: var(--trw-panel);
}
.trw-tbm .trw-name {
	width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: transparent; font-weight: 600; font-size: 15px;
}
.trw-tbm .trw-name:hover, .trw-tbm .trw-name:focus { border-color: var(--trw-line); background: var(--trw-soft); }
.trw-tbm .trw-steps { display: flex; justify-content: center; gap: 2px; min-width: 0; overflow: hidden; }
.trw-tbm .trw-step {
	display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; color: var(--trw-muted); white-space: nowrap; font-size: 13px;
}
.trw-tbm .trw-step:hover { background: var(--trw-soft); color: var(--trw-ink); }
.trw-tbm .trw-step__n {
	display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11px; font-weight: 600;
}
.trw-tbm .trw-step.is-done .trw-step__n { background: var(--trw-ink); border-color: var(--trw-ink); color: #fff; }
.trw-tbm .trw-step.is-current { color: var(--trw-ink); font-weight: 600; background: var(--trw-soft); }
.trw-tbm .trw-step.is-current .trw-step__n { background: var(--trw-accent); border-color: var(--trw-accent); color: var(--trw-accent-ink); }
.trw-tbm .trw-top__actions { display: flex; align-items: center; gap: 4px; }
.trw-tbm .trw-sep { width: 1px; height: 22px; background: var(--trw-line); margin: 0 4px; }
.trw-tbm .trw-zoom { min-width: 52px; padding: 6px 4px; border-radius: 8px; font-variant-numeric: tabular-nums; font-size: 13px; }
.trw-tbm .trw-zoom:hover { background: var(--trw-soft); }

/* buttons */
.trw-tbm .trw-ibtn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--trw-ink); flex: none; }
.trw-tbm .trw-ibtn:hover { background: var(--trw-soft); }
.trw-tbm .trw-ibtn.is-on { background: var(--trw-ink); color: #fff; }
.trw-tbm .trw-ibtn.is-danger:hover { color: var(--trw-warn); }
.trw-tbm .trw-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 9px;
	background: var(--trw-ink); color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap;
}
.trw-tbm .trw-btn:hover { background: #26323d; }
.trw-tbm .trw-btn--primary { background: var(--trw-accent); color: var(--trw-accent-ink); }
.trw-tbm .trw-btn--primary:hover { background: var(--trw-accent); filter: brightness(1.06); }
.trw-tbm .trw-btn--quiet { background: var(--trw-soft); color: var(--trw-ink); }
.trw-tbm .trw-btn--quiet:hover { background: #e4eae8; }
.trw-tbm .trw-btn--quiet.is-on { background: var(--trw-ink); color: #fff; }
.trw-tbm .trw-top .trw-btn--quiet { background: transparent; color: var(--trw-muted); }
.trw-tbm .trw-top .trw-btn--quiet.is-on { color: var(--trw-ink); background: var(--trw-soft); }
.trw-tbm .trw-btn--sm { padding: 6px 10px; font-size: 12.5px; border-radius: 8px; }

/* ---------------------------------------------------------------- body grid */
.trw-tbm .trw-body { display: grid; grid-template-columns: 76px 264px minmax(0, 1fr) 296px; min-height: 0; }
.trw-tbm .trw-tools { display: contents; }
.trw-tbm .trw-tabs { grid-column: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border-right: 1px solid var(--trw-line); background: var(--trw-soft); overflow-y: auto; }
.trw-tbm .trw-tab {
	display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px; border-radius: 10px; color: var(--trw-muted); font-size: 11px; text-align: center;
}
.trw-tbm .trw-tab:hover { color: var(--trw-ink); background: #e6ecea; }
.trw-tbm .trw-tab[aria-selected="true"] { color: var(--trw-ink); background: var(--trw-panel); box-shadow: 0 0 0 1px var(--trw-line); font-weight: 600; }
.trw-tbm .trw-tab--mobile { display: none; }
.trw-tbm .trw-panels { grid-column: 2; overflow-y: auto; border-right: 1px solid var(--trw-line); background: var(--trw-panel); min-height: 0; }
.trw-tbm .trw-pad { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.trw-tbm .trw-h3 { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--trw-ink); }
.trw-tbm .trw-h4 { font-size: 12.5px; font-weight: 600; color: var(--trw-muted); margin-top: 4px; }
.trw-tbm .trw-mt { margin-top: 10px; }
.trw-tbm .trw-help { font-size: 12.5px; color: var(--trw-muted); line-height: 1.45; }
.trw-tbm .is-error { color: var(--trw-warn) !important; }
.trw-tbm .trw-row { display: flex; align-items: center; gap: 6px; }
.trw-tbm .trw-wrap { flex-wrap: wrap; }
.trw-tbm .trw-stack { display: flex; flex-direction: column; gap: 6px; }

/* size panel */
.trw-tbm .trw-plist { display: flex; flex-direction: column; gap: 2px; }
.trw-tbm .trw-preset, .trw-tbm .trw-sizechip__main {
	display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 8px; text-align: left;
}
.trw-tbm .trw-preset:hover, .trw-tbm .trw-sizechip__main:hover { background: var(--trw-soft); }
.trw-tbm .trw-preset.is-active { background: var(--trw-ink); color: #fff; }
.trw-tbm .trw-preset.is-active .trw-preset__d { color: #c9d3d0; }
.trw-tbm .trw-preset.is-inproject:not(.is-active) .trw-preset__n::after { content: ' (in design)'; color: var(--trw-muted); font-weight: 400; }
.trw-tbm .trw-preset__ico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; }
.trw-tbm .trw-preset__shape { display: block; border: 1.5px solid currentColor; border-radius: 2px; opacity: .8; }
.trw-tbm .trw-preset__t { display: flex; flex-direction: column; min-width: 0; }
.trw-tbm .trw-preset__n { font-weight: 500; font-size: 13px; line-height: 1.3; }
.trw-tbm .trw-preset__d { font-size: 11.5px; color: var(--trw-muted); font-variant-numeric: tabular-nums; }
.trw-tbm .trw-sizes { display: flex; flex-direction: column; gap: 4px; }
.trw-tbm .trw-sizechip { display: flex; align-items: center; border: 1px solid var(--trw-line); border-radius: 10px; padding-right: 2px; }
.trw-tbm .trw-sizechip.is-active { border-color: var(--trw-ink); box-shadow: inset 3px 0 0 var(--trw-accent); }
.trw-tbm .trw-refit select { flex: 1; min-width: 0; }
.trw-tbm .trw-custom input { width: 84px; }
.trw-tbm .trw-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--trw-soft); border-radius: 9px; }
.trw-tbm .trw-seg__b { flex: 1; padding: 6px 8px; border-radius: 7px; font-size: 12.5px; color: var(--trw-muted); }
.trw-tbm .trw-seg__b[aria-checked="true"] { background: var(--trw-panel); color: var(--trw-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(22,32,42,.12); }

/* templates */
.trw-tbm .trw-tplgrid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.trw-tbm .trw-tpl { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; border: 1px solid var(--trw-line); }
.trw-tbm .trw-tpl:hover, .trw-tbm .trw-tpl:focus-within { border-color: var(--trw-ink); }
.trw-tbm .trw-tpl__pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; }
.trw-tbm .trw-tplbox { position: relative; display: grid; place-items: center; width: 100%; min-height: 90px; margin-bottom: 6px; }
.trw-tbm .trw-tplcv { display: block; max-width: 100%; max-height: 170px; background: var(--trw-soft); border-radius: 4px; }
.trw-tbm .trw-tplstate { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--trw-muted); background: var(--trw-soft); border-radius: 4px; }
.trw-tbm .trw-tpl__n { font-weight: 600; font-size: 13px; }
.trw-tbm .trw-tpl__c { font-size: 11.5px; color: var(--trw-muted); }

/* photos */
.trw-tbm .trw-upload {
	display: grid; justify-items: center; gap: 4px; padding: 18px 12px; border: 1.5px dashed #b7c3bf; border-radius: 12px; text-align: center; background: var(--trw-soft);
}
.trw-tbm .trw-upload:hover { border-color: var(--trw-ink); }
.trw-tbm .trw-upload__t { font-weight: 600; }
.trw-tbm .trw-upload__s { font-size: 12px; color: var(--trw-muted); }
.trw-tbm .trw-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trw-tbm .trw-photo { border: 1px solid var(--trw-line); border-radius: 10px; overflow: hidden; }
.trw-tbm .trw-photo img { display: block; width: 100%; height: 90px; object-fit: cover; background: repeating-conic-gradient(#e3e6e8 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.trw-tbm .trw-photo__a { display: flex; gap: 4px; padding: 6px; }
.trw-tbm .trw-photo__a .trw-btn { flex: 1; padding: 5px 4px; font-size: 11.5px; }

/* text + shapes */
.trw-tbm .trw-addtext { padding: 12px; border-radius: 10px; background: var(--trw-soft); text-align: left; }
.trw-tbm .trw-addtext:hover { background: #e4eae8; }
.trw-tbm .trw-addtext.is-h1 { font-size: 22px; font-weight: 700; line-height: 1.15; }
.trw-tbm .trw-addtext.is-h2 { font-size: 16px; font-weight: 500; }
.trw-tbm .trw-addtext.is-p { font-size: 13px; }
.trw-tbm .trw-addtext.is-style { font-weight: 500; }
.trw-tbm .trw-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.trw-tbm .trw-shape { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--trw-soft); font-size: 11.5px; }
.trw-tbm .trw-shape:hover { background: #e4eae8; }

/* layers */
.trw-tbm .trw-layers { display: flex; flex-direction: column; gap: 2px; }
.trw-tbm .trw-layer { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.trw-tbm .trw-layer.is-on { background: var(--trw-soft); box-shadow: inset 3px 0 0 var(--trw-select); }
.trw-tbm .trw-layer.is-hidden .trw-layer__sel { opacity: .5; }
.trw-tbm .trw-layer__sel { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px; min-width: 0; text-align: left; font-size: 13px; }
.trw-tbm .trw-layer__sel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* designs */
.trw-tbm .trw-designs { display: flex; flex-direction: column; gap: 8px; }
.trw-tbm .trw-design { display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; align-items: center; padding: 8px; border: 1px solid var(--trw-line); border-radius: 10px; }
.trw-tbm .trw-design.is-current { border-color: var(--trw-ink); }
.trw-tbm .trw-design img, .trw-tbm .trw-design__ph { width: 64px; height: 44px; object-fit: contain; background: var(--trw-soft); border-radius: 4px; }
.trw-tbm .trw-design__t { display: flex; flex-direction: column; min-width: 0; }
.trw-tbm .trw-design__n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trw-tbm .trw-design .trw-row { grid-column: 1 / -1; justify-content: flex-end; }

/* ---------------------------------------------------------------- stage: the cutting mat */
.trw-tbm .trw-stage {
	grid-column: 3; position: relative; min-width: 0; min-height: 0; overflow: hidden;
	background-color: var(--trw-mat);
	background-image:
		linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px),
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: -1px -1px;
}
.trw-tbm .trw-canvas { position: absolute; inset: 0; display: block; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; }
.trw-tbm .trw-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--trw-accent); }
.trw-tbm .trw-badge {
	position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; max-width: calc(100% - 20px);
	color: #e8f2ee; font-size: 12px; white-space: nowrap; pointer-events: none;
}
.trw-tbm .trw-badge__name { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.trw-tbm .trw-chip { padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.trw-tbm .trw-issues {
	position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
	background: var(--trw-warn); color: #fff; font-weight: 600; font-size: 12.5px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.trw-tbm .trw-cropbar {
	position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px;
	background: var(--trw-ink); color: #fff; font-size: 13px; z-index: 2;
}
.trw-tbm .trw-toast {
	position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); max-width: min(520px, calc(100% - 24px)); padding: 9px 14px; border-radius: 10px;
	background: var(--trw-ink); color: #fff; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.3); z-index: 3;
}
.trw-tbm .trw-toast.is-error { background: var(--trw-warn); }
.trw-tbm .trw-empty {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; gap: 12px; justify-items: center; text-align: center;
	padding: 22px 24px; max-width: calc(100% - 32px); background: rgba(255,255,255,.96); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.trw-tbm .trw-empty__t { font-size: 17px; font-weight: 600; }
.trw-tbm .trw-empty__a { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.trw-tbm .trw-empty__s { font-size: 12px; color: var(--trw-muted); }
.trw-tbm .trw-drop { position: absolute; inset: 10px; display: grid; place-items: center; border: 2px dashed #fff; border-radius: 14px; background: rgba(29,86,70,.75); color: #fff; font-weight: 600; font-size: 18px; z-index: 4; pointer-events: none; }
.trw-tbm .trw-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(22,32,42,.45); color: #fff; font-weight: 600; z-index: 5; }
.trw-tbm .trw-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: trw-spin .8s linear infinite; }
@keyframes trw-spin { to { transform: rotate(360deg); } }
.trw-tbm .trw-resume {
	position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px;
	background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 13px; z-index: 3; max-width: calc(100% - 20px);
}
.trw-tbm .trw-resume span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- inspector */
.trw-tbm .trw-inspector { grid-column: 4; overflow-y: auto; border-left: 1px solid var(--trw-line); background: var(--trw-panel); min-height: 0; }
.trw-tbm .trw-ins__head { display: flex; align-items: center; gap: 2px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--trw-line); position: sticky; top: 0; background: var(--trw-panel); z-index: 1; }
.trw-tbm .trw-ins__head .trw-h3 { padding: 4px 0; }
.trw-tbm .trw-ins__name { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 7px; padding: 5px 6px; font-weight: 600; background: transparent; }
.trw-tbm .trw-ins__name:hover, .trw-tbm .trw-ins__name:focus { border-color: var(--trw-line); }
.trw-tbm .trw-sec { border-bottom: 1px solid var(--trw-line); padding: 0 14px; }
.trw-tbm .trw-sec > summary { list-style: none; cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; }
.trw-tbm .trw-sec > summary::-webkit-details-marker { display: none; }
.trw-tbm .trw-sec > summary::after { content: ''; width: 8px; height: 8px; border-right: 1.8px solid var(--trw-muted); border-bottom: 1.8px solid var(--trw-muted); transform: rotate(45deg); margin-top: -4px; }
.trw-tbm .trw-sec[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.trw-tbm .trw-sec[open] { padding-bottom: 14px; }
.trw-tbm .trw-sec > *:not(summary) + *:not(summary) { margin-top: 10px; }
.trw-tbm .trw-field { display: flex; flex-direction: column; gap: 4px; }
.trw-tbm .trw-field__l { font-size: 12px; color: var(--trw-muted); }
.trw-tbm .trw-field.is-color { flex-direction: row; align-items: center; justify-content: space-between; }
.trw-tbm input[type="text"], .trw-tbm input[type="number"], .trw-tbm select, .trw-tbm textarea {
	width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid var(--trw-line); border-radius: 8px; background: #fff; font-size: 13.5px;
}
.trw-tbm .trw-name, .trw-tbm .trw-ins__name { min-height: 0; }
.trw-tbm .trw-textarea { resize: vertical; min-height: 72px; font-size: 14px; }
.trw-tbm input[type="color"] { width: 44px; height: 30px; padding: 2px; border: 1px solid var(--trw-line); border-radius: 7px; background: #fff; cursor: pointer; }
.trw-tbm input[type="range"] { flex: 1; min-width: 0; accent-color: var(--trw-ink); height: 24px; background: transparent; border: 0; padding: 0; }
.trw-tbm input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--trw-ink); margin: 0; }
.trw-tbm .trw-range { display: flex; align-items: center; gap: 8px; }
.trw-tbm .trw-range__n { width: 64px !important; flex: none; }
.trw-tbm .trw-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.trw-tbm .trw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trw-tbm .trw-align { justify-content: space-between; }
.trw-tbm .trw-order .trw-btn { flex: 1; }
.trw-tbm .trw-sizeinfo { display: flex; flex-direction: column; }
.trw-tbm .trw-sizeinfo strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.trw-tbm .trw-issuelist { display: flex; flex-direction: column; gap: 6px; }
.trw-tbm .trw-issue { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: #fdecea; text-align: left; font-size: 12.5px; }
.trw-tbm .trw-issue.is-warn .trw-ico { color: var(--trw-warn); }
.trw-tbm .trw-issue.is-info { background: var(--trw-soft); }
.trw-tbm .trw-ok { font-size: 13px; color: #1f7a4d; }

/* ---------------------------------------------------------------- export dialog */
.trw-tbm .trw-overlay { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(12,20,26,.55); }
.trw-tbm .trw-app.is-fullscreen .trw-overlay { position: fixed; }
.trw-tbm .trw-modal { width: min(1040px, 100%); max-height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; }
.trw-tbm .trw-modal__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--trw-line); }
.trw-tbm .trw-modal__body { display: grid; grid-template-columns: 280px 1fr; min-height: 0; overflow: hidden; }
.trw-tbm .trw-modal__side { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-right: 1px solid var(--trw-line); overflow-y: auto; }
.trw-tbm .trw-modal__side > .trw-btn--primary { margin-top: auto; padding: 12px; font-size: 14.5px; }
.trw-tbm .trw-explist { display: flex; flex-direction: column; gap: 8px; }
.trw-tbm .trw-previews { padding: 16px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-content: start; background: var(--trw-soft); }
.trw-tbm .trw-prev { margin: 0; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--trw-line); }
.trw-tbm .trw-prev__img { display: grid; place-items: center; padding: 10px; background: #e9eeec; min-height: 140px; }
.trw-tbm .trw-prev__img.is-checker { background: repeating-conic-gradient(#e3e6e8 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.trw-tbm .trw-prev__img img { max-height: 260px; width: auto; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.trw-tbm .trw-prev figcaption { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.trw-tbm .trw-notes { font-size: 12px; color: var(--trw-warn); }
.trw-tbm .trw-notes li { margin: 2px 0; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1540px) {
	.trw-tbm .trw-step__l { display: none; }
	.trw-tbm .trw-step.is-current .trw-step__l { display: inline; }
}
@media (max-width: 1280px) {
	.trw-tbm .trw-body { grid-template-columns: 70px 240px minmax(0, 1fr) 270px; }
}
@media (max-width: 1060px) {
	.trw-tbm .trw-top { grid-template-columns: 1fr auto; }
	.trw-tbm .trw-steps { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; overflow-x: auto; }
	.trw-tbm .trw-body { grid-template-columns: 64px 220px minmax(0, 1fr) 250px; }
	.trw-tbm .trw-guidetxt { display: none; }
}
@media (max-width: 900px) {
	.trw-tbm .trw-app { height: auto; grid-template-rows: auto auto; }
	.trw-tbm .trw-app.is-fullscreen { grid-template-rows: auto 1fr; height: 100dvh; }
	.trw-tbm .trw-top { grid-template-columns: 1fr; gap: 6px; padding: 8px; }
	.trw-tbm .trw-top__actions { flex-wrap: wrap; justify-content: space-between; gap: 2px; }
	.trw-tbm .trw-top__actions .trw-btn--quiet span { display: none; }
	.trw-tbm .trw-top__actions .trw-btn--primary { margin-left: auto; }
	.trw-tbm .trw-steps { grid-row: auto; }
	.trw-tbm .trw-body { grid-template-columns: 1fr; grid-template-rows: 56vh auto auto; }
	.trw-tbm .trw-app.is-fullscreen .trw-body { grid-template-rows: minmax(0, 1fr) auto minmax(0, 38dvh); }
	.trw-tbm .trw-stage { grid-column: 1; grid-row: 1; min-height: 300px; }
	.trw-tbm .trw-tabs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; border-right: 0; border-top: 1px solid var(--trw-line); border-bottom: 1px solid var(--trw-line); padding: 4px; }
	.trw-tbm .trw-tab { flex: 1 0 64px; padding: 7px 4px; }
	.trw-tbm .trw-tab--mobile { display: flex; }
	.trw-tbm .trw-panels, .trw-tbm .trw-inspector { grid-column: 1; grid-row: 3; border: 0; max-height: none; }
	.trw-tbm .trw-app.is-fullscreen .trw-panels, .trw-tbm .trw-app.is-fullscreen .trw-inspector { overflow-y: auto; }
	.trw-tbm .trw-app[data-mtab="edit"] .trw-panels { display: none; }
	.trw-tbm .trw-app:not([data-mtab="edit"]) .trw-inspector { display: none; }
	.trw-tbm .trw-ins__head { position: static; }
	.trw-tbm .trw-tplgrid, .trw-tbm .trw-photos { grid-template-columns: 1fr 1fr; }
	.trw-tbm .trw-shapes { grid-template-columns: repeat(4, 1fr); }
	.trw-tbm .trw-modal__body { grid-template-columns: 1fr; overflow-y: auto; }
	.trw-tbm .trw-modal__side { border-right: 0; border-bottom: 1px solid var(--trw-line); }
	.trw-tbm .trw-previews { overflow: visible; grid-template-columns: 1fr; }
	.trw-tbm .trw-ibtn { width: 40px; height: 40px; }
	.trw-tbm input[type="text"], .trw-tbm input[type="number"], .trw-tbm select, .trw-tbm textarea { font-size: 16px; }
}
@media (max-width: 520px) {
	.trw-tbm .trw-step { padding: 5px 6px; }
	.trw-tbm .trw-tplgrid { grid-template-columns: 1fr; }
	.trw-tbm .trw-badge__name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.trw-tbm .trw-spin { animation-duration: 2.4s; }
}

/* ---------------------------------------------------------------- 1.1.0 additions */
.trw-tbm .trw-search { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--trw-line); border-radius: 9px; background: #fff; font-size: 14px; -webkit-appearance: none; appearance: none; }
.trw-tbm .trw-cats { display: flex; flex-direction: column; gap: 4px; }
.trw-tbm .trw-cat { border: 1px solid var(--trw-line); border-radius: 10px; padding: 0 6px; }
.trw-tbm .trw-cat > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; font-weight: 600; font-size: 13.5px; min-height: 44px; }
.trw-tbm .trw-cat > summary::-webkit-details-marker { display: none; }
.trw-tbm .trw-cat[open] > summary { border-bottom: 1px solid var(--trw-line); margin-bottom: 4px; }
.trw-tbm .trw-cat[open] { padding-bottom: 6px; }
.trw-tbm .trw-count { font-weight: 500; font-size: 12px; color: var(--trw-muted); background: var(--trw-soft); border-radius: 999px; padding: 1px 8px; }
.trw-tbm .trw-modal__pad { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.trw-tbm .trw-modal:has(.trw-modal__pad) { width: min(560px, 100%); }
.trw-tbm .trw-choices { display: grid; gap: 6px; }
.trw-tbm .trw-choice { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1.5px solid var(--trw-line); border-radius: 10px; text-align: left; min-height: 44px; }
.trw-tbm .trw-choice[aria-checked="true"] { border-color: var(--trw-ink); box-shadow: inset 4px 0 0 var(--trw-accent); background: #fbfcfc; }
.trw-tbm .trw-btn--block { width: 100%; padding: 12px; font-size: 14.5px; margin-top: 6px; }
.trw-tbm .trw-resizebar {
	position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
	padding: 6px 6px 6px 12px; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 13px; max-width: calc(100% - 20px);
}
.trw-tbm .trw-resizebar select { width: auto; min-height: 34px; }
.trw-tbm .trw-quick {
	position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 3; display: flex; gap: 2px; padding: 4px; border-radius: 12px;
	background: var(--trw-ink); box-shadow: 0 6px 20px rgba(0,0,0,.3); max-width: calc(100% - 16px); overflow-x: auto;
}
.trw-tbm .trw-quick .trw-arr { color: #fff; width: 44px; height: 44px; justify-content: center; padding: 0; background: transparent; }
.trw-tbm .trw-quick .trw-arr:hover { background: rgba(255,255,255,.12); }
.trw-tbm .trw-quick .trw-arr.is-danger { color: #ff8a80; }
.trw-tbm .trw-arrgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.trw-tbm .trw-arr { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border-radius: 9px; background: var(--trw-soft); font-size: 13px; font-weight: 500; text-align: left; }
.trw-tbm .trw-arr:hover { background: #e4eae8; }
.trw-tbm .trw-arr.is-danger { color: var(--trw-warn); }
.trw-tbm .trw-issue { cursor: default; }
.trw-tbm .trw-issue__b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trw-tbm .trw-note { font-size: 12.5px; line-height: 1.45; padding: 8px 10px; border-radius: 8px; background: #fff7e0; color: #5a4300; }
.trw-tbm .trw-legend { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--trw-muted); }
.trw-tbm .trw-legend__sw { flex: none; width: 14px; height: 14px; margin-top: 2px; border: 1.5px dashed #ffaa28; background: rgba(255,170,40,.2); }
.trw-tbm .trw-resume { align-items: flex-start; padding: 10px; gap: 10px; max-width: min(560px, calc(100% - 20px)); }
.trw-tbm .trw-resume img { width: 72px; height: 48px; object-fit: contain; background: var(--trw-soft); border-radius: 4px; flex: none; }
.trw-tbm .trw-resume__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.trw-tbm .trw-resume .trw-row { flex-basis: 100%; }
.trw-tbm .trw-resume { flex-wrap: wrap; }
.trw-tbm .trw-back { display: none; }
.trw-tbm .trw-stage, .trw-tbm .trw-canvas { overscroll-behavior: contain; }
@media (max-width: 900px) {
	.trw-tbm .trw-back {
		display: flex; align-items: center; justify-content: center; gap: 6px; grid-column: 1; grid-row: 4; position: sticky; bottom: 0; z-index: 4;
		margin: 0; padding: 12px; background: var(--trw-ink); color: #fff; font-weight: 600; min-height: 48px;
	}
	.trw-tbm .trw-app.is-fullscreen .trw-back { display: none; }
	.trw-tbm .trw-quick { bottom: 36px; }
	.trw-tbm .trw-resizebar { top: 8px; }
	.trw-tbm .trw-preset, .trw-tbm .trw-sizechip__main { min-height: 48px; }
	.trw-tbm .trw-layer__sel { min-height: 44px; }
	.trw-tbm .trw-btn--sm { min-height: 40px; }
}
.trw-tbm .trw-quick:not([hidden]) ~ .trw-toast { bottom: 100px; }
@media (max-width: 900px) {
	.trw-tbm .trw-overlay { position: fixed; z-index: 999999; padding: 10px; align-items: end; }
	.trw-tbm .trw-modal { max-height: calc(100dvh - 20px); }
	.trw-tbm .trw-modal__pad { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}