:root {
  --bg: #a83f78;
  --bg-2: #8a2e60;
  --panel: #ffffff;
  --panel-2: #f8eef3;
  --ink: #4b1e37;
  --muted: #7c6170;
  --line: #eedde6;
  --line-dark: #d9c3ce;
  --brand: #0bc2cf;
  --brand-dark: #0a8f99;
  --brand-soft: #dcf6f8;
  --sun: #ffc93c;
  --crumb: #f6d7a1;
  --crust: #c48645;
  --pattern: image-set(url(/pattern.png) 2x);
  --teal: #0bc2cf;
  --danger: #d92d4a;
  --stage: #2f9cec;
  --radius: 14px;
  --shadow: 0 2px 4px rgba(34, 28, 63, .06), 0 10px 28px rgba(34, 28, 63, .1);
  font-family: Nunito, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-size: 14px; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
button:disabled { cursor: default; opacity: .35; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.grow { flex: 1; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 11px; font-weight: 600; white-space: nowrap; transition: background .12s, transform .06s; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.ghost { background: var(--panel-2); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.big { height: 48px; font-size: 16px; width: 100%; }
.btn.small { height: 30px; padding: 0 10px; font-size: 12px; }

.ib { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--muted); flex: none; }
.ib:hover { background: var(--brand-soft); color: var(--brand-dark); }
.ib.hot { color: var(--brand); }
.ib .ico { width: 18px; height: 18px; }

/* Dialogs, menus, toasts */
.dlg-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(34, 28, 63, .45); overflow: auto; }
.dlg { background: var(--panel); border-radius: 20px; padding: 26px; width: min(420px, 100%); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.dlg.wide { width: min(600px, 100%); }
.dlg h2 { font-size: 22px; }
.dlg form { display: flex; flex-direction: column; gap: 14px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.field { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; }
.field input, .field select { height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-weight: 400; font-size: 14px; }
.field input:focus, .field select:focus { border-color: var(--brand); outline: none; }

.menu { position: fixed; z-index: 60; min-width: 180px; padding: 6px; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; }
.menu button:hover { background: var(--brand-soft); }
.menu button.danger { color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }

#toasts { position: fixed; z-index: 70; top: 118px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 11px; box-shadow: var(--shadow); transition: opacity .3s; font-weight: 500; }
.toast.warn { background: #b4322b; }
.toast.ok { background: #1c8554; }
.toast.out { opacity: 0; }

.popover { position: fixed; z-index: 60; width: 228px; padding: 12px; background: var(--panel); border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.pal { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.pal button { aspect-ratio: 1; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.pal button:hover { transform: scale(1.14); }
.pop-row { display: flex; gap: 6px; align-items: center; }
.pop-row [type=color] { width: 32px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; }
.pop-row .hex { width: 100%; min-width: 0; height: 30px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 8px; }

/* Home */
.home { display: grid; grid-template-columns: 260px 1fr; height: 100%; }
.home-side { background: var(--panel); border-right: 1px solid var(--line); padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.home-side h3 { font-size: 12px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; margin-top: 8px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.brand-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--brand); color: var(--sun); flex: none; }
.folders { display: flex; flex-direction: column; gap: 2px; }
.folder { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px; border-radius: 10px; text-align: left; font-weight: 500; }
.folder span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder em { font-style: normal; color: var(--muted); font-size: 12px; }
.folder:hover, .folder.drop { background: var(--brand-soft); }
.folder.on { background: var(--brand); color: #fff; }
.folder.on em { color: #fff; }
.folder-row { position: relative; }
.folder-row .folder { padding-right: 38px; }
.folder-more { position: absolute; right: 4px; top: 4px; }
.folder-row:has(.folder.on) .folder-more { color: #fff; }
.folder-row:has(.folder.on) .folder-more:hover { color: var(--brand-dark); }
.admin-link { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 8px 4px; }
.admin-link:hover { color: var(--brand-dark); }
.home-main { padding: 30px 34px; overflow: auto; }
.home-main h1 { font-size: 28px; margin-bottom: 22px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.card { display: flex; flex-direction: column; background: var(--panel); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(34, 28, 63, .1); overflow: hidden; transition: transform .1s, box-shadow .1s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.thumb { display: grid; place-items: center; height: 170px; padding: 12px; background: var(--brand-soft); }
.thumb img, .thumb-blank { display: block; max-width: 100%; max-height: 146px; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.thumb-blank { height: 146px; }
.card-foot { display: flex; align-items: center; gap: 4px; padding: 10px 8px 10px 12px; }
.card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-text small { color: var(--muted); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 70px 20px; text-align: center; }
.empty-art { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; background: var(--brand-soft); color: var(--brand); margin-bottom: 6px; }
.empty-art .ico { width: 40px; height: 40px; }
.empty .btn { margin-top: 10px; }
.move-list { display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow: auto; }

/* New project */
.steps { display: flex; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.steps li { flex: 1; padding-top: 7px; border-top: 4px solid var(--line); }
.steps li.on { color: var(--brand); border-color: var(--brand); }
.steps li.done { border-color: var(--brand); }
.type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.type-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 12px; border: 2px solid var(--line); border-radius: 16px; text-align: center; }
.type-card:hover, .type-card.on { border-color: var(--brand); background: var(--brand-soft); }
.type-card b { font-size: 16px; }
.type-card small { color: var(--muted); }
.type-art { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: var(--brand); color: var(--sun); margin-bottom: 8px; }
.type-art .ico { width: 30px; height: 30px; }
.size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.size-card { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border: 2px solid var(--line); border-radius: 13px; }
.size-card:hover { border-color: var(--brand); }
.size-card.on { border-color: var(--brand); background: var(--brand-soft); }
.size-card small { color: var(--muted); font-size: 12px; }
.size-art { display: grid; place-items: center; height: 54px; }
.size-art i { display: block; background: var(--brand); border-radius: 3px; }
.dlg form.size-custom { display: grid; grid-template-columns: 110px auto 110px 1fr; gap: 8px 10px; align-items: end; }
.size-custom-label { grid-column: 1 / -1; font-weight: 600; font-size: 13px; }
.times { padding-bottom: 10px; color: var(--muted); }
.size-custom .muted { padding-bottom: 10px; }
.size-custom .dlg-actions, .size-err, .corner-pick { grid-column: 1 / -1; }
.size-err { color: var(--danger); font-weight: 600; font-size: 13px; }
.choice-row { display: flex; flex-direction: column; gap: 8px; }
.radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
.radio:has(:checked) { border-color: var(--brand); background: var(--brand-soft); }
.radio span { display: flex; flex-direction: column; }
.radio small { color: var(--muted); }

/* Admin */
.admin-login { display: grid; place-items: center; height: 100%; padding: 16px; }
.admin { max-width: 820px; margin: 0 auto; padding: 24px 20px 60px; display: flex; flex-direction: column; gap: 18px; }
.admin-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.admin h1 { font-size: 24px; }
.admin h2 { font-size: 16px; }
.upload { display: grid; grid-template-columns: 1fr 200px; gap: 14px; align-items: start; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 12px; text-align: center; border: 2px dashed var(--brand); border-radius: var(--radius); background: var(--panel); color: var(--brand-dark); cursor: pointer; }
.drop:hover, .drop.over { background: var(--brand-soft); }
.admin-note { padding: 10px 14px; border-radius: 12px; background: #fff7dd; color: #6b5310; font-weight: 600; }
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-list li { display: grid; grid-template-columns: 60px 1fr 1fr 32px; gap: 12px; align-items: end; padding: 10px; background: var(--panel); border-radius: 12px; }
.admin-thumb { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); padding: 8px; }

/* Editor layout */
.ed { display: grid; height: 100%; grid-template-columns: 64px auto 1fr var(--right-w, 272px); grid-template-rows: 56px 52px minmax(0, 1fr) auto; grid-template-areas: "top top top top" "opts opts opts opts" "tools cat stage right" "time time time time"; }
.ed-top { grid-area: top; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0; }
.doc-name { width: 200px; min-width: 60px; height: 34px; padding: 0 8px; border: 1.5px solid transparent; border-radius: 8px; font-weight: 700; font-size: 15px; background: none; }
.doc-name:hover { border-color: var(--line); }
.doc-name:focus { border-color: var(--brand); outline: none; background: #fff; }
.saved { color: var(--muted); font-size: 12px; white-space: nowrap; }
.group { display: flex; align-items: center; gap: 2px; padding: 2px; background: var(--panel-2); border-radius: 11px; }
.zoomval { width: 50px; height: 32px; font-weight: 600; font-size: 12px; border-radius: 8px; }
.zoomval:hover { background: var(--brand-soft); }

.ed-opts { grid-area: opts; display: flex; align-items: center; gap: 16px; padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; }
.opt-title b { font-size: 15px; }
.slider { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.slider input[type=range] { width: 120px; accent-color: var(--brand); }
.val { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.val i { font-style: normal; font-weight: 400; font-size: 12px; }
.val input { width: 52px; height: 28px; padding: 0 4px; border: 1.5px solid var(--line); border-radius: 7px; text-align: right; font-weight: 500; color: var(--ink); }
.color-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px 0 5px; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 600; font-size: 13px; }
.color-btn:hover { border-color: var(--brand); }
.sw { display: block; width: 26px; height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.sw.none { background: linear-gradient(135deg, #fff 45%, var(--danger) 45% 55%, #fff 55%); }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.chip:hover { border-color: var(--brand); background: var(--brand-soft); }
.chip.off { opacity: .4; pointer-events: none; }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.danger { color: var(--danger); }
.chip .ico { width: 16px; height: 16px; }
.font-row, .font-wrap { display: flex; align-items: center; gap: 8px; }
.font-row select { height: 34px; padding: 0 6px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; }
.tog { width: 34px; height: 34px; border: 1.5px solid var(--line); border-radius: 9px; }
.tog.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tog-shadow b { font-family: "Titan One", sans-serif; font-weight: 400; text-shadow: 1px 2px 0 rgba(0, 0, 0, .3); }

.ed-tools { grid-area: tools; display: flex; flex-direction: column; gap: 3px; padding: 8px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; }
.ed-tools button { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 42px; padding: 0; border-radius: 11px; color: var(--muted); }
.ed-tools button:hover { background: var(--brand-soft); color: var(--brand-dark); }
.ed-tools button.on { background: var(--brand); color: #fff; }
.ed-tools .ico { width: 23px; height: 23px; }
.tool-tip { position: fixed; z-index: 950; transform: translateY(-50%); padding: 6px 10px; border-radius: 8px; background: #221c3f; color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.tool-tip::before { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: #221c3f; }
.tool-pick { display: flex; flex-direction: column; flex: none; }
.tool-pick [data-tool] { width: 100%; }
.ed-tools .tool-more { height: 18px; padding: 0; justify-content: center; border-radius: 7px; }
.ed-tools .tool-more .ico { width: 16px; height: 16px; }

.ed-catalog { grid-area: cat; position: relative; width: var(--side-w, 230px); background: var(--panel); border-right: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.cat-search { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 10px; color: var(--muted); }
.cat-search:focus-within { border-color: var(--brand); }
.cat-search input { border: 0; outline: 0; width: 100%; background: none; color: var(--ink); }
.cat-search .ico { width: 16px; height: 16px; }
.cat-grid { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.cat-grid h4 { font-size: 12px; color: var(--muted); }
.cat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; }
.cat-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border-radius: 10px; border: 2px solid transparent; color: var(--brand); min-width: 0; }
.cat-item span { font-size: 10.5px; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-item svg { width: 36px; height: 36px; }
.cat-item img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; }
.cat-item:hover { background: var(--brand-soft); }
.cat-item.on { border-color: var(--brand); background: var(--brand-soft); }

.ed-stage { grid-area: stage; position: relative; overflow: hidden; background: var(--stage); touch-action: none; user-select: none; min-width: 0; min-height: 0; }
.ed-stage.dropping { box-shadow: inset 0 0 0 4px var(--brand); }
#frame { position: absolute; box-shadow: 0 2px 16px rgba(34, 28, 63, .28); background: repeating-conic-gradient(#e6e3ee 0 25%, #fff 0 50%) 0 0 / 20px 20px; }
#art, #overlay { position: absolute; inset: 0; display: block; }
#overlay { overflow: visible; pointer-events: none; }
#overlay > * { pointer-events: auto; }
body[data-tool=select] #wk, body[data-tool=shapes] #wk, body[data-tool=text] #wk, body[data-tool=line] #wk { cursor: crosshair; }
body[data-tool=select] #wk { cursor: default; }
body[data-tool=text] #wk { cursor: text; }
body[data-tool=pencil] #wk, body[data-tool=marker] #wk, body[data-tool=eraser] #wk { cursor: none; }
body[data-tool=bucket] #wk { cursor: cell; }
body.panning #wk { cursor: grab; }
#brush { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); pointer-events: none; }
.hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 7px 14px; border-radius: 10px; background: rgba(34, 28, 63, .82); color: #fff; font-size: 12.5px; text-align: center; pointer-events: none; transition: opacity .25s; }
.hint.gone, body.busy .hint { opacity: 0; }

.sel-box { fill: transparent; stroke: var(--brand); stroke-width: 1.5; cursor: move; }
.sel-line { fill: none; stroke: var(--brand); stroke-width: 1.5; pointer-events: none !important; }
.sel-stem { stroke: var(--brand); stroke-width: 1.5; pointer-events: none !important; }
.handle { fill: #fff; stroke: var(--brand); stroke-width: 2; }
.handle.rot { cursor: grab; fill: var(--sun); }
.h-nw, .h-se { cursor: nwse-resize; }
.h-ne, .h-sw { cursor: nesw-resize; }
.h-n, .h-s { cursor: ns-resize; }
.h-e, .h-w { cursor: ew-resize; }
.marquee { fill: rgba(108, 59, 245, .12); stroke: var(--brand); stroke-dasharray: 5 4; pointer-events: none !important; }
.vertex { fill: #fff; stroke: var(--brand); stroke-width: 2; cursor: move; }
.vertex.on { fill: var(--brand); stroke: #fff; }
.v-mid { fill: var(--sun); stroke: var(--brand); stroke-width: 1.5; cursor: copy; opacity: .85; }
.v-mid:hover { opacity: 1; }
.v-add { fill: var(--sun); stroke: var(--ink); stroke-width: 2; pointer-events: none !important; }
.v-stem { stroke: var(--brand); stroke-width: 1.5; pointer-events: none !important; }
.v-handle { fill: var(--sun); stroke: var(--brand); stroke-width: 2; cursor: pointer; }
.line-draft { fill: none; stroke: var(--brand); stroke-width: 2.5; pointer-events: none !important; }
.line-next { stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 6 5; pointer-events: none !important; }
.line-dot { fill: #fff; stroke: var(--brand); stroke-width: 2; pointer-events: none !important; }
.line-dot.first { fill: var(--sun); }
.line-snap { fill: rgba(255, 201, 60, .35); stroke: var(--ink); stroke-width: 2; pointer-events: none !important; }
.text-edit { position: absolute; transform: translate(-50%, -50%); padding: 2px 6px; line-height: 1.2; text-align: center; background: rgba(255, 255, 255, .92); border: 2px solid var(--brand); border-radius: 6px; outline: 0; resize: none; overflow: hidden; white-space: pre; max-width: 95%; }

.ed-right { grid-area: right; background: var(--panel); border-left: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
#inspector { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.panel { padding: 14px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.panel h3 { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.ib-row { display: flex; }
.ib-row .ib { width: 28px; height: 28px; }
.row { display: flex; gap: 8px; }
.row .color-btn { flex: 1; }
.panel .slider { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.panel .slider input[type=range] { grid-column: 1 / -1; grid-row: 2; width: 100%; }
.panel .font-wrap { flex-direction: column; align-items: stretch; }
.panel .font-row select { flex: 1; min-width: 0; }
.num-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.num { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.num input { width: 100%; height: 32px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 8px; color: var(--ink); font-weight: 500; font-size: 13px; background: #fff; }
.arrange { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: stretch; gap: 2px; }
.arrange i { width: 0; margin: 4px 5px; border-left: 2px dashed var(--line-dark); }
.arrange-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: 9px; font-size: 11.5px; font-weight: 700; color: var(--ink); min-width: 0; }
.arrange-btn .ico { width: 24px; height: 24px; color: var(--bg); stroke-width: 2.6; }
.arrange-btn:not(:disabled):hover { background: var(--panel-2); }
.btn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.btn-grid .chip { min-width: 0; padding: 0 4px; gap: 4px; font-size: 12px; }


/* Handles for resizing panels */
.split { z-index: 6; touch-action: none; background: transparent; }
.split:hover, .split.dragging { background: var(--sun); }
.split-side { grid-area: cat; justify-self: end; width: 8px; margin-right: -4px; cursor: ew-resize; }
.split-right { grid-area: right; justify-self: start; width: 8px; margin-left: -4px; cursor: ew-resize; }
.split-time { grid-area: time; align-self: start; height: 8px; margin-top: -4px; cursor: ns-resize; }
#catalog[hidden] ~ #blooks[hidden] ~ .split-side, #timeline[hidden] ~ .split-time { display: none; }

/* Blook assets */
.blook-tip { font-size: 12px; }
.blook-close { width: 28px; height: 28px; }
.upload-add { flex: none; justify-content: center; }
.upload-item { position: relative; cursor: pointer; }
.upload-x { position: absolute; top: 2px; right: 2px; display: none; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: var(--panel); }
.upload-x .ico { width: 13px; height: 13px; }
.upload-item:hover .upload-x, .upload-item:focus-within .upload-x { display: grid; }

/* Timeline */
.ed-time { grid-area: time; background: var(--panel); border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.time-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 7px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.time-play, .time-keys, .time-set { display: flex; align-items: center; gap: 6px; flex: none; }
.play { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; }
.play:hover { background: var(--brand-dark); }
.play .ico { fill: currentColor; width: 18px; height: 18px; }
.frame-label { margin-left: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.frame-label b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ease { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-left: 4px; }
.ease.off { opacity: .45; }
.ease select { height: 34px; padding: 0 6px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; }
.num.mini { flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
.num.mini input { width: 62px; }
.time-tip { padding: 6px 14px; background: #fff7dd; color: #6b5310; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.time-body { display: grid; grid-template-columns: 170px 1fr; height: var(--time-h, 148px); overflow-y: auto; }
.time-names { border-right: 1px solid var(--line); background: var(--panel); position: sticky; left: 0; z-index: 3; min-height: 100%; }
.time-corner { height: 26px; line-height: 26px; padding: 0 10px; font-size: 11px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.time-name { display: block; width: 100%; height: 28px; padding: 0 10px; text-align: left; font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--line); }
.time-name:hover { background: var(--brand-soft); }
.time-name.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.time-empty { padding: 10px; color: var(--muted); font-size: 12.5px; }
.time-scroll { overflow-x: auto; overflow-y: hidden; min-height: 100%; }
.time-rail { position: relative; min-height: 100%; }
.ruler { position: sticky; top: 0; height: 26px; background-color: var(--panel-2); background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 16px 100%; border-bottom: 1px solid var(--line); cursor: ew-resize; z-index: 1; }
.ruler span { position: absolute; top: 5px; width: 16px; text-align: center; font-size: 10px; font-weight: 600; color: var(--muted); pointer-events: none; font-variant-numeric: tabular-nums; }
.time-row { position: relative; height: 28px; border-bottom: 1px solid var(--line); background-image: linear-gradient(90deg, var(--panel-2) 1px, transparent 1px); background-size: 16px 100%; cursor: pointer; }
.time-row.on { background-color: var(--brand-soft); }
.tween { position: absolute; top: 12px; height: 4px; border-radius: 2px; background: #cdbdfb; pointer-events: none; }
.key { position: absolute; top: 7px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); border-radius: 3px; background: var(--sun); box-shadow: 0 0 0 2px var(--brand); cursor: grab; touch-action: none; }
.key.on { background: var(--brand); box-shadow: 0 0 0 2px #fff, 0 0 0 3.500px var(--brand); }
#playhead { position: absolute; top: 0; bottom: 0; left: 7px; width: 2px; background: var(--danger); pointer-events: none; z-index: 2; }
#playhead i { position: absolute; top: 0; left: -5px; width: 12px; height: 10px; background: var(--danger); clip-path: polygon(0 0, 100% 0, 50% 100%); }

.page-strip { display: flex; align-items: stretch; gap: 8px; height: var(--time-h, 148px); padding: 10px 12px; overflow-x: auto; background: var(--panel-2); }
.page-card { position: relative; flex: none; height: 100%; min-width: 48px; border: 3px solid var(--line); border-radius: 10px; overflow: hidden; background: repeating-conic-gradient(#e6e3ee 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.page-card svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.page-card b { position: absolute; left: 4px; bottom: 3px; min-width: 18px; padding: 0 4px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; text-align: center; }
.page-card:hover { border-color: var(--brand); }
.page-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--sun); }
.page-card.drop { box-shadow: -5px 0 0 var(--brand); }
.page-card.dragging { opacity: .4; }
.page-add { flex: none; width: 56px; display: grid; place-items: center; border: 2px dashed var(--brand); border-radius: 10px; color: var(--brand); }
.page-add:hover { background: var(--brand-soft); }

@media (max-width: 860px) {
  .home { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100%; }
  .home-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .home-main { padding: 20px 16px; }
  .ed { grid-template-columns: 58px auto 1fr; grid-template-rows: 56px 52px minmax(0, 1fr) 210px auto; grid-template-areas: "top top top" "opts opts opts" "tools cat stage" "right right right" "time time time"; }
  .ed-right { border-left: 0; border-top: 1px solid var(--line); }
  .split-right { display: none; }
  .ed-top .btn span, .doc-name { display: none; }
  .upload { grid-template-columns: 1fr; }
  .size-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-list li { grid-template-columns: 60px 1fr 32px; }
  .admin-list li .field:nth-of-type(2) { grid-column: 2; grid-row: 2; }
}

/* Breadlet theme */
@font-face { font-family: "Titan One"; src: url(/fonts/TitanOne.woff2) format("woff2"); font-display: swap; }
h1, h2, .brand b, .opt-title b, .btn.big, .fit-ask b, .format b, .login-tabs button { font-family: "Titan One", Nunito, "Segoe UI", sans-serif; font-weight: 400; letter-spacing: .01em; }
h3, .btn { font-family: Nunito, "Segoe UI", sans-serif; font-weight: 800; }
.btn { border-radius: 8px; }
.btn.primary { box-shadow: 0 4px 0 var(--brand-dark); }
.btn.primary:hover { background: #12cedb; }
.btn.primary:active { box-shadow: 0 1px 0 var(--brand-dark); transform: translateY(3px); }
.btn.ghost { border: 0; background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--line-dark); }
.btn.ghost:hover { background: var(--crumb); }
.btn.ghost:active { box-shadow: 0 1px 0 var(--line-dark); transform: translateY(3px); }
.btn.danger { box-shadow: 0 4px 0 #a81f37; }
.dlg { border: 0; border-radius: 12px; box-shadow: 0 8px 0 rgba(0, 0, 0, .22); background: var(--panel); }
.dlg-back { background: rgba(58, 24, 70, .62); }
.field input, .field select { background: #fff; }
.brand { color: #fff; }
.brand b { font-size: 23px; text-shadow: 2px 3px 0 rgba(0, 0, 0, .24); }
.brand-mark { display: block; background: none; border: 0; border-radius: 0; width: 42px; height: 42px; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }

.home-side { background: var(--bg); border-right: 0; box-shadow: inset -9px 0 0 rgba(0, 0, 0, .13); padding: 22px 25px 18px 16px; color: #fff; }
.home-side h3 { color: #f5d3e4; }
.home-side .btn.ghost { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .16); }
.home-side .btn.ghost:hover { background: rgba(255, 255, 255, .28); }
.home-side .ib { color: #f5d3e4; }
.home-side .ib:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.home-main { background: var(--pattern), linear-gradient(150deg, #20c9d6, #2f9cec); }
.home-main h1 { color: #fff; font-size: 44px; text-shadow: 3px 4px 0 rgba(0, 0, 0, .22); }
.guest-note { max-width: 760px; }
.empty h2 { color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.empty .muted { color: #fff; font-weight: 700; }
.empty-art { background: #fff; color: var(--bg); border: 0; border-radius: 16px; box-shadow: 0 6px 0 rgba(0, 0, 0, .2); }
.card { border: 7px solid #3f9cf0; border-radius: 18px; background: #3f9cf0; box-shadow: 0 7px 0 rgba(0, 0, 0, .2); }
.card:hover { box-shadow: 0 10px 0 rgba(0, 0, 0, .2); transform: translateY(-3px); }
.thumb { border-radius: 11px 11px 0 0; background: var(--pattern), linear-gradient(150deg, #a65ab6, #8a2e60); }
.thumb img, .thumb-blank { border-radius: 6px; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.card-foot { background: #3f9cf0; color: #fff; padding: 9px 2px 3px 6px; }
.card-text b { font-family: "Titan One", Nunito, sans-serif; font-weight: 400; font-size: 15px; text-shadow: 0 2px 0 rgba(0, 0, 0, .16); }
.card-text small { color: #e4f2ff; font-weight: 700; }
.card-foot .ib { color: #fff; }
.card-foot .ib:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.folder { color: #fff; font-weight: 700; border-radius: 8px 0 0 8px; margin-right: -9px; width: calc(100% + 9px); }
.folder em { color: #f5d3e4; }
.folder:hover, .folder.drop { background: rgba(255, 255, 255, .18); color: #fff; }
.folder.on { background: #fff; color: var(--bg); }
.folder.on em { color: var(--bg); }
.dlg .folder { color: var(--ink); margin-right: 0; width: 100%; border-radius: 8px; }
.dlg .folder:hover { background: var(--brand-soft); color: var(--ink); }
.dlg .folder.on { background: var(--bg); color: #fff; }
.folder-row:has(.folder.on) .folder-more { color: var(--bg); }
.folder-more { right: -5px; }
.folder-row .folder { padding-right: 34px; }
.who { border-top-color: rgba(255, 255, 255, .25); }
.who-icon { background: var(--crumb); color: var(--ink); border: 0; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.admin-link { color: #f5d3e4; }
.admin-link:hover { color: #fff; }
.steps li.on, .steps li.done { border-color: var(--brand); }
.type-card, .size-card, .radio { border-color: var(--line); }
.type-art { background: var(--bg); color: #fff; border: 0; box-shadow: 0 4px 0 var(--bg-2); }
.size-art i { background: var(--brand); box-shadow: 0 0 0 2px var(--brand-dark); }
.size-art i.round { border-radius: 9px; }
.corner-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.corner-pick .radio { align-items: center; padding: 8px 12px; }
.corner-pick [type=radio] { position: absolute; opacity: 0; }
.corner-art { width: 24px; height: 24px; background: var(--brand); box-shadow: 0 0 0 2px var(--brand-dark); }
.corner-art.round { border-radius: 8px; }

.ed-top { background: var(--bg); color: #fff; border-bottom: 0; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .13); padding-bottom: 5px; }
.ed-top .doc-name { color: #fff; }
.ed-top .doc-name:focus { color: var(--ink); }
.ed-top .saved { color: #f5d3e4; font-weight: 700; }
.ed-top .group { background: var(--bg-2); }
.ed-top .ib, .ed-top .zoomval { color: #fff; }
.ed-top .ib:hover, .ed-top .zoomval:hover { background: #fff; color: var(--bg); }
.ed-opts { background: #fff; border-bottom: 3px solid var(--line); }
.opt-label { font-weight: 800; font-size: 13px; color: var(--muted); }
.ed-tools { background: var(--bg); border-right: 0; box-shadow: inset -5px 0 0 rgba(0, 0, 0, .13); padding-right: 11px; }
.ed-tools button { color: #fff; }
.ed-tools button:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.ed-tools button.on { background: #fff; color: var(--bg); box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.ed-right { border-left: 3px solid var(--line); }
.ed-catalog { border-right: 3px solid var(--line); }
.ed-stage { background: var(--pattern), linear-gradient(150deg, #20c9d6, #2f9cec); }
#frame { box-shadow: 0 8px 0 rgba(0, 0, 0, .2); }
.ed-time { border-top: 3px solid var(--line); }
.hint { background: var(--ink); color: #fff; border: 0; border-radius: 8px; }
.play { box-shadow: 0 3px 0 var(--brand-dark); }
.chip.on { background: var(--brand); border-color: var(--brand-dark); color: #fff; }
.toast { border: 0; border-radius: 8px; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.sw { box-shadow: inset 0 0 0 2px rgba(75, 30, 55, .3); }
.admin-note, .guest-note { padding: 10px 14px; border-radius: 10px; background: var(--crumb); color: var(--ink); font-weight: 700; box-shadow: 0 4px 0 var(--crust); margin-bottom: 18px; }
.admin { min-height: 100%; }
.admin h1, .admin h2 { color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.admin > .muted { color: #f5d3e4; }
.upload .field span, .upload .check { color: #fff; }
.upload-side { display: flex; flex-direction: column; gap: 10px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; cursor: pointer; }
.admin-list li { grid-template-columns: 60px 1fr 1fr auto 32px; align-items: center; }

/* Welcome screen */
.welcome { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 100%; padding: 20px 16px; background: var(--pattern), linear-gradient(150deg, #20c9d6, #2f9cec); }
.welcome-art { position: relative; z-index: 1; }
.welcome-copy { display: grid; grid-template-columns: auto auto; column-gap: 14px; align-items: center; color: #fff; }
.welcome-copy h1 { font-size: clamp(36px, 6vw, 54px); color: #fff; line-height: 1; text-shadow: 5px 6px 0 rgba(0, 0, 0, .24); }
.welcome-copy p { font-size: 17px; font-weight: 800; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.brand-mark.big { grid-row: span 2; width: 88px; height: 88px; }
.floaters { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.floater { position: absolute; bottom: 0; animation: drift linear infinite; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .16)); }
@keyframes drift {
  from { transform: translate(0, 130px) rotate(calc(var(--spin) * -1)); }
  50% { transform: translate(var(--sway), -50vh) rotate(var(--spin)); }
  to { transform: translate(0, calc(-100vh - 170px)) rotate(calc(var(--spin) * -1)); }
}
@media (prefers-reduced-motion: reduce) {
  .floater { animation: none; bottom: var(--rest); }
}
.welcome-form { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; }
.login-card { width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--panel); border-radius: 14px; box-shadow: 0 8px 0 rgba(0, 0, 0, .22); }
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--panel-2); border-radius: 10px; }
.login-tabs button { height: 38px; border-radius: 8px; }
.login-tabs button.on { background: var(--bg); color: #fff; }
.login-note:empty { display: none; }
.login-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; font-size: 13px; }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: 2px solid var(--line); }
.login-guest { text-align: center; }

/* Accounts */
.who { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 2px solid; }
.who-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; }
.who-icon .ico { width: 18px; height: 18px; }
.who-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }

/* Export and picture choices */
.format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.format { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 9px 11px; border: 2px solid var(--line); border-radius: 12px; text-align: left; }
.format b { font-family: Fredoka, sans-serif; font-size: 16px; }
.format small { color: var(--muted); }
.format:hover { border-color: var(--ink); }
.format.on { border-color: var(--ink); background: var(--sun); }
.format.on small { color: var(--ink); }
.pic-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.pic-art .ico { width: 56px; height: 56px; }
.pic-choice { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px; border: 2px solid var(--line); border-radius: 14px; text-align: center; }
.pic-choice:not(:disabled):hover { border-color: var(--ink); background: var(--panel-2); }
.pic-choice small { color: var(--muted); }
.pic-art { display: grid; place-items: center; width: 100%; height: 170px; margin-bottom: 6px; border-radius: 10px; color: var(--brand); background: repeating-conic-gradient(#efe6d4 0 25%, #fff 0 50%) 0 0 / 18px 18px; overflow: hidden; }
.pic-art img, .pic-art svg { max-width: 100%; max-height: 100%; height: 100%; object-fit: contain; }

/* Canvas helpers */
.fit-ask { position: absolute; z-index: 5; top: 14px; right: 14px; width: min(280px, calc(100% - 28px)); padding: 12px 14px; background: var(--panel); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); display: flex; flex-direction: column; gap: 4px; }
.fit-ask b { font-family: Fredoka, sans-serif; font-size: 16px; }
.fit-ask p { font-size: 13px; color: var(--muted); }
.fit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.shape-ghost { position: fixed; z-index: 80; width: 64px; height: 64px; transform: translate(-50%, -50%); color: var(--brand); pointer-events: none; opacity: .85; }
.shape-ghost svg { width: 100%; height: 100%; }
.cat-item { position: relative; touch-action: none; }
.cat-item.locked svg { opacity: .55; }
body[data-tool=lasso] #wk { cursor: crosshair; }

/* Gradient picker */
.pop-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--panel-2); border-radius: 10px; }
.pop-tabs button { height: 28px; border-radius: 8px; font-weight: 700; font-size: 12.5px; }
.pop-tabs button.on { background: var(--ink); color: var(--sun); }
.grad-bar { height: 34px; border-radius: 9px; box-shadow: inset 0 0 0 2px rgba(43, 26, 77, .3); }
.grad-stops { display: flex; align-items: center; gap: 6px; }
.grad-stop { width: 34px; height: 34px; border-radius: 9px; box-shadow: inset 0 0 0 2px rgba(43, 26, 77, .3); }
.grad-stop.on { outline: 3px solid var(--ink); outline-offset: 1px; }
.grad-swap { display: grid; place-items: center; width: 28px; height: 28px; color: var(--muted); }
.grad-stops [type=color] { width: 34px; height: 34px; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; }
.grad-angle { display: flex; align-items: center; gap: 14px; }
.dial { position: relative; width: 62px; height: 62px; flex: none; border-radius: 50%; background: #fff; border: 3px solid var(--ink); cursor: grab; touch-action: none; }
.dial i { position: absolute; left: 50%; top: 50%; width: 26px; height: 4px; margin-top: -2px; background: var(--brand); border-radius: 2px; transform-origin: 0 50%; }
.dial i::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid var(--ink); }

@media (max-width: 860px) {
  .floater { transform: scale(.6); }
  .pic-choices { grid-template-columns: 1fr; }
}
.shape-ghost img { width: 100%; height: 100%; object-fit: contain; }

/* New project: what are you making? */
.kind-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kind-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; border: 2px solid var(--line); border-radius: 14px; text-align: center; }
.kind-card:hover, .kind-card.on { border-color: var(--brand); background: var(--brand-soft); }
.kind-card small { color: var(--muted); font-size: 12px; }
.kind-art { display: grid; place-items: center; width: 100%; height: 88px; margin-bottom: 6px; color: var(--brand-dark); }
.kind-art.big { height: 170px; }
.kind-art .ico { width: 44px; height: 44px; }
.template-art { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; }

/* Packs */
.pack-visual { position: relative; display: block; aspect-ratio: 200 / 220; }
.pack-visual > img:first-child { display: block; width: 100%; height: 100%; }
.pack-art { position: absolute; left: -.3%; top: 12.5%; width: 100.6%; height: 75.5%; object-fit: cover; }
.pack-blank { display: grid; place-items: center; background: #2ca3e8; color: #fff; font: 400 16px "Titan One", sans-serif; }
.pack-new { margin-bottom: 18px; }
.pack-none { color: #fff; font-weight: 800; }
.pack-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.pack-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; background: var(--panel); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(34, 28, 63, .1); }
.pack-card > b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-edit { width: 120px; transition: transform .1s; }
.pack-edit:hover { transform: scale(1.04) rotate(-1deg); }
.dlg:has(.pack-maker), .dlg:has(.pick-grid) { width: min(780px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.pack-maker { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; }
.pack-side { display: flex; flex-direction: column; gap: 10px; }
.pack-pick { width: 150px; align-self: center; }
.back-pick { display: grid; place-items: center; height: 92px; overflow: hidden; border: 2px dashed var(--line-dark); border-radius: 10px; color: var(--muted); }
.back-pick img { width: 100%; height: 100%; object-fit: cover; }
.back-pick i { font-style: normal; }
.pack-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pack-list-head { display: flex; align-items: center; justify-content: space-between; }
.pack-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 122px 74px 28px; gap: 6px; align-items: center; }
.pack-thumb { width: 44px; height: 44px; }
.pack-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pack-row input, .pack-row select { width: 100%; height: 36px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; }
.pack-odds { display: flex; align-items: center; gap: 3px; }
.linkish { color: var(--brand-dark); font-weight: 800; text-decoration: underline; }
.pick-tabs { display: flex; gap: 6px; }
.pick-tabs button { padding: 7px 12px; border-radius: 9px; font-weight: 700; }
.pick-tabs button.on { background: var(--brand); color: #fff; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; height: 340px; overflow-y: auto; align-content: start; }
.pick-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; border: 2px solid var(--line); border-radius: 11px; font-size: 12px; min-width: 0; }
.pick-item:hover { border-color: var(--brand); }
.pick-item img { width: 76px; height: 76px; object-fit: contain; }
.pick-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A Blook's own card */
.dlg.blook-card { position: relative; flex-direction: row; gap: 22px; width: min(780px, 100%); background: #a83f78; color: #fff; border: 5px solid #bf5c90; }
.blook-card-x { position: absolute; top: 12px; right: 14px; color: #fff; opacity: .55; }
.blook-card-art { display: grid; place-items: center; flex: none; width: 340px; aspect-ratio: 1; border-radius: 20px; background: #2ca7e7 center / cover; }
.blook-card-art img { width: 58%; }
.blook-card-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dlg.blook-card h2 { font-size: 36px; line-height: 1.1; }
.blook-card-text p { font-size: 20px; font-weight: 800; }
.blook-card-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.blook-card-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px; background: rgba(0, 0, 0, .22); font-weight: 800; }
.blook-card-chips i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; }
.blook-card-chips .token { background: #f5c518; color: #8a5a00; font: 400 13px "Titan One", sans-serif; }

/* Test opening a pack */
.opener { --rarity: #3f0828; position: fixed; inset: 0; z-index: 900; overflow: hidden; background: #24042b; transition: background-color .5s .3s; }
.opener.lit { background: color-mix(in srgb, var(--rarity) 16%, #050505); }
.opener-tiles { position: absolute; inset: -18px; display: grid; grid-template-columns: repeat(auto-fill, 140px); gap: 28px; justify-content: center; align-content: center; }
.opener-tiles i { height: 140px; border-radius: 12px; background: #3f0828; transition: background-color 0s calc(var(--d, 0ms) + 150ms); }
.opener.lit .opener-tiles i { background: color-mix(in srgb, var(--rarity) calc(var(--glow) * 100%), #070707); }
.opener[data-wave="a"] .opener-tiles i { animation: tile-flip-a .3s ease-in-out var(--d, 0ms); }
.opener[data-wave="b"] .opener-tiles i { animation: tile-flip-b .3s ease-in-out var(--d, 0ms); }
@keyframes tile-flip-a { 50% { transform: scaleX(0); } }
@keyframes tile-flip-b { 50% { transform: scaleX(0); } }
.opener[data-rarity="chroma"].lit .opener-tiles, .opener[data-rarity="unique"].lit .opener-tiles { animation: tile-shimmer 3s linear infinite; }
@keyframes tile-shimmer { to { filter: hue-rotate(360deg); } }
.opener-x { position: absolute; top: 14px; right: 16px; z-index: 3; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: rgba(255, 255, 255, .16); color: #fff; }
.opener-x .ico { width: 26px; height: 26px; }
.opener-count { position: absolute; left: 62px; bottom: 34px; z-index: 1; font: 400 52px "Titan One", sans-serif; color: rgba(255, 255, 255, .22); }
.opener-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.opener-pack { width: min(400px, 74vw, 52vh); animation: pack-in .35s ease-out; cursor: pointer; }
.opener-pack:hover { transform: scale(1.03); }
.opener-pack.shake { animation: pack-shake .75s ease-in forwards; }
@keyframes pack-in { from { transform: scale(.5); opacity: 0; } }
@keyframes pack-shake {
  0%, 100% { transform: none; }
  15% { transform: rotate(-4deg) scale(1.02); }
  30% { transform: rotate(4deg) scale(1.04); }
  45% { transform: rotate(-6deg) scale(1.06); }
  60% { transform: rotate(6deg) scale(1.08); }
  80% { transform: rotate(-3deg) scale(1.14); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.opener-amounts { display: flex; gap: 8px; }
.opener-amounts button { min-width: 62px; height: 42px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; font: 400 18px "Titan One", sans-serif; }
.opener-amounts button.on { background: #fff; color: #3f0828; }
.reveal-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(500px, 88vw, 62vh); aspect-ratio: 500 / 510; overflow: hidden; border-radius: 12px; background: #2ca7e7 center / cover; box-shadow: 0 10px 0 rgba(0, 0, 0, .28); }
.enter-pop { animation: enter-pop .3s ease-out; }
.enter-rise { animation: enter-rise .6s cubic-bezier(.2, 1.5, .4, 1); }
.enter-grow { animation: enter-grow .9s ease-out; }
.enter-drop { animation: enter-drop .8s cubic-bezier(.5, 0, .5, 1); }
.enter-spin { animation: enter-spin 1.3s cubic-bezier(.15, .6, .3, 1); }
@keyframes enter-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes enter-rise { from { transform: translateY(70vh) scale(.6); } }
@keyframes enter-grow {
  0% { transform: scale(.2); opacity: 0; }
  35% { transform: scale(1.18); opacity: 1; }
  50% { transform: scale(1.12) translateX(-14px) rotate(-3deg); }
  65% { transform: scale(1.08) translateX(12px) rotate(3deg); }
  80% { transform: scale(1.03) translateX(-5px) rotate(-1deg); }
}
@keyframes enter-drop {
  0% { transform: translateY(-110vh); }
  70% { transform: translateY(0); }
  82% { transform: translateY(0) scale(1.06, .92); }
  92% { transform: translateY(-18px) scale(.98, 1.03); }
}
@keyframes enter-spin {
  0% { transform: rotate(0) scale(.05); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: rotate(1440deg) scale(1); }
}
.reveal-name, .reveal-rarity, .reveal-odds { font-family: "Titan One", sans-serif; font-weight: 400; line-height: 1.12; text-shadow: 0 3px 0 rgba(0, 0, 0, .28); }
.reveal-name { margin-top: 5%; color: #fff; font-size: clamp(26px, 5.4vh, 46px); }
.reveal-rarity { color: var(--rarity); font-size: clamp(20px, 3.8vh, 34px); }
.reveal-card img { flex: 1; min-height: 0; max-width: 50%; margin: 2% 0; object-fit: contain; }
.reveal-odds { margin-bottom: 7%; color: #fff; font-size: clamp(22px, 4.2vh, 36px); }
.opener-next { position: relative; z-index: 2; display: flex; gap: 10px; }
.opener-next .btn { width: auto; padding: 0 26px; }
.confetti { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }

/* The Test page */
.test-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.test-tabs button { padding: 8px 18px; border: 3px solid #bf5c90; border-radius: 10px; background: var(--bg); color: #fff; font: 400 16px "Titan One", sans-serif; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.test-tabs button.on { background: #fff; color: var(--bg); }
.my-blooks { display: flex; flex-direction: column; gap: 22px; padding: 22px 26px; border: 6px solid #bf5c90; border-radius: 12px; background: var(--bg); color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.my-pack h2 { padding-bottom: 8px; border-bottom: 3px solid #fff; color: #fff; font-size: 34px; text-shadow: 0 3px 0 rgba(0, 0, 0, .22); }
.my-grid { display: grid; grid-template-columns: repeat(auto-fill, 72px); gap: 16px; margin-top: 14px; }
.my-blook { position: relative; display: block; width: 72px; height: 72px; transition: transform .1s; }
.my-blook:not(.locked):hover { transform: scale(1.1); }
.my-blook img { width: 100%; height: 100%; object-fit: contain; }
.my-blook em { position: absolute; left: -3px; bottom: -3px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; border: 2px solid #fff; border-radius: 10px; color: #fff; font: normal 800 11px Nunito, sans-serif; }
.my-blook.locked img { filter: brightness(0); }
.my-blook.locked .ico { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; color: #bdbdbd; }
.blook-card-chips img { width: 22px; height: 22px; }
.blook-card-total { margin-top: auto; }

@media (max-width: 760px) {
  .pack-maker { grid-template-columns: 1fr; }
  .kind-cards { grid-template-columns: repeat(2, 1fr); }
  .dlg.blook-card { flex-direction: column; }
  .blook-card-art { width: 100%; }
  .pack-row { grid-template-columns: 40px minmax(0, 1fr) 84px 58px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .opener-pack, .opener-pack.shake, .reveal-card, .opener[data-wave] .opener-tiles i, .opener-tiles { animation: none !important; }
  .confetti { display: none; }
}

/* Textures and swapping colours, in the Selected and Canvas panels */
.texture, .swaps, .shadow-box { display: flex; flex-direction: column; gap: 8px; }
.guide { pointer-events: none !important; }
.align-row { display: flex; flex-wrap: wrap; gap: 1px; }
.align-row .ib { width: 26px; height: 28px; padding: 0; }
.align-row .ib:disabled { opacity: .35; }
.readout { position: fixed; z-index: 50; pointer-events: none; background: #2b1d38; color: #fff; font: 700 12px/1 system-ui, sans-serif; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.home-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.home-tools input, .home-tools select { height: 38px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; background: #fff; }
.home-tools input { width: 200px; }
.fold { border-top: 1.5px solid var(--line); padding-top: 8px; }
.fold > summary { cursor: pointer; font-weight: 800; font-size: 13px; list-style: none; display: flex; align-items: center; gap: 6px; user-select: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold-body { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.keys-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; max-height: 60vh; overflow: auto; }
.keys-list kbd { font: 700 12px/1 ui-monospace, monospace; background: var(--brand-soft, #eee); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; white-space: nowrap; justify-self: start; align-self: start; }
.shadow-box .muted { margin: -4px 0 0; }
.sub { font-weight: 700; font-size: 13px; }
.tex-pick, .swap-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tex-btn { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); }
.tex-btn svg { width: 100%; height: 100%; }
.tex-btn.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.tex-move { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.tex-move select { height: 32px; padding: 0 6px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; }
.swap { padding: 0; border-radius: 8px; }
.swap .sw { display: block; width: 28px; height: 28px; }

/* Page headings with something beside them */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 22px; }
.home-main .page-head h1 { margin: 0; }

/* The Market: pack cards like Blooket's */
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 30px 28px; }
.market-note { margin-bottom: 18px; color: #fff; font-weight: 800; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.market-card { position: relative; }
.community-bar { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.community-bar select { height: 38px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fff; font-weight: 700; }
.community-pack { display: flex; flex-direction: column; gap: 8px; }
.votes { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .92); border-radius: 10px; padding: 4px 8px; font-weight: 800; }
.votes small { margin-left: auto; color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote { width: 28px; height: 28px; border-radius: 8px; color: var(--muted); font-size: 13px; }
.vote:not(:disabled):hover { background: var(--panel-2); }
.vote.up.on { color: #fff; background: #2e9e6a; }
.vote.down.on { color: #fff; background: var(--danger); }
.market-open { display: flex; flex-direction: column; width: 100%; overflow: hidden; border: 4px solid color-mix(in srgb, var(--pack) 60%, #fff); border-radius: 14px; background: #3d8ce8; box-shadow: 0 6px 0 rgba(0, 0, 0, .2); transition: transform .12s; }
.market-open:hover { transform: translateY(-4px) scale(1.02); }
.market-open:active { transform: scale(.98); }
.market-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--pack) 72%, #fff) 0, var(--pack) 62%, color-mix(in srgb, var(--pack) 82%, #000) 100%); }
.market-art .pack-visual { width: 74%; transform: rotate(-4deg); filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .3)); z-index: 1; }
.market-icon { position: absolute; right: -4%; bottom: -4%; width: 34%; aspect-ratio: 1; background: #fff; opacity: .32; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.market-price { display: flex; align-items: center; justify-content: center; gap: 8px; height: 60px; border-top: 4px solid #fff; color: #fff; font: 400 30px "Titan One", sans-serif; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.token-img { width: 1em; height: 1em; flex: none; }
.market-price .token-img { width: 30px; height: 30px; }
.market-edit { position: absolute; top: -10px; left: -10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid #fff; border-radius: 50%; background: var(--bg); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.market-edit:hover { transform: scale(1.1); }
.market-edit .ico { width: 18px; height: 18px; }
.market-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 260px; border: 4px dashed rgba(255, 255, 255, .7); border-radius: 14px; color: #fff; font: 400 22px "Titan One", sans-serif; background: rgba(255, 255, 255, .1); }
.market-new:hover { background: rgba(255, 255, 255, .2); }
.market-new .ico { width: 44px; height: 44px; }
.my-pack h2 small { font: 700 15px Nunito, sans-serif; opacity: .8; }

/* Buying a pack */
.dlg.buy-dlg { position: relative; width: min(830px, 100%); padding: 24px; border: 6px solid #bf5c90; border-radius: 16px; background: var(--bg); color: #fff; }
.buy-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; color: rgba(255, 255, 255, .6); }
.buy-x:hover { color: #fff; }
.buy-x .ico { width: 28px; height: 28px; stroke-width: 3; }
.buy { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 26px; align-items: start; }
.buy-art .market-art { border: 5px solid color-mix(in srgb, var(--pack) 70%, #fff); border-radius: 16px; box-shadow: 0 6px 0 rgba(0, 0, 0, .2); }
.buy-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding-right: 30px; }
.dlg .buy-side h2 { font: 400 38px/1.05 "Titan One", sans-serif; text-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.buy-by { margin-top: -8px; font-weight: 800; opacity: .85; }
.buy-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 34px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .22); color: #fff; font: 800 15px Nunito, sans-serif; }
button.buy-chip:hover:not(:disabled) { background: rgba(255, 255, 255, .34); }
.buy-chip:disabled { opacity: .45; cursor: default; }
.buy-chip .ico { width: 18px; height: 18px; }
.buy-price { background: rgba(0, 0, 0, .2); font-size: 17px; }
.buy-price .token-img { width: 24px; height: 24px; }
.buy-qty { display: flex; align-items: center; gap: 12px; font: 800 22px Nunito, sans-serif; }
.buy-qty input { width: 68px; height: 54px; padding: 0 10px; border: 4px solid rgba(255, 255, 255, .3); border-radius: 10px; background: var(--bg); color: #fff; font: 800 24px Nunito, sans-serif; }
.buy-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.buy-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; margin-top: 4px; border-radius: 10px; background: #3b4dc8; box-shadow: 0 5px 0 #2a3794; color: #fff; font: 800 26px Nunito, sans-serif; }
.buy-go:hover { filter: brightness(1.08); }
.buy-go:active { transform: translateY(3px); box-shadow: 0 2px 0 #2a3794; }
.buy-go .token-img { width: 30px; height: 30px; }
.buy-rate-list { display: flex; flex-direction: column; gap: 6px; width: 100%; max-height: 330px; overflow-y: auto; list-style: none; padding: 0; }
.buy-rate-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .16); }
.buy-rate-pic { width: 42px; height: 42px; object-fit: contain; }
.buy-rate-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-rate-rarity { display: inline-flex; align-items: center; gap: 5px; font: 400 15px "Titan One", sans-serif; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.buy-rate-rarity img { width: 20px; height: 20px; }
.buy-rate-list em { font-style: normal; font-weight: 800; min-width: 52px; text-align: right; }
.opener-tap { color: rgba(255, 255, 255, .75); font: 400 20px "Titan One", sans-serif; }

/* Card colour and icon, in the pack maker */
.pack-looks { display: flex; gap: 10px; align-items: flex-end; }
.pack-looks input[type=color] { width: 70px; height: 44px; padding: 2px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.icon-pick { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 9px; background: var(--pack); color: #fff; }
.icon-pick .market-icon { inset: 6px; width: auto; opacity: .7; }
.icon-pick .ico { width: 22px; height: 22px; }
.pack-pick .market-art { border-radius: 12px; }

/* Reviewing Community packs */
.review-head { margin: 14px 0 8px; color: #fff; font-size: 15px; }
.review-list { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin-bottom: 20px; }
.review { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 10px; background: var(--panel); border-radius: 12px; }
.review:not(:has([data-approve])) { grid-template-columns: 64px minmax(0, 1fr) auto auto; }
.review-art .market-art { width: 64px; border-radius: 8px; }
.review-text { display: flex; flex-direction: column; min-width: 0; }
.review-text small { color: var(--muted); }
.review-text em { align-self: flex-start; margin-top: 4px; padding: 1px 8px; border-radius: 6px; background: #ffe6a6; color: #8a5a00; font-style: normal; font-size: 12px; font-weight: 800; }
.review-text em.ok { background: #d5f5d0; color: #23661a; }

@media (max-width: 760px) {
  .buy { grid-template-columns: 1fr; }
  .buy-side { padding-right: 0; }
  .market-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
  .market-price { height: 48px; font-size: 24px; }
  .review, .review:not(:has([data-approve])) { grid-template-columns: 56px minmax(0, 1fr) auto; }
}


/* The Layers panel */
.panel.layers { flex: 0 1 auto; max-height: 45%; min-height: 0; overflow-y: auto; gap: 6px; border-top: 1px solid var(--line); border-bottom: 0; }
.layers .panel-head h3 { display: flex; align-items: center; gap: 6px; }
.layers .panel-head h3 .ico { width: 16px; height: 16px; }
.layer-tools { display: flex; gap: 2px; }
.layer-tools .ib { width: 30px; height: 30px; }
.layer-tools .ib:disabled { opacity: .35; }
.layer-list, .layer-list ul { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.layer-list ul { padding-left: 18px; }
.layer-row { display: flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 4px; border: 2px solid transparent; border-radius: 8px; font-size: 13px; cursor: pointer; user-select: none; }
.layer-row:hover { background: var(--brand-soft); }
.layer-row.on { background: var(--brand-soft); border-color: var(--brand); }
.layer-row.is-hidden .lr-name, .layer-row.is-hidden .lr-icon { opacity: .4; }
.layer-row.drop-above { box-shadow: 0 -3px 0 var(--brand); }
.layer-row.drop-below { box-shadow: 0 3px 0 var(--brand); }
.layer-row button { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6px; color: var(--muted); }
.layer-row button:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.layer-row .ico { width: 15px; height: 15px; }
.lr-icon { display: grid; place-items: center; color: var(--muted); }
.lr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lr-count { padding: 0 6px; border-radius: 8px; background: var(--panel-2); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 800; }
.lr-lock { opacity: .35; }
.layer-row:hover .lr-lock, .lr-lock.locked { opacity: 1; }
.lr-lock.locked { color: var(--brand); }
.lr-open .ico { transition: transform .12s; }
.lr-open.open .ico { transform: rotate(90deg); }
.lr-rename { flex: 1; min-width: 0; height: 26px; padding: 0 6px; border: 1.5px solid var(--brand); border-radius: 6px; font: inherit; }

/* Text alignment and warps */
.text-shape-wrap { display: flex; flex-direction: column; gap: 8px; }
.text-shape { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.align-row { display: flex; gap: 3px; }
.align-row.off { opacity: .4; pointer-events: none; }
.align-row .tog .ico { width: 18px; height: 18px; }
.warp-pick { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.warp-pick select { height: 34px; padding: 0 6px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; }
#opts .font-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Picking colours from pictures */
.pop-pick { flex-wrap: wrap; }
.pop-pick .btn { gap: 5px; }
.pop-pick .ico { width: 15px; height: 15px; }
.dlg.pick-colour { width: min(640px, 100%); }
.pc-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-thumb { width: 54px; height: 54px; padding: 3px; border: 2px solid var(--line); border-radius: 10px; background: repeating-conic-gradient(#ece9f3 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.pc-thumb.on { border-color: var(--brand); }
.pc-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pc-file { gap: 6px; cursor: pointer; }
.pc-stage { display: grid; place-items: center; min-height: 160px; padding: 8px; border-radius: 12px; background: repeating-conic-gradient(#ece9f3 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.pc-stage canvas { max-width: 100%; cursor: crosshair; }
.pc-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-swatch { width: 30px; height: 30px; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--line); }
.pc-swatch:hover { transform: scale(1.1); }
.pc-foot { display: flex; align-items: center; gap: 10px; }
.pc-now { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.pc-now i { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1.5px var(--line); }

/* "Smoothen your lines?" sits top left, so it never covers "Expand canvas to fit?" */
.fit-ask.smooth-ask { left: 14px; right: auto; }
.ask-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

/* Background remover */
.dlg.bg-remove { width: min(640px, 100%); }
.bgr-stage { display: grid; place-items: center; min-height: 200px; padding: 10px; border-radius: 12px; background: repeating-conic-gradient(#ece9f3 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.bgr-stage canvas { max-width: 100%; cursor: crosshair; }
.bg-remove .slider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-weight: 700; }

/* More fonts */
.dlg.font-dlg { width: min(720px, 100%); }
.font-dlg.busy { opacity: .6; pointer-events: none; }
.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
.font-card { display: grid; place-items: center; min-height: 62px; padding: 8px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font-size: 20px; line-height: 1.1; text-align: center; }
.font-card b { font-weight: 400; }
.font-card:hover { border-color: var(--brand); background: var(--brand-soft); }
.font-any { margin: 0; }
#fupload { cursor: pointer; }

/* Several textures */
.texture-list { display: flex; flex-direction: column; gap: 14px; }
.texture-list .texture + .texture { padding-top: 12px; border-top: 1px dashed var(--line); }
.tex-head { display: flex; align-items: center; justify-content: space-between; }
.tex-head .ib { width: 26px; height: 26px; }
.tex-head .ico { width: 15px; height: 15px; }
.keys-btn { font-weight: 900; font-size: 16px; }