:root {
      --base-0: #11141b;
      --base-1: #181c26;
      --base-2: #232938;
  --right-drawer-width: clamp(280px, 28vw, 360px);
  --sticker-drawer-width: clamp(260px, 26vw, 320px);
  --background-drawer-width: clamp(260px, 26vw, 320px);
  --stage-edge-gap: 16px;
      --panel: rgba(23, 27, 36, 0.94);
      --panel-strong: rgba(31, 37, 49, 0.98);
      --line: rgba(255, 255, 255, 0.08);
      --text: #edf1fb;
      --muted: #97a1b7;
      --accent: #ff9aba;
      --success: #82d2af;
      --danger: #ff8aa4;
      --radius: 22px;
      --shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
      --font-body: "M PLUS Rounded 1c", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
      --font-title: "Fredoka", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      min-height: 100%;
      overflow-x: hidden;
    }

    body {
      font-family: var(--font-body);
      color: var(--text);
      background:
        rgba(23, 27, 36, 0.94);
    }

    .shell {
      width: 100%;
      max-width: 100%;
      padding: 92px 16px 16px;
      background: var(--panel);
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(17, 20, 28, 0.72);
      backdrop-filter: blur(16px);
    }

    .topbar h1 {
      margin: 0;
      font: 700 1.02rem/1 var(--font-title);
      letter-spacing: 0.04em;
    }

    .topbar p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
    }

    .status-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 0.82rem;
      min-height: 20px;
    }

    #statusText {
      color: var(--success);
    }

    .wrap {
      position: relative;
      width: 100%;
      max-width: 100%;
      min-height: calc(100vh - 118px);
      min-height: calc(100dvh - 118px);
      background: var(--panel);
    }

    .panel {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .inspector {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 12;
      padding: 14px;
      display: grid;
      gap: 12px;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      transition: transform 0.24s ease, opacity 0.24s ease;
    }

    .inspector {
      right: 0;
      width: min(var(--right-drawer-width), calc(100vw - 32px));
    }

    .wrap.right-closed .inspector {
      transform: translateX(calc(100% + 18px));
      opacity: 0;
      pointer-events: none;
    }

    .wrap.right-closed .stage {
      padding-right: 58px;
    }

    .drawer-head {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: -2px -2px 2px;
      padding: 4px 2px 2px;
      background: linear-gradient(180deg, rgba(23, 27, 36, 0.98), rgba(23, 27, 36, 0.84));
      backdrop-filter: blur(18px);
    }

    .drawer-head strong {
      font: 700 0.9rem/1 var(--font-title);
      letter-spacing: 0.03em;
      color: #fff4f8;
    }

    .drawer-close,
    .edge-toggle {
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      background: rgba(30, 36, 48, 0.94);
      color: var(--text);
      font: inherit;
      cursor: pointer;
      transition: 0.2s ease;
    }

    .drawer-close {
      padding: 8px 12px;
      font-size: 0.78rem;
    }

    .drawer-close:hover,
    .edge-toggle:hover {
      border-color: rgba(255, 154, 186, 0.32);
      background: rgba(48, 56, 75, 0.98);
    }

    .edge-toggle {
      position: absolute;
      top: 16px;
      z-index: 14;
      padding: 9px 14px;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
    }

    .edge-toggle.right {
      right: 16px;
    }

    .edge-toggle.sticker {
      top: 68px;
      right: 16px;
      background: linear-gradient(135deg, rgba(255, 154, 186, 0.92), rgba(255, 197, 215, 0.92));
      color: #381925;
      font-weight: 800;
    }

    .edge-toggle.background {
      top: 120px;
      right: 16px;
      background: linear-gradient(135deg, rgba(159, 216, 203, 0.92), rgba(196, 236, 225, 0.92));
      color: #183931;
      font-weight: 800;
    }

    .sticker-drawer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 13;
      width: min(var(--sticker-drawer-width), calc(100vw - 32px));
      padding: 14px;
      display: grid;
      gap: 12px;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      transition: transform 0.24s ease, opacity 0.24s ease;
    }

    .background-drawer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 13;
      width: min(var(--background-drawer-width), calc(100vw - 32px));
      padding: 14px;
      display: grid;
      gap: 12px;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      transition: transform 0.24s ease, opacity 0.24s ease;
    }

    .wrap:not(.sticker-closed) .stage {
      padding-right: calc(var(--sticker-drawer-width) + var(--stage-edge-gap));
    }

    .wrap:not(.background-closed) .stage {
      padding-right: calc(var(--background-drawer-width) + var(--stage-edge-gap));
    }

    .wrap.sticker-closed .sticker-drawer {
      transform: translateX(calc(100% + 18px));
      opacity: 0;
      pointer-events: none;
    }

    .wrap.background-closed .background-drawer {
      transform: translateX(calc(100% + 18px));
      opacity: 0;
      pointer-events: none;
    }

    .section {
      padding: 14px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 18px;
      background: var(--panel-strong);
    }

    .section-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .section-head h2 {
      margin: 0;
      font: 700 0.95rem/1.1 var(--font-title);
      letter-spacing: 0.03em;
    }

    .section-head p,
    .section-note {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.45;
    }

    .quick-nav,
    .action-row,
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .chip-btn,
    .btn {
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      background: #262d3c;
      color: var(--text);
      font: inherit;
      transition: 0.2s ease;
    }

    .chip-btn {
      padding: 8px 12px;
      font-size: 0.82rem;
      cursor: pointer;
    }

    .chip-btn:hover,
    .btn:hover,
    .library-card:hover {
      transform: translateY(-1px);
      border-color: rgba(255, 154, 186, 0.32);
      background: #30384b;
    }

    .chip-btn.active {
      background: linear-gradient(135deg, rgba(255, 154, 186, 0.24), rgba(159, 216, 203, 0.22));
      border-color: rgba(255, 154, 186, 0.45);
      color: #fff6fa;
    }

    .btn {
      padding: 10px 14px;
      cursor: pointer;
    }

    .btn.main {
      background: linear-gradient(135deg, #ff93b6, #ffc5d7);
      color: #331926;
      font-weight: 700;
    }

    .btn.secondary {
      background: #252d3c;
    }

    .btn:disabled,
    textarea:disabled,
    select:disabled,
    input:disabled {
      opacity: 0.48;
      cursor: not-allowed;
      transform: none;
    }

    label {
      display: grid;
      gap: 6px;
      margin-bottom: 10px;
      font-size: 0.82rem;
      color: var(--muted);
    }

    .field-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .field-value {
      color: #ffe6f0;
      font-size: 0.78rem;
    }

    input[type="text"],
    textarea,
    select,
    input[type="color"] {
      width: 100%;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      background: #10141d;
      color: var(--text);
      font: inherit;
    }

    input[type="text"],
    textarea,
    select {
      padding: 10px 12px;
    }

    input[type="color"] {
      min-height: 44px;
      padding: 6px;
    }

    textarea {
      resize: vertical;
      min-height: 100px;
      line-height: 1.5;
    }

    input:focus,
    textarea:focus,
    select:focus {
      outline: none;
      border-color: rgba(255, 154, 186, 0.42);
      box-shadow: 0 0 0 3px rgba(255, 154, 186, 0.12);
    }

    input[type="range"] {
      width: 100%;
      accent-color: #ff9aba;
    }

    .module-toolbar {
      display: grid;
      gap: 10px;
    }

    #moduleCountText {
      margin: 0;
      color: var(--muted);
      font-size: 0.8rem;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 100%;
      min-height: calc(100vh - 118px);
      min-height: calc(100dvh - 118px);
      padding: 12px calc(var(--right-drawer-width) + var(--stage-edge-gap)) 12px var(--stage-edge-gap);
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 12px;
      overflow-x: hidden;
      overflow-y: auto;
      transition: padding 0.24s ease;
    }

    .meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 4px 12px;
    }

    .preview-info,
    .meta-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .preview-pill,
    .preview-status {
      padding: 7px 10px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.03);
    }

    .preview-pill {
      color: var(--muted);
      font-size: 0.78rem;
    }

    .preview-status strong,
    .preview-status span {
      display: block;
    }

    .preview-status strong {
      font-size: 0.72rem;
      color: var(--muted);
    }

    .preview-status span {
      margin-top: 2px;
      font-size: 0.82rem;
      color: #fff3f8;
    }

    .canvas-wrap {
      width: 100%;
      max-width: 100%;
      overflow: auto;
      border-radius: 20px;
      background: var(--panel);
      padding: 14px;
      display: grid;
      justify-items: center;
      align-content: start;
      min-height: 0;
    }

    .canvas-tools {
      width: 100%;
      max-width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      margin-top: 2px;
    }

    .canvas-tools .module-toolbar {
      min-width: 0;
    }

    .canvas-tools .export-card {
      min-width: 270px;
    }

    .card-viewport {
      position: relative;
      width: 1200px;
      height: 675px;
      max-width: 100%;
    }

    .sticker-selection-bar {
      position: absolute;
      right: 74px;
      bottom: 22px;
      z-index: 6;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border: 1px solid rgba(255, 154, 186, 0.18);
      border-radius: 18px;
      background: rgba(17, 20, 28, 0.92);
      box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(18px);
    }

    .sticker-selection-bar[hidden] {
      display: none !important;
    }

    .text-selection-bar {
      right: auto;
      left: 74px;
      bottom: 22px;
    }

    .sticker-selection-copy {
      display: grid;
      gap: 2px;
    }

    .sticker-selection-copy strong {
      font-size: 0.84rem;
      color: #fff0f6;
    }

    .sticker-selection-copy span {
      font-size: 0.76rem;
      color: var(--muted);
    }

    .card {
      position: absolute;
      top: 0;
      left: 0;
      width: 1200px;
      height: 675px;
      overflow: hidden;
      border-radius: 38px;
      background: linear-gradient(135deg, #fff8fb 0%, #fff6ea 55%, #f5fff7 100%);
      color: #4d4050;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
      transform-origin: top left;
      transform: scale(var(--card-scale, 1));
      --theme-bg-1: #fffafc;
      --theme-bg-2: #fff8ef;
      --theme-bg-3: #f4fff9;
      --theme-glow-a: rgba(255, 215, 228, 0.85);
      --theme-glow-b: rgba(255, 230, 170, 0.82);
      --theme-glow-c: rgba(186, 247, 221, 0.82);
      --shape-a-bg: rgba(255, 191, 210, 0.48);
      --shape-b-bg: rgba(174, 235, 217, 0.54);
      --sub-color: #cf678d;
      --line-a: rgba(207, 103, 141, 0.36);
      --chip-line: rgba(207, 103, 141, 0.2);
    }

    .card[data-style="cotton"] {
      background: linear-gradient(135deg, #fff8fb 0%, #fff7ee 48%, #f4fff7 100%);
    }

    .card[data-style="peach"] {
      background: linear-gradient(135deg, #fff4ef 0%, #fff8f3 48%, #fff1f6 100%);
      --theme-bg-1: #fff6f0;
      --theme-bg-2: #fff1df;
      --theme-bg-3: #fff4f8;
      --theme-glow-a: rgba(255, 209, 184, 0.88);
      --theme-glow-b: rgba(255, 236, 193, 0.8);
      --theme-glow-c: rgba(255, 199, 220, 0.74);
      --shape-a-bg: rgba(255, 188, 164, 0.5);
      --shape-b-bg: rgba(255, 206, 220, 0.48);
      --sub-color: #d87a6c;
      --line-a: rgba(216, 122, 108, 0.34);
      --chip-line: rgba(216, 122, 108, 0.2);
    }

    .card[data-style="mint"] {
      background: linear-gradient(135deg, #f2fff9 0%, #f8fff5 44%, #eefcff 100%);
      --theme-bg-1: #f2fff9;
      --theme-bg-2: #f2fff2;
      --theme-bg-3: #eefcff;
      --theme-glow-a: rgba(188, 245, 224, 0.82);
      --theme-glow-b: rgba(219, 255, 205, 0.76);
      --theme-glow-c: rgba(191, 234, 255, 0.78);
      --shape-a-bg: rgba(160, 229, 206, 0.48);
      --shape-b-bg: rgba(180, 227, 255, 0.5);
      --sub-color: #4c9f8e;
      --line-a: rgba(76, 159, 142, 0.32);
      --chip-line: rgba(76, 159, 142, 0.2);
    }

    .card[data-style="berry"] {
      background: linear-gradient(135deg, #fff2f8 0%, #fff7ef 42%, #fff0f1 100%);
      --theme-bg-1: #fff3f8;
      --theme-bg-2: #fff0e6;
      --theme-bg-3: #fff1f4;
      --theme-glow-a: rgba(255, 198, 224, 0.84);
      --theme-glow-b: rgba(255, 220, 185, 0.76);
      --theme-glow-c: rgba(255, 185, 202, 0.72);
      --shape-a-bg: rgba(233, 150, 188, 0.42);
      --shape-b-bg: rgba(255, 196, 180, 0.48);
      --sub-color: #b14d74;
      --line-a: rgba(177, 77, 116, 0.34);
      --chip-line: rgba(177, 77, 116, 0.2);
    }

    .bg-photo,
    .overlay,
    .bg-shape,
    .sparkles,
    .tape,
    .text-module-layer {
      position: absolute;
    }

    .bg-photo {
      inset: 0;
      overflow: hidden;
    }

    #bgPreview,
    .bg-fallback {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .bg-fallback {
      transform: translate(-50%, -50%);
      background:
        radial-gradient(circle at 20% 20%, var(--theme-glow-a), transparent 28%),
        radial-gradient(circle at 80% 24%, var(--theme-glow-b), transparent 22%),
        radial-gradient(circle at 68% 78%, var(--theme-glow-c), transparent 28%),
        linear-gradient(140deg, var(--theme-bg-1) 0%, var(--theme-bg-2) 44%, var(--theme-bg-3) 100%);
    }

    .bg-shape {
      border-radius: 999px;
      filter: blur(6px);
      opacity: 0.6;
    }

    .bg-shape.a {
      width: 280px;
      height: 280px;
      top: -50px;
      right: -60px;
      background: var(--shape-a-bg);
    }

    .bg-shape.b {
      width: 240px;
      height: 240px;
      bottom: -70px;
      left: -20px;
      background: var(--shape-b-bg);
    }

    .overlay {
      inset: 0;
      background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
      opacity: 0.18;
      pointer-events: none;
    }

    .tape {
      top: 24px;
      left: 502px;
      width: 180px;
      height: 34px;
      transform: rotate(-5deg);
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.55);
      border-radius: 8px;
      backdrop-filter: blur(4px);
    }

    .sparkles {
      inset: 0;
      pointer-events: none;
    }

    .sparkle {
      position: absolute;
      width: 14px;
      height: 14px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%);
      animation: twinkle 3.6s ease-in-out infinite;
    }

    .sparkle.one { top: 84px; left: 190px; }
    .sparkle.two { top: 182px; right: 230px; animation-delay: 1s; }
    .sparkle.three { bottom: 124px; left: 420px; animation-delay: 1.9s; }

    @keyframes twinkle {
      0%, 100% { transform: scale(0.7); opacity: 0.35; }
      50% { transform: scale(1.25); opacity: 0.9; }
    }

    .draggable {
      position: absolute;
      z-index: 5;
      max-width: calc(100% - 40px);
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    .draggable.selected {
      outline: 2px dashed rgba(255, 146, 184, 0.9);
      outline-offset: 6px;
      border-radius: 16px;
    }

    .avatar-box {
      width: 188px;
      height: 188px;
      overflow: hidden;
      border-radius: 38px;
      border: 4px solid rgba(255, 255, 255, 0.88);
      box-shadow: 0 18px 42px rgba(154, 98, 120, 0.16);
      background: rgba(255, 255, 255, 0.7);
    }

    .avatar-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .text-module-layer {
      z-index: 4;
    }

    .text-module-layer {
      inset: 0;
    }

    .text-module {
      padding: 10px 12px;
      border-radius: 18px;
      white-space: pre-wrap;
      word-break: break-word;
      background: rgba(255, 255, 255, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.45);
      box-shadow: 0 14px 24px rgba(154, 98, 120, 0.06);
      backdrop-filter: blur(8px);
    }

    .text-module.name-cn,
    .text-module.name-en,
    .text-module.role,
    .text-module.company,
    .text-module.skills,
    .text-module.contacts,
    .text-module.watermark {
      background: transparent;
      border: none;
      box-shadow: none;
      backdrop-filter: none;
      padding: 0;
    }

    .text-module.name-cn {
      text-transform: none;
    }

    .text-module.name-en {
      text-transform: uppercase;
    }

    .sticker-item {
      width: 128px;
      height: 128px;
    }

    .sticker-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 14px 18px rgba(101, 72, 84, 0.18));
    }

    .crop-view {
      display: grid;
      place-items: center;
      min-height: 292px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      background: #0f131a;
      cursor: grab;
    }

    .crop-view canvas {
      width: 280px;
      height: 280px;
      border-radius: 24px;
      display: block;
    }

    .sticker-count {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 0.8rem;
    }

    .inspector-card {
      padding: 14px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.03);
    }

    .inspector-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 4px;
    }

    .inspector-title strong {
      font-size: 0.94rem;
    }

    .inspector-title span,
    #inspectorEmptyText {
      color: var(--muted);
      font-size: 0.78rem;
    }

    #inspectorEmptyText {
      margin: 0 0 12px;
      line-height: 1.5;
    }

    .search-input {
      margin-bottom: 10px;
    }

    .sticker-library {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .library-card {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.03);
      color: var(--text);
      text-align: left;
      cursor: pointer;
      transition: 0.2s ease;
      font: inherit;
      appearance: none;
    }

    .library-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .library-card strong {
      font-size: 0.82rem;
    }

    .library-card span {
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.4;
    }

    .library-preview {
      display: grid;
      place-items: center;
      width: 88px;
      height: 88px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.04);
      overflow: hidden;
      flex-shrink: 0;
    }

    .library-preview img {
      max-width: 80px;
      max-height: 80px;
      object-fit: contain;
    }

    .upload-card .library-preview {
      color: #ffbfd2;
      font-size: 2rem;
      font-weight: 700;
    }

    .library-empty {
      padding: 14px;
      border: 1px dashed rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      color: var(--muted);
      font-size: 0.8rem;
      text-align: center;
      background: rgba(255, 255, 255, 0.02);
    }

    .export-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.03);
    }

    .export-card p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 0.78rem;
    }

    .export-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .tool-intro {
      max-width: 960px;
      margin: 28px auto 0;
      padding: 0 16px 28px;
    }

    .tool-intro-card {
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 24px;
      background:
        radial-gradient(circle at top right, rgba(255, 154, 186, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(23, 27, 36, 0.96), rgba(18, 22, 30, 0.96));
      box-shadow: var(--shadow);
      padding: 28px 32px;
    }

    .tool-intro-card h2 {
      margin: 0 0 12px;
      color: #ffdbe8;
      font: 800 clamp(1.24rem, 2.3vw, 1.7rem)/1.2 var(--font-title);
      letter-spacing: 0.02em;
    }

    .tool-intro-card p {
      margin: 0 0 12px;
      color: var(--muted);
      line-height: 1.85;
      font-size: 0.95rem;
    }

    .tool-intro-card p:last-of-type {
      margin-bottom: 16px;
    }

    .tool-intro-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tool-intro-tags span {
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 154, 186, 0.22);
      background: rgba(255, 154, 186, 0.08);
      color: #ffd7e5;
      font-size: 0.8rem;
      font-weight: 700;
    }

    @media (max-width: 1220px) {
      .stage {
        padding: 58px 10px 10px;
      }

      .wrap:not(.sticker-closed) .stage {
        padding-right: 10px;
      }

      .canvas-wrap {
        padding: 10px;
      }

      .inspector,
      .background-drawer {
        width: calc(100vw - 24px);
      }

      .sticker-drawer {
        width: calc(100vw - 24px);
        top: 0;
      }

      .background-drawer {
        top: 0;
      }

      .edge-toggle {
        top: 10px;
      }

      .edge-toggle.sticker {
        top: 58px;
      }

      .edge-toggle.background {
        top: 106px;
      }

      .canvas-tools {
        grid-template-columns: 1fr;
      }

      .canvas-tools .export-card {
        min-width: 0;
      }
    }

    @media (max-width: 680px) {
      .topbar,
      .meta,
      .export-card {
        flex-direction: column;
        align-items: stretch;
      }

      .export-actions {
        justify-content: flex-start;
      }

      .shell {
        padding-top: 84px;
      }

      .stage {
        min-height: calc(100dvh - 110px);
        padding-top: 54px;
        padding-left: 8px;
        padding-right: 8px;
      }

      .canvas-wrap {
        padding: 8px;
      }

      .edge-toggle {
        top: calc(8px + env(safe-area-inset-top));
        padding: 11px 14px;
        font-size: 0.84rem;
        min-height: 44px;
        border-radius: 14px;
      }

      .edge-toggle.right {
        right: 8px;
      }

      .edge-toggle.sticker {
        top: calc(60px + env(safe-area-inset-top));
        right: 8px;
      }

      .edge-toggle.background {
        top: calc(112px + env(safe-area-inset-top));
        right: 8px;
      }

      .btn,
      .chip-btn,
      .drawer-close,
      input[type="text"],
      textarea,
      select,
      input[type="color"] {
        min-height: 44px;
      }

      label {
        font-size: 0.86rem;
      }

      textarea {
        min-height: 110px;
      }

      .sticker-selection-bar {
        right: 18px;
        left: 18px;
        bottom: 18px;
        flex-wrap: wrap;
      }

      .inspector,
      .sticker-drawer,
      .background-drawer {
        padding-top: 12px;
      }
    }