.tool-ui{--control-h:40px}.tool-ui .panel{border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);min-width:0}.tool-ui .panel-head{justify-content:space-between;align-items:center;gap:var(--space-2);min-height:52px;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);border-bottom:1px solid var(--color-border);flex-wrap:wrap;display:flex}.tool-ui .panel-title{font-size:var(--text-sm);letter-spacing:-.01em;font-weight:600}.tool-ui .panel-body{padding:var(--space-4)}.tool-ui .panel-actions{gap:var(--space-1);flex-wrap:wrap;display:flex}.tool-ui .btn{justify-content:center;align-items:center;gap:var(--space-2);height:var(--control-h);padding-inline:var(--space-4);border-radius:var(--radius-button);font-size:var(--text-sm);white-space:nowrap;transition:background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);background:0 0;border:1px solid #0000;font-weight:500;line-height:1;display:inline-flex}.tool-ui .btn svg{flex:none}.tool-ui .btn:disabled,.tool-ui .btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.tool-ui .btn-primary{background:var(--color-fg);color:var(--color-bg)}.tool-ui .btn-primary:hover{background:#2e2e2e}.tool-ui .btn-accent{background:var(--color-primary);color:var(--color-on-primary)}.tool-ui .btn-accent:hover{background:var(--color-primary-hover)}.tool-ui .btn-secondary{border-color:var(--color-border-strong);background:var(--color-surface)}.tool-ui .btn-secondary:hover{border-color:var(--color-fg)}.tool-ui .btn-ghost{color:var(--color-fg-soft)}.tool-ui .btn-ghost:hover{background:var(--color-surface-soft);color:var(--color-fg)}.tool-ui .btn-sm{height:32px;padding-inline:var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-label)}.tool-ui .btn-icon{width:var(--control-h);padding:0}.tool-ui .btn-sm.btn-icon{width:32px}.tool-ui .field{gap:var(--space-2);min-width:0;display:grid}.tool-ui .label{justify-content:space-between;align-items:baseline;gap:var(--space-2);color:var(--color-fg-soft);font-size:var(--text-label);font-weight:500;display:flex}.tool-ui .hint{color:var(--color-muted);font-family:var(--font-mono);font-size:11px;font-weight:400}.tool-ui .hint.is-over{color:var(--color-danger)}.tool-ui .input,.tool-ui .select,.tool-ui .textarea{border:1px solid var(--color-border-strong);border-radius:var(--radius-input);background:var(--color-surface);width:100%;min-width:0;font-size:var(--text-body-sm);transition:border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease)}.tool-ui .input,.tool-ui .select{height:var(--control-h);padding-inline:var(--space-3)}.tool-ui .select{padding-right:var(--space-8);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23737373' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat}.tool-ui .textarea{padding:var(--space-3);resize:vertical;line-height:1.55;display:block}.tool-ui .input::placeholder,.tool-ui .textarea::placeholder{color:var(--color-muted)}.tool-ui .input:hover,.tool-ui .select:hover,.tool-ui .textarea:hover{border-color:var(--color-muted)}.tool-ui .input:focus-visible,.tool-ui .select:focus-visible,.tool-ui .textarea:focus-visible{border-color:var(--color-fg);box-shadow:0 0 0 1px var(--color-fg);outline:none}.tool-ui .input[aria-invalid=true]{border-color:var(--color-danger);box-shadow:0 0 0 1px var(--color-danger)}.tool-ui .mono{font-family:var(--font-mono);font-size:var(--text-sm)}.tool-ui .code{width:100%;min-height:420px;padding:var(--space-4);border-radius:0 0 var(--radius-card) var(--radius-card);font-family:var(--font-mono);white-space:pre;overflow-wrap:normal;resize:vertical;tab-size:2;background:0 0;border:0;font-size:13px;line-height:1.6;display:block;overflow:auto}.tool-ui .code:focus-visible{box-shadow:inset 0 0 0 2px var(--color-fg);outline:none}.tool-ui .code[readonly]{background:var(--color-surface-soft)}.tool-ui .code-hl{position:relative}.tool-ui .code-hl>pre{color:var(--color-fg);pointer-events:none;margin:0;position:absolute;overflow:hidden}.tool-ui .code-hl>pre>code{width:max-content;min-width:100%;font:inherit;display:block}.tool-ui .code.is-highlighted{color:#0000;caret-color:var(--color-fg)}.tool-ui .code.is-highlighted::selection{color:#0000}.tool-ui .code.is-highlighted::placeholder{color:var(--color-muted)}.code-hl .token:is(.comment,.prolog,.doctype,.cdata){color:#8a8a83}.code-hl .token:is(.punctuation,.operator){color:#6b6b66}.code-hl .token:is(.tag,.selector,.keyword,.atrule,.rule,.important){color:#2456c4}.code-hl .token:is(.attr-name,.property,.function){color:#8343b3}.code-hl .token:is(.attr-value,.string,.url,.char){color:#2b7a3d}.code-hl .token:is(.number,.boolean,.null,.constant,.entity,.unit,.hexcode,.regex){color:#b4540c}.code-hl .token.attr-value .punctuation:not(.attr-equals){color:inherit}.code-hl .token.tag .punctuation{color:#6b6b66}.tool-ui .check{align-items:center;gap:var(--space-2);font-size:var(--text-sm);cursor:pointer;display:inline-flex}.tool-ui .check input{width:16px;height:16px;accent-color:var(--color-fg);margin:0}.tool-ui input[type=range]{width:100%;accent-color:var(--color-fg)}.tool-ui input[type=color]{width:var(--control-h);height:var(--control-h);border:1px solid var(--color-border-strong);border-radius:var(--radius-input);background:var(--color-surface);cursor:pointer;padding:3px}.tool-ui .seg{border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-surface-soft);flex-wrap:wrap;min-width:0;padding:3px;display:flex}.tool-ui .seg label{flex:1;position:relative}.tool-ui .seg input{opacity:0;pointer-events:none;position:absolute}.tool-ui .seg span{height:32px;padding-inline:var(--space-3);border-radius:var(--radius-sm);color:var(--color-muted);font-size:var(--text-label);white-space:nowrap;cursor:pointer;transition:color var(--duration) var(--ease), background var(--duration) var(--ease);justify-content:center;align-items:center;font-weight:500;display:flex}.tool-ui .seg span:hover{color:var(--color-fg)}.tool-ui .seg input:checked+span{background:var(--color-surface);color:var(--color-fg);box-shadow:var(--shadow-sm), 0 0 0 1px var(--color-border)}.tool-ui .seg input:focus-visible+span{outline:2px solid var(--color-fg);outline-offset:1px}.tool-ui .status{min-height:20px;color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs)}.tool-ui .status.is-error,.tool-ui .error{color:var(--color-danger)}.tool-ui .status.is-success{color:var(--color-success)}.tool-ui .notice{gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-input);background:var(--color-surface-soft);color:var(--color-fg-soft);font-size:var(--text-sm);display:flex}.tool-ui .notice svg{flex:none;margin-top:3px}.tool-ui .notice.is-error{color:#9f2a2a;background:#fdeeee}.tool-ui .stats{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.tool-ui .stat{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-surface)}.tool-ui .stat-value{font-size:var(--text-h3);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-snug);font-weight:600;line-height:1.2}.tool-ui .stat-label{color:var(--color-muted);font-size:var(--text-xs);margin-top:2px}.tool-ui .checker{background-color:#fff;background-image:linear-gradient(45deg,#efefec 25%,#0000 25%),linear-gradient(-45deg,#efefec 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#efefec 75%),linear-gradient(-45deg,#0000 75%,#efefec 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.tool-ui .file-list{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.tool-ui .file-row{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-surface);grid-template-columns:48px minmax(0,1fr) auto;display:grid}.tool-ui .file-thumb{border-radius:var(--radius-sm);object-fit:cover;width:48px;height:48px}.tool-ui .file-name{font-size:var(--text-sm);text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.tool-ui .file-meta{color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs)}.tool-ui .saving{color:var(--color-success);font-weight:500}.tool-ui .spinner{border:2px solid var(--color-border-strong);border-top-color:var(--color-fg);border-radius:50%;width:16px;height:16px;animation:.7s linear infinite tool-spin}@keyframes tool-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.tool-ui .spinner{animation-duration:2s}}.tool-ui .btn.is-flashed{background:var(--color-green);color:var(--color-success)}.tool-ui .page-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(148px,1fr));margin:0;padding:0;list-style:none;display:grid}.tool-ui .page-card{gap:var(--space-2);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-surface);transition:border-color var(--duration) var(--ease), opacity var(--duration) var(--ease);grid-template-columns:minmax(0,1fr);display:grid;position:relative}.tool-ui .page-card[draggable=true]{cursor:grab}.tool-ui .page-card.is-selected{border-color:var(--color-fg);box-shadow:inset 0 0 0 1px var(--color-fg);background:var(--color-primary-soft)}.tool-ui .page-card.is-deleted{opacity:.4}.tool-ui .page-thumb{aspect-ratio:3/4;border-radius:var(--radius-sm);background:var(--color-surface-soft);position:relative;overflow:hidden}.tool-ui .page-thumb canvas,.tool-ui .page-thumb img{max-width:calc(100% - 12px);max-height:calc(100% - 12px);box-shadow:var(--shadow-sm), 0 0 0 1px var(--color-border);transition:transform var(--duration) var(--ease);margin:auto;position:absolute;inset:0}.tool-ui .thumb-canvas:not(.is-ready){background:var(--color-surface);width:60%;height:80%}.tool-ui .page-label{justify-content:space-between;align-items:center;gap:var(--space-1);color:var(--color-muted);font-family:var(--font-mono);font-size:11px;display:flex}.tool-ui .page-tools{flex-wrap:wrap;justify-content:center;gap:2px;display:flex}.tool-ui .page-check{width:18px;height:18px;accent-color:var(--color-fg);position:absolute;top:12px;left:12px}.tool-ui .sort-list{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.tool-ui .sort-item{align-items:center;gap:var(--space-3);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-surface);grid-template-columns:20px 48px minmax(0,1fr) auto;display:grid}.tool-ui .sort-item[draggable=true]{cursor:grab}.tool-ui .is-dragging{opacity:.5;outline:2px dashed var(--color-border-strong)}.tool-ui .grip{color:var(--color-muted)}.tool-ui .sort-thumb{border-radius:var(--radius-sm);background:var(--color-surface-soft);place-items:center;width:48px;height:48px;display:grid;overflow:hidden}.tool-ui .sort-thumb img{object-fit:cover;width:100%;height:100%}.tool-ui .actions-bar{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-card);background:var(--color-surface-soft);flex-wrap:wrap;display:flex}.tool-ui .notice.is-success{background:var(--color-green);color:#1d5c34}.tool-ui .notice.is-warning{color:#8a5a00;background:#fdf4e3}