/* ===================================================================
   WebCanvas — 配信サムネ・バナー用の簡易レイアウトツール
   Daigorou-Tools全体のダーク配色に合わせたニュートラルな配色に、
   シアン系のアクセントカラーを添える。
=================================================================== */

:root{
  --dark:#0b0f13;
  --dark-2:#0e1318;
  --panel:#131920;
  --panel-2:#171f27;
  --raised:#1c242c;
  --paper:#eef3f6;
  --ink:#d7dee4;
  --ink-dim:#b7c1c9;
  --muted:#7c8894;
  --line:#26303a;
  --line-soft:#1c242c;
  --accent:#29e0c4;
  --accent-2:#12a894;
  --accent-ink:#04241f;
  --danger:#e05a3a;
  --checker-a:#1a2129;
  --checker-b:#0d1116;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
}

/* ダークテーマ（デフォルト）。ライトにしたい場合は<html data-theme="light">に切り替える */
:root, html[data-theme="light"]{
  --dark:#ffffff;
  --dark-2:#f3f5f6;
  --panel:#ffffff;
  --panel-2:#f1f3f4;
  --raised:#e7eaec;
  --paper:#12181f;
  --ink:#222a33;
  --ink-dim:#4c5866;
  --muted:#828d99;
  --line:#dbe0e3;
  --line-soft:#e9ecee;
  --accent:#0f9c8c;
  --accent-2:#0c7c70;
  --accent-ink:#ffffff;
  --danger:#c8442a;
  --checker-a:#e7eaec;
  --checker-b:#ffffff;
}
html[data-theme="dark"]{
  --dark:#0b0f13;
  --dark-2:#0e1318;
  --panel:#131920;
  --panel-2:#171f27;
  --raised:#1c242c;
  --paper:#eef3f6;
  --ink:#d7dee4;
  --ink-dim:#b7c1c9;
  --muted:#7c8894;
  --line:#26303a;
  --line-soft:#1c242c;
  --accent:#29e0c4;
  --accent-2:#12a894;
  --accent-ink:#04241f;
  --danger:#e05a3a;
  --checker-a:#1a2129;
  --checker-b:#0d1116;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:
    radial-gradient(ellipse 800px 460px at 80% -10%, rgba(41,224,196,.07), transparent 60%),
    var(--dark);
  color:var(--ink);
  font-family:var(--sans);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- ヘッダー ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 24px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--panel), var(--dark-2));
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;}
.back-link{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--muted);
  border:1px solid var(--line);
  background:var(--panel-2);
  padding:6px 11px;
  border-radius:20px;
  text-decoration:none;
  transition:border-color .15s, color .15s;
  white-space:nowrap;
}
.back-link:hover{ border-color:var(--accent); color:var(--accent); }
.brand-name{
  font-weight:900;
  font-size:16px;
  color:var(--paper);
}
.local-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--line);
  background:var(--panel-2);
  padding:5px 10px 5px 8px;
  border-radius:20px;
  white-space:nowrap;
}
.local-badge::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 6px 1px rgba(41,224,196,.9), 0 0 14px 3px rgba(41,224,196,.4);
  animation:wc-pulse 2.6s ease-in-out infinite;
}
@keyframes wc-pulse{
  0%,100%{opacity:1;}
  50%{opacity:.45;}
}
@media (prefers-reduced-motion: reduce){
  .local-badge::before{ animation:none; }
}
.sizebar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
select, input[type=number]{
  font-family:var(--sans);
  font-size:13px;
  background:var(--panel-2);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:6px;
  padding:7px 10px;
}
select:focus, input[type=number]:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.lang-select{
  font-family:var(--mono);
  font-size:11px;
  padding:6px 8px;
  margin-left:4px;
}
.theme-toggle{
  width:30px; height:30px;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel-2);
  color:var(--ink-dim);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  padding:0;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--ink); }
.custom-size{ display:none; align-items:center; gap:6px; }
.custom-size.show{ display:flex; }
.custom-size input[type=number]{ width:70px; }
.custom-size span{ color:var(--muted); font-family:var(--mono); }
.canvas-dim{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:10px;
}

/* ---------- メイン ---------- */
main{
  flex:1;
  display:flex;
  gap:16px;
  padding:20px 24px;
  max-width:1500px;
  width:100%;
  margin:0 auto;
}
.toolbar{
  flex:0 0 210px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
  max-height:calc(100vh - 140px);
}
.stage-empty-hint{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  border:2px dashed var(--line);
  border-radius:12px;
  margin:16px;
  cursor:pointer;
  pointer-events:auto;
  transition:border-color .15s, background .15s;
  z-index:5;
}
.stage-empty-hint-main{
  font-size:16px;
  font-weight:700;
  color:var(--ink-dim);
}
.stage-empty-hint-sub{
  font-size:12px;
  color:var(--muted);
}
.stage-empty-hint:hover{ border-color:var(--accent); }
.stage-empty-hint:hover .stage-empty-hint-main{ color:var(--ink); }
.stage-empty-hint.drag{ border-color:var(--accent); background:rgba(41,224,196,.08); }
.stage-empty-hint.drag .stage-empty-hint-main{ color:var(--ink); }
.ghost{
  background:var(--panel-2);
  border:1px solid var(--line);
  padding:9px 12px;
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
  color:var(--ink);
  font-family:var(--sans);
  transition:border-color .15s, background .15s, opacity .15s;
}
.ghost:hover{ border-color:var(--muted); background:var(--raised); }
.ghost:disabled{ opacity:.4; cursor:not-allowed; }
.ghost.small{ padding:6px 10px; font-size:12px; }
.layer-btns{ display:flex; gap:8px; }
.layer-btns .ghost{ flex:1; padding:9px 6px; font-size:12px; }
.primary{
  margin-top:auto;
  margin-bottom:4px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:var(--accent-ink);
  border:none;
  padding:12px 16px;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  font-family:var(--sans);
  cursor:pointer;
  box-shadow:0 3px 0 var(--accent-2);
  transition:transform .08s, box-shadow .08s, filter .08s;
}
.primary:hover{ filter:brightness(1.05); }
.primary:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--accent-2); }
.hint{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.6;
}

/* ---------- テキスト/画像オプションパネル ---------- */
.panel-box{
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
}
.panel-box label{
  font-size:11px;
  color:var(--muted);
  font-family:var(--mono);
  letter-spacing:.03em;
}
.panel-box select{ width:100%; }
.panel-box input[type=color]{
  width:36px; height:30px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--panel-2);
  cursor:pointer;
}
.row-inline{ display:flex; align-items:center; gap:8px; }
.label-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.label-row label{ margin:0; }
.reset-slider-btn{
  flex:0 0 auto;
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--panel-2);
  color:var(--ink-dim);
  font-size:12px;
  line-height:1;
  cursor:pointer;
  padding:0;
}
.reset-slider-btn:hover{ border-color:var(--accent); color:var(--ink); }
.eyedropper-btn{ padding:6px 10px; font-size:14px; line-height:1; flex:0 0 auto; }
.stage-wrap.eyedropper-active, .stage-wrap.eyedropper-active .placed-item{ cursor:crosshair !important; }
.history-btns{ display:flex; gap:8px; }
.history-btns .ghost{ flex:1; }
.icon-btn{
  font-size:18px;
  line-height:1;
  padding:8px 0;
  text-align:center;
}
.color-swatch-wrap{ position:relative; display:inline-block; }
.color-swatch-wrap .none-slash{
  position:absolute; inset:2px;
  display:none;
  pointer-events:none;
  border-radius:4px;
  background:linear-gradient(to top right,
    transparent calc(50% - 1.5px), #ff3b3b calc(50% - 1.5px),
    #ff3b3b calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.color-swatch-wrap.none-active .none-slash{ display:block; }
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.sub-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px 10px;
  background:var(--panel-2);
  border:1px solid var(--line-soft);
  border-radius:6px;
}
.chip{
  border:1px solid var(--line);
  background:var(--panel-2);
  padding:6px 11px;
  border-radius:20px;
  font-size:12px;
  cursor:pointer;
  color:var(--ink-dim);
  transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{ border-color:var(--muted); }
.chip.on{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; }
.panel-box input[type=range]{ width:100%; accent-color:var(--accent); }
#shapeImageAdjustGroup{ display:flex; flex-direction:column; gap:8px; }

/* 図形の画像位置調整モード */
.placed-item.image-adjust-active{ cursor:move; }
.placed-item.image-adjust-active::before{
  border-color:var(--accent);
  border-style:dashed;
}
/* 画像の消しゴムモード */
.placed-item.image-erasing{ cursor:crosshair; }
.placed-item.image-erasing::before{
  border-color:var(--danger);
  border-style:dashed;
}
.shape-image-adjust-hint{
  position:absolute;
  left:50%; bottom:6px;
  transform:translateX(-50%);
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:11px;
  font-family:var(--sans);
  padding:5px 10px;
  border-radius:20px;
  white-space:nowrap;
  pointer-events:none;
  z-index:20;
}
.crop-controls{ flex-direction:row; }
.crop-controls .ghost{ flex:1; }

/* ---------- レイヤーパネル ---------- */
.layers-panel{
  flex:0 0 170px;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  max-height:calc(100vh - 140px);
}
.layers-panel-title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.05em;
  color:var(--muted);
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.layers-list{
  overflow-y:auto;
  flex:1;
}
.layer-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  font-size:12.5px;
  color:var(--ink-dim);
  cursor:pointer;
  border-bottom:1px solid var(--line-soft);
  transition:background .1s, color .1s;
}
.layer-thumb{
  width:22px;
  height:22px;
  object-fit:cover;
  border-radius:4px;
  border:1px solid var(--line);
  flex:0 0 auto;
}
.layer-row-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.layer-row:hover{ background:var(--raised); color:var(--ink); }
.layer-row.selected{ background:rgba(41,224,196,.15); color:var(--paper); font-weight:700; }
.layer-row{ cursor:grab; }
.layer-row.dragging-row{ opacity:.4; }
.layer-row.drop-target{ box-shadow:inset 0 2px 0 var(--accent); }

.layer-row-draw{ cursor:pointer; }
.layer-row-draw.dimmed{ opacity:.5; }
.layer-row-actions{ margin-left:auto; display:flex; gap:4px; flex:0 0 auto; }
.layer-row-icon-btn{
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--panel-2);
  color:var(--ink-dim);
  font-size:11px;
  line-height:1;
  cursor:pointer;
}
.layer-row-icon-btn:hover{ border-color:var(--accent); color:var(--ink); }

/* ---------- キャンバス ---------- */
.stage-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--dark-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px;
  overflow:hidden;
  min-height:480px;
}
.stage{
  position:relative;
  background:
    linear-gradient(45deg,var(--checker-a) 25%,transparent 25%),
    linear-gradient(-45deg,var(--checker-a) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,var(--checker-a) 75%),
    linear-gradient(-45deg,transparent 75%,var(--checker-a) 75%);
  background-color:var(--checker-b);
  background-size:20px 20px;
  background-position:0 0,0 10px,10px -10px,-10px 0;
  box-shadow:0 0 0 1px var(--line), 0 20px 50px rgba(0,0,0,.4);
  overflow:hidden;
  flex:0 0 auto;
}
.stage-inner{
  position:relative;
  transform-origin:0 0;
}
#drawLayer{
  position:absolute;
  left:0; top:0;
  z-index:9000;
  pointer-events:none;
  touch-action:none;
}
#drawLayer.draw-active{ pointer-events:auto; cursor:crosshair; }

/* ---------- 配置した要素(画像・テキスト共通) ---------- */
.placed-item{
  position:absolute;
  cursor:grab;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:50% 50%;
  touch-action:none; /* タッチでのドラッグ/リサイズ中にブラウザ側のスクロール等が割り込まないように */
}
.placed-item.dragging{ cursor:grabbing; }
.item-content{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
}
.item-content.text-content{
  /* 弧を描く文字などが箱からはみ出しても見えるように、テキストだけはクリップしない */
  overflow:visible;
}
.item-content img{
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
}

/* ---------- テキスト要素 ---------- */
.text-bg{ position:absolute; inset:0; z-index:0; background:transparent; }
.text-edit{
  position:relative; z-index:1;
  width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  font-weight:900;
  white-space:pre-wrap;
  word-break:break-word;
  outline:none;
  paint-order:stroke fill;
  cursor:inherit;
}
.text-edit:focus{ cursor:text; }
.text-arc-preview{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  display:none;
}
/* 袋文字の外側に重ねる「縁取り」用の下敷きレイヤー（本体テキストと同じ箱・同じ文字を一回り太い線で描く） */
.text-edit.text-border-layer{
  position:absolute; inset:0;
  width:auto; height:auto;
  pointer-events:none;
  user-select:none;
  display:none;
}
/* 「右/左に向かって大きく」用のプレビュー（SVGで1文字ずつサイズを変えて描く） */
.text-grade-preview{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  display:none;
}
.text-arc-preview span{
  position:absolute;
  font-weight:900;
  paint-order:stroke fill;
  white-space:pre;
}

/* ---------- 表(テーブル) ---------- */
.table-content{ display:flex; position:relative; }
.row-grip{
  position:absolute;
  left:0; right:0;
  height:10px;
  margin-top:-5px;
  cursor:row-resize;
  z-index:6;
  touch-action:none;
}
.col-grip{
  position:absolute;
  top:0; bottom:0;
  width:10px;
  margin-left:-5px;
  cursor:col-resize;
  z-index:6;
  touch-action:none;
}
.row-grip:hover, .col-grip:hover{ background:rgba(41,224,196,.35); }
.wc-table{
  width:100%;
  height:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.wc-table td{
  border:1px solid rgba(255,255,255,.8);
  padding:4px 6px;
  text-align:center;
  vertical-align:middle;
  color:#fff;
  font-family:var(--sans);
  font-size:14px;
  font-weight:700;
  overflow:hidden;
  outline:none;
  word-break:break-word;
  cursor:inherit;
}
.wc-table td:focus{ cursor:text; background:rgba(41,224,196,.15); }

/* ---------- 線・図形 ---------- */
.line-content, .shape-content{ width:100%; height:100%; overflow:visible; position:relative; }
.line-content svg, .shape-content svg{ width:100%; height:100%; display:block; overflow:visible; }

/* 選択枠 */
.placed-item::before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid transparent;
  pointer-events:none;
  border-radius:2px;
}
.placed-item.selected::before{ border-color:var(--accent); }

.handles{ display:none; }
.placed-item.selected .handles{ display:block; }
.handle{
  position:absolute;
  background:var(--accent);
  border:2px solid var(--accent-ink);
  border-radius:3px;
  pointer-events:auto;
  touch-action:none;
}
.handle-nw{ left:0%; top:0%; cursor:nwse-resize; }
.handle-ne{ left:100%; top:0%; cursor:nesw-resize; }
.handle-sw{ left:0%; top:100%; cursor:nesw-resize; }
.handle-se{ left:100%; top:100%; cursor:nwse-resize; }
.handle-n{ left:50%; top:0%; cursor:ns-resize; }
.handle-s{ left:50%; top:100%; cursor:ns-resize; }
.handle-e{ left:100%; top:50%; cursor:ew-resize; }
.handle-w{ left:0%; top:50%; cursor:ew-resize; }
.handle-rotate{
  left:50%;
  border-radius:50%;
  cursor:grab;
}
.handle-rotate-stalk{
  position:absolute;
  left:50%;
  background:var(--accent);
  pointer-events:none;
  transform:translateX(-50%);
}

/* ---------- 切り抜き(クロップ)オーバーレイ ---------- */
.crop-overlay{
  display:none;
  position:absolute;
  inset:0;
  z-index:5;
}
.crop-rect{
  position:absolute;
  box-shadow:0 0 0 9999px rgba(0,0,0,.55);
  border:1px dashed #fff;
  box-sizing:border-box;
  cursor:move;
}
.crop-handle{
  position:absolute;
  background:#fff;
  border:2px solid var(--accent);
  border-radius:2px;
}

/* ---------- スナップ(吸着)ガイド ---------- */
.snap-guide{
  position:absolute;
  background:var(--accent);
  pointer-events:none;
  display:none;
  z-index:50;
  box-shadow:0 0 4px rgba(41,224,196,.8);
}
.snap-guide-v{ top:0; bottom:0; }
.snap-guide-h{ left:0; right:0; }

/* ---------- 右クリックのレイヤーメニュー ---------- */
.context-menu{
  position:fixed;
  z-index:100;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:6px;
  min-width:150px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.context-menu-item{
  padding:8px 10px;
  font-size:13px;
  color:var(--ink);
  border-radius:5px;
  cursor:pointer;
  white-space:nowrap;
}
.context-menu-item:hover{ background:var(--raised); }
.context-menu-item.danger{ color:#ff6b5a; }
.context-menu-sep{
  height:1px;
  background:var(--line-soft);
  margin:4px 2px;
}

footer{
  text-align:center;
  color:var(--muted);
  font-size:11px;
  font-family:var(--mono);
  padding:16px;
  border-top:1px solid var(--line-soft);
}
.footer-copyright{ opacity:.6; }
.footer-privacy{ opacity:.8; margin-bottom:4px; }

/* ---------- タッチ操作(スマホ・タブレット)向けの当たり判定拡大 ---------- */
@media (pointer: coarse){
  .layer-row-icon-btn{ width:30px; height:30px; font-size:14px; }
  .layer-row{ padding:10px 12px; }
  .chip{ padding:9px 14px; font-size:13px; }
  .ghost{ padding:11px 14px; }
  .ghost.small{ padding:9px 12px; font-size:13px; }
  .icon-btn{ padding:11px 0; font-size:20px; }
  .panel-box input[type=color]{ width:42px; height:36px; }
  .row-grip{ height:20px; margin-top:-10px; }
  .col-grip{ width:20px; margin-left:-10px; }
  .back-link{ padding:8px 13px; }
  .local-badge{ padding:7px 12px 7px 10px; }
  select, input[type=number]{ padding:9px 11px; }
  .context-menu{ min-width:190px; padding:8px; }
  .context-menu-item{ padding:12px 12px; font-size:14px; }
}

/* ---------- レスポンシブ(タブレット・スマホ) ---------- */
@media (max-width:1000px){
  main{ flex-direction:column; }
  .toolbar, .layers-panel{ flex:0 0 auto; flex-direction:row; flex-wrap:wrap; max-height:none; }
  .layers-panel{ flex-direction:column; max-height:220px; }
  .layer-btns{ flex-basis:100%; }
  .primary{ margin-top:0; }
  .hint{ flex-basis:100%; }
  .panel-box{ flex-basis:100%; }
  .stage-wrap{ min-height:340px; padding:14px; }
}

@media (max-width:640px){
  .topbar{ padding:10px 14px; gap:10px; }
  .brand{ gap:6px; }
  .brand-name{ font-size:14px; }
  .local-badge{ font-size:9.5px; }
  .back-link{ font-size:10.5px; padding:6px 9px; }
  .sizebar{ width:100%; gap:6px; }
  .sizebar select, .sizebar input[type=number]{ font-size:12px; }
  #presetSelect{ flex:1 1 auto; min-width:0; }
  .canvas-dim{ border-left:none; padding-left:0; flex-basis:100%; order:5; }
  main{ padding:12px; gap:10px; }
  .toolbar{ gap:8px; }
  .toolbar > *{ flex:1 1 auto; min-width:120px; }
  .history-btns{ flex-basis:100%; }
  .layer-btns{ flex-basis:100%; }
  .stage-wrap{ min-height:260px; padding:10px; border-radius:8px; }
  .layers-panel{ max-height:160px; }
  footer{ padding:12px; font-size:10px; }
}


/* ---------- ロゴスタイル見本（ツリー表示） ---------- */
.text-options details > summary{
  cursor:pointer;
  list-style:none;
  user-select:none;
  font-size:12px;
  color:var(--ink-dim);
  padding:4px 2px;
  display:flex; align-items:center; gap:4px;
}
.text-options details > summary::-webkit-details-marker{ display:none; }
.text-options details > summary::before{
  content:'\25B8';
  display:inline-block;
  width:12px;
  font-size:11px;
  transition:transform .15s;
}
.text-options details[open] > summary::before{ transform:rotate(90deg); }
.logo-tree-root > summary{ font-weight:700; color:var(--ink); }
.logo-tree{
  display:flex; flex-direction:column; gap:2px;
  margin:4px 0 0 6px;
  padding-left:8px;
  border-left:1px solid var(--line);
}
.logo-cat > summary{ font-weight:600; }
.logo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
  gap:6px;
  margin:2px 0 8px 6px;
  padding-left:8px;
  border-left:1px dashed var(--line);
}
.logo-style-btn{
  padding:0;
  border:1px solid var(--line);
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  line-height:0;
  transition:border-color .15s, transform .1s;
}
.logo-style-btn:hover{ border-color:var(--accent); transform:translateY(-1px); }
.logo-style-btn canvas{ width:100%; height:auto; display:block; }

#textContentInput{
  width:100%;
  resize:vertical;
  min-height:38px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--panel-2);
  color:var(--ink);
  font:inherit;
  font-size:13px;
}