.subtitle { font-size: 12px; color: var(--ink-light); font-weight: 300; letter-spacing: 0.1em; border-left: 2px solid var(--accent); padding-left: 10px; }
    .panel-header { padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .panel-label { font-size: 10px; letter-spacing: 0.2em; color: var(--ink-light); text-transform: uppercase; }
    .panel-body { padding: 18px; }
    .preview-wrap, .preview-area { display:flex; align-items:center; justify-content:center; min-height: 420px; padding: 16px; background:#fff; }
    .preview-wrap canvas, .preview-area canvas { max-width:100%; max-height:560px; display:block; }
    .tool-note { font-size:12px; color:var(--ink-light); line-height:1.75; }
    .text-input, .select-input, .number-input { width:100%; border:1px solid var(--border); background:#fff; color:var(--ink); font:inherit; font-size:13px; padding:10px 12px; border-radius:6px; }
    .textarea-input { width:100%; min-height: 140px; border:1px solid var(--border); background:#fff; color:var(--ink); font:inherit; font-size:13px; line-height:1.8; padding:12px 14px; border-radius:8px; resize:vertical; }
    .range-value { min-width:48px; text-align:right; font-size:12px; color:var(--ink-light); }
    .hidden { display:none !important; }
    .fmt-row { display:flex; flex-wrap:wrap; gap:6px; }
    .fmt-btn { min-width: 68px; }
    .fmt-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
    .action-bar { display:flex; flex-direction:column; gap:10px; }
    .result-actions { display:flex; gap:10px; flex-wrap:wrap; }
    .preview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
    .preview-thumb { border:1px solid var(--border); border-radius:8px; padding:8px; background:#fff; display:flex; flex-direction:column; gap:6px; }
    .preview-thumb img, .preview-thumb canvas { width:100%; height:100px; object-fit:contain; background:#f7f7f7; border:1px solid var(--border); border-radius:6px; }
    .preview-thumb span { font-size:12px; color:var(--ink-light); text-align:center; }
    .workspace .panel { min-width: 0; }
    .color-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .color-row-label { min-width:42px; font-size:12px; color:var(--ink-light); }
    .color-swatch { width:34px; height:34px; border-radius:8px; border:1px solid var(--border); cursor:pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
    input[type="color"] { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
    .color-hex-input { flex:1 1 140px; min-width:140px; }
    .canvas-stage { position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; padding:16px; background:#fff; overflow:auto; }
    .canvas-stage canvas { max-width:100%; max-height:560px; display:block; touch-action:none; cursor:crosshair; }
    .tool-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .small-btn { padding: 9px 12px; border:1px solid var(--border); background:#fff; color:var(--ink); border-radius:6px; font:inherit; font-size:12px; cursor:pointer; }
    .small-btn:hover { border-color: var(--ink); }
    .chart-result { min-height: 420px; display:flex; align-items:center; justify-content:center; padding:20px; }
    .chart-result canvas { max-width:100%; max-height:560px; }
    .crop-preview-wrap { position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; padding:16px; background:#fff; }
    .crop-preview-wrap canvas { max-width:100%; max-height:560px; display:block; }
    
  
    .crop-stage{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:420px;
      padding:16px;
      background:#fff;
      overflow:auto;
    }
    .crop-stage canvas{
      max-width:100%;
      max-height:560px;
      display:block;
      touch-action:none;
      cursor:crosshair;
    }
    .crop-help{
      font-size:12px;
      color:var(--ink-light);
      line-height:1.75;
      margin-top:10px;
    }
    .crop-size-box{
      display:grid;
      gap:8px;
      font-size:12px;
      color:var(--ink-light);
      line-height:1.7;
    }

  
    .page-select-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
      gap:8px;
      max-height:220px;
      overflow:auto;
      padding:2px;
    }
    .page-select-btn{
      border:1px solid var(--border);
      background:#fff;
      color:var(--ink);
      border-radius:8px;
      padding:9px 6px;
      font:inherit;
      font-size:12px;
      cursor:pointer;
      transition:all .15s;
      text-align:center;
    }
    .page-select-btn:hover{ border-color:var(--blue); color:var(--blue); }
    .page-select-btn.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
    .select-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }

    .page-pair{
      display:grid;
      grid-template-columns:1fr;
      gap:4px;
    }
    .page-preview-btn{
      border:1px solid var(--border);
      background:#f8fafc;
      color:var(--ink-light);
      border-radius:8px;
      padding:7px 5px;
      font:inherit;
      font-size:11px;
      cursor:pointer;
      transition:all .15s;
      text-align:center;
    }
    .page-preview-btn:hover{ border-color:var(--blue); color:var(--blue); background:#fff; }
    .page-preview-btn.previewing{
      background:var(--ink);
      border-color:var(--ink);
      color:#fff;
    }
    .page-select-btn.previewing{
      box-shadow:none;
    }

  
    .page-select-grid.target-only{
      grid-template-columns:repeat(auto-fill,minmax(46px,1fr));
    }

  
    .preview-select-row{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .preview-page-select{
      min-height:44px;
      height:44px;
      line-height:1.6;
      padding:10px 12px;
      font-size:14px;
      box-sizing:border-box;
      appearance:auto;
    }
    .preview-page-select option{
      font-size:14px;
      line-height:1.6;
    }