/* Halawi Frame: application layout and editor components. Built on the Halawi design system (base.css). */
.frame-app { position: fixed; inset: 0; display: flex; flex-direction: column; z-index: 1; }
.grow { flex: 1 1 auto; }
.xs { font-size: 11.5px; } .sm { font-size: 12.5px; }
.pad { padding: 10px 12px; }
.wide { width: 100%; justify-content: center; }
.lede { font-size: 15.5px; color: var(--text-2); margin: 0 0 14px; line-height: 1.55; }
.ack { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; cursor: pointer; padding: 14px; border-radius: 12px; border: 1px solid var(--accent-line); background: var(--accent-bg); font-size: 14px; }
.ack input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--violet); }
.ack a { color: var(--accent); text-decoration: underline; }
.fr-list { margin: 14px 0 0; padding-left: 20px; color: var(--text-2); font-size: 13.5px; } .fr-list li { margin: 4px 0; }
.first-run-modal .modal-ft .btn--primary { min-width: 220px; justify-content: center; }
.callout--ok { border-color: rgba(63,182,139,.4); background: rgba(63,182,139,.08); } .callout--ok > .ic { color: var(--ok); }
.desk-only { } .mobile-only { display: none !important; }
.nojs { padding: 24px; text-align: center; }

/* ---------- top bar ---------- */
.tb { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-1) 92%, transparent); backdrop-filter: blur(12px); position: relative; z-index: 20; }
.tb-logo { display: flex; align-items: center; padding: 4px 2px; opacity: .92; } .tb-logo img { height: 16px; width: auto; display: block; }
html[data-theme="light"] .tb-logo img { filter: invert(1) hue-rotate(180deg); }
.tb-app { font-family: var(--f-ui); font-size: 15px; letter-spacing: .01em; padding-right: 8px; border-right: 1px solid var(--line); margin-right: 2px; }
.tb-app b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.tb-proj { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; height: 32px; padding: 0 10px; border-radius: var(--r-sm); background: transparent; border: 1px solid transparent; color: var(--text); font: 500 13px var(--f-ui); cursor: pointer; }
.tb-proj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-proj:hover { background: var(--glass-2); border-color: var(--line); } .tb-proj .ic { width: 14px; height: 14px; color: var(--muted); flex: none; }
.mode-sw { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--line); gap: 2px; margin-left: 6px; }
.mode-sw button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 7px; border: 0; background: transparent; color: var(--muted); font: 500 12.5px var(--f-ui); cursor: pointer; }
.mode-sw button .ic { width: 15px; height: 15px; } .mode-sw button:hover { color: var(--text); }
.mode-sw button.on { background: var(--bg-4); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 8px rgba(0,0,0,.25); }
.mode-sw button.on .ic { color: var(--accent); }
.tb .save-ind { margin-right: 4px; }
.banners { flex: none; position: relative; z-index: 15; } .banners:empty { display: none; }
.banners .banner { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }

/* ---------- work area ---------- */
.work { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 46px 256px minmax(0, 1fr) 292px; position: relative; }
.toolrail { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border-right: 1px solid var(--line); background: var(--bg-1); overflow-y: auto; scrollbar-width: none; z-index: 6; }
.tr-b { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; }
.tr-b .ic { width: 18px; height: 18px; } .tr-b:hover { background: var(--glass-2); color: var(--text); }
.tr-b.on { background: var(--accent-bg); border-color: var(--accent-line); color: #fff; } html[data-theme="light"] .tr-b.on { color: var(--accent); }
.tr-b--more::after { content: ''; position: absolute; right: 3px; bottom: 3px; border: 3px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; opacity: .55; }
.tr-sep { width: 22px; height: 1px; background: var(--line-2); margin: 4px 0; flex: none; }
.lp, .rp { min-width: 0; min-height: 0; background: var(--bg-1); display: flex; flex-direction: column; overflow: hidden; z-index: 5; }
.lp { border-right: 1px solid var(--line); } .rp { border-left: 1px solid var(--line); }
.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); touch-action: none; }
html[data-theme="light"] .stage { background: #e9e7ee; }
.cv-main { position: absolute; inset: 0; display: block; outline: none; }
.cv-rx { position: absolute; left: 0; top: 0; z-index: 2; } .cv-ry { position: absolute; left: 0; top: 0; z-index: 2; }
.cv-corner { position: absolute; left: 0; top: 0; width: 20px; height: 20px; z-index: 3; background: var(--bg-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cv-ta { position: absolute; width: 20px; height: 20px; opacity: 0; padding: 0; border: 0; resize: none; overflow: hidden; pointer-events: none; font-size: 16px; z-index: 1; color: transparent; background: transparent; caret-color: transparent; }
.cv-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--bg-2) 85%, transparent); border: 1px solid var(--line); font: 500 11px var(--f-data); color: var(--muted); pointer-events: none; font-variant-numeric: tabular-nums; }
.scrim { display: none; }
.mob-bar { display: none; }
.work.mode-status > .toolrail, .work.mode-status > .lp, .work.mode-status > .stage, .work.mode-status > .rp { display: none; }
.st-root { grid-column: 1 / -1; min-height: 0; min-width: 0; }
.st-root[hidden] { display: none; }
body.dropping .drop-hint { display: grid; }
.drop-hint { display: none; position: fixed; inset: 0; z-index: 900; place-items: center; background: rgba(10,10,14,.55); pointer-events: none; }
.drop-hint div { padding: 22px 34px; border-radius: 16px; border: 2px dashed var(--accent-line); background: var(--bg-2); font: 500 16px var(--f-ui); }

/* ---------- left panel: layers and assets ---------- */
.lp-tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 6px; flex: none; }
.lp-tabs .tab { padding: 11px 10px 9px; font-size: 12.5px; } .lp-tabs .tab .ic { width: 15px; height: 15px; }
.lp-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-bottom: 20px; }
.lp-acts { display: flex; gap: 4px; padding: 8px 8px 4px; align-items: center; }
.tree { padding: 4px 4px 12px; user-select: none; }
.lr { --d: 0; display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 calc(4px + var(--d) * 14px); border-radius: 6px; cursor: default; color: var(--text-2); font-size: 12.5px; position: relative; }
.lr:hover { background: var(--glass-2); }
.lr.on { background: var(--accent-bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-line); }
.lr--ab { font-weight: 600; color: var(--text); margin-top: 4px; } .lr--ab .lr-ic { color: var(--accent); }
.lr--act:not(.on) { background: var(--glass); }
.lr--hid { opacity: .5; }
.lr-car { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border: 0; padding: 0; background: none; color: var(--muted); cursor: pointer; }
.lr-car .ic { width: 12px; height: 12px; transition: transform .15s; } .lr-car.open .ic { transform: rotate(90deg); }
.lr-ic { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: var(--muted); } .lr-ic .ic { width: 14px; height: 14px; }
.lr-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-sz { font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
.lr-b { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; opacity: 0; }
.lr-b .ic { width: 13px; height: 13px; } .lr:hover .lr-b, .lr-b.set, .lr-b:focus-visible { opacity: 1; } .lr-b:hover { background: var(--glass-3); color: var(--text); }
.lr-edit { flex: 1; min-width: 0; height: 22px; font: inherit; color: var(--text); background: var(--bg-3); border: 1px solid var(--accent-line); border-radius: 4px; padding: 0 5px; outline: none; }
.lr.dz-before::before, .lr.dz-after::after { content: ''; position: absolute; left: calc(8px + var(--d) * 14px); right: 4px; height: 2px; background: var(--accent); border-radius: 2px; }
.lr.dz-before::before { top: -1px; } .lr.dz-after::after { bottom: -1px; }
.lr.dz-inside { box-shadow: inset 0 0 0 1.5px var(--accent); }
.as { border-bottom: 1px solid var(--line); }
.as > header { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 4px; }
.as-t { flex: 1; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px; border: 0; background: none; color: var(--text); font: 500 12.5px var(--f-ui); cursor: pointer; text-align: left; }
.as-t .ic { width: 13px; height: 13px; color: var(--muted); transform: rotate(-90deg); transition: transform .15s; } .as.open .as-t .ic { transform: none; }
.as-b { display: none; padding: 2px 10px 12px; } .as.open .as-b { display: block; }
.as-i { display: flex; align-items: center; gap: 6px; border-radius: 6px; } .as-i:hover { background: var(--glass-2); }
.as-n { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; background: none; color: var(--text-2); font-size: 12.5px; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-n .ic { width: 14px; height: 14px; color: var(--muted); flex: none; }
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl-mini { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: var(--text-2); font-size: 11px; cursor: pointer; text-align: left; }
.tpl-mini img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--bg-3); border-radius: 7px; border: 1px solid var(--line); display: block; }
.tpl-mini:hover img { border-color: var(--accent-line); } .tpl-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.img-t { padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--bg-3) repeating-conic-gradient(rgba(255,255,255,.05) 0 25%, transparent 0 50%) 0 0 / 12px 12px; cursor: pointer; aspect-ratio: 1; }
.img-t img { width: 100%; height: 100%; object-fit: contain; display: block; } .img-t:hover { border-color: var(--accent-line); }
.bk { display: flex; flex-direction: column; gap: 10px; }
.bk-logos { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-logo { position: relative; width: 56px; height: 56px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-3); cursor: pointer; }
.bk-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bk-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--bg-4); color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; } .bk-x .ic { width: 10px; height: 10px; }
.bk-c { position: relative; display: inline-block; }
.bk-fonts { display: flex; flex-wrap: wrap; gap: 6px; }

/* swatches */
.sw-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sw-row--sm .sw { width: 20px; height: 20px; }
.sw { width: 24px; height: 24px; padding: 0; flex: none; border-radius: 6px; border: 1px solid var(--line-2); background: var(--c, #000); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); position: relative; }
.sw:hover { transform: translateY(-1px); border-color: var(--line-3); } .sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent); }
.sw--add { display: grid; place-items: center; background: var(--glass-2); color: var(--muted); overflow: hidden; } .sw--add .ic { width: 13px; height: 13px; }
.sw--add input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ---------- right panel: inspector ---------- */
.rp { overflow-y: auto; scrollbar-width: thin; }
.is-top { display: flex; align-items: center; gap: 2px; padding: 10px 10px 6px 14px; font: 600 13px var(--f-ui); position: sticky; top: 0; background: var(--bg-1); z-index: 2; }
.is-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.is-empty { padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.align-row { display: flex; flex-wrap: wrap; gap: 1px; padding: 2px 10px 8px; border-bottom: 1px solid var(--line); }
.align-row .icon-btn { width: 30px; height: 28px; }
.is { border-bottom: 1px solid var(--line); }
.is > header { display: flex; align-items: center; padding: 0 8px 0 4px; }
.is-t { flex: 1; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px; border: 0; background: none; color: var(--text); font: 500 12.5px var(--f-ui); cursor: pointer; text-align: left; }
.is-t .ic { width: 13px; height: 13px; color: var(--muted); transform: rotate(-90deg); transition: transform .15s; } .is.open .is-t .ic { transform: none; }
.is-a { display: flex; gap: 2px; }
.is-b { display: none; padding: 0 14px 14px; } .is.open .is-b { display: flex; flex-direction: column; gap: 9px; }
.is-row, .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.g2b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stack-sm { display: flex; flex-direction: column; gap: 6px; }
.nf { display: flex; align-items: center; height: 30px; border-radius: 7px; background: var(--glass-2); border: 1px solid var(--line); min-width: 0; position: relative; }
.nf:focus-within { border-color: var(--accent-line); box-shadow: var(--focus); }
.nf-l { flex: none; min-width: 24px; padding: 0 2px 0 8px; font-size: 11px; color: var(--muted); cursor: ew-resize; user-select: none; display: flex; align-items: center; }
.nf-l .ic { width: 13px; height: 13px; }
.nf-i { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; border: 0; background: transparent; color: var(--text); font: 500 12px var(--f-data); padding: 0 6px; outline: none; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.nf-i::-webkit-inner-spin-button, .nf-i::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.nf-u { font-size: 10.5px; color: var(--dim); padding-right: 7px; flex: none; }
.nf--wide { grid-column: 1 / -1; }
.rf { display: grid; grid-template-columns: 92px 1fr 44px; gap: 8px; align-items: center; font-size: 12px; }
.rf-l { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf output { font: 500 11.5px var(--f-data); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--line-2); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line-2); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--violet); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--violet); }
input[type="range"]:focus-visible { outline: none; } input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.sf { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sf-l { font-size: 11px; color: var(--muted); }
.sf .input--sm, .is-b select.input { height: 30px; font-size: 12.5px; padding: 0 8px; }
.pr { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.pr-l { width: 60px; flex: none; font-size: 12px; color: var(--text-2); }
.pr-v { flex: 1; min-width: 0; font: 500 12px var(--f-data); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paint-chip { width: 30px; height: 26px; flex: none; padding: 2px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--bg-3) repeating-conic-gradient(rgba(255,255,255,.08) 0 25%, transparent 0 50%) 0 0 / 8px 8px; cursor: pointer; }
.paint-chip i { display: block; width: 100%; height: 100%; border-radius: 4px; }
.paint-chip:hover { border-color: var(--accent-line); }
.ck { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); cursor: pointer; min-height: 26px; }
.ck .switch { flex: none; }
details.more { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 2px; }
details.more > summary { cursor: pointer; font-size: 12px; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 6px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
details.more[open] > summary::before { transform: rotate(45deg); }
details.more[open] > summary { margin-bottom: 8px; }
.bgp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.gp { aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--line-2); cursor: pointer; padding: 0; }
.gp:hover { transform: scale(1.06); border-color: var(--line-3); } .gp--lg { border-radius: 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { cursor: pointer; } .chip.on { background: var(--accent-bg); border-color: var(--accent-line); color: var(--text); }
button.chip { font: inherit; font-size: 12px; }
.fontbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 34px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--glass-2); color: var(--text); font-size: 14px; cursor: pointer; text-align: left; }
.fontbtn .ic { width: 14px; height: 14px; color: var(--muted); flex: none; } .fontbtn:hover { border-color: var(--line-3); }
.tx-font { display: flex; gap: 6px; }
.tx-tog { display: flex; gap: 2px; flex-wrap: wrap; }
.tx-tog .icon-btn.on, .is .icon-btn.on { background: var(--accent-bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-line); }
.tx-paint { display: flex; flex-direction: column; gap: 6px; }
.tp-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tp { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg-1); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; padding: 0; display: grid; place-items: center; color: var(--text); }
.tp:hover { box-shadow: 0 0 0 2px var(--accent); }
.tp--custom, .tp--none { background: var(--glass-2); } .tp .ic { width: 13px; height: 13px; }
.tp-row--lg .tp { width: 34px; height: 34px; }
.fx { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--glass); }
.sep { height: 1px; background: var(--line); margin: 2px 0; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- popovers, paint editor, color picker ---------- */
.pop { position: fixed; z-index: 600; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); max-height: calc(100vh - 16px); overflow: auto; scrollbar-width: thin; animation: popIn .12s ease-out; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } }
.pop--sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; border-radius: 16px 16px 0 0; max-height: 78vh; width: auto !important; padding-bottom: env(safe-area-inset-bottom); }
.pe { width: 280px; display: flex; flex-direction: column; }
.pop--sheet .pe, .pop--sheet .fp { width: 100%; }
.pe-hd { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px 14px; font: 600 13px var(--f-ui); }
.pe-tabs { padding: 0 10px 8px; } .pe-tabs .seg { width: 100%; display: flex; flex-wrap: wrap; } .pe-tabs .seg button { flex: 1 1 auto; padding: 0 6px; font-size: 11.5px; min-width: 0; }
.pe-bd { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.pe-sec { display: flex; flex-direction: column; gap: 6px; } .pe-sec > b, .pe-sec > .field-l { font-size: 11px; color: var(--muted); font-weight: 500; }
.pe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pe-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-img { width: 100%; height: 110px; object-fit: contain; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line); }
.num-row { display: grid; grid-template-columns: 70px 1fr 48px; gap: 8px; align-items: center; font-size: 12px; color: var(--text-2); }
.num-row .input { height: 28px; padding: 0 6px; font-size: 12px; }
.field--full { grid-column: 1 / -1; }
.cp { display: flex; flex-direction: column; gap: 8px; }
.cp-sv { position: relative; border-radius: 8px; overflow: hidden; touch-action: none; cursor: crosshair; }
.cp-sv canvas { display: block; width: 100%; height: 150px; }
.cp-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.4); pointer-events: none; }
.cp-row { display: flex; gap: 8px; align-items: center; }
.cp-bars { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.cp-hue, .cp-alpha { position: relative; height: 12px; border-radius: 6px; touch-action: none; cursor: pointer; }
.cp-hue { background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-alpha { background: repeating-conic-gradient(#808080 0 25%, #c0c0c0 0 50%) 0 0 / 8px 8px; }
.cp-alpha b { position: absolute; inset: 0; border-radius: 6px; }
.cp-hue i, .cp-alpha i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
.cp-hex { font-family: var(--f-mono); text-transform: uppercase; }
.cp .input--sm { height: 28px; font-size: 12px; }
.ge { position: relative; padding-bottom: 18px; }
.ge-bar { position: relative; height: 22px; border-radius: 6px; background: repeating-conic-gradient(#808080 0 25%, #c0c0c0 0 50%) 0 0 / 8px 8px; cursor: copy; border: 1px solid var(--line-2); }
.ge-bar i { position: absolute; inset: 0; border-radius: 5px; }
.ge-stops { position: absolute; left: 0; right: 0; top: 18px; height: 18px; }
.ge-stop { position: absolute; top: 0; width: 14px; height: 18px; margin-left: -7px; padding: 0; border: 2px solid #fff; border-radius: 4px 4px 7px 7px; background: var(--c); box-shadow: 0 1px 4px rgba(0,0,0,.5); cursor: grab; touch-action: none; }
.ge-stop.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(155,61,245,.45), 0 1px 4px rgba(0,0,0,.5); z-index: 1; }
.gp-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.pat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pat { height: 34px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--text-2); font-size: 10.5px; cursor: pointer; padding: 0; overflow: hidden; }
.pat.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }

/* ---------- font picker ---------- */
.pop--fonts { width: 320px; }
.fp { width: 320px; display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 24px)); }
.fp-hd { padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 8px; }
.fp-search { display: flex; gap: 6px; align-items: center; } .fp-search .input { flex: 1; height: 32px; }
.fp-cats { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .fp-cats .chip { flex: none; cursor: pointer; font-size: 11.5px; }
.fp-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 6px; min-height: 120px; scrollbar-width: thin; }
.fp-i { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; background: none; color: var(--text); cursor: pointer; text-align: left; min-height: 40px; }
.fp-i:hover { background: var(--glass-2); } .fp-i.on { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-line); }
.fp-n { flex: 1; min-width: 0; font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-m { font-size: 10.5px; color: var(--dim); flex: none; font-family: var(--f-data); }
.fp-ft { padding: 8px 12px 10px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fp-empty { padding: 20px 10px; text-align: center; }

/* ---------- dialogs ---------- */
.modal--xl { width: min(1080px, calc(100vw - 32px)); }
.tpl-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 14px; }
.tpl-card { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font-size: 13px; }
.tpl-img { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); overflow: hidden; padding: 8px; }
.tpl-img img { max-width: 100%; max-height: 100%; display: block; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.tpl-card:hover .tpl-img { border-color: var(--accent-line); }
.bg-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-top: 10px; }
.bg-card { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: var(--text-2); font-size: 11.5px; cursor: pointer; text-align: left; }
.bg-card i, .bg-card span:first-child { display: block; aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--line-2); }
.ex { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.ex-prev { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 12px; border-radius: 12px; background: var(--bg-3) repeating-conic-gradient(rgba(255,255,255,.04) 0 25%, transparent 0 50%) 0 0 / 16px 16px; border: 1px solid var(--line); }
.ex-prev img { max-width: 100%; max-height: 320px; display: block; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.ex-form { display: flex; flex-direction: column; gap: 12px; } .ex-form .seg { flex-wrap: wrap; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.proj { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); overflow: hidden; }
.proj.on { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.proj-open { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.proj-open img, .proj-open .proj-ph { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--bg-3); }
.proj-t { display: block; padding: 8px 10px 2px; font: 500 13px var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-m { display: block; padding: 0 10px 10px; font-size: 11.5px; color: var(--muted); }
.proj .icon-btn { position: absolute; right: 6px; bottom: 6px; }
.hist { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow: auto; }
.hist-i { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font-size: 13px; text-align: left; cursor: pointer; }
.hist-i:hover { background: var(--glass-2); } .hist-i.on { background: var(--accent-bg); color: var(--text); } .hist-i.fut { opacity: .5; }
.snap-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.snap { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; }
.snap-t { flex: 1; min-width: 0; font-size: 13px; }
.fr-i { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; font-size: 12.5px; color: var(--text-2); text-align: left; width: 100%; }
.fr-i mark { background: rgba(155,61,245,.35); color: var(--text); border-radius: 3px; padding: 0 2px; }
.kbd-cols { columns: 3 240px; column-gap: 28px; } .kbd-cols section { break-inside: avoid; margin-bottom: 18px; }
.kbd-cols h4 { margin: 0 0 6px; font: 600 12px var(--f-ui); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ts { font-size: 12px; }

/* ---------- Status mode ---------- */
.st-wrap { height: 100%; display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 0; }
.st-panel { border-right: 1px solid var(--line); background: var(--bg-1); overflow-y: auto; scrollbar-width: thin; min-height: 0; }
.ss { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ss-hd { display: flex; align-items: center; gap: 8px; min-height: 26px; } .ss-hd b { font: 600 13px var(--f-ui); }
.st-ta { width: 100%; min-height: 128px; resize: vertical; font: 15px/1.5 var(--f-data); padding: 10px 12px; }
.sel-lab { margin-left: auto; font-size: 11.5px; color: var(--dim); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-lab.on { color: var(--accent); }
.ss .seg { width: 100%; display: flex; } .ss .seg button { flex: 1; }
.ss .bgp { grid-template-columns: repeat(7, 1fr); }
.pre-list { display: flex; flex-direction: column; gap: 2px; }
.st-tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.st-tpl { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: var(--text-2); font-size: 11.5px; cursor: pointer; }
.st-tpl img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-2); display: block; background: #000; }
.st-tpl:hover img { border-color: var(--accent-line); }
.st-stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); position: relative; }
.st-top { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex: none; }
.st-exp { display: inline-flex; } .st-exp > .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } .st-exp-m { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; padding: 0 7px !important; border-left: 1px solid rgba(255,255,255,.25) !important; }
.st-pages { flex: 1 1 auto; min-height: 0; display: flex; gap: 22px; align-items: center; padding: 16px 24px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.st-pages::before, .st-pages::after { content: ''; flex: 1 0 0; }
.st-page { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.st-page canvas { display: block; border-radius: 6px; box-shadow: 0 0 0 1px var(--line-2), 0 18px 50px -18px rgba(0,0,0,.8); cursor: text; touch-action: none; }
.st-page--ph canvas { opacity: .55; cursor: default; }
.st-pn { font-size: 11.5px; color: var(--muted); min-height: 16px; }
.st-hint { text-align: center; margin: 0; padding: 0 16px 10px; flex: none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .work { grid-template-columns: 46px 228px minmax(0, 1fr) 272px; } .cmdk-btn span { display: none; } }
@media (max-width: 980px) { .tb-app { display: none; } .mode-sw button span { display: none; } .mode-sw button { padding: 0 10px; } }
@media (max-width: 819px) {
  .desk-only { display: none !important; } .mobile-only { display: revert !important; }
  .tb { height: 52px; padding: 0 8px; gap: 6px; } .tb-logo { display: none; } .tb-app { display: inline; border: 0; padding: 0; }
  .tb-proj { max-width: 120px; padding: 0 6px; } .mode-sw { margin-left: 0; } .mode-sw button span { display: inline; } .mode-sw button { padding: 0 9px; font-size: 12px; }
  .tb .save-ind span { display: none; }
  .work { grid-template-columns: minmax(0, 1fr); }
  .toolrail { display: none; }
  .lp, .rp { position: fixed; top: 52px; bottom: 58px; width: min(340px, 88vw); z-index: 40; transition: transform .22s ease; box-shadow: var(--shadow); }
  .lp { left: 0; transform: translateX(-102%); } .rp { right: 0; transform: translateX(102%); }
  .work.open-lp .lp, .work.open-rp .rp { transform: none; }
  .work.open-lp .scrim, .work.open-rp .scrim { display: block; position: fixed; inset: 52px 0 58px; background: rgba(0,0,0,.45); z-index: 35; }
  .stage { grid-column: 1; }
  .mob-bar { display: flex; flex: none; height: 58px; border-top: 1px solid var(--line); background: var(--bg-1); padding-bottom: env(safe-area-inset-bottom); z-index: 30; }
  .mob-bar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; color: var(--text-2); font: 500 10.5px var(--f-ui); cursor: pointer; }
  .mob-bar button .ic { width: 20px; height: 20px; }
  body.in-status .mob-bar { display: none; }
  .st-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; overflow-y: auto; height: 100%; display: block; }
  .st-stage { order: -1; border-bottom: 1px solid var(--line); }
  .st-wrap { display: flex; flex-direction: column; }
  .st-panel { border-right: 0; overflow: visible; }
  .st-pages { padding: 12px; gap: 12px; min-height: 0; }
  .st-top { padding: 8px 12px; flex-wrap: wrap; }
  .st-top [data-a="design"] span { display: none; }
  .ex { grid-template-columns: 1fr; } .ex-prev img { max-height: 200px; }
  .is-b { padding: 0 12px 12px; }
  .rf { grid-template-columns: 84px 1fr 40px; }
  .kbd-cols { columns: 1; }
}
@media (max-width: 420px) { .tb-proj { display: none; } .tb .btn--primary { padding: 0 9px; } }
@media (prefers-reduced-motion: reduce) { .pop, .lp, .rp { animation: none; transition: none; } }
@media (max-width: 819px) {
  .st-stage { flex: none; }
  .st-pages { flex: none; min-height: auto; align-items: flex-start; }
}

/* ---------- v1.1: status strip, custom colors, mesh editor, start screen ---------- */
.st-strip { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; flex: none; align-items: stretch; }
.st-it { position: relative; flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border: 1px solid var(--line-2); border-radius: var(--r-sm, 10px); background: var(--bg-1); cursor: pointer; min-width: 150px; max-width: 220px; user-select: none; }
.st-it:hover { border-color: var(--accent-line); }
.st-it.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--glass-2); }
.st-it.dragging { opacity: .45; }
.st-it.drop-before { box-shadow: -3px 0 0 var(--accent); }
.st-it img { height: 52px; width: auto; max-width: 64px; border-radius: 5px; background: #000; flex: none; object-fit: cover; }
.st-it-tx { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.st-it-tx b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.st-it-i { position: absolute; bottom: 3px; right: 7px; font-size: 10px; color: var(--muted); }
.st-it-m { margin-left: auto; }
.st-pick { position: absolute; top: 3px; left: 3px; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: rgba(0,0,0,.55); }
.st-pick input { margin: 0; width: 13px; height: 13px; accent-color: var(--accent); cursor: pointer; }
.st-add { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; border: 1px dashed var(--line-2); border-radius: var(--r-sm, 10px); background: none; color: var(--text-2); font-size: 11.5px; cursor: pointer; }
.st-add:hover { border-color: var(--accent); color: var(--text); }
.st-stage.st-drop::after { content: 'Drop a photo to use it as the background'; position: absolute; inset: 12px; border: 2px dashed var(--accent); border-radius: 14px; display: grid; place-items: center; background: rgba(155,61,245,.12); color: var(--text); font-weight: 600; pointer-events: none; z-index: 5; }
.ss-sub { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tp--solid { position: relative; overflow: hidden; background: var(--glass-2); }
.tp--solid input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.mine { position: relative; display: inline-flex; }
.mine-x { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; border: 0; padding: 0; display: none; place-items: center; background: var(--bg-2, #222); color: var(--text); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; }
.mine-x .ic { width: 9px; height: 9px; }
.mine:hover .mine-x, .mine:focus-within .mine-x { display: grid; }
@media (hover: none) { .mine-x { display: grid; } }
.me { display: flex; flex-direction: column; gap: 8px; }
.me-pv { position: relative; height: 150px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line-2); touch-action: none; }
.me-dot { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4); cursor: grab; padding: 0; touch-action: none; }
.me-dot.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.me-pts { display: flex; flex-direction: column; gap: 8px; }
.pe-save { margin-left: auto; }
.bg-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 8px; }
.start { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 6px 0 2px; text-align: center; }
.btn--xl { min-height: 54px; font-size: 16.5px; font-weight: 650; padding: 0 22px; justify-content: center; border-radius: 14px; }
.start-sub { margin: 0; }
.start-links { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 4px; }
.start-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.link-btn { background: none; border: 0; padding: 4px 2px; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.link-btn:hover { color: var(--text); text-decoration-color: var(--accent); }
@media (max-width: 820px) { .st-strip { padding: 8px 12px; } .st-it { min-width: 128px; } .st-it img { height: 44px; } }