/* ==================================================================
   ATELIER — My Christmas Tree design language (v2)
   Deep evergreen kept, but rebuilt with light, material and breathing room.
   Loaded AFTER styles.css, BEFORE extras.css (the share sheet keeps its
   reference design and is deliberately not restyled here).
   ================================================================== */

:root {
  --night: #04120e;
  --surface: rgba(13, 42, 33, .72);
  --surface-deep: rgba(7, 27, 21, .82);
  --edge: rgba(219, 185, 121, .16);
  --edge-soft: rgba(247, 241, 230, .09);
  --hairline: rgba(219, 185, 121, .26);
  --text-dim: rgba(247, 241, 230, .68);
  --text-faint: rgba(247, 241, 230, .42);
  --r-card: 20px;
  --r-ctl: 13px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --lift: 0 24px 64px rgba(0, 0, 0, .38), 0 2px 10px rgba(0, 0, 0, .22);
}

body {
  font-size: 15px;
  line-height: 1.65;
  background: var(--night);
}

/* ---------- ambient: layered light, vignette, real grain ---------- */
.bg-ambient {
  background:
    radial-gradient(1100px 720px at 78% -14%, rgba(230, 193, 122, .17), transparent 62%),
    radial-gradient(940px 820px at 0% 2%, rgba(40, 108, 80, .38), transparent 68%),
    radial-gradient(1000px 720px at 52% 116%, rgba(156, 48, 58, .15), transparent 70%),
    radial-gradient(1500px 1050px at 50% 42%, transparent 32%, rgba(2, 10, 8, .62) 100%),
    linear-gradient(172deg, #0b2a21 0%, #061a15 52%, #04120e 100%);
}
.bg-ambient::after {
  opacity: .075;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mask-image: none;
  -webkit-mask-image: none;
}

/* ---------- typography: fewer shouted labels, clearer rhythm ---------- */
h1, h2, h3, h4 { letter-spacing: -.025em; }
h1 { font-size: clamp(3rem, 7vw, 5.35rem); line-height: 1.0; font-weight: 600; }
h2 { font-size: clamp(2.15rem, 4.2vw, 3.2rem); line-height: 1.08; }
h3 { font-size: 1.5rem; }
.eyebrow {
  font-size: .7rem; letter-spacing: .21em; font-weight: 700;
  color: var(--gold-bright); opacity: .9;
}
.lede { color: var(--text-dim); font-size: 1.06rem; line-height: 1.8; max-width: 46ch; }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
/* These used to be 10px ALL CAPS everywhere — the single biggest "admin
   dashboard" tell. Normal case + a little more size reads like a product. */
.label, .panel-title {
  text-transform: none; letter-spacing: .015em; font-size: .8rem;
  font-weight: 600; color: var(--text-dim);
}
.panel-title { color: var(--gold-bright); font-size: .82rem; margin: 2px 0 16px; }
.hint { font-size: .79rem; color: var(--text-faint); line-height: 1.65; }

.ornament-rule { color: var(--gold); opacity: .8; margin: 30px 0; }
.ornament-rule::before, .ornament-rule::after { background: linear-gradient(90deg, transparent, var(--hairline)); }

/* ---------- surfaces: glass with inner highlight + real depth ---------- */
.card {
  position: relative;
  background: linear-gradient(155deg, rgba(24, 62, 48, .70), rgba(7, 28, 21, .80));
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .085), var(--lift);
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 214, 155, .5), transparent);
  pointer-events: none;
}
.card-pad { padding: 30px; }
.card-quiet {
  background: rgba(4, 20, 15, .38); border: 1px solid var(--edge-soft);
  border-radius: 14px; padding: 18px;
}
.chip {
  border-radius: 999px; border: 1px solid var(--hairline);
  background: rgba(219, 185, 121, .08); color: var(--gold-bright);
  font-size: .73rem; padding: 6px 13px; letter-spacing: .01em;
}
.chip-plain { color: var(--text-dim); border-color: var(--edge-soft); background: rgba(247, 241, 230, .045); }
.badge { background: var(--gold); color: var(--night); }

/* ---------- buttons: three clear strengths, no pill soup ---------- */
.btn {
  border-radius: var(--r-ctl); min-height: 48px; padding: 0 22px;
  font-size: .9rem; font-weight: 650; letter-spacing: .005em;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  color: #241a09;
  background: linear-gradient(158deg, #f6e2b2 0%, var(--gold-bright) 28%, var(--gold) 62%, #bd9957 100%);
  border: 1px solid rgba(255, 240, 205, .55);
  box-shadow: 0 12px 32px rgba(219, 185, 121, .22),
              inset 0 1px 0 rgba(255, 255, 255, .7),
              inset 0 -1px 0 rgba(96, 66, 24, .28);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(219, 185, 121, .32),
              inset 0 1px 0 rgba(255, 255, 255, .8);
}
.btn-ghost { border: 1px solid var(--edge); background: rgba(247, 241, 230, .035); }
.btn-ghost:hover { border-color: var(--hairline); background: rgba(219, 185, 121, .10); color: var(--ivory); }
.btn-soft { background: rgba(247, 241, 230, .075); }
.btn-soft:hover { background: rgba(247, 241, 230, .13); }
.btn-cranberry {
  background: linear-gradient(158deg, #cc5b63, var(--cranberry)); color: #fff;
  box-shadow: 0 10px 28px rgba(168, 50, 62, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 1rem; }
.btn-sm { min-height: 36px; padding: 0 15px; font-size: .8rem; border-radius: 10px; }
.btn-icon { border-radius: 50%; }
.btn.active { background: rgba(219, 185, 121, .16); border-color: var(--gold); color: var(--gold-bright); }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* ---------- forms ---------- */
.field { gap: 9px; }
.input, .textarea, .select {
  background: rgba(3, 16, 12, .52);
  border: 1px solid var(--edge-soft);
  border-radius: 12px; padding: 14px 16px; font-size: .95rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 4px rgba(219, 185, 121, .13);
}
.input::placeholder, .textarea::placeholder { color: rgba(247, 241, 230, .32); }
.select {
  /* A real SVG chevron: the old two-gradient trick was stretched to fill the
     whole control once the `background` shorthand reset background-size. */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23dbb979' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 17px center;
  background-size: 11px 7px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--edge-soft) 15%, var(--edge-soft) 85%, transparent); }

/* ---------- page entrance ---------- */
.page > .shell, .page > .shell-narrow, .page > .show-shell {
  animation: atelier-in .46s var(--ease) both;
}
@keyframes atelier-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- header ---------- */
.topbar { padding: 26px 0 20px; }
.brand-mark {
  width: 38px; height: 38px; font-size: 18px;
  border: 1px solid var(--hairline);
  background: radial-gradient(circle at 32% 26%, rgba(240, 214, 155, .32), rgba(219, 185, 121, .04));
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .2), 0 0 22px rgba(219, 185, 121, .12);
}
.brand-text { font-size: 1.12rem; }
.brand-text small { font-size: .58rem; letter-spacing: .24em; color: var(--text-faint); margin-top: 2px; }
.topbar-actions { gap: 9px; }

/* ---------- landing ---------- */
.hero { padding: 18px 0 96px; }
.hero-grid { gap: 64px; padding-top: 34px; }
.hero h1 { margin: 22px 0 24px; }
.hero h1 em {
  font-style: italic; color: var(--gold-bright);
  text-shadow: 0 6px 44px rgba(219, 185, 121, .22);
}
.hero-actions { margin: 36px 0 22px; gap: 12px; }
.hero .lede { max-width: 42ch; }
.stat-row {
  gap: 0; margin-top: 36px !important; padding-top: 22px;
  border-top: 1px solid var(--edge-soft);
}
.stat { padding-right: 26px; margin-right: 26px; border-right: 1px solid var(--edge-soft); }
.stat:last-child { border-right: 0; }
.stat b { font-size: 1.5rem; color: var(--gold-bright); font-weight: 600; }
.stat span {
  font-size: .74rem; letter-spacing: .02em; text-transform: none;
  color: var(--text-faint); font-weight: 500;
}
.hero-visual {
  border-radius: 28px; border: 1px solid var(--hairline);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .52),
              0 0 80px rgba(219, 185, 121, .10),
              inset 0 0 0 6px rgba(6, 26, 21, .5);
  aspect-ratio: 4 / 4.8; max-height: 640px;
}
.hero-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .16), inset 0 -80px 90px rgba(2, 12, 9, .45);
}
.hero-visual .frame-caption {
  padding: 52px 26px 24px;
  background: linear-gradient(transparent, rgba(3, 15, 11, .58) 45%, rgba(3, 15, 11, .88));
}
.hero-visual .frame-caption strong { font-size: 1.28rem; }
.section { padding: 88px 0; }
.section-head { max-width: 640px; margin-bottom: 42px; }
.section-head h2 { margin: 14px 0 12px; }
.how-grid { gap: 18px; }
.how-step { padding: 28px 24px 30px; }
.how-step::before {
  font-size: 1.5rem; opacity: 1; color: var(--gold-bright); margin-bottom: 16px;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: rgba(219, 185, 121, .07); font-family: var(--sans); font-size: .78rem;
  content: counter(step); letter-spacing: .04em;
}
.how-step h4 { font-size: 1.16rem; margin-bottom: 8px; }
.how-step p { line-height: 1.7; }
.showcase-grid { gap: 20px; }
.showcase-card {
  border-radius: var(--r-card); border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .07), 0 18px 42px rgba(0, 0, 0, .3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.showcase-card:hover {
  transform: translateY(-6px); border-color: var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .1), 0 30px 60px rgba(0, 0, 0, .44), 0 0 40px rgba(219, 185, 121, .08);
}
.showcase-card .meta { padding: 18px 20px 20px; background: linear-gradient(180deg, rgba(6, 26, 21, .2), rgba(4, 18, 14, .6)); }
.footer { border-top: 1px solid var(--edge-soft); padding: 34px 0 52px; }

/* ---------- style picker / forms pages ---------- */
.page-head { padding: 22px 0 36px; }
.page-head h2 { margin: 14px 0 10px; }
.back-link { font-size: .86rem; padding: 6px 0; }
.style-grid { gap: 20px; }
.style-card { border-radius: var(--r-card); }
.style-card:hover { transform: translateY(-5px); border-color: var(--hairline); }
.style-card.selected { border-color: var(--gold-bright); box-shadow: 0 0 0 2px rgba(219, 185, 121, .3), var(--lift); }
.style-card .info { padding: 20px 20px 22px; }
.style-card .info h3 { margin: 8px 0 6px; }
.style-card .info p { font-size: .82rem; line-height: 1.6; color: var(--text-dim); }
.style-swatches { margin-top: 14px; gap: 6px; }
.style-swatches i { width: 14px; height: 14px; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.select-mark { top: 14px; right: 14px; width: 30px; height: 30px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.sticky-foot { padding: 20px 0 calc(22px + var(--safe-b)); background: linear-gradient(transparent, rgba(4, 18, 14, .82) 42%, rgba(4, 18, 14, .98)); }
.lobby-grid { gap: 24px; }
.lobby-preview { border-radius: 0; border: 0; }
.invite-box { background: rgba(3, 16, 12, .5); border: 1px dashed var(--hairline); border-radius: 12px; padding: 12px 12px 12px 16px; }
.avatar { border-color: var(--hairline); background: linear-gradient(145deg, rgba(219, 185, 121, .28), rgba(219, 185, 121, .05)); box-shadow: inset 0 1px 0 rgba(255, 248, 230, .16); }
.member-row { padding: 13px 0; }
.list-empty { padding: 30px 10px; }

/* ==================================================================
   EDITOR — from three hard columns to an immersive decorating stage
   ================================================================== */
.editor {
  background:
    radial-gradient(900px 620px at 50% 32%, rgba(30, 82, 62, .26), transparent 68%),
    radial-gradient(1200px 800px at 50% 110%, rgba(2, 12, 9, .8), transparent 70%),
    #04120e;
}
.editor-top {
  height: 74px; padding: 0 22px; gap: 16px;
  background: linear-gradient(180deg, rgba(5, 22, 17, .96), rgba(5, 22, 17, .70));
  border-bottom: 1px solid var(--edge-soft);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .24);
}
.editor-top .room-name { font-size: 1.22rem; letter-spacing: -.01em; }
.editor-top .sub { font-size: .76rem; letter-spacing: .01em; color: var(--text-faint); }
.editor-top-actions { gap: 8px; }
.editor-top-actions .btn-ghost.btn-icon {
  width: 34px; height: 34px; min-height: 34px; padding: 0;
  background: transparent; border-color: transparent; color: var(--text-faint);
}
.editor-top-actions .btn-ghost.btn-icon:hover { color: var(--gold-bright); border-color: var(--edge); background: rgba(219, 185, 121, .08); }
.editor-top-actions .btn-primary { box-shadow: 0 8px 24px rgba(219, 185, 121, .24), inset 0 1px 0 rgba(255, 255, 255, .65); }
.sync-pill { border-color: transparent; background: transparent; color: var(--text-faint); font-size: .72rem; padding: 4px 8px; }
.sync-pill .presence-dot { box-shadow: 0 0 8px rgba(103, 197, 141, .7); }
.view-switch {
  gap: 3px; padding: 4px; border-radius: 12px;
  background: rgba(3, 16, 12, .5); border: 1px solid var(--edge-soft);
}
.view-switch .btn {
  min-height: 32px; padding: 0 13px; font-size: .78rem; border-radius: 9px;
  border: 0; background: transparent; color: var(--text-dim); font-weight: 600;
}
.view-switch .btn:hover { background: rgba(247, 241, 230, .06); color: var(--ivory); }
.view-switch .btn.active {
  background: rgba(219, 185, 121, .17); color: var(--gold-bright);
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .1);
}

/* The stage fills the whole body; panels float above it as glass trays. */
.editor-body { position: relative; display: block; flex: 1; min-height: 0; }
.stage { position: absolute; inset: 0; background: transparent; }
.stage canvas { cursor: grab; }
.stage canvas.dragging { cursor: grabbing; }
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1200px 760px at 50% 48%, transparent 46%, rgba(2, 10, 8, .5) 100%);
}
.panel {
  position: absolute; z-index: 8; top: 20px; bottom: 20px;
  width: 244px; border-radius: var(--r-card);
  border: 1px solid var(--edge);
  background: linear-gradient(165deg, rgba(16, 48, 37, .74), rgba(6, 26, 20, .80));
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .1), var(--lift);
  scrollbar-width: thin; scrollbar-color: rgba(219, 185, 121, .28) transparent;
}
.panel::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 214, 155, .4), transparent);
}
#left-panel { left: 20px; }
#right-panel {
  right: 20px; left: auto; width: 258px; bottom: auto;
  max-height: calc(100% - 40px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.panel-right { border-left: 0; }
/* Idle inspector recedes until something is actually selected. */
#right-panel.is-idle { opacity: .68; border-color: var(--edge-soft); }
#right-panel.is-idle:hover { opacity: 1; }
#right-panel.is-active { border-color: var(--hairline); box-shadow: inset 0 1px 0 rgba(255, 248, 230, .12), 0 24px 64px rgba(0, 0, 0, .44), 0 0 36px rgba(219, 185, 121, .07); }
.panel-inner { padding: 22px 18px 40px; }
.panel-section { margin-bottom: 26px; }

/* asset library: bigger, calmer, actually looks like ornaments */
.cat-tabs { gap: 6px; margin-bottom: 16px; }
.cat-tab {
  padding: 7px 12px; border-radius: 9px; font-size: .75rem;
  border: 1px solid var(--edge-soft); color: var(--text-dim);
  transition: all .18s var(--ease);
}
.cat-tab:hover { border-color: var(--hairline); color: var(--ivory); }
.cat-tab.active { background: var(--gold); color: var(--night); border-color: var(--gold); font-weight: 700; }
.asset-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.asset-tile {
  aspect-ratio: 1 / 1.06; border-radius: 14px; gap: 6px; padding: 8px 6px;
  border: 1px solid var(--edge-soft);
  background: radial-gradient(circle at 50% 28%, rgba(219, 185, 121, .12), rgba(3, 16, 12, .48) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .06);
  cursor: grab;
}
.asset-tile:hover {
  border-color: var(--hairline); transform: translateY(-3px);
  background: radial-gradient(circle at 50% 28%, rgba(219, 185, 121, .2), rgba(3, 16, 12, .5) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .1), 0 12px 26px rgba(0, 0, 0, .3);
}
.asset-tile:active { cursor: grabbing; }
.asset-tile.dragging { opacity: .45; }
.asset-tile canvas { width: 58px; height: 58px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }
.asset-tile span { font-size: .67rem; color: var(--text-dim); line-height: 1.25; white-space: normal; }
.asset-tile .add-mark { top: 7px; right: 9px; font-size: .82rem; }

/* stage chrome — no more three things stacked on the tree */
.stage-badge {
  left: 50%; transform: translateX(-50%); top: 18px;
  padding: 7px 15px; border-radius: 999px; font-size: .72rem;
  background: rgba(4, 18, 14, .62); border: 1px solid var(--edge);
  color: var(--gold-bright); backdrop-filter: blur(10px);
}
.stage-tools { right: 20px; top: 18px; gap: 8px; }
.stage-tools .btn {
  width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 12px;
  background: rgba(4, 18, 14, .62); border: 1px solid var(--edge);
  backdrop-filter: blur(10px); color: var(--gold-bright);
}
.stage-tools .btn:hover { border-color: var(--hairline); background: rgba(219, 185, 121, .12); }
.stage-hint {
  bottom: 18px; padding: 7px 16px; font-size: .72rem;
  background: rgba(4, 18, 14, .55); border: 1px solid var(--edge-soft);
  color: var(--text-faint); backdrop-filter: blur(8px);
  transition: opacity .25s ease;
}
/* Selection tools live at the TOP now, so toast + toolbar + hint never stack. */
.selection-toolbar {
  top: 16px; bottom: auto; z-index: 10;
  gap: 3px; padding: 6px; border-radius: 14px;
  background: rgba(5, 22, 17, .9); border: 1px solid var(--hairline);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 248, 230, .1);
  backdrop-filter: blur(16px);
}
.selection-toolbar .btn-icon {
  width: 36px; height: 36px; min-height: 36px; border-radius: 10px;
  color: var(--text-dim);
}
.selection-toolbar .btn-icon:hover { background: rgba(219, 185, 121, .12); color: var(--gold-bright); }
.selection-toolbar .sep { background: var(--edge); }
.editor.has-selection .stage-hint { opacity: 0; }
.stage.drop-ready { box-shadow: inset 0 0 0 2px rgba(240, 214, 155, .55); }
.stage.drop-ready::before {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(600px 600px at 50% 50%, rgba(240, 214, 155, .08), transparent 70%);
}
.lock-note { top: 74px; border-radius: 10px; }

/* inspector controls */
.prop-row { margin-bottom: 19px; }
.prop-row .label { margin-bottom: 9px; }
.color-row { gap: 9px; }
.color-dot {
  width: 28px; height: 28px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .35), 0 3px 8px rgba(0, 0, 0, .35);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.color-dot.active { border-color: var(--ivory); transform: scale(1.16); box-shadow: 0 0 0 2px rgba(247, 241, 230, .22), 0 4px 10px rgba(0, 0, 0, .4); }
.range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 99px; background: rgba(247, 241, 230, .14); outline: none; }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-bright), var(--gold-deep));
  border: 1px solid rgba(255, 248, 230, .6); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); cursor: pointer;
}
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 1px solid rgba(255, 248, 230, .6); cursor: pointer; }
.range-val { font-size: .78rem; }
.mini-stat { font-size: .8rem; padding: 9px 0; border-bottom: 1px solid var(--edge-soft); }

/* wishes / members / share inside the tray */
.side-view { padding: 22px 18px 40px; }
.wish-card {
  border-radius: 12px; padding: 17px 17px 14px; margin-bottom: 13px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.emoji-btn { border-radius: 10px; border-color: var(--edge-soft); }
.paper-btn { border-radius: 10px; border-color: var(--edge-soft); }
.share-preview { border-radius: 14px; border: 1px solid var(--edge); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }

/* ---------- showcase ---------- */
.show-shell { padding: 0 22px 100px; }
.show-grid { gap: 52px; margin-top: 26px !important; }
.show-visual {
  border-radius: var(--r-card); border: 1px solid var(--hairline);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 70px rgba(219, 185, 121, .09), inset 0 0 0 6px rgba(6, 26, 21, .45);
}
.show-title { font-size: clamp(2.3rem, 5.2vw, 3.5rem); margin: 16px 0 14px; }
.show-grid .row.wrap.gap-10 { gap: 10px; }
.show-grid .btn-ghost { background: rgba(247, 241, 230, .035); }
.comment { padding: 14px 0; border-bottom: 1px solid var(--edge-soft); }
.show-cta-card {
  margin-top: 64px; padding: 46px 30px; text-align: center;
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(219, 185, 121, .13), transparent 70%),
    linear-gradient(155deg, rgba(24, 62, 48, .7), rgba(7, 28, 21, .82));
}
.show-cta-card h3 { font-size: 1.9rem; margin: 14px 0 8px; }

/* ---------- overlays ---------- */
.toast-root { bottom: calc(30px + var(--safe-b)); }
/* In the editor, toasts go to the top: they used to sit on top of the tree,
   the selection toolbar and the hint all at once. */
body:has(.editor) .toast-root { top: auto; bottom: 56px; }
.toast {
  border-radius: 12px; padding: 11px 20px;
  background: rgba(8, 32, 24, .94); border: 1px solid var(--hairline);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 248, 230, .1);
  backdrop-filter: blur(14px);
}
.overlay { background: rgba(2, 10, 8, .68); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* The props sheet already has a title; do not repeat it inside the panel. */
.sheet[data-view="props"] .panel-section:first-child > .panel-title { display: none; }
.sheet[data-view="props"] .panel-section:first-child { margin-top: 4px; }
.modal {
  border-radius: var(--r-card); padding: 32px;
  background: linear-gradient(160deg, #123629, #071f18);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(255, 248, 230, .1), var(--lift);
}
.sheet {
  border-radius: 24px 24px 0 0; padding: 12px 22px calc(24px + var(--safe-b));
  background: linear-gradient(180deg, rgba(18, 54, 42, .98), rgba(6, 26, 20, .99));
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -24px 70px rgba(0, 0, 0, .55);
}
.sheet-handle { background: var(--hairline); width: 42px; }
.sheet-title { font-size: 1.42rem; }
.share-options { gap: 12px; }
.share-option .ic { border-radius: 15px; border-color: var(--edge); }
.mobile-tabs {
  background: rgba(5, 22, 17, .94); border-top: 1px solid var(--edge);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
  backdrop-filter: blur(20px);
}
.mobile-tabs button { font-size: .66rem; gap: 5px; letter-spacing: .01em; }
.mobile-tabs button .ti { font-size: 1.24rem; }
.mobile-tabs button.active { color: var(--gold-bright); }
.mobile-tabs button.active::before {
  content: ""; position: absolute; top: 0; width: 28px; height: 2px;
  border-radius: 0 0 3px 3px; background: var(--gold-bright);
}

/* ---------- celebration ---------- */
.celebration { background: radial-gradient(900px 700px at 50% 55%, #0a2a1f, #020b08 78%); }
.count-num { text-shadow: 0 0 80px rgba(219, 185, 121, .6); }
.cele-title { text-shadow: 0 6px 40px rgba(0, 0, 0, .6); }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .panel { width: 216px; }
  #right-panel { width: 228px; }
  .hero-grid { gap: 34px; }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .editor { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  .editor-top { height: 64px; padding: 0 14px; gap: 10px; }
  .editor-top .room-name { max-width: 42vw; font-size: 1.05rem; }
  .editor-top .hide-sm, .sync-pill .txt { display: none; }
  .editor-top-actions .btn-ghost:not(.btn-icon) { padding: 0 11px; font-size: .76rem; }
  .editor-body { display: block; flex: 1; min-height: 0; }
  .panel { display: none; }
  .stage { height: 100%; }
  .stage-badge { top: 12px; font-size: .66rem; }
  .stage-tools { top: 12px; right: 12px; }
  .stage-tools .btn { width: 36px; height: 36px; min-height: 36px; }
  .selection-toolbar { top: auto; bottom: 14px; }
  .editor.has-selection .stage-hint { opacity: 0; }
  .stage-hint { bottom: 12px; font-size: .68rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; aspect-ratio: 5 / 4; max-height: 420px; }
  .style-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .lobby-grid, .show-grid { grid-template-columns: 1fr; }
  .lobby-preview { aspect-ratio: 5 / 4; }
  .show-visual { max-width: 480px; margin: 0 auto; }
  .show-grid { gap: 34px; }
  .section { padding: 64px 0; }
}
@media (max-width: 560px) {
  .shell { padding: 0 18px; }
  .hero { padding: 8px 0 60px; }
  .hero h1 { font-size: clamp(2.4rem, 10.5vw, 3.2rem); }
  .hero-grid { padding-top: 18px; gap: 26px; }
  .hero-actions .btn { flex: 1; min-width: 140px; }
  .stat { padding-right: 14px; margin-right: 14px; }
  .stat b { font-size: 1.25rem; }
  .stat span { font-size: .68rem; }
  .section { padding: 52px 0; }
  .how-grid, .style-grid, .showcase-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .how-step { padding: 20px 16px 22px; }
  .style-card .info { padding: 14px 13px 16px; }
  .style-card .info h3 { font-size: 1.06rem; }
  .style-card .info p { font-size: .74rem; min-height: 0; }
  .card-pad { padding: 22px; }
  .share-options { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .share-option .ic { width: 46px; height: 46px; }
  .topbar { padding: 16px 0; }
  .brand-text { font-size: 1rem; }
  .editor-top-actions .btn-ghost span { display: none; }
  .show-cta-card { padding: 34px 20px; margin-top: 44px; }
  .show-cta-card h3 { font-size: 1.6rem; }
  body:has(.editor) .toast-root { top: auto; bottom: calc(var(--tabbar-h) + 18px); }
}

/* ---------- editor chrome details & drag affordances ---------- */
.mobile-only { display: none; }
.editor-back { flex: none; }
.editor-ident { flex: 1 1 auto; }
.editor-top-actions { flex: none; margin-left: auto; }
.editor-top .avatar-stack { flex: none; }
@media (min-width: 1101px) {
  .editor-top { position: relative; }
  .editor-top .view-switch {
    position: absolute; left: 50%; transform: translateX(-50%); margin: 0;
  }
}
.asset-tile[draggable="true"] { cursor: grab; }
.asset-tile[draggable="true"]:active { cursor: grabbing; }
.stage.drop-ready { border-radius: 0; }
/* A dragged ornament should feel like it is being carried, not copied. */
.asset-tile.dragging { transform: scale(.94); }
@media (max-width: 900px) {
  .mobile-only { display: inline-flex; }
  .asset-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .asset-tile canvas { width: 48px; height: 48px; }
  .asset-tile span { font-size: .62rem; }
  .editor-top .view-switch { display: none; }
  .editor-top-actions .btn-ghost.btn-icon { display: none; }
}