.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(--blue); color: #fff; border-color: var(--blue); }
    .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; }