/* mimer editor + Start screen. Same palette as app.css; the editor is pinned to the screen edges (position: fixed)
   so its height never depends on browser viewport units. */
@font-face { font-family: Inter; src: url(/assets/fonts/inter-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url(/assets/fonts/inter-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Fredoka; src: url(/assets/fonts/fredoka-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lilita One"; src: url(/assets/fonts/lilita-one.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Tinos; src: url(/assets/fonts/tinos-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Caveat; src: url(/assets/fonts/caveat-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kaushan Script"; src: url(/assets/fonts/kaushan-script.woff2) format('woff2'); font-weight: 400; font-display: swap; }
.f-clean { font-family: Inter, sans-serif; font-weight: 500; }
.f-soft { font-family: Fredoka, sans-serif; font-weight: 600; }
.f-punchy { font-family: "Lilita One", sans-serif; font-weight: 400; }
.f-classic { font-family: Tinos, "Times New Roman", serif; font-weight: 700; }
.f-hand { font-family: Caveat, cursive; font-weight: 700; }

/* ---------------------------------------------------------------- shared bits */
.icon, .ed svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ib { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 12px; color: var(--text); cursor: pointer; text-decoration: none; }
.ib:disabled { opacity: .35; cursor: default; }
.ib.on { color: var(--bright); }
.ib-gap { width: 44px; }
.pill { min-height: 44px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent; background: #fff; color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.pill.ghost { background: none; border-color: rgba(255, 255, 255, .75); color: #fff; }
.pill.small { min-height: 36px; padding: 0 16px; font-size: 14px; gap: 6px; }
.pill.wide { width: 100%; min-height: 52px; }
.pill.ghost.wide { min-height: 48px; }
.pill.soon { opacity: .55; border-style: dashed; cursor: default; }
.sp { flex: 1; }
.seg { display: flex; gap: 6px; }
.seg button { height: 36px; min-width: 56px; padding: 0 12px; border-radius: 999px; border: 2px solid #3b6a58; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.seg button.on { background: #fff; color: var(--bg); border-color: #fff; }
.lbl { font-size: 13px; color: var(--muted); margin: 0; }
.hidden-input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

/* ---------------------------------------------------------------- the editor */
body.page-editor { overflow: hidden; overscroll-behavior: none; }
.ed { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); bottom: env(safe-area-inset-bottom, 0px);
  display: flex; flex-direction: column; background: var(--bg); z-index: 10; -webkit-user-select: none; user-select: none; }
.ed-top { flex: none; display: flex; align-items: center; gap: 4px; padding: 10px 12px 6px; }
.ex-title { font-size: 17px; }
.ed-stage { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; touch-action: none; overflow: hidden; position: relative; }
.ed-wrap { position: relative; flex: none; box-shadow: 0 0 0 1px var(--line); }
.ed-wrap canvas { display: block; width: 100%; height: 100%; }
.ed-size { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.ed-add { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 22px; border-radius: 16px; border: 2px dashed var(--bright); background: rgba(7, 20, 15, .72); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

.ed-sel { position: absolute; border: 2px solid var(--bright); box-sizing: border-box; pointer-events: none; transform-origin: 50% 50%; }
.hd { position: absolute; width: 16px; height: 16px; box-sizing: border-box; background: #fff; border: 2px solid var(--bright); pointer-events: auto; touch-action: none; }
.hd::after { content: ""; position: absolute; inset: -16px; }
.hd-nw { left: -9px; top: -9px; } .hd-ne { right: -9px; top: -9px; } .hd-sw { left: -9px; bottom: -9px; } .hd-se { right: -9px; bottom: -9px; }
.hd-l, .hd-r { width: 14px; height: 36px; top: 50%; margin-top: -18px; border-radius: 7px; }
.hd-l { left: -8px; } .hd-r { right: -8px; }
.is-text .hd-nw, .is-text .hd-ne, .is-text .hd-sw, .is-text .hd-se { display: none; }
.is-image .hd-l, .is-image .hd-r { display: none; }
.hd-rot { left: 50%; top: -42px; margin-left: -8px; border-radius: 50%; }
.hd-line { position: absolute; left: 50%; top: -34px; width: 2px; height: 32px; margin-left: -1px; background: var(--bright); }

.ed-bottom { flex: none; background: var(--nav); max-height: 64%; overflow-y: auto; padding-bottom: 0; }
.bar { display: flex; justify-content: space-around; padding: 8px 0 12px; }
.tb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 84px; height: 56px; background: none; border: 0; color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tb.sm { width: 64px; height: 52px; font-size: 11px; }
.tb.danger { color: #ff9b9b; }
.sheet { background: var(--nav); padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.around { justify-content: space-around; }
.row.scroll { overflow-x: auto; scrollbar-width: none; }
.row.tight { gap: 6px; flex-wrap: wrap; }
.row.tight .ib { width: 36px; }
.row.tight .sp { display: none; }
.row.tight .chip.sm { font-size: 13px; padding: 0 9px; }
.row.wrapr { flex-wrap: wrap; }
.chip { height: 40px; padding: 0 14px; border-radius: 12px; border: 2px solid #3b6a58; background: none; color: #fff; font-size: 17px; white-space: nowrap; cursor: pointer; flex: none; }
.chip.sm { font: inherit; font-size: 14px; font-weight: 600; height: 36px; padding: 0 12px; }
.chip.on { border-color: var(--bright); }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #3b6a58; padding: 0; cursor: pointer; flex: none; }
.sw.on { outline: 3px solid var(--bright); outline-offset: 2px; }
.sw-more { position: relative; display: grid; place-items: center; overflow: hidden; background: none; color: #fff; font-size: 20px; line-height: 1; }
.sw-more input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: 0; cursor: pointer; }
.w34 { width: 40px; }
.sheet input[type=range] { flex: 1; accent-color: var(--bright); height: 32px; }
.sheet input[type=color] { width: 44px; height: 34px; border: 0; background: none; padding: 0; }
.sheet textarea { width: 100%; box-sizing: border-box; min-height: 84px; padding: 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 18px; resize: none; -webkit-user-select: text; user-select: text; }
.sheet textarea:focus { border-color: var(--bright); outline: none; }

/* ---------------------------------------------------------------- export */
.ed-export { position: absolute; inset: 0; background: var(--bg); z-index: 30; display: flex; flex-direction: column; }
.ex-stage { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 20px; }
#excv { max-width: 100%; max-height: 46vh; width: auto; height: auto; box-shadow: 0 0 0 1px var(--line); }
.ex-account { font-size: 14px; }
.ex-account a { color: var(--bright); }
.ed-export .sheet { gap: 10px; }
.ed-toast { bottom: 90px; }

/* ---------------------------------------------------------------- Start screen: centred between the header and the tab bar */
.start { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 56px); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: center; max-width: 480px; margin: 0 auto; padding: 0 20px; overflow-y: auto; }
.start h1 { font-size: 28px; line-height: 1.1; margin: 0 0 6px; }
.start-options { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 14px; }
.opt { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; background: var(--surface); border: 2px solid #3b6a58; color: var(--text); text-decoration: none; }
.opt:hover { border-color: var(--bright); color: var(--text); }
.opt-t { display: flex; flex-direction: column; gap: 2px; }
.opt-t b { font-size: 17px; }
.mini { position: relative; width: 96px; height: 68px; flex: none; background: #0b0f0d; display: grid; place-items: center; font-size: 11px; font-weight: 800; text-align: center; overflow: hidden; }
.mini .ph { position: absolute; inset: 0; flex: none; border-radius: 0; }
.mini-cap { position: absolute; left: 0; right: 0; bottom: 0; background: #0b0f0d; padding: 3px; font-size: 11px; }
.mini-text b { padding: 0 6px; }
.opt-draft { padding: 10px; }
.opt-draft .mini { width: 64px; height: 46px; }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.draft { margin-top: 6px; }
.draft .lbl { margin-bottom: 8px; }

/* ---------------------------------------------------------------- typing right on the canvas */
.ed-inl { position: absolute; box-sizing: border-box; margin: 0; border: 0; outline: 0; resize: none; overflow: hidden; background: none;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--bright); transform-origin: 50% 50%; z-index: 4;
  -webkit-user-select: text; user-select: text; white-space: pre-wrap; overflow-wrap: anywhere; }
.ed-inl::selection { background: rgba(53, 208, 127, .45); }
.grow { flex: 1; }
.ed-offline { font-size: 12px; font-weight: 700; color: var(--bg); background: #ffd23f; border-radius: 999px; padding: 4px 10px; margin-right: 8px; }

/* ---------------------------------------------------------------- after sharing or saving */
.ex-done { margin: 0; text-align: center; font-weight: 700; color: var(--bright); }
.ex-offline { color: #ffd23f; text-align: center; padding: 0 12px; }
.pill:disabled, .pill.is-off { opacity: .45; cursor: default; }
.ed-export.is-done [data-act=share], .ed-export.is-done [data-act=save] { background: none; border-color: rgba(255, 255, 255, .75); color: #fff; min-height: 48px; }

/* ---------------------------------------------------------------- Trim */
.ed-trim { position: absolute; inset: 0; background: var(--bg); z-index: 40; display: flex; flex-direction: column; }
.trim-stage { flex: 1 1 0; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.trim-wrap { position: relative; touch-action: none; }
.trim-wrap canvas { display: block; }
.trim-box { position: absolute; box-sizing: border-box; outline: 2px solid var(--bright); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62); touch-action: none; cursor: move; }
.th { position: absolute; width: 18px; height: 18px; box-sizing: border-box; background: #fff; border: 2px solid var(--bright); touch-action: none; }
.th::after { content: ""; position: absolute; inset: -14px; }
.th-nw { left: -9px; top: -9px; } .th-ne { right: -9px; top: -9px; } .th-se { right: -9px; bottom: -9px; } .th-sw { left: -9px; bottom: -9px; }
.th-n { left: 50%; top: -9px; margin-left: -9px; } .th-s { left: 50%; bottom: -9px; margin-left: -9px; }
.th-e { right: -9px; top: 50%; margin-top: -9px; } .th-w { left: -9px; top: 50%; margin-top: -9px; }
.ed-trim.fixed-ratio .th-n, .ed-trim.fixed-ratio .th-s, .ed-trim.fixed-ratio .th-e, .ed-trim.fixed-ratio .th-w { display: none; }

/* ---------------------------------------------------------------- Post to Discover */
.ghost.pd { border-color: var(--bright); color: var(--bright); }
.ed-post { position: absolute; inset: 0; background: var(--bg); z-index: 35; display: flex; flex-direction: column; }
.post-body { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 4px 22px 12px; display: flex; flex-direction: column; gap: 14px; }
#postcv { display: block; margin: 0 auto; max-width: 100%; max-height: 28vh; width: auto; height: auto; box-shadow: 0 0 0 1px var(--line); flex: none; }
.field { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px; margin-top: 6px; border-radius: 14px; border: 2px solid #3b6a58; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; resize: none; -webkit-user-select: text; user-select: text; }
.field:focus { border-color: var(--bright); outline: none; }
.cnt { margin: 2px 0 0; text-align: right; font-size: 12px; color: var(--muted); }
.swt { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.swt b { display: block; }
.swt .lbl { margin: 0; }
.tg { width: 52px; height: 30px; border-radius: 999px; background: #3b6a58; position: relative; border: 0; padding: 0; cursor: pointer; flex: none; }
.tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tg[aria-checked=true] { background: var(--bright); }
.tg[aria-checked=true]::after { transform: translateX(22px); }
.ob { display: flex; gap: 10px; align-items: center; }
.ob .lbl { margin: 0; }
.ob a { color: var(--bright); }
.av { width: 32px; height: 32px; border-radius: 50%; background: var(--line); flex: none; }
.center { text-align: center; }
.ex-error { margin: 0; color: #ff9b9b; text-align: center; font-weight: 600; }
.dlg-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .66); z-index: 5; }
.dlg { position: absolute; left: 24px; right: 24px; top: 28%; z-index: 6; background: #0a1c15; border: 2px solid #3b6a58; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dlg b { font-size: 20px; }
.dlg p { margin: 0; }
a.pill { text-decoration: none; }

/* ---------------------------------------------------------------- remix */
.ed-credit { display: flex; justify-content: center; padding: 0 12px 6px; }
.credit { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 2px solid #3b6a58; font-size: 13px; font-weight: 600; max-width: 100%; }
.credit span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rowc { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--surface); }
.rowc[hidden] { display: none; }
.rowc img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: #0b0f0d; flex: none; }
.rowc p { margin: 0; }