/* 自定义字体加载 */
    @font-face {
      font-family: 'XZUAN';
      src: url('./font/XZUAN') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'YANTI';
      src: url('./font/YANTI') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'SIMKAI';
      src: url('./font/SIMKAI') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'SIMHEI';
      src: url('./font/SIMHEI') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    @font-face {
      font-family: 'MSYH';
      src: url('./font/MSYH') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --radius: 10px; --shadow: 0 2px 10px rgba(0,0,0,0.09);
      --border: #e0e4ea; --label: #5a6272; --accent: #2c6fad;
    }
    body {
      font-family: 'Microsoft YaHei','PingFang SC','Helvetica Neue',sans-serif;
      background: #edf0f5; color: #2c3140; font-size: 13px; min-height: 100vh;
    }
    header {
      background: linear-gradient(135deg,#1b3f6a 0%,#2c6fad 100%);
      color: #fff; padding: 13px 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    }
    header h1 { font-size: 1.15rem; font-weight: 600; letter-spacing: .05em; }
    header p  { font-size: 0.75rem; opacity: .7; margin-top: 2px; }
    .wrap { max-width: 1280px; margin: 0 auto; padding: 18px 16px; }
    .btn {
      padding: 6px 15px; border: none; border-radius: 6px;
      cursor: pointer; font-size: .82rem; font-weight: 600; font-family: inherit;
      transition: filter .15s, transform .1s; white-space: nowrap;
    }
    .btn:active { transform: scale(.97); }
    .btn:hover  { filter: brightness(1.09); }
    .btn-png  { background: #22c55e; color: #fff; }
    .btn-svg  { background: #f59e0b; color: #fff; }
    .btn-clr  { background: #e5e7eb; color: #555; }

    /* Preview */
    .preview-wrap {
      background: #7b8fa0; border-radius: var(--radius); padding: 24px;
      overflow: auto; min-height: 220px; display: flex; justify-content: center; align-items: flex-start;
    }
    #svg-host {
      display: flex; justify-content: center; align-items: flex-start;
      overflow: hidden; width: 100%; height: auto; min-height: 300px;
      background: #f5f5f5; border-radius: 4px; cursor: grab;
    }
    #svg-host:active { cursor: grabbing; }
    #svg-host svg { display: block; box-shadow: 0 6px 32px rgba(0,0,0,.3); flex-shrink: 0; }
    .empty-state { text-align: center; padding: 60px 20px; color: #c8d4de; font-size: .95rem; }
    .empty-state svg { display: block; margin: 0 auto 12px; }

    /* Panels */
    .settings-panel {
      position: fixed; top: 60px; right: 80px;
      background: #fff; border-radius: var(--radius);
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
      width: 90%; max-width: 600px; max-height: 80vh; z-index: 1001; display: none;
      resize: both; overflow: auto;
    }
    .settings-panel.show { display: block; }
    .panel-header {
      padding: 15px 20px; border-bottom: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
      background: linear-gradient(135deg,#1b3f6a 0%,#2c6fad 100%); color: #fff;
      border-radius: var(--radius) var(--radius) 0 0;
      cursor: move; user-select: none;
    }
    .panel-title { font-size: 16px; font-weight: 600; }
    .close-btn {
      background: rgba(255,255,255,0.2); border: none; color: #fff;
      font-size: 24px; width: 32px; height: 32px; border-radius: 50%;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all 0.3s ease;
    }
    .close-btn:hover { background: rgba(255,255,255,0.3); }
    .panel-body { padding: 20px; max-height: calc(80vh - 60px); overflow-y: auto; }


    /* Form elements */
    .fg { display: flex; flex-direction: column; }
    .lbl { font-size: .78rem; color: var(--label); margin-bottom: 3px; }
    .fr { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
    .fr:last-child { margin-bottom: 0; }
    .fl { font-size: .78rem; color: var(--label); min-width: 64px; flex-shrink: 0; }
    .sep {
      font-size: .72rem; font-weight: 700; color: #888; letter-spacing: .05em;
      margin: 8px 0 5px; padding-bottom: 3px; border-bottom: 1px solid #f0f0f0;
    }
    input[type="number"].ns {
      width: 48px; padding: 4px 5px; border: 1.5px solid var(--border);
      border-radius: 5px; font-size: .8rem; text-align: center; font-family: inherit;
    }
    input[type="number"].ns:focus { outline: none; border-color: var(--accent); }
    select.sel {
      padding: 4px 6px; border: 1.5px solid var(--border); border-radius: 5px;
      font-size: .78rem; font-family: inherit; background: #fff; cursor: pointer; max-width: 160px;
    }
    select.sel:focus { outline: none; border-color: var(--accent); }
    input[type="range"] { width: 100px; accent-color: var(--accent); cursor: pointer; }
    .rv { font-size: .78rem; color: #555; min-width: 36px; text-align: right; }
    input[type="color"].cp { width: 28px; height: 26px; border: 1px solid var(--border); border-radius: 4px; padding: 1px; cursor: pointer; }
    .radio-g { display: flex; gap: 10px; }
    .radio-g label { display: flex; align-items: center; gap: 3px; font-size: .78rem; cursor: pointer; }

    /* Status bar */
    .status-bar {
      background: #fff; padding: 10px 15px; border-radius: var(--radius);
      box-shadow: var(--shadow); margin-bottom: 15px; display: flex; align-items: center; gap: 8px;
    }
    .status-bar .dot { width: 8px; height: 8px; background: #27ae60; border-radius: 50%; }
    textarea#txt {
      display: block; width: 100%; height: 72px; border: 1.5px solid var(--border);
      border-radius: 7px; padding: 8px 10px; font-size: 0.95rem; font-family: inherit;
      resize: vertical; transition: border-color .2s;
    }
    textarea#txt:focus { outline: none; border-color: var(--accent); }
    #edit-hint {
      position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
      background: rgba(44,111,173,0.95); color: #fff; padding: 12px 24px;
      border-radius: 8px; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      z-index: 1000; display: none; opacity: 0; transition: opacity 0.3s ease;
      pointer-events: none; text-align: center; max-width: 90%;
    }
    .char-clickable:hover { fill: rgba(44,111,173,0.15) !important; }
    .char-clickable { pointer-events: auto !important; touch-action: none; -webkit-tap-highlight-color: transparent; }
    .panzoom-bg { pointer-events: all !important; }
    #grid-svg { touch-action: pan-x pan-y; }

    @media (max-width: 600px) {
      .wrap { padding: 8px 4px; }
      .preview-wrap { padding: 4px; }
      #edit-hint { bottom: 60px !important; padding: 10px 16px !important; font-size: 13px !important; }
    }
    @media (max-width: 400px) {
      .wrap { padding: 4px 2px; }
      .preview-wrap { padding: 2px; min-height: 150px; }
      #edit-hint { bottom: 50px !important; padding: 8px 14px !important; font-size: 12px !important; }
    }