/* ==========================================================================
   GreatAutomate — generic tool page (/tools/:id)
   ========================================================================== */
.tool-page { padding: 32px 0 72px; }
@media (min-width: 900px) { .tool-page { padding: 44px 0 88px; } }

/* Header */
.tool-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; max-width: 720px; margin: 0 auto 28px; }
.tool-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.03em; }
.tool-head p { font-size: var(--fs-md); line-height: 1.6; }
.tool-head .tool-crumbs { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.tool-head .tool-crumbs a { color: var(--text-2); }
.tool-head .tool-meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Stage card */
.tool-stage { max-width: 920px; margin: 0 auto; }
.tool-stage > .card { overflow: hidden; }

/* Drop zone */
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: 280px; padding: 36px 20px; border: 2px dashed color-mix(in srgb, var(--cat, var(--primary)) 45%, var(--border-strong)); border-radius: var(--r-lg); background: color-mix(in srgb, var(--cat, var(--primary)) 5%, var(--surface)); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); cursor: pointer; }
.dropzone:hover { background: color-mix(in srgb, var(--cat, var(--primary)) 9%, var(--surface)); }
.dropzone.over { border-style: solid; border-color: var(--cat, var(--primary)); background: color-mix(in srgb, var(--cat, var(--primary)) 14%, var(--surface)); transform: scale(1.005); }
.dropzone .dz-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--cat, var(--primary)); background: color-mix(in srgb, var(--cat, var(--primary)) 14%, transparent); margin-bottom: 4px; }
.dropzone .dz-icon .icon { width: 30px; height: 30px; }
.dropzone h3 { font-size: var(--fs-lg); }
.dropzone .dz-sub { font-size: var(--fs-sm); color: var(--text-3); }
.dropzone .btn { min-height: 48px; padding: 0 26px; font-size: var(--fs-base); margin-top: 6px; background: var(--cat, var(--primary)); color: #fff; }
[data-theme="dark"] .dropzone .btn { color: #0b0f1a; }
.dropzone .btn:hover { filter: brightness(0.95); }
.dropzone .dz-limits { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.dropzone .dz-limits span { display: inline-flex; align-items: center; gap: 5px; }
.dropzone .dz-limits .icon { width: 13px; height: 13px; }
@media (max-width: 640px) { .dropzone { min-height: 220px; padding: 28px 16px; } }

/* Page-wide drag overlay hint */
body.drag-active .tool-work { outline: 2px dashed var(--cat, var(--primary)); outline-offset: 6px; border-radius: var(--r-lg); }

/* Work area: files + options */
.tool-work { display: grid; gap: 20px; }
@media (min-width: 900px) { .tool-work.has-options { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.tool-files-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tool-files-head h3 { font-size: var(--fs-md); }
.tool-files-head .hint { font-size: var(--fs-xs); color: var(--text-3); }

.file-list { display: grid; gap: 8px; list-style: none; }
.file-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast); min-width: 0; }
.file-item.invalid { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.file-item.dragging { opacity: 0.45; }
.file-item.drop-before { box-shadow: 0 -3px 0 0 var(--cat, var(--primary)); }
.file-item.drop-after { box-shadow: 0 3px 0 0 var(--cat, var(--primary)); }
.file-item .fi-handle { color: var(--text-3); cursor: grab; flex: 0 0 auto; display: grid; place-items: center; width: 20px; }
.file-item .fi-handle:active { cursor: grabbing; }
.file-item .fi-num { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); width: 18px; text-align: center; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.file-thumb { width: 44px; height: 56px; flex: 0 0 auto; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--text-3); }
.file-thumb canvas, .file-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.file-thumb .icon { width: 20px; height: 20px; }
.file-thumb.loading { background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.file-item .fi-body { flex: 1; min-width: 0; }
.file-item .fi-name { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item .fi-sub { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; }
.file-item .fi-err { color: var(--danger); font-weight: 600; }
.file-item .fi-actions { display: flex; gap: 2px; flex: 0 0 auto; }
@media (max-width: 480px) { .file-item .fi-handle { display: none; } .file-item { gap: 10px; padding: 10px; } .file-thumb { width: 36px; height: 46px; } }

.add-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; min-height: 44px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); background: transparent; transition: all var(--t-fast); }
.add-more:hover { border-color: var(--cat, var(--primary)); color: var(--cat, var(--primary)); background: color-mix(in srgb, var(--cat, var(--primary)) 6%, transparent); }

/* Options */
.tool-options { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 14px; }
.tool-options h3 { font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; }
.tool-options .field .help { margin-top: 4px; }
.tool-options .range-row { display: flex; align-items: center; gap: 12px; }
.tool-options .range-row input[type="range"] { flex: 1; accent-color: var(--cat, var(--primary)); }
.tool-options .range-row output { min-width: 56px; text-align: right; font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tool-options .color-row { display: flex; align-items: center; gap: 10px; }
.tool-options .color-row input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.tool-options .opt-choices { display: grid; gap: 6px; }
.tool-options .opt-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: var(--fs-sm); font-weight: 500; transition: border-color var(--t-fast); }
.tool-options .opt-choice:has(input:checked) { border-color: var(--cat, var(--primary)); box-shadow: 0 0 0 1px var(--cat, var(--primary)); }
.tool-options .opt-choice input { accent-color: var(--cat, var(--primary)); }
.tool-options .input-unit { display: flex; align-items: center; gap: 8px; }
.tool-options .input-unit span { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.tool-options .check { align-items: flex-start; }
.tool-options .check input { margin-top: 1px; flex: 0 0 auto; }

.tool-submit { display: grid; gap: 10px; margin-top: 18px; }
.tool-submit .btn-run { min-height: 52px; font-size: var(--fs-md); border-radius: var(--r-md); background: var(--cat, var(--primary)); color: #fff; }
[data-theme="dark"] .tool-submit .btn-run { color: #0b0f1a; }
.tool-submit .btn-run:hover:not(:disabled) { filter: brightness(0.95); }
.tool-submit .btn-run:disabled { opacity: 0.55; cursor: not-allowed; }
.tool-submit .usage-note { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }

/* Busy */
.tool-busy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 48px 20px; }
.tool-busy .spinner { width: 40px; height: 40px; border-width: 3px; }
.tool-busy h3 { font-size: var(--fs-lg); }
.tool-busy .progress { width: 100%; max-width: 420px; height: 10px; }
.tool-busy .progress > span { background: var(--cat, var(--primary)); }
.tool-busy .busy-sub { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Result */
.tool-result { display: grid; gap: 18px; padding: 8px 0; }
.tool-result .res-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.tool-result .res-check { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); }
.tool-result .res-check .icon { width: 30px; height: 30px; stroke-width: 2.4; }
.tool-result h2 { font-size: var(--fs-xl); }
.res-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); max-width: 620px; width: 100%; margin: 0 auto; min-width: 0; }
.res-file .fi-body { flex: 1; min-width: 0; }
.res-file .fi-name { font-weight: 600; overflow-wrap: anywhere; }
.res-file .fi-sub { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: 6px 12px; flex-wrap: wrap; margin-top: 2px; }
.res-saving { color: var(--success); font-weight: 700; }
.res-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.res-actions .btn-download { min-height: 50px; padding: 0 28px; font-size: var(--fs-md); border-radius: var(--r-md); }
@media (max-width: 640px) { .res-actions .btn { flex: 1 1 100%; } }
.res-meta { max-width: 620px; width: 100%; margin: 0 auto; padding: 4px 18px; }
.res-note { font-size: var(--fs-xs); color: var(--text-3); text-align: center; display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: center; }
.res-note span { display: inline-flex; align-items: center; gap: 5px; }
.res-note .icon { width: 13px; height: 13px; }
.res-continue { border-top: 1px solid var(--border); padding-top: 18px; }
.res-continue h4 { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 10px; text-align: center; }

/* Error box */
.tool-error { margin-top: 14px; }
.tool-error .alert-actions, #toolNotice .alert-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* How-to + related */
.tool-howto { margin-top: 64px; }
.tool-howto .section-head { margin-bottom: 24px; }
.tool-related { margin-top: 48px; }
.tool-related h2 { font-size: var(--fs-xl); margin-bottom: 16px; text-align: center; }

/* Not found */
.tool-404 { text-align: center; padding: 56px 20px; max-width: 520px; margin: 0 auto; }
.tool-404 .tool-icon { margin: 0 auto 18px; }
.tool-404 h1 { font-size: var(--fs-2xl); margin-bottom: 8px; }
.tool-404 p { margin-bottom: 22px; }

.btn.disabled { pointer-events: none; opacity: 0.6; }
.progress.pulse > span { width: 40% !important; animation: indeterminate 1.3s infinite var(--ease); }
@keyframes indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.tool-options .error-text:empty, .tool-options .hint:empty { display: none; }