/* HandyTools tool-specific extensions */
.image-tool-preview { display:block; max-width:100%; max-height:420px; margin:16px auto; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.file-drop { border:2px dashed var(--color-border); border-radius:var(--radius-lg); padding:24px; text-align:center; background:var(--color-bg); }
.file-drop:focus-within { border-color:var(--color-primary); }
.tool-help { color:var(--color-text-secondary); font-size:.875rem; margin:12px 0; }
.tool-output { overflow-wrap:anywhere; white-space:pre-wrap; max-height:320px; overflow:auto; background:var(--color-bg); border:1px solid var(--color-border); padding:12px; border-radius:var(--radius-md); }

/* Phase 4: social-media utility layouts */
.social-results { margin-top: 1rem; }
.social-thumb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-top: 1rem; }
.social-thumb-card { min-width: 0; padding: 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 12px); background: var(--color-surface, #fff); }
.social-thumb-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--color-background, #f5f5f5); border-radius: 8px; }
.social-thumb-card p { margin: 0.625rem 0; font-size: 0.8125rem; color: var(--color-text-secondary); }
.social-thumb-card a { display: inline-flex; text-decoration: none; font-size: 0.8125rem; }
#tt-cover-result img { display: block; width: 100%; height: auto; border-radius: 12px; margin-top: 0.75rem; }
#ig-img-preview, #tt-cover-result { overflow-wrap: anywhere; }
.tool-panel input[type="color"] { min-height: 44px; padding: 0.25rem; }
@media (max-width: 560px) { .social-thumb-grid { grid-template-columns: 1fr; } }


/* Tool-specific guide sits below the working tool, never before it. */
.tool-guide{margin:2rem 0 1rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--color-border);border-radius:20px;background:linear-gradient(145deg,var(--color-surface,#fff),var(--color-bg,#f7f8fc));}
.tool-guide-heading{max-width:760px;margin-bottom:1.4rem}.tool-guide-kicker{display:inline-block;font-size:.72rem;letter-spacing:.14em;font-weight:800;color:var(--color-primary);margin-bottom:.45rem}.tool-guide-heading h2{font-size:clamp(1.35rem,2.5vw,1.8rem);line-height:1.2;margin:0 0 .6rem;color:var(--color-text)}.tool-guide-heading p{color:var(--color-text-secondary);margin:0;line-height:1.7}
.tool-guide-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.tool-guide-step{position:relative;min-width:0;padding:1.2rem;border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface,#fff);box-shadow:0 5px 18px rgba(20,30,60,.04)}.tool-step-number{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--color-text-secondary)}.tool-step-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:.7rem 0;border-radius:12px;background:color-mix(in srgb,var(--color-primary) 12%,white);color:var(--color-primary);font-size:1.1rem}.tool-guide-step h3{font-size:1rem;line-height:1.35;margin:.3rem 0 .45rem}.tool-guide-step p{font-size:.875rem;line-height:1.55;color:var(--color-text-secondary);margin:0}.tool-privacy-note{display:flex;align-items:flex-start;gap:.6rem;margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--color-border);font-size:.82rem;line-height:1.6;color:var(--color-text-secondary)}.tool-privacy-note i{color:var(--color-primary);margin-top:.2rem}
@media(max-width:700px){.tool-guide-steps{grid-template-columns:1fr}.tool-guide-step{display:grid;grid-template-columns:40px 1fr;column-gap:.75rem;align-items:start;padding:1rem}.tool-step-number{grid-column:1;grid-row:1}.tool-step-icon{grid-column:1;grid-row:2;margin:.4rem 0 0}.tool-guide-step h3,.tool-guide-step p{grid-column:2}.tool-guide-step h3{grid-row:1;margin:.2rem 0 .35rem}.tool-guide-step p{grid-row:2}}


/* Visual refresh inspired by the supplied tool screenshots. Each tool keeps its own accent and purpose-built layout. */
:root { --tool-accent:#356fe5; --tool-accent-dark:#244eb8; --tool-tint:#edf4ff; --tool-shadow:0 14px 36px rgba(24,45,90,.09); }
body[data-tool="percentage-calculator"], body[data-tool="basic-calculator"] { --tool-accent:#2459d6; --tool-accent-dark:#12378f; --tool-tint:#eef3ff; }
body[data-tool="age-calculator"], body[data-tool="date-difference"] { --tool-accent:#2385ed; --tool-accent-dark:#174c9d; --tool-tint:#eff6ff; }
body[data-tool="unit-converter"] { --tool-accent:#6755d9; --tool-accent-dark:#4333a5; --tool-tint:#f1efff; }
body[data-tool="word-counter"], body[data-tool="text-case-converter"] { --tool-accent:#217a46; --tool-accent-dark:#14562f; --tool-tint:#edf9f1; }
body[data-tool="image-compressor"], body[data-tool="image-resizer"], body[data-tool="image-converter"] { --tool-accent:#19a85b; --tool-accent-dark:#087c3e; --tool-tint:#edfbf3; }
body[data-tool="image-cropper"] { --tool-accent:#2385ed; --tool-accent-dark:#174c9d; --tool-tint:#eef6ff; }
body[data-tool="favicon-generator"] { --tool-accent:#d4ad25; --tool-accent-dark:#8e7110; --tool-tint:#fff9df; }
body[data-tool="image-to-base64"] { --tool-accent:#64748b; --tool-accent-dark:#334155; --tool-tint:#f1f5f9; }
body[data-tool^="youtube-"] { --tool-accent:#e62117; --tool-accent-dark:#b5120b; --tool-tint:#fff0ef; }
body[data-tool^="instagram-"] { --tool-accent:#c13584; --tool-accent-dark:#8d2460; --tool-tint:#fff0f8; }
body[data-tool^="tiktok-"] { --tool-accent:#2778e7; --tool-accent-dark:#1351a8; --tool-tint:#eef6ff; }
.tool-view-header { position:relative; padding:clamp(1.4rem,3.5vw,2.4rem); margin:1rem 0 1.4rem; border:1px solid color-mix(in srgb,var(--tool-accent) 18%,#fff); border-radius:22px; background:linear-gradient(120deg,var(--tool-tint),#fff 78%); box-shadow:var(--tool-shadow); overflow:hidden; }
.tool-view-header:after { content:""; position:absolute; width:180px;height:180px;right:-55px;top:-75px;border-radius:50%;background:color-mix(in srgb,var(--tool-accent) 9%,transparent);pointer-events:none; }
.tool-view-header h1 { position:relative; z-index:1; font-size:clamp(1.75rem,4vw,2.6rem); line-height:1.12; letter-spacing:-.04em; margin:0 0 .65rem; }
.tool-view-header p { position:relative; z-index:1; max-width:760px; margin:0; font-size:1rem; line-height:1.7; }
#toolMount { --color-primary:var(--tool-accent); --color-primary-dark:var(--tool-accent-dark); margin:0 0 1.8rem; }
#toolMount .tool-panel { border:1px solid color-mix(in srgb,var(--tool-accent) 16%,var(--color-border)); border-radius:22px; padding:clamp(1.1rem,3vw,2rem); background:linear-gradient(145deg,#fff 65%,var(--tool-tint)); box-shadow:0 15px 40px rgba(21,35,66,.08); }
#toolMount h2, #toolMount h3 { letter-spacing:-.025em; }
#toolMount input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), #toolMount select, #toolMount textarea { border-radius:11px; transition:border-color .18s ease,box-shadow .18s ease; }
#toolMount input:focus, #toolMount select:focus, #toolMount textarea:focus { outline:none; border-color:var(--tool-accent)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--tool-accent) 16%,transparent)!important; }
#toolMount button, #toolMount .btn { border-radius:10px; transition:transform .16s ease,box-shadow .16s ease,filter .16s ease; }
#toolMount button:hover, #toolMount .btn:hover { filter:saturate(1.06); box-shadow:0 5px 15px color-mix(in srgb,var(--tool-accent) 18%,transparent); }
#toolMount button:active, #toolMount .btn:active { transform:translateY(1px); }
#toolMount .result, #toolMount .result-card, #toolMount [class*="result"] { overflow-wrap:anywhere; }
#toolMount .result, #toolMount .result-card { border-radius:14px; }
.tool-guide { box-shadow:0 10px 30px rgba(24,45,90,.045); }
.tool-guide-kicker { color:var(--tool-accent); }
.tool-step-icon { background:var(--tool-tint); color:var(--tool-accent); }
.tool-privacy-note i { color:var(--tool-accent); }
.file-drop { border-color:color-mix(in srgb,var(--tool-accent) 48%,#cbd5e1); background:linear-gradient(135deg,var(--tool-tint),#fff); border-radius:18px; padding:clamp(1.5rem,4vw,3rem); }
.image-tool-preview { box-shadow:0 8px 25px rgba(15,23,42,.1); }
.social-thumb-card { box-shadow:0 8px 22px rgba(15,23,42,.055); }
@media(max-width:700px){ .tool-view-header{border-radius:16px;padding:1.25rem} #toolMount .tool-panel{border-radius:16px;padding:1rem} }

/* Consistent two-column workspace for image tools: controls left, preview/results right. */
.image-tool-layout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.image-tool-controls{min-width:0;grid-column:1;grid-row:1}
.image-tool-preview-pane,.image-tool-layout>.base64-result{min-width:0;grid-column:2;grid-row:1;position:sticky;top:18px;margin-top:0!important;max-height:none;overflow-wrap:anywhere}
.image-tool-layout .image-tool-preview-pane img,.image-tool-layout>.base64-result img{max-width:100%;height:auto;object-fit:contain}
.image-tool-layout .image-tool-preview{max-height:560px;width:auto;max-width:100%;margin:12px auto;}
.image-tool-layout .result-box{padding:18px}
@media(max-width:760px){.image-tool-layout{grid-template-columns:minmax(0,1fr)!important}.image-tool-controls,.image-tool-preview-pane,.image-tool-layout>.base64-result{grid-column:1;grid-row:auto;position:static}.image-tool-preview-pane{margin-top:16px!important}}

/* Reliable image-tool workspace: upload/settings on the left, preview on the right. */
#toolMount .tool-panel.image-tool-layout,
#toolMount .tool-panel:has(> .image-tool-workspace) { display:block!important; }
#toolMount .image-tool-workspace { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:clamp(18px,3vw,30px)!important; align-items:start!important; width:100%; }
#toolMount .image-tool-workspace > .image-tool-controls { display:flex; flex-direction:column; gap:0; min-width:0; grid-column:1!important; grid-row:1!important; }
#toolMount .image-tool-workspace > .image-tool-preview-column { display:block; min-width:0; min-height:240px; grid-column:2!important; grid-row:1!important; padding:18px; border:1px dashed var(--color-border,#d7deea); border-radius:16px; background:var(--color-surface,#fff); overflow-wrap:anywhere; }
#toolMount .image-tool-workspace .image-tool-preview-pane { display:block; grid-column:auto!important; grid-row:auto!important; position:static!important; width:100%; min-width:0; margin:0!important; }
#toolMount .image-tool-workspace .image-tool-preview-pane img,
#toolMount .image-tool-workspace .image-tool-preview-column img { display:block; max-width:100%!important; max-height:620px; height:auto; object-fit:contain; margin:14px auto; }
#toolMount .image-tool-workspace .image-preview-empty { min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--color-text-muted,#64748b); gap:9px; padding:20px; }
#toolMount .image-tool-workspace .image-preview-empty span { font-size:42px; opacity:.6; }
#toolMount .image-tool-workspace .image-preview-empty strong { color:var(--color-text,#1f2937); }
#toolMount .image-tool-workspace .image-preview-empty p { margin:0; font-size:.9rem; }
#toolMount .image-tool-workspace .result-box:not(.visible) { display:none!important; }
#toolMount .image-tool-workspace .result-box.visible { display:block!important; }
@media(max-width:760px) {
  #toolMount .image-tool-workspace { grid-template-columns:minmax(0,1fr)!important; }
  #toolMount .image-tool-workspace > .image-tool-controls,
  #toolMount .image-tool-workspace > .image-tool-preview-column { grid-column:1!important; grid-row:auto!important; }
  #toolMount .image-tool-workspace > .image-tool-preview-column { margin-top:16px; }
}