/* ===== CSS Variables ===== */
    :root[data-theme="dark"] {
      --bg:           #1e1f22;
      --surface:      #2b2d31;
      --surface2:     #35373c;
      --accent:       #00b0f4;
      --accent2:      #38d9f5;
      --ok:           #57f287;
      --text:         #dbdee1;
      --text-muted:   #80848e;
      --border:       #3f4147;
      --shadow:       rgba(0,0,0,0.55);
      --drop-hover:   rgba(0,176,244,0.09);
      --drop-ok:      rgba(87,242,135,0.08);
    }
    :root[data-theme="light"] {
      --bg:           #f2f3f5;
      --surface:      #ffffff;
      --surface2:     #e3e5e8;
      --accent:       #0096cf;
      --accent2:      #00b0d8;
      --ok:           #2d7d46;
      --text:         #2e3338;
      --text-muted:   #5c6370;
      --border:       #d4d7dc;
      --shadow:       rgba(0,0,0,0.08);
      --drop-hover:   rgba(0,150,207,0.07);
      --drop-ok:      rgba(45,125,70,0.08);
    }

    /* ===== Reset ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    button { -webkit-tap-highlight-color: transparent; appearance: none; -webkit-appearance: none; }
    button:focus { outline: none; }
    button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', Arial, sans-serif;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* ===== Header ===== */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 18px;
      height: 56px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      box-shadow: 0 2px 10px var(--shadow);
      z-index: 10;
    }
    .logo {
      font-size: 16px;
      font-weight: 700;
      color: var(--accent);
    }

    /* ===== App Body ===== */
    .app-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* ===== Canvas Area ===== */
    .canvas-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      gap: 12px;
      min-width: 0;
    }
    .canvas-wrap {
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 6px 24px var(--shadow);
      width: min(100%, calc((100vh - 130px) * var(--ar, 854/480)));
      position: relative;
      will-change: transform;
      transform: translateZ(0);
      isolation: isolate;
    }
    #mainCanvas {
      display: block;
      background: var(--bg);
      width: 100%;
      height: auto;
      cursor: default;
      transform: translateZ(0);
      will-change: transform;
    }

    /* ===== Transport Overlay ===== */
    .transport {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.0) 100%);
      padding: 18px 14px 10px;
      opacity: 0;
      transition: opacity 0.55s ease;
      pointer-events: none;
      border-radius: 0 0 14px 14px;
    }
    .canvas-wrap:hover .transport { opacity: 1; transition: opacity 0.12s ease; }
    .canvas-wrap.mask-follow .transport { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.2s ease; }
    .canvas-wrap.mask-follow,
    .canvas-wrap.mask-follow canvas,
    .canvas-wrap.mask-follow * { cursor: none !important; }
    .canvas-wrap:hover .tbtn,
    .canvas-wrap:hover .progress-track,
    .canvas-wrap:hover .time-label { pointer-events: auto; }
    .transport-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    /* Transport icon buttons */
    @keyframes tbtn-glow {
      0%   { filter: drop-shadow(0 0 6px rgba(255,255,255,0.95)) drop-shadow(0 0 12px rgba(255,255,255,0.6)); }
      100% { filter: drop-shadow(0 0 0px rgba(255,255,255,0)); }
    }
    .tbtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 50%;
      width: 34px;
      height: 34px;
      color: #fff;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 0.1;
    }
    .tbtn:hover { background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 75%); transform: scale(1.08); }
    .tbtn.active { color: var(--accent); }
    .tbtn.glow svg.lucide { animation: tbtn-glow 0.65s ease-out forwards; }
    .tbtn svg.lucide { width: 16px; height: 16px; stroke: #fff; }
    /* Seekbar inside overlay */
    .progress-track {
      flex: 1;
      height: 4px;
      background: rgba(255,255,255,0.25);
      border-radius: 3px;
      cursor: pointer;
      position: relative;
      margin-left: 8px;
    }
    .progress-track::before {
      content: '';
      position: absolute;
      inset: -10px 0;
    }
    .progress-track { transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; }
    .progress-track:hover { transform: scaleY(1.5); }
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      border-radius: 3px;
      width: 0%;
      pointer-events: none;
    }
    .progress-thumb {
      position: absolute;
      top: 50%;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent);
      transform: translate(-50%, -50%) scale(0);
      pointer-events: none;
      left: 0%;
      box-shadow: none;
      transition: transform 0.12s;
    }
    .progress-track:hover .progress-thumb,
    .progress-track.dragging .progress-thumb { transform: translate(-50%, -50%) scale(1) scaleY(calc(1 / 1.5)); }
    .time-label {
      font-size: 11px;
      color: rgba(255,255,255,0.7);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      flex-shrink: 0;
      min-width: 80px;
      text-align: right;
    }
    /* Transport volume */
    .transport-vol {
      position: relative;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .transport-mute-btn { flex-shrink: 0; }
    .transport-vol-popup {
      position: absolute;
      bottom: 100%;           /* 隙間なし → ホバー判定が途切れない */
      left: 50%;
      transform: translateX(-50%) translateY(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease, transform 0.15s ease;
      padding: 6px 0;
    }
    .transport-vol:hover .transport-vol-popup,
    .transport-vol.vol-open .transport-vol-popup {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    /* rotate(-90deg)のlayoutサイズ(80×4px)を正しい視覚サイズ(20×80px)に合わせるラッパー */
    .vol-track-wrap {
      width: 20px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vol-track {
      width: 4px;
      height: 80px;
      background: rgba(255,255,255,0.25);
      border-radius: 3px;
      cursor: pointer;
      position: relative;
    }
    .vol-track::before {
      content: '';
      position: absolute;
      inset: 0 -10px;
    }
    .vol-fill {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      border-radius: 3px;
      background: linear-gradient(to top, var(--accent), var(--accent2));
      pointer-events: none;
      height: 100%;
    }
    .vol-thumb {
      position: absolute;
      left: 50%;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent);
      transform: translate(-50%, 50%) scale(1);
      pointer-events: none;
      bottom: 0%;
      transition: transform 0.12s;
    }
    .vol-track:hover .vol-thumb,
    .vol-track.dragging .vol-thumb { transform: translate(-50%, 50%) scale(1); }
    /* ===== Panel ===== */
    .panel {
      width: 402px;
      min-width: 402px;
      max-width: 402px;
      flex-shrink: 0;
      overflow-y: auto;
      scrollbar-gutter: stable;
      overflow-x: hidden;
      background: var(--surface);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 1px;
      transition: max-width 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
    }
    .panel.collapsed {
      max-width: 0;
      min-width: 0;
      opacity: 0;
      overflow: hidden;
      border-color: transparent;
      pointer-events: none;
    }
    .panel::-webkit-scrollbar { width: 4px; }
    .panel::-webkit-scrollbar-track { background: transparent; }
    .panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* ===== Card ===== */
    .card {
      background: var(--surface);
      padding: 10px 14px 14px;
    }
    .card-title {
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      color: var(--accent);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 5px;
      user-select: none;
    }
    .card-title-label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      flex: 1;
      min-width: 0;
      padding: 3px 4px;
      border-radius: 5px;
      margin-left: -4px;
    }
    .card-title-label:hover .card-toggle { color: var(--accent); }
    .card-toggle { display: flex; align-items: center; color: var(--text-muted); flex-shrink: 0; transition: color 0.12s; }
    .card-toggle svg.lucide { width: 12px; height: 12px; transition: transform 0.18s cubic-bezier(0.4,0,0.2,1); }
    .card--collapsed .card-toggle svg.lucide { transform: rotate(-90deg); }
    .card-title-label:hover .card-toggle { color: var(--accent); }
    .card--collapsed > :not(.card-title) { display: none !important; }
    .card--collapsed .card-title { margin-bottom: 0; }

    /* ---- Quick filter preset buttons ---- */
    .fqp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
      font-family: inherit;
    }
    .fqp-btn:hover { border-color: var(--accent); color: var(--accent); }
    .fqp-btn.active { border-color: var(--accent); color: var(--accent); }

    /* ===== Drop Zone ===== */
    .drop-zone {
      position: relative;
      border: 2px dashed var(--border);
      border-radius: 12px;
      padding: 0 14px;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, color 0.2s;
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.7;
      user-select: none;
      height: 90px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      overflow: clip;
    }
    .drop-zone:hover,
    .drop-zone.drag-over {
      border-color: var(--accent);
      background: var(--drop-hover);
      color: var(--text);
    }
    .drop-zone.loading { pointer-events: none; border-color: var(--accent); }
    /* ローディングスピナー */
    .drop-loading-overlay {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.18);
      border-radius: 10px;
      z-index: 2;
      pointer-events: none;
    }
    @keyframes drop-spin {
      to { transform: rotate(360deg); }
    }
    .drop-loading-overlay::after {
      content: '';
      width: 22px;
      height: 22px;
      border: 2px solid rgba(255,255,255,0.25);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: drop-spin 0.7s linear infinite;
    }
    @keyframes drop-loaded-settle {
      0%   { border-color: var(--ok); background: var(--drop-ok); color: var(--ok); }
      60%  { border-color: var(--ok); background: var(--drop-ok); color: var(--ok); }
      100% { border-color: var(--border); background: transparent; color: var(--text-muted); }
    }
    .drop-zone.loaded {
      border-style: solid;
      animation: drop-loaded-settle 3s ease forwards;
    }
    .drop-zone.loaded .drop-icon,
    .drop-zone.loaded .drop-hint { visibility: hidden; height: 0; margin: 0; padding: 0; overflow: hidden; }
    .drop-delete {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: none;
      background: rgba(0,0,0,0.08);
      color: var(--text-muted);
      font-size: 10px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 0;
      line-height: 1;
      transition: background 0.15s, color 0.15s;
    }
    .drop-zone.loaded .drop-delete { display: flex; }
    .drop-delete:hover { background: rgba(200,50,50,0.85); color: #fff; }
    /* Iwara元ページリンク */
    .drop-link {
      position: absolute;
      top: 5px;
      right: 28px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(0,0,0,0.08);
      color: var(--text-muted);
      display: none;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
      z-index: 1;
    }
    .drop-link svg.lucide { width: 10px; height: 10px; pointer-events: none; }
    .drop-zone.loaded .drop-link.has-url { display: flex; }
    .drop-link:hover { background: rgba(80,130,255,0.25); color: var(--accent); }
    .drop-icon { flex-shrink: 0; margin-bottom: 0; }
    .drop-text { display: flex; flex-direction: column; min-width: 0; }
    .url-row {
      display: flex;
      gap: 6px;
      margin-top: 5px;
    }
    .url-input {
      flex: 1;
      min-width: 0;
      font-size: 11px;
      line-height: 1.2;
      height: 26px;
      padding: 0 6px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
      outline: none;
    }
    .url-input:focus { border-color: var(--accent); }
    .url-input.error { border-color: #e5534b; }
    .url-input.dnd-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
    .url-load-btn {
      flex-shrink: 0;
      font-size: 11px;
      line-height: 1.2;
      height: 26px;
      padding: 0;
      width: 48px;
      text-align: center;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text-muted);
      cursor: pointer;
      transition: border-color 0.12s, color 0.12s;
    }
    .url-load-btn:hover { border-color: var(--accent); color: var(--accent); }
    .url-load-btn.loading { border-color: var(--accent); color: var(--accent); cursor: default; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .url-spinner { display: inline-block; width: 10px; height: 10px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 3px; }
    .url-load-status { font-size: 10px; color: var(--accent); min-height: 14px; margin-top: 2px; display: flex; align-items: center; gap: 4px; }

    .ctrl-mini-sep {
      border: none;
      border-top: 1px solid var(--border);
      margin: 8px 0 3px;
      opacity: 0.2;
    }
    /* ===== Control Row ===== */
    .ctrl-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 5px;
    }
    .ctrl-row label {
      font-size: 11px;
      line-height: 1.3;
      color: var(--text-muted);
      width: 68px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      overflow: clip;
    }
    .ar-lock-icon {
      cursor: pointer;
      opacity: 0.3;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      margin-left: auto;
      transition: opacity 0.15s, color 0.15s;
    }
    .ar-lock-icon:hover { opacity: 0.75; }
    .ar-lock-icon.active { opacity: 1; color: var(--accent); }
    .ar-lock-icon svg.lucide { width: 11px; height: 11px; }
    #filterCard .ctrl-row label { width: 90px; }
    .mute-btn { flex-shrink: 0; margin-left: auto; }
    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      flex: 1;
      height: 20px;
      background: transparent;
      cursor: pointer;
      outline: none;
      border: none;
      --fill: 0%;
    }
    input[type="range"]::-webkit-slider-runnable-track {
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(to right, var(--accent) var(--fill), var(--border) var(--fill));
    }
    input[type="range"]::-moz-range-track {
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(to right, var(--accent) var(--fill), var(--border) var(--fill));
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent);
      cursor: pointer;
      border: none;
      box-shadow: 0 0 0 2px var(--surface);
      transition: transform 0.1;
      margin-top: -4px;
    }
    input[type="range"]::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent);
      cursor: pointer;
      border: none;
      box-shadow: 0 0 0 2px var(--surface);
    }
    input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
    input[type="range"]::-moz-range-thumb:hover { transform: scale(1.2); }
    .ctrl-val {
      width: 52px;
      flex-shrink: 0;
      font-size: 11px;
      color: var(--text);
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-family: inherit;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 4px;
      padding: 1px 3px;
      outline: none;
      cursor: text;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .ctrl-val:hover {
      border-color: var(--border);
      background: var(--surface2);
    }
    .ctrl-val:focus {
      border-color: var(--accent);
      background: var(--surface2);
      color: var(--accent);
    }
    .ctrl-select {
      flex: 1;
      font-size: 11px;
      font-family: inherit;
      color: var(--text);
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 2px 4px;
      outline: none;
      cursor: pointer;
      transition: border-color 0.15s;
    }
    .ctrl-select:hover { border-color: var(--accent); }
    .ctrl-select:focus { border-color: var(--accent); }
    /* Border animation swatch buttons */
    .banim-group {
      display: flex;
      gap: 3px;
      flex-shrink: 0;
      margin-left: auto;
    }
    .banim-btn {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border: 2px solid transparent;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
      transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    .banim-btn:hover { transform: scale(1.2); box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
    .banim-btn.active { border-color: #fff; box-shadow: 0 0 0 1px var(--accent), 0 2px 6px rgba(0,0,0,0.5); }
    .banim-btn[data-anim="rainbow"] { background: conic-gradient(from 0deg, #ff7eb3, #ffb347, #f9f871, #6ee7b7, #93c5fd, #d8b4fe, #ff7eb3); }
    .banim-btn[data-anim="cm"]      { background: linear-gradient(135deg, #22d3ee, #f472b6); }
    .banim-btn[data-anim="sakura"]  { background: linear-gradient(135deg, #f472b6, #4ade80); }
    .banim-btn[data-anim="neon"]    { background: linear-gradient(135deg, #4ade80, #22d3ee); }
    .banim-btn[data-anim="fire"]    { background: linear-gradient(135deg, #ef4444, #f97316); }
    .banim-btn[data-anim="aurora"]  { background: linear-gradient(135deg, #7c3aed, #34d399); }
    #borderColRow input[type="color"] {
      transition: opacity 0.2s;
    }
    /* legacy – no longer rendered */
    .border-palette-btn { display: none; }
    .border-anim-popover { display: none; }
    .banim-inline-wrap { display: none; }
    /* Color + gradient palette popover */
    .border-color-popover {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 200;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px;
      width: 178px;
      box-shadow: 0 6px 20px var(--shadow);
      animation: popover-in 0.13s ease;
    }
    .bcp-sv-canvas {
      display: block;
      width: 158px;
      height: 118px;
      border-radius: 5px;
      cursor: crosshair;
      user-select: none;
    }
    .bcp-hue-canvas {
      display: block;
      width: 158px;
      height: 12px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 6px;
      user-select: none;
    }
    .bcp-hex-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
    }
    .bcp-preview {
      width: 22px;
      height: 22px;
      border-radius: 4px;
      border: 1px solid var(--border);
      flex-shrink: 0;
      background: #fff;
    }
    .bcp-hex-input {
      flex: 1;
      min-width: 0;
      font-size: 11px;
      font-family: 'Consolas', monospace;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      padding: 3px 6px;
      outline: none;
    }
    .bcp-hex-input:focus { border-color: var(--accent); }
    .bcp-solid-row {
      display: grid;
      grid-template-columns: repeat(6, 23px);
      gap: 4px;
    }
    .bcp-chip {
      width: 23px;
      height: 23px;
      border-radius: 6px;
      border: 2px solid transparent;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
      transition: border-color 0.12s, transform 0.1s, box-shadow 0.12s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    }
    .bcp-chip:hover { transform: scale(1.2); box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
    .bcp-chip.active { border-color: #fff; box-shadow: 0 0 0 1px var(--accent), 0 2px 6px rgba(0,0,0,0.5); }
    .bcp-custom-btn {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border: 1px dashed var(--border);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: border-color 0.12s, color 0.12s;
    }
    .bcp-custom-btn:hover { border-color: var(--accent); color: var(--accent); }
    .bcp-sep {
      border: none;
      border-top: 1px solid var(--border);
      margin: 8px 0;
    }
    .bcp-grad-row {
      display: flex;
      gap: 4px;
    }
    .bcp-grad-row .banim-btn {
      width: 23px;
      height: 23px;
      border-radius: 6px;
    }
    .border-color-swatch {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      border: 2px solid var(--border);
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
      background: #ffffff;
      transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
      box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    .border-color-swatch:hover { border-color: var(--accent); transform: scale(1.2); box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
    .border-color-swatch.active { border-color: var(--accent); }
    #borderColRow { position: relative; }
    .ctrl-reset-btn {
      background: none;
      border: none;
      padding: 0;
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-muted);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s, color 0.15s;
      border-radius: 3px;
    }
    .ctrl-reset-btn svg.lucide { width: 10px; height: 10px; }
    .ctrl-row:hover .ctrl-reset-btn {
      opacity: 1;
      pointer-events: auto;
    }
    .ctrl-reset-btn:hover { color: #f0a040; }
    .mute-btn {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      border-radius: 4px;
      flex-shrink: 0;
      position: relative;
      transition: color 0.15s;
      line-height: 1;
    }
    .mute-btn:hover { color: var(--text); }
    .mute-btn.muted { color: var(--text-muted); }
    .mute-btn.muted:hover { color: var(--text-muted); }
    .mute-btn.muted::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top right,
        transparent calc(50% - 0.5px),
        currentColor calc(50% - 0.5px),
        currentColor calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
      );
      pointer-events: none;
    }
    .mute-btn svg.lucide { width: 14px; height: 14px; vertical-align: middle; }

    /* ===== Buttons ===== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 8px 14px;
      min-width: 86px;
      border-radius: 20px;
      font-size: 13px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
      white-space: nowrap;
      font-family: inherit;
    }
    .btn:hover { border-color: var(--accent); color: var(--accent); }
    .btn:active { background: var(--surface2); outline: none; }
    .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 20px; }
    .btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
    .header-controls { display: flex; align-items: center; gap: 8px; }
    .btn.primary:hover { opacity: 0.88; color: #fff; }

    /* ===== Shape Buttons ===== */
    .shape-group {
      display: flex;
      gap: 4px;
      margin-bottom: 0;
    }
    .shape-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex: 1;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
      border-radius: 6px;
      padding: 3px 6px;
      font-size: 11px;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
      font-family: inherit;
      white-space: nowrap;
    }
    .shape-btn:hover { border-color: var(--accent); color: var(--accent); }
    .shape-btn.active {
      border-color: var(--accent);
      color: var(--accent);
    }
    .shape-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    input[type="color"] {
      width: 34px;
      height: 26px;
      border: 1px solid var(--border);
      border-radius: 4px;
      cursor: pointer;
      padding: 2px;
      background: var(--surface2);
    }

    .hint {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-top: 10px;
    }

    /* ===== Preset Card ===== */
    .preset-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-top: 8px;
      border-radius: 6px;
      transition: outline 0.1s, background 0.1s;
    }
    .preset-list.dnd-over {
      outline: 2px dashed var(--accent);
      background: color-mix(in srgb, var(--accent) 8%, transparent);
    }
    .preset-item {
      display: flex;
      align-items: center;
      gap: 5px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 4px 7px;
      min-height: 28px;
      font-size: 10.5px;
      transition: border-color 0.12s;
    }
    @keyframes preset-flash {
      0%   { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
      70%  { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
      100% { border-color: var(--border); box-shadow: none; }
    }
    .preset-item-flash { animation: preset-flash 1.4s ease forwards; }
    .preset-item:hover { border-color: var(--accent); }
    .preset-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; cursor: pointer; }
    @keyframes preset-text-slide {
      0%   { transform: translateX(0); }
      15%  { transform: translateX(0); }
      85%  { transform: translateX(var(--slide-dist, -50%)); }
      100% { transform: translateX(var(--slide-dist, -50%)); }
    }
    /* @property でカスタムプロパティをアニメーション可能に（mask-imageのグラデーション止点をtransition） */
    @property --name-fade {
      syntax: '<percentage>';
      inherits: false;
      initial-value: 80%;
    }
    @property --file-fade {
      syntax: '<percentage>';
      inherits: false;
      initial-value: 80%;
    }
    .preset-item-name {
      color: var(--text);
      overflow: hidden;
      white-space: nowrap;
    }
    .preset-item-name > .pname-inner {
      display: inline-block;
      white-space: nowrap;
    }
    /* 見切れをmask-imageのフェードで表現。hover時もfadeは維持したままスライド */
    .preset-item-name:has(.pname-inner.overflows) {
      -webkit-mask-image: linear-gradient(to right, black 97%, transparent 100%);
      mask-image:         linear-gradient(to right, black 97%, transparent 100%);
    }
    .preset-item-info:hover .pname-inner.overflows {
      animation: preset-text-slide var(--slide-dur, 3.5s) ease-in-out infinite alternate;
    }
    .preset-item-files {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .preset-file-line {
      font-size: 9.5px;
      color: var(--text-muted);
      overflow: hidden;
      white-space: nowrap;
      display: block;
    }
    .preset-file-line > .pname-inner {
      display: inline-block;
      white-space: nowrap;
    }
    .preset-file-line:has(.pname-inner.overflows) {
      -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);
      mask-image:         linear-gradient(to right, black 92%, transparent 100%);
    }
    .preset-item-info:hover .preset-file-line .pname-inner.overflows {
      animation: preset-text-slide var(--slide-dur, 4.5s) 0.5s ease-in-out infinite alternate;
    }
    .preset-item-del {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      align-self: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s, color 0.15s;
    }
    .preset-item:hover .preset-item-del,
    .preset-folder-header:hover .preset-item-del {
      opacity: 1;
      pointer-events: auto;
      transition: opacity 0.15s, color 0.15s;
    }
    .preset-item-del:hover { color: #f04747; }
    /* セマンティック別ホバー色 */
    .icon-btn--vis:hover    { color: var(--text); }
    .icon-btn--reset:hover  { color: #f0a040; }
    .icon-btn--copy:hover,
    .icon-btn--import:hover,
    .icon-btn--dl:hover     { color: var(--accent); }
    .preset-item-rename:hover { color: #f0a040; }
    .card-title .preset-item-del {
      opacity: 1;
      pointer-events: auto;
      transition: color 0.12s;
      margin-left: -2px;
    }
    .card-title .preset-item-del:first-of-type { margin-left: auto; }
    .preset-item-share { color: var(--text-muted) !important; }
    .preset-item-share:hover { color: var(--accent) !important; }
    .preset-item-save:hover { color: var(--accent2) !important; }
    .preset-item--active {
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
    }
    .preset-item-del svg.lucide { width: 11px; height: 11px; }
    .preset-drag-handle { cursor: grab; color: var(--text-muted); display: flex; align-items: center; flex-shrink: 0; padding: 0 2px; }
    .preset-drag-handle:active { cursor: grabbing; }
    .preset-drag-handle svg.lucide { width: 11px; height: 11px; }
    .preset-item.dragging, .preset-item.dnd-src { opacity: 0.4; }
    /* D&D中はページ全体のカーソルを強制上書き（禁止カーソル抑制） */
    body.preset-dragging, body.preset-dragging * { cursor: grabbing !important; }
    body.preset-pending-drag, body.preset-pending-drag * { user-select: none !important; }

    /* ===== 削除確認インラインポップアップ ===== */
    .preset-del-popup {
      position: fixed;
      z-index: 9999;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.45);
      font-size: 11px;
      color: var(--text);
      max-width: 220px;
    }
    .preset-del-popup-msg { line-height: 1.4; word-break: break-all; }
    .preset-del-popup-btns { display: flex; gap: 6px; justify-content: flex-end; }
    .preset-del-popup-ok, .preset-del-popup-cancel {
      font-size: 11px;
      font-family: inherit;
      padding: 3px 10px;
      border-radius: 5px;
      cursor: pointer;
      transition: opacity 0.12s;
    }
    .preset-del-popup-ok:hover, .preset-del-popup-cancel:hover { opacity: 0.8; }
    .preset-del-popup-ok { background: #e5534b; border: 1px solid #c0392b; color: #fff; }
    .preset-del-popup-ok--save { background: var(--accent) !important; border-color: var(--accent2) !important; }
    .preset-del-popup-cancel { background: var(--surface2); border: 1px solid var(--border); color: var(--text); }
    /* ドロップゾーン（廃止） */
    .preset-dropzone, .preset-dropzone-eject { display: none !important; }
    /* ===== Smooth mouse drag-to-reorder ===== */
    .preset-item   { position: relative; will-change: transform; }
    .preset-folder { position: relative; /* will-change removed – creates stacking ctx */ }
    .preset-item.dnd-src, .preset-folder.dnd-src { opacity: 0; pointer-events: none; }
    .preset-dnd-ghost {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.9;
      box-shadow: 0 8px 28px rgba(0,0,0,0.45);
      border-radius: 8px;
      user-select: none;
    }
    /* D&D中はアイテム内の子要素をクリック不可にしてイベントをコンテナに集約 */
    body.preset-dragging .preset-item > *,
    body.preset-dragging .preset-folder-header > * { pointer-events: none; }

    /* ===== Preset Folder ===== */
    .preset-folder { display: flex; flex-direction: column; gap: 2px; }
    .preset-folder-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 3px 8px;
      min-height: 28px;
      border-radius: 7px;
      border: 1px solid transparent;
      cursor: pointer;
      font-size: 11px;
      color: var(--text-muted);
      transition: border-color 0.12s;
    }
    .preset-folder-header:hover { border-color: var(--border); }
    .preset-folder-header.drag-over { border-color: var(--accent); border-style: dashed; background: color-mix(in srgb, var(--accent) 8%, transparent); }
    .preset-folder-header.dragging { opacity: 0.4; }
    .preset-folder-toggle { cursor: pointer; display: flex; align-items: center; color: var(--text-muted); }
    .preset-folder-toggle:hover { color: var(--text); }
    .preset-folder-toggle svg.lucide { width: 12px; height: 12px; }
    .preset-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
    .preset-folder-count {
      font-size: 9px;
      font-weight: 600;
      color: var(--text-muted);
      opacity: 0.6;
      flex-shrink: 0;
      align-self: center;
      margin-left: 3px;
    }
    .preset-folder-header .preset-item-del { margin-left: -1px; }
    .preset-folder-children {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding-left: 14px;
      overflow: hidden;
      transition: max-height 0.1s ease, opacity 0.1s ease;
      max-height: 2000px;
      opacity: 1;
    }
    body.preset-dragging .preset-folder-children:not(.collapsed),
    body.preset-pending-drag .preset-folder-children:not(.collapsed) {
      overflow: visible;
    }
    .preset-folder-children.collapsed {
      max-height: 0;
      opacity: 0;
    }
    .preset-root-separator {
      pointer-events: none;
      flex-shrink: 0;
    }
    .preset-item-child { background: var(--surface); }
    .preset-action-bar {
      display: flex;
      gap: 5px;
      padding: 4px 0 2px;
    }
    .preset-action-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 5px 8px;
      border: 1px dashed var(--border);
      border-radius: 7px;
      background: transparent;
      color: var(--text-muted);
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
      white-space: nowrap;
    }
    .preset-action-btn:hover { border-color: var(--accent); color: var(--accent); }
    .preset-action-btn.drag-over { border-color: var(--accent); border-style: solid; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
    /* DnD中は「新しいプリセット」ボタンを無効化、「新しいフォルダ」ボタンはフォルダDnD中も無効化 */
    body.preset-dragging #presetAddBtn { pointer-events: none; opacity: 0.4; }
    body.preset-dragging.dragging-folder #presetAddFolderBtn { pointer-events: none; opacity: 0.4; }
    .preset-action-btn svg.lucide { width: 13px; height: 13px; flex-shrink: 0; }
    .preset-input-row {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }
    .preset-name-input {
      flex: 1;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 11px;
      font-family: inherit;
      padding: 4px 8px;
      outline: none;
    }
    .preset-name-input:focus { border-color: var(--accent); }
    .preset-save-btn {
      background: var(--accent);
      border: none;
      border-radius: 6px;
      color: #fff;
      font-size: 11px;
      font-family: inherit;
      padding: 4px 10px;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .preset-save-btn:hover { opacity: 0.85; }
    .preset-empty {
      font-size: 11px;
      color: var(--text-muted);
      text-align: center;
      padding: 6px 0;
    }

    /* ===== Theater / Fullscreen ===== */
    .transport-spacer { flex: 1; }
    .app-body.theater .canvas-wrap {
      width: min(100%, calc((100vh - 48px) * var(--ar, 854/480)));
    }
    .app-body.theater .transport {
      max-width: unset;
    }
    /* フルスクリーン: canvasWrap 自体をフルスクリーン化 */
    #canvasWrap:fullscreen,
    #canvasWrap:-webkit-full-screen {
      width: 100vw;
      height: 100vh;
      max-width: 100vw;
      background: #000;
      border-radius: 0 !important;
      overflow: visible;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #canvasWrap:fullscreen canvas,
    #canvasWrap:-webkit-full-screen canvas {
      width: min(100vw, calc(100vh * var(--ar, 854/480))) !important;
      height: auto !important;
    }
    /* フルスクリーン中: トランスポートをデフォルト表示 (hover 不要) */
    #canvasWrap:fullscreen .transport,
    #canvasWrap:-webkit-full-screen .transport {
      opacity: 1;
      transition: opacity 0.15s ease;
    }
    #canvasWrap:fullscreen .tbtn,
    #canvasWrap:fullscreen .progress-track,
    #canvasWrap:fullscreen .time-label,
    #canvasWrap:-webkit-full-screen .tbtn,
    #canvasWrap:-webkit-full-screen .progress-track,
    #canvasWrap:-webkit-full-screen .time-label { pointer-events: auto; }
    /* カーソル放置 → トランスポート + カーソル 非表示 */
    #canvasWrap:fullscreen.fs-idle .transport,
    #canvasWrap:-webkit-full-screen.fs-idle .transport {
      opacity: 0;
      transition: opacity 0.8s ease;
    }
    #canvasWrap:fullscreen.fs-idle .tbtn,
    #canvasWrap:fullscreen.fs-idle .progress-track,
    #canvasWrap:fullscreen.fs-idle .time-label,
    #canvasWrap:-webkit-full-screen.fs-idle .tbtn,
    #canvasWrap:-webkit-full-screen.fs-idle .progress-track,
    #canvasWrap:-webkit-full-screen.fs-idle .time-label { pointer-events: none; }
    #canvasWrap:fullscreen.fs-idle,
    #canvasWrap:fullscreen.fs-idle canvas,
    #canvasWrap:-webkit-full-screen.fs-idle,
    #canvasWrap:-webkit-full-screen.fs-idle canvas { cursor: none !important; }

    /* ===== Offset Buttons ===== */
    .offset-btns {
      display: flex;
      gap: 3px;
      margin-top: 5px;
    }
    .offset-btn {
      flex: 1;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 10px;
      font-family: inherit;
      padding: 3px 0;
      cursor: pointer;
      transition: border-color 0.12s, color 0.12s;
      white-space: nowrap;
    }
    .offset-btn:hover { border-color: var(--accent); color: var(--accent); }
    .offset-btn[data-d="0"] { color: var(--text-muted); }

    /* ===== Toggle Button ===== */
    .toggle-btn {
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text-muted);
      cursor: pointer;
      font-family: inherit;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .toggle-btn.active {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--drop-hover);
    }

    /* Canvas drag-over highlight */
    .canvas-drop-over::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 14px;
      border: 2px solid var(--accent);
      background: rgba(0,176,244,0.08);
      pointer-events: none;
      z-index: 10;
    }
    /* Mask drop overlay: mirrors mask shape/position, activates during drag */
    #maskDropOverlay {
      position: absolute;
      box-sizing: border-box;
      pointer-events: none;
      border: 2px dashed transparent;
      z-index: 3;
      transition: border-color 0.1s, background 0.1s;
    }
    #maskDropOverlay.drag-active {
      pointer-events: auto;
      border-color: rgba(0,176,244,0.55);
    }
    #maskDropOverlay.drag-over {
      border-color: var(--accent);
      background: rgba(0,176,244,0.22);
    }

    /* ===== Panel Section Separator ===== */
    .panel-sep {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 14px;
      user-select: none;
    }
    .panel-sep::before,
    .panel-sep::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--border));
    }
    .panel-sep::before {
      background: linear-gradient(to left, transparent, var(--border));
    }
    .panel-sep-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-muted);
      cursor: pointer;
      flex-shrink: 0;
      transition: border-color 0.15s, color 0.15s, transform 0.15s;
    }
    .panel-sep-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      transform: rotate(180deg);
    }
    .panel-sep-btn svg.lucide { width: 13px; height: 13px; }

    /* ===== Lang Import Popover ===== */
    .lang-popover-anchor {
      position: relative;
    }
    .lang-popover {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 4px 0;
      min-width: 160px;
      max-width: calc(100vw - 24px);
      box-shadow: 0 8px 24px var(--shadow);
      z-index: 200;
      transform-origin: top right;
      animation: popover-in 0.13s ease;
      overflow: hidden;
    }
    @keyframes popover-in {
      from { opacity: 0; transform: scale(0.95) translateY(-4px); }
      to   { opacity: 1; transform: scale(1)   translateY(0); }
    }
    /* Option list */
    .lang-option-list { display: flex; flex-direction: column; }
    .lang-option-item {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 8px 16px;
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
      box-sizing: border-box;
    }
    .lang-option-item:hover { background: var(--surface2); }
    .lang-option-item.active { color: var(--accent); }
    .lang-option-check {
      width: 14px;
      flex-shrink: 0;
      color: var(--accent);
      font-size: 11px;
    }
    .lang-option-add {
      color: var(--text-muted);
      border-top: 1px solid var(--border);
      margin-top: 2px;
    }
    .lang-option-add:hover { color: var(--accent); background: var(--surface2); }
    /* Add/import form */
    .lang-add-form {
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 340px;
      max-width: calc(100vw - 24px);
      box-sizing: border-box;
    }
    /* legacy wrapper – no longer rendered */
    .lang-import-dialog {
      padding: 20px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .lang-import-dialog h3 {
      font-size: 14px;
      font-weight: 600;
      margin: 0;
      color: var(--accent);
    }
    /* Language selector dropdown (legacy) */
    .lang-select-dropdown {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      padding: 6px 10px;
      cursor: pointer;
      outline: none;
      transition: border-color 0.15s;
    }
    .lang-select-dropdown:focus { border-color: var(--accent); }
    /* Language selector buttons (legacy / unused) */
    .lang-btn-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .lang-btn-row {
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    .lang-dialog-btn {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 12px;
      font-family: inherit;
      padding: 4px 10px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
      white-space: nowrap;
    }
    .lang-dialog-btn:hover { color: var(--accent); border-color: var(--accent); }
    .lang-dialog-btn.active {
      border-color: var(--accent);
      color: var(--accent);
    }
    .lang-dialog-dl {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      color: var(--text-muted);
      width: 22px;
      height: 22px;
      padding: 0;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }
    .lang-dialog-dl:hover { border-color: var(--accent); color: var(--accent); }
    .lang-dialog-dl svg.lucide { width: 11px; height: 11px; }
    .lang-dialog-sep {
      border: none;
      border-top: 1px solid var(--border);
      margin: 0;
    }
    .lang-import-drop {
      border: 2px dashed var(--border);
      border-radius: 8px;
      padding: 0 14px;
      cursor: pointer;
      font-size: 12px;
      color: var(--text-muted);
      height: 64px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      transition: border-color 0.15s, background 0.15s;
    }
    .lang-import-drop:hover, .lang-import-drop.hover {
      border-color: var(--accent);
      background: var(--drop-hover);
      color: var(--text);
    }
    .lang-import-or {
      font-size: 11px;
      color: var(--text-muted);
      margin: -4px 0;
      text-align: center;
    }
    .lang-import-textarea {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 11px;
      font-family: 'Consolas', 'Menlo', monospace;
      padding: 8px 10px;
      resize: vertical;
      width: 100%;
      box-sizing: border-box;
    }
    .lang-import-textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
    .lang-import-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    /* ===== Lucide Icons ===== */
    svg.lucide {
      display: inline-block;
      vertical-align: middle;
      flex-shrink: 0;
      stroke: currentColor;
      fill: none;
    }
    .btn       svg.lucide { width: 14px; height: 14px; }    .card-title svg.lucide { width: 13px; height: 13px; }
    .drop-icon  svg.lucide { width: 22px; height: 22px; }
    .shape-btn  svg.lucide { width: 14px; height: 14px; }
    .hint       svg.lucide { width: 12px; height: 12px; }
    .drop-delete svg.lucide { width: 10px; height: 10px; }