:root{
  --paper:#ECE6FF; --sheet:#FFFFFF; --ink:#1E1747; --muted:#5C5590; --line:#1E1747; --shadow:#1E1747;
  --soft:#F4F0FF; --stage:#D8CDFF; --pop:#FF4FA3; --sun:#FFD43B; --mint:#2FD3A6; --focus:#2B59FF;
  --dark-ink:#1E1747;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#151029; --sheet:#211A3E; --ink:#F1EDFF; --muted:#ABA2D6; --line:#4C4182; --shadow:#06030E;
    --soft:#2B2352; --stage:#0F0B21; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#151029; --sheet:#211A3E; --ink:#F1EDFF; --muted:#ABA2D6; --line:#4C4182; --shadow:#06030E;
  --soft:#2B2352; --stage:#0F0B21; color-scheme:dark;
}
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after{ box-sizing:inherit; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
button, input, textarea, select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
button:disabled{ cursor:not-allowed; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* ---------- top bar ---------- */
.top{
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:var(--paper);
}
.brand{ display:flex; align-items:center; gap:9px; margin-right:auto; min-width:0; }
.brand-mark{ width:38px; height:38px; flex:none; }
.brand-word{ font-size:27px; font-weight:800; letter-spacing:-0.03em; line-height:1; font-variation-settings:"opsz" 96; white-space:nowrap; }
.brand-word small{ display:block; margin-top:3px; font-size:12.5px; font-weight:650; letter-spacing:0.01em; color:var(--muted); font-variation-settings:"opsz" 12; }
.icon-btn{
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  border:2px solid var(--line); background:var(--sheet);
}
.icon-btn:hover:not(:disabled){ background:var(--soft); }
.icon-btn:disabled{ opacity:.4; }
.icon-btn svg{ width:20px; height:20px; }
.btn-primary{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px;
  border-radius:999px; border:2px solid var(--dark-ink); background:var(--pop); color:var(--dark-ink);
  font-weight:750; box-shadow:3px 3px 0 var(--shadow); transition:transform .08s, box-shadow .08s;
}
.btn-primary svg{ width:18px; height:18px; }
.btn-primary:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--shadow); }
.btn-primary:disabled{ opacity:.6; }

/* ---------- layout ---------- */
main{ display:grid; gap:14px; padding:0 14px 18px; }
.stage-wrap{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.stage{
  position:relative; display:grid; place-items:center; overflow:hidden;
  background:var(--stage); border-radius:22px; padding:12px;
}
.canvas-frame{
  line-height:0; border:3px solid var(--dark-ink); border-radius:6px;
  box-shadow:6px 6px 0 var(--shadow); background:#fff;
}
.drop-hint{
  position:absolute; inset:10px; border:3px dashed var(--pop); border-radius:16px;
  display:none; place-items:center; background:rgba(255,79,163,.12);
  font-weight:750; font-size:18px; color:var(--ink); pointer-events:none;
}
.stage.dragging .drop-hint{ display:grid; }
.stage-error{ padding:40px 20px; text-align:center; max-width:42ch; }

.selbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--sheet); border:2px solid var(--line); border-radius:16px; padding:7px 8px 7px 14px;
}
.sel-label{ flex:1 1 180px; margin:0; font-size:13.5px; color:var(--muted); min-width:0; }
.sel-label strong{ color:var(--ink); font-weight:700; }
.sel-tools{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tool{
  height:40px; min-width:40px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:11px; border:2px solid transparent; background:var(--soft); font-size:13.5px; font-weight:650;
}
.tool:hover:not(:disabled){ border-color:var(--line); }
.tool svg{ width:19px; height:19px; flex:none; }
.tool .tl{ display:none; }
.tool.danger:hover:not(:disabled){ background:#FFE1E6; color:#B0143A; border-color:#B0143A; }
.selbar.is-empty .tool, .selbar.is-empty .op{ opacity:.4; }
.op{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); padding-left:4px; }
.op input{ width:96px; }
input[type=range]{ accent-color:var(--pop); }

/* ---------- panel ---------- */
.panel{
  background:var(--sheet); border:2px solid var(--line); border-radius:22px;
  display:flex; flex-direction:column; min-width:0;
}
.tabs{ display:flex; gap:2px; padding:8px; border-bottom:2px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:1 0 auto; padding:8px 7px; border-radius:999px; border:2px solid transparent;
  background:transparent; font-weight:650; font-size:14px; white-space:nowrap;
}
.tab:hover{ background:var(--soft); }
.tab[aria-selected="true"]{ background:var(--sun); color:var(--dark-ink); border-color:var(--dark-ink); }
.panel-body{ padding:14px 16px 22px; }
.tabpanel h2{ font-size:15.5px; font-weight:750; margin:20px 0 8px; letter-spacing:-0.01em; }
.tabpanel h2:first-child{ margin-top:2px; }
.lede{ margin:0 0 12px; color:var(--muted); font-size:14px; max-width:60ch; }

/* costumes: the cat wearing each outfit */
.costume-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.costume{
  padding:0; border:2px solid var(--line); border-radius:16px; background:var(--sheet); overflow:hidden;
  text-align:center; transition:transform .1s, box-shadow .1s; display:flex; flex-direction:column;
}
.costume .thumb{ display:block; aspect-ratio:1/1; background-color:#F7EFB0; background-image:var(--cat); background-repeat:no-repeat; position:relative; }
.costume .thumb > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.costume .cname{ flex:1; display:grid; place-items:center; padding:6px 3px 7px; font-size:12.5px; font-weight:680; border-top:2px solid var(--line); line-height:1.15; overflow-wrap:anywhere; }
.costume:hover .cname{ background:var(--soft); }
.costume[aria-pressed="true"]{ border-color:var(--pop); box-shadow:4px 4px 0 var(--pop); transform:translate(-2px,-2px); }
.costume[aria-pressed="true"] .cname{ background:var(--pop); color:var(--dark-ink); border-top-color:var(--pop); }

.acc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:8px; }
.acc{
  aspect-ratio:1/1; padding:9px; border-radius:14px; border:2px solid var(--line); background:#FFFFFF;
  display:grid; place-items:center;
}
.acc svg{ width:100%; height:100%; display:block; }
.acc:hover{ background:#FFF6CC; }
.acc.dark{ background:#1E1747; }
.acc.dark:hover{ background:#2E2566; }
.emoji-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:6px; }
.emoji{
  aspect-ratio:1/1; border-radius:12px; border:2px solid transparent; background:var(--soft);
  font-size:27px; line-height:1; display:grid; place-items:center;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.emoji:hover{ border-color:var(--line); }

/* text tab */
.preset-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.btn{
  border:2px solid var(--line); background:var(--sheet); border-radius:12px; padding:9px 10px;
  font-weight:650; font-size:14px; line-height:1.2;
}
.btn:hover:not(:disabled){ background:var(--soft); }
.btn:disabled{ opacity:.45; }
.btn.is-on{ background:var(--sun); color:var(--dark-ink); border-color:var(--dark-ink); }
.scope{ margin:14px 0 4px; font-size:13.5px; color:var(--muted); padding:8px 12px; background:var(--soft); border-radius:12px; }
.scope strong{ color:var(--ink); }
.field{ display:block; margin-top:14px; }
.field-label{ display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; margin-bottom:6px; }
.field-label output{ font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; }
textarea{
  width:100%; resize:vertical; min-height:64px; padding:10px 12px; border-radius:12px;
  border:2px solid var(--line); background:var(--sheet); font-size:16px; line-height:1.35;
}
textarea:disabled{ opacity:.55; }
.font-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.font-chip{
  padding:7px 4px 6px; border-radius:12px; border:2px solid var(--line); background:var(--sheet);
  font-size:19px; line-height:1.1; text-align:center;
}
.font-chip small{ display:block; font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:11.5px; font-weight:600; color:var(--muted); margin-top:2px; }
.font-chip.is-on{ background:var(--sun); color:var(--dark-ink); border-color:var(--dark-ink); }
.font-chip.is-on small{ color:var(--dark-ink); }
.swatches{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.sw{
  width:32px; height:32px; border-radius:50%; border:2px solid var(--line); padding:0; position:relative;
}
.sw.is-on{ box-shadow:0 0 0 3px var(--sheet), 0 0 0 5px var(--pop); }
.sw.none{ background:linear-gradient(135deg,#fff 45%,#E5273D 45%,#E5273D 55%,#fff 55%); }
.sw-input{ width:32px; height:32px; border-radius:50%; border:2px solid var(--line); padding:0; overflow:hidden; background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red); position:relative; }
.sw-input input{ position:absolute; inset:-6px; width:44px; height:44px; opacity:0; cursor:pointer; border:0; }
.range-full{ width:100%; margin-top:8px; }
.two-col{ display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; margin-top:14px; }
.seg{ display:inline-flex; border:2px solid var(--line); border-radius:12px; overflow:hidden; }
.seg button{ width:44px; height:38px; border:0; background:var(--sheet); display:grid; place-items:center; }
.seg button + button{ border-left:2px solid var(--line); }
.seg button.is-on{ background:var(--sun); color:var(--dark-ink); }
.seg svg{ width:18px; height:18px; }

/* images tab */
.upload-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.upload{
  text-align:left; padding:12px; border-radius:16px; border:2px dashed var(--line); background:var(--soft);
  font-weight:720; font-size:14.5px; line-height:1.25;
}
.upload small{ display:block; font-weight:500; font-size:12.5px; color:var(--muted); margin-top:4px; }
.upload:hover{ border-style:solid; }
.upload .u-ico{ display:block; width:26px; height:26px; margin-bottom:8px; }
.img-tools{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.muted-note{ font-size:13px; color:var(--muted); margin:8px 0 0; }
.text-btn{ border:0; background:none; padding:6px 0; margin-top:18px; font-weight:650; font-size:14px; text-decoration:underline; text-underline-offset:3px; color:var(--muted); }
.text-btn:hover{ color:var(--ink); }

/* effects tab */
.fx-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.fx{
  padding:0; border-radius:14px; border:2px solid var(--line); overflow:hidden; background:var(--sheet); text-align:center;
}
.fx .fthumb{ display:block; aspect-ratio:1/1; background-image:var(--cat); background-repeat:no-repeat; background-color:#F7EFB0; }
.fx .fthumb.px{ image-rendering:pixelated; background-size:100% 100% !important; background-position:0 0 !important; }
.fx .fname{ display:block; font-size:12.5px; font-weight:680; padding:5px 2px 6px; border-top:2px solid var(--line); }
.fx[aria-pressed="true"]{ border-color:var(--pop); box-shadow:3px 3px 0 var(--pop); }
.fx[aria-pressed="true"] .fname{ background:var(--pop); color:var(--dark-ink); border-top-color:var(--pop); }
.slider{ margin-top:12px; }
.slider .field-label{ margin-bottom:2px; }
.slider input{ width:100%; }

/* toast + modal */
.toast{
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px);
  background:var(--dark-ink); color:#fff; padding:10px 18px; border-radius:999px; font-weight:650; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:50; max-width:calc(100vw - 32px);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.modal{ position:fixed; inset:0; background:rgba(12,8,30,.62); display:grid; place-items:center; padding:20px; z-index:60; }
.modal[hidden]{ display:none; }
.modal-card{ background:var(--sheet); border:2px solid var(--line); border-radius:22px; padding:18px; max-width:620px; width:100%; max-height:calc(100% - 20px); overflow:auto; box-shadow:6px 6px 0 var(--shadow); }
.modal-card h2{ margin:0 0 6px; font-size:20px; }
.modal-card p{ margin:0 0 12px; color:var(--muted); font-size:14px; }
.modal-card img{ display:block; max-width:100%; max-height:58vh; margin:0 auto 14px; border-radius:8px; border:2px solid var(--line); }

/* ---------- responsive ---------- */
@media (max-width:899px){
  .top{ position:sticky; top:env(safe-area-inset-top,0px); z-index:8; height:60px; padding:8px 12px; }
  .brand-word{ font-size:22px; }
  .brand-word small{ font-size:11.5px; margin-top:2px; }
  .brand-mark{ width:32px; height:32px; }
  .btn-primary{ padding:0 16px; }
  .stage-wrap{
    position:sticky; top:calc(env(safe-area-inset-top,0px) + 60px); z-index:7;
    background:var(--paper); padding-bottom:10px; margin-bottom:-4px;
  }
  .stage{ padding:10px; border-radius:18px; }
  .sel-label{ display:none; }
  .selbar{ justify-content:center; padding:6px; }
  .tabs{ position:static; }
}
@media (max-width:420px){
  .btn-primary .bp-label{ display:none; }
  .btn-primary{ width:44px; padding:0; justify-content:center; }
  .op span{ display:none; }
}
@media (min-width:900px){
  html, body{ height:100%; }
  body{ overflow:hidden; }
  .app{ height:100%; display:flex; flex-direction:column; }
  .top{ padding:12px 18px; }
  main{ flex:1; min-height:0; grid-template-columns:minmax(0,1fr) 400px; padding:0 18px 18px; }
  .stage-wrap{ min-height:0; }
  .stage{ flex:1; min-height:0; padding:16px; }
  .panel{ min-height:0; overflow:hidden; }
  .panel-body{ flex:1; min-height:0; overflow:auto; }
}
@media (min-width:1240px){
  .tool .tl{ display:inline; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}