:root {
      --bg: #fff5f8;
      --panel: #fffafb;
      --text: #24141b;
      --text-strong: #3f222e;
      --text-deep: #36202a;
      --muted: #8c6473;
      --muted-2: #8d5d70;
      --muted-3: #7b4c5f;
      --line: #f3d8e1;
      --line-strong: #f4d4de;
      --soft: #fff0f5;
      --soft-2: #ffe8f0;
      --soft-3: #ffdee9;
      --brand: #ef2d61;
      --brand-2: #d91f53;
      --white: #fff;
      --surface: #fffafb;
      --dark: #121827;
      --page-gradient: linear-gradient(45deg, #ffd6e0, #d6f5f5);
      --modal-bg: linear-gradient(180deg, #fffafb, #fff2f6);
      --font-sans: "Pingfang sc", "Microsoft YaHei", sans-serif;
      --font-xs: 12px;
      --font-sm: 13px;
      --font-md: 14px;
      --font-lg: 15px;
      --font-xl: 19px;
      --space-1: 4px;
      --space-2: 6px;
      --space-3: 8px;
      --space-4: 10px;
      --space-5: 12px;
      --space-6: 14px;
      --space-7: 16px;
      --space-8: 20px;
      --space-9: 24px;
      --radius-xs: 6px;
      --radius-sm: 8px;
      --radius-md: 10px;
      --radius-lg: 12px;
      --shadow: 0 18px 48px rgba(145, 31, 76, .12);
      --shadow-active: 0 4px 12px rgba(145, 31, 76, .1);
      --radius: 14px;
      font-family: var(--font-sans);
    }

    * {
      box-sizing: border-box;
      scrollbar-width: thin;
      scrollbar-color: rgba(239, 45, 97, .52) rgba(255, 240, 245, .55);
    }

    *::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    *::-webkit-scrollbar-track {
      background: rgba(255, 240, 245, .55);
      border-radius: 999px;
    }

    *::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(255, 133, 170, .78), rgba(239, 45, 97, .66));
      border-radius: 999px;
    }

    *::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, rgba(255, 111, 155, .9), rgba(217, 31, 83, .78));
    }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      letter-spacing: 0;
    }

    a,
    a:hover {
      text-decoration: none;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .topbar {
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-9);
      padding: 0 28px;
      background: rgba(255, 250, 252, .94);
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(14px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      font-weight: 700;
      font-size: var(--font-xl);
      color: var(--brand);
      min-width: 164px;
      font-family: "Noto Serif SC", 'Times New Roman', Times, ui-serif, Georgia, serif !important;
    }


    .nav {
      display: flex;
      align-items: center;
      gap: var(--space-1);
      color: #815869;
      font-size: var(--font-md);
      font-weight: 600;
    }

    .nav a {
      text-decoration: none;
      color: inherit;
      padding: 9px var(--space-5);
      border-radius: var(--radius-md);
      white-space: nowrap;
    }

    .nav a.active,
    .nav a:hover {
      background: var(--soft-2);
      color: var(--brand);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      min-width: 164px;
      justify-content: flex-end;
    }

    .ghost-btn,
    .primary-btn {
      min-height: 34px;
      border-radius: var(--radius-sm);
      padding: 0 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-1);
      font-size: var(--font-md);
      transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .ghost-btn {
      color: var(--text-strong);
      background: var(--soft-3);
    }

    .primary-btn {
      color: var(--white);
      background: var(--brand);
      box-shadow: 0 10px 22px rgba(239, 45, 97, .24);
    }

    .ghost-btn:hover,
    .primary-btn:hover {
      transform: translateY(-1px);
    }

    .primary-btn:hover {
      background: var(--brand-2);
    }

    .shell {
      height: calc(100vh - 64px);
      display: grid;
      grid-template-columns: 360px minmax(460px, 1fr) 360px;
      overflow: hidden;
    }

    .emoji-sidebar {
      min-width: 0;
      grid-column: 1;
      grid-row: 1;
      border-right: 1px solid var(--line);
      background: var(--panel);
      overflow: auto;
      padding: 20px;
    }

    .left {
      min-width: 0;
      grid-column: 3;
      grid-row: 1;
      border-left: 1px solid var(--line);
      background: var(--panel);
      overflow: auto;
      padding: 20px;
    }

    .right {
      min-width: 0;
      grid-column: 2;
      grid-row: 1;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      background: var(--page-gradient);
      overflow: hidden;
    }

    .toolbar {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-7);
      padding: 0 24px;
      background: rgba(255, 245, 248, .92);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(10px);
    }

    .toolbar-title {
      display: flex;
      align-items: baseline;
      gap: 9px;
      min-width: 0;
    }

    .toolbar-title span {
      color: var(--muted);
      font-size: var(--font-lg);
    }

    .toolbar-actions {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .icon-btn {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: var(--radius-sm);
      color: #7d4f62;
      background: var(--surface);
      border: 1px solid var(--line);
    }

    .icon-btn svg,
    .primary-btn svg,
    .ghost-btn svg {
      width: 17px;
      height: 17px;
      stroke-width: 2.2;
    }

    .section {
      padding: var(--space-5) 0;
    }

    .section:first-child {
      padding-top: 0;
    }

    .section:last-child {
      border-bottom: 0;
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-5);
      margin-bottom: var(--space-5);
      color: var(--muted);
    }

    .section h2 {
      margin: 0;
      font-size: var(--font-xs);
      font-weight: 800;
    }

    
    .emoji-sidebar .section-head {
      margin-bottom: var(--space-8);
      border-bottom: 1px solid #eee;
      font-size: var(--font-md);
    }

    .emoji-sidebar h2 {
      margin-top: 0;
      margin-bottom: var(--space-4);
      font-size: var(--font-md);
    }

    .emoji-panel {
      display: grid;
      gap: var(--space-7);
    }

    .emoji-category {
      display: grid;
      gap: 9px;
    }

    .emoji-title {
      margin: 0;
      color: var(--muted);
      font-size: var(--font-xs);
      font-weight: 800;
    }

    .emoji-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 3px;
    }

    .emoji-btn {
      width: 100%;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: 1px solid var(--line-strong);
      background: var(--surface);
      font-size: 18px;
      line-height: 1;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
      user-select: none;
    }

    .emoji-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(239, 45, 97, .36);
      background: var(--soft);
    }

    .field:focus,
    .select:focus {
      border-color: rgba(239, 45, 97, .5);
      box-shadow: 0 0 0 4px rgba(239, 45, 97, .1);
    }

    .segmented {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-2);
      padding: 5px;
      border-radius: var(--radius-lg);
      background: var(--soft-2);
    }

    .segmented button {
      height: 34px;
      border-radius: 9px;
      color: var(--muted-2);
      background: transparent;
      font-size: var(--font-sm);
      font-weight: 800;
    }

    .segmented button.active {
      color: var(--brand);
      background: var(--surface);
      box-shadow: var(--shadow-active);
    }

    .color-row {
      display: flex;
      gap: var(--space-3);
      flex-wrap: wrap;
      align-items: center;
    }

    .color-row::before {
      content: "选择字体颜色";
      font-size: var(--font-xs);
      color: var(--muted);
      font-weight: 600;
      width: 100%;
      margin-bottom: 2px;
    }

    .color-dot {
      width: 36px;
      height: 36px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: transform .15s, border-color .15s;
      position: relative;
    }

    .color-dot:hover {
      transform: scale(1.15);
    }

    .color-dot.active {
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(239, 45, 97, .25);
    }

    .swatch-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: var(--space-4);
    }

    .swatch {
      aspect-ratio: 1;
      border: 1px solid transparent;
      background: var(--pattern);
      position: relative;
      overflow: hidden;
    }

    .swatch.active {
      border-color: var(--brand);
    }

    .swatch span {
      position: absolute;
      left: 7px;
      bottom: 6px;
      padding: 1px;
      font-size: 11px;
      color: rgba(88, 39, 58, .82);
      background: rgba(255, 250, 252, .76);
    }

    .image-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: var(--space-4);
    }

    .image-thumb {
      width: 100%;
      aspect-ratio: 3 / 4;
      border: 1px solid transparent;
      background: var(--soft);
      overflow: hidden;
      padding: 0;
    }

    .image-thumb.active {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(239, 45, 97, .16);
    }

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

    .control {
      min-width: 0;
    }

    .control label {
      display: block;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: var(--font-xs);
      font-weight: 800;
    }

    .field,
    .select {
      width: 100%;
      height: 32px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xs);
      background: var(--surface);
      padding: 0 10px;
      color: var(--text-deep);
      outline: none;
    }

    .footer-control {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36px;
      gap: var(--space-3);
      align-items: center;
    }

    .inline-control {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: var(--space-4);
      align-items: center;
      margin-bottom: var(--space-4);
    }

    .inline-control:last-child {
      margin-bottom: 0;
    }

    .inline-control>label,
    .inline-label {
      margin: 0;
      color: var(--muted);
      font-size: var(--font-xs);
      font-weight: 800;
      white-space: nowrap;
      text-align: left;
    }

    .weight-buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-2);
      padding: 4px;
      border-radius: var(--radius-md);
      background: var(--soft-2);
    }

    .weight-btn {
      height: 30px;
      border-radius: 7px;
      color: var(--muted-2);
      background: transparent;
      font-size: var(--font-xs);
      font-weight: 800;
    }

    .weight-btn.active {
      color: var(--brand);
      background: var(--surface);
      box-shadow: var(--shadow-active);
    }

    .highlight-control {
      margin-top: 2px;
    }

    .highlight-buttons {
      display: grid;
      grid-template-columns: repeat(4, 30px);
      gap: var(--space-3);
      align-items: center;
    }

    .highlight-btn {
      width: 30px;
      height: 30px;
      border-radius: var(--radius-xs);
      border: 1px solid rgba(123, 76, 95, .16);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    }

    .highlight-btn[data-highlight="#FFFF00"] {
      background: #FFFF00;
    }

    .highlight-btn[data-highlight="#00DDFF"] {
      background: #00DDFF;
    }

    .highlight-btn[data-highlight="#FF4BDB"] {
      background: #FF4BDB;
    }

    .highlight-btn[data-highlight="#00FF02"] {
      background: #00FF02;
    }

    .highlight-btn.active {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(239, 45, 97, .2), inset 0 0 0 2px rgba(255, 255, 255, .72);
    }

    .range-row {
      display: grid;
      grid-template-columns: 1fr 48px;
      align-items: center;
      gap: var(--space-4);
      margin-bottom: var(--space-3);
    }

    .range-row>div {
      min-width: 0;
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      align-items: center;
      gap: var(--space-4);
    }

    .range-row:last-child {
      margin-bottom: 0;
    }

    .range-row+.control {
      margin-top: 12px;
    }

    .range-row label {
      display: block;
      margin-bottom: 0;
      color: var(--muted);
      font-size: var(--font-xs);
      font-weight: 800;
      line-height: 30px;
      text-align: center;
    }

    input[type="range"] {
      width: 100%;
      accent-color: var(--brand);
    }

    .value {
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: var(--soft);
      color: var(--muted-3);
      font-size: var(--font-xs);
      font-weight: 800;
    }

    .canvas-zone {
      min-height: 0;
      display: grid;
      place-items: center;
      padding: 34px;
      overflow: auto;
    }

    .stage {
      width: min(52vh, 430px);
      aspect-ratio: 3 / 4;
      position: relative;
      transform-origin: center;
      transition: transform .18s ease;
    }

    .card {
      width: 100%;
      height: 100%;
      border-radius: var(--card-radius, 0);
      background: var(--card-bg);
      color: var(--card-color);
      padding: var(--card-pad, 46px);
      box-shadow: 0 28px 75px rgba(145, 31, 76, .22);
      overflow: hidden;
      position: relative;
      isolation: isolate;
    }

    .card::before,
    .card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .card::before {
      background: var(--texture);
      background-size: cover;
      background-position: center;
      opacity: var(--texture-opacity, .75);
      z-index: 0;
    }

    .card::after {
      background: var(--wash);
      opacity: var(--wash-opacity, .35);
      z-index: 1;
    }

    .card-inner {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: var(--vertical, center);
      text-align: var(--align, left);
      gap: 20px;
      position: relative;
      z-index: 2;
    }

    .sticker-layer {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
    }

    .emoji-sticker {
      position: absolute;
      left: var(--x, 50%);
      top: var(--y, 50%);
      width: var(--size, 54px);
      height: var(--size, 54px);
      display: grid;
      place-items: center;
      font-size: calc(var(--size, 54px) * .82);
      line-height: 1;
      transform: translate(-50%, -50%);
      cursor: move;
      pointer-events: auto;
      touch-action: none;
      user-select: none;
    }

    .emoji-sticker.selected {
      outline: 1.5px dashed rgba(239, 45, 97, .78);
      outline-offset: 4px;
    }

    .emoji-sticker-resize {
      position: absolute;
      right: -11px;
      bottom: -11px;
      width: 20px;
      height: 20px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 4px 12px rgba(145, 31, 76, .22);
      cursor: nwse-resize;
      display: none;
    }

    .emoji-sticker.selected .emoji-sticker-resize {
      display: block;
    }

    .card.exporting .emoji-sticker {
      outline: 0;
    }

    .card.exporting .emoji-sticker-resize {
      display: none;
    }

    .card.exporting::before,
    .card.exporting::after {
      content: none;
    }

    .card.exporting .editable-card:empty::before {
      content: none;
    }

    .editable-card {
      outline: none;
      color: var(--card-color);
      white-space: pre-wrap;
      word-break: break-word;
      font-family: var(--content-font, var(--font-sans));
      font-size: var(--font-size, 44px);
      line-height: var(--line-height, 1.62);
      font-weight: var(--font-weight, 600);
      min-height: 80px;
      margin-top: var(--text-margin-top, 0);
      margin-bottom: var(--text-margin-bottom, 0);
    }

    .editable-card:empty::before {
      content: attr(data-placeholder);
      color: color-mix(in srgb, var(--card-color), transparent 52%);
    }

    .editable-card:empty:focus::before {
      content: "";
    }

    .card-footer {
      margin-top: var(--footer-margin, auto);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      color: color-mix(in srgb, var(--card-color), transparent 30%);
      font-size: 13px;
      font-weight: 800;
      opacity: var(--footer-opacity, .82);
    }

    .card.footer-hidden .card-footer {
      visibility: hidden;
    }

    .card-footer .line {
      width: 44px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      opacity: .5;
    }

    .toast {
      position: fixed;
      right: 24px;
      bottom: 24px;
      min-width: 190px;
      padding: 12px 14px;
      border-radius: 12px;
      color: var(--white);
      background: var(--dark);
      box-shadow: var(--shadow);
      font-size: var(--font-md);
      font-weight: 700;
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      z-index: 20;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(36, 20, 27, .34);
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
      z-index: 30;
    }

    .modal-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }

    .favorite-modal {
      width: min(420px, 100%);
      padding: 24px;
      border: 1px solid rgba(243, 216, 225, .95);
      border-radius: 18px;
      background:
        radial-gradient(circle at 18% 0%, rgba(255, 177, 202, .34), transparent 34%),
        var(--modal-bg);
      box-shadow: 0 28px 80px rgba(145, 31, 76, .25);
      transform: translateY(12px) scale(.98);
      transition: transform .2s ease;
    }

    .modal-backdrop.show .favorite-modal {
      transform: translateY(0) scale(1);
    }

    .favorite-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-7);
      margin-bottom: 18px;
    }

    .favorite-title {
      margin: 0 0 6px;
      color: var(--text);
      font-size: 20px;
      line-height: 1.25;
      font-weight: 900;
    }

    .favorite-subtitle {
      margin: 0;
      color: var(--muted);
      font-size: var(--font-sm);
      line-height: 1.6;
      font-weight: 600;
    }

    .modal-close {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: var(--radius-md);
      color: var(--muted-3);
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(243, 216, 225, .9);
    }

    .shortcut-list {
      display: grid;
      gap: var(--space-5);
    }

    .shortcut-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-7);
      min-height: 62px;
      padding: 14px 15px;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(243, 216, 225, .9);
    }

    .shortcut-item strong {
      color: #442130;
      font-size: var(--font-md);
    }

    .shortcut-item span {
      display: block;
      margin-top: 3px;
      color: #9b6b7c;
      font-size: var(--font-xs);
      font-weight: 600;
    }

    .keys {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-shrink: 0;
    }

    .keys kbd {
      min-width: 34px;
      height: 30px;
      display: grid;
      place-items: center;
      padding: 0 9px;
      border-radius: var(--radius-sm);
      color: #ef2d61;
      background: var(--bg);
      border: 1px solid #f0c9d5;
      box-shadow: inset 0 -2px 0 rgba(239, 45, 97, .1);
      font-size: var(--font-xs);
      font-weight: 900;
    }

    @media (max-width: 1180px) {
      .topbar {
        height: auto;
        min-height: 56px;
        padding: 12px 16px;
        flex-wrap: wrap;
      }

      .brand,
      .header-actions {
        min-width: 0;
      }

      .nav {
        width: 100%;
        order: 3;
        overflow: auto;
        padding-bottom: 2px;
      }

      .shell {
        height: auto;
        min-height: calc(100vh - 104px);
        grid-template-columns: 1fr;
      }

      .emoji-sidebar {
        grid-column: auto;
        grid-row: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .left {
        grid-column: auto;
        grid-row: auto;
        border-left: 0;
        border-bottom: 1px solid var(--line);
      }

      .right {
        grid-column: auto;
        grid-row: auto;
        min-height: 720px;
      }

      .stage {
        width: min(86vw, 390px);
      }
    }

    @media (max-width: 560px) {
      .header-actions .ghost-btn {
        display: none;
      }

      .toolbar {
        height: auto;
        padding: 14px 16px;
        align-items: flex-start;
        flex-direction: column;
      }

      .toolbar-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .left {
        padding: 16px;
      }

      .emoji-sidebar {
        padding: 16px;
      }

      .emoji-grid {
        grid-template-columns: repeat(10, 1fr);
      }

      .swatch-grid {
        grid-template-columns: repeat(6, 1fr);
      }

      .canvas-zone {
        padding: 22px 12px;
      }
    }

    .v-align-group-offset {
      margin-top: 8px;
    }