/* ============================================================
   文字转拼豆 · 在线工具（网页版）
   版式沿用图片转拼豆的三栏工具规范；此处只放文字工具特有控件。
   ============================================================ */
    @font-face {
      font-family: "Press Start 2P";
      src: url("../fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
      font-display: swap;
    }
    @font-face {
      font-family: "VT323";
      src: url("../fonts/vt323-latin-400-normal.woff2") format("woff2");
      font-display: swap;
    }
    @font-face {
      font-family: "Silkscreen";
      src: url("../fonts/silkscreen-latin-400-normal.woff2") format("woff2");
      font-display: swap;
    }
    @font-face {
      font-family: "Pixelify Sans";
      src: url("../fonts/pixelify-sans-latin-400-normal.woff2") format("woff2");
      font-display: swap;
    }
    @font-face {
      font-family: "Cubic 11";
      src: url("../fonts/Cubic_11.woff2") format("woff2");
      font-display: swap;
    }

    .side-head-tag {
      margin-left: auto;
      padding: 1px 7px;
      border-radius: var(--r-pill);
      background: var(--c-surface);
      color: var(--c-outline);
      font-size: 10.5px;
      font-weight: 500;
    }

    /* ---------- 表单 ---------- */
    .field { display: grid; gap: 6px; }
    .field + .field { margin-top: var(--sp-3); }
    .field-label {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px;
      font-size: 12.5px; color: var(--c-text-sub);
    }
    .field-label .req { color: var(--c-outline); font-size: 11px; font-weight: 400; }
    .field-note {
      margin: 7px 0 0;
      font-size: 11.5px;
      line-height: 1.55;
      color: var(--c-outline);
    }
    .textarea {
      width: 100%;
      min-height: 84px;
      padding: 10px 12px;
      border: 1px solid transparent;
      border-radius: var(--r-sm);
      background: var(--c-surface);
      color: var(--c-text);
      font-family: inherit;
      font-size: 14px;
      line-height: 1.65;
      resize: vertical;
      outline: none;
      transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
      box-sizing: border-box;
    }
    .textarea::placeholder { color: var(--c-outline); }
    .textarea:hover { background: var(--c-surface-high); }
    .textarea:focus {
      background: var(--c-surface);
      border-color: var(--c-primary);
      box-shadow: 0 0 0 2px var(--c-primary-soft);
    }
    .select-wrap { position: relative; }
    .select {
      appearance: none;
      -webkit-appearance: none;
      width: 100%; height: 36px;
      padding: 0 32px 0 10px;
      border: 1px solid transparent;
      border-radius: var(--r-sm);
      background: var(--c-surface);
      color: var(--c-text);
      font-family: inherit; font-size: 13px;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .select:hover { background: var(--c-surface-high); }
    .select:focus {
      outline: none;
      border-color: var(--c-primary);
      box-shadow: 0 0 0 2px var(--c-primary-soft);
    }
    .select-wrap svg {
      position: absolute; right: 10px; top: 50%;
      transform: translateY(-50%);
      pointer-events: none; color: var(--c-outline);
    }
    .segment--3 { grid-template-columns: repeat(3, 1fr); }

    /* ---------- 颜色字段 ---------- */
    .color-field {
      display: flex; align-items: center; gap: 8px;
      width: 100%; height: 38px;
      padding: 0 10px;
      border: 1px solid transparent;
      border-radius: var(--r-sm);
      background: var(--c-surface);
      color: var(--c-text-sub);
      font-family: inherit;
      cursor: pointer;
      text-align: left;
      transition: background .15s ease, border-color .15s ease;
    }
    .color-field:hover { background: var(--c-surface-high); }
    .color-field:focus-visible { border-color: var(--c-primary); }
    .color-field[hidden] { display: none; }
    .cf-swatch {
      width: 18px; height: 18px; flex: none;
      border-radius: 50%;
      background: var(--swatch, #FBED56);
      box-shadow: inset 0 0 0 1px var(--c-hairline);
    }
    .cf-body { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
    .cf-code { font-size: 12.5px; font-weight: 600; color: var(--c-text); }
    .cf-name { font-size: 11.5px; color: var(--c-outline); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cf-hex {
      margin-left: auto;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 10.5px;
      color: var(--c-outline);
    }
    .cf-caret { flex: none; color: var(--c-outline); }
    .layer-body {
      margin: 0 0 6px;
      padding: 9px 0 9px 11px;
      border-left: 2px solid var(--c-divider);
      display: grid; gap: 9px;
    }
    .layer-body[hidden] { display: none; }
    .layer-body .slider { padding-top: 0; }
    .dir-row { display: flex; align-items: center; gap: 12px; }
    .dir-grid { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; flex: none; }
    .dir-btn {
      width: 34px; height: 34px;
      display: grid; place-items: center;
      border: 1px solid transparent;
      border-radius: var(--r-sm);
      background: var(--c-surface);
      color: var(--c-text-sub);
      font-family: inherit; font-size: 15px; line-height: 1;
      cursor: pointer;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .dir-btn:hover { background: var(--c-surface-high); color: var(--c-text); }
    .dir-btn.on {
      background: var(--c-primary-soft); color: var(--c-primary);
      border-color: color-mix(in srgb, var(--c-primary) 34%, transparent);
    }
    .dir-btn:disabled { opacity: .25; pointer-events: none; }
    .dir-row .slider { flex: 1 1 auto; min-width: 0; }

    /* ---------- 画布覆盖（非方形，按画布比例自适应） ---------- */
    .board {
      --ar: 2;
      width: min(100%, calc((100cqh - var(--sp-4) * 2) * var(--ar, 1)), 820px);
      aspect-ratio: var(--ar, 1);
      background: var(--c-card);
      border-radius: 8px;
      box-shadow: var(--shadow-card);
    }
    @supports not (width: 1cqh) {
      .board { width: min(100%, 760px); }
    }
    .board.is-select canvas { cursor: default; }
    .board.is-painting { cursor: crosshair; }
    .board.is-painting canvas { cursor: crosshair; }
    .overflow-bar {
      flex: none;
      display: flex; align-items: center; gap: 8px;
      padding: 8px var(--sp-4);
      background: var(--c-brand-alt-tint);
      border-bottom: 1px solid var(--c-divider);
      color: var(--c-text);
      font-size: 12.5px;
    }
    .overflow-bar[hidden] { display: none; }
    .overflow-bar .ob-dot {
      width: 8px; height: 8px; flex: none;
      border-radius: 50%;
      background: var(--c-brand-alt);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand-alt) 18%, transparent);
    }
    .overflow-bar #overflowText { flex: 1 1 auto; min-width: 0; }
    .overflow-bar .ob-btn {
      flex: none; height: 28px; padding: 0 12px;
      font-size: 12px;
    }
    .stage-empty .se-box {
      width: min(100%, 420px);
      aspect-ratio: auto;
      padding: var(--sp-6) var(--sp-5);
    }

    /* ---------- 右栏 ---------- */
    /* summary-card / tips 段已移除，样式随之删除 */
    .color-row .bar i { background: var(--bar-color, var(--c-primary)); }
    .info-body .color-row { padding: 7px 9px; gap: 5px; }

    /* text-color-pop 已由 shared.css 的基础 .color-pop + 行内 position:fixed 替代 */

    /* ---------- 窄屏收口 ---------- */
    @media (max-width: 720px) {
      .dir-row { align-items: flex-start; flex-direction: column; }
      .stage-status .st-right { display: none; }
    }
    @media (max-width: 1080px) {
      .board-bar { row-gap: 2px; }
      .board-stage { container-type: normal; flex: none; min-height: 0; }
      .board { width: min(100%, 720px); }
    }