@import url('/shared/seo-editorial.css');

/* Lightweight visual system for individual tools. Functionality stays tool-owned. */
:root {
  --tool-page-ink: #102044;
  --tool-page-copy: #64748b;
  --tool-page-blue: #2563eb;
  --tool-page-line: #dce6f4;
  --tool-page-surface: rgba(255, 255, 255, .96);
}

body {
  background:
    radial-gradient(circle at 90% 5%, rgba(96, 165, 250, .13), transparent 25rem),
    linear-gradient(180deg, #fff 0, #f7faff 34rem, #fff 100%);
}

#app-root > .page.active {
  min-height: calc(100vh - var(--app-nav-h));
  background: transparent;
}

.tool-overlay-inner {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: 1rem max(var(--layout-gutter), 1rem) 4rem;
}

.tool-overlay-inner > .back-link-btn,
#app-root .back-link-btn {
  min-height: 36px;
  margin-bottom: .75rem !important;
  padding: .42rem .72rem;
  border: 1px solid #dbe5f2;
  border-radius: .65rem;
  color: #40516b;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 5px 16px rgba(42, 67, 106, .05);
  font-size: .78rem;
  font-weight: 750;
}

.tool-overlay-inner > .back-link-btn:hover,
#app-root .back-link-btn:hover {
  color: #1d4ed8;
  border-color: #b8cff5;
  background: #eef5ff;
}

.tool-page {
  padding: 0;
}

.tool-head {
  position: relative;
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1rem;
  padding: .75rem 0 1rem;
  border-bottom: 1px solid var(--tool-page-line);
}

.tool-head-icon {
  display: grid;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid #d4e3fb;
  border-radius: .9rem;
  color: var(--tool-page-blue);
  background: linear-gradient(145deg, #f3f8ff, #e8f2ff);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .08);
}

.tool-head-icon .tci-svg,
.tool-head-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: currentColor;
}

.tool-head h1,
.tool-head h2 {
  margin: 0;
  color: var(--tool-page-ink);
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 820;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.tool-head p {
  max-width: 720px;
  margin: .28rem 0 0;
  color: var(--tool-page-copy);
  font-size: .88rem;
  line-height: 1.5;
}

.panel,
.lux-card,
.converter-card,
.calculator-card {
  border-color: var(--tool-page-line);
  border-radius: 1rem;
  background: var(--tool-page-surface);
  box-shadow: 0 14px 36px rgba(38, 65, 105, .075);
  backdrop-filter: none;
}

.panel {
  padding: clamp(1rem, 2.3vw, 1.45rem);
}

.drop-zone,
.file-upload-area {
  border-color: #cbdcf3;
  background: #f8fbff;
}

.drop-zone:hover,
.drop-zone.dragover,
.file-upload-area:hover {
  border-color: #75a5ff;
  background: #f0f6ff;
}

.lux-input,
.lux-select,
.lux-textarea,
.form-group input,
.form-group select,
.form-group textarea {
  border-color: #d5e1f0;
  color: #172342;
  background: #fbfdff;
  box-shadow: none;
}

.lux-input:focus,
.lux-select:focus,
.lux-textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #6ea2ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
}

.btn-primary,
.image-upload-button {
  border-color: #3b82f6;
  color: #fff;
  background: #2563eb;
  box-shadow: 0 9px 22px rgba(37, 99, 235, .2);
}

.btn-primary:hover,
.image-upload-button:hover {
  border-color: #2563eb;
  background: #1d4ed8;
  box-shadow: 0 12px 27px rgba(37, 99, 235, .25);
}

.btn-secondary {
  border-color: #d7e2f0;
  color: #31415d;
  background: #f8fafd;
}

.btn-secondary:hover {
  border-color: #b8cdf0;
  color: #1d4ed8;
  background: #eef5ff;
}

.lp-seo,
.ts-seo {
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

.lp-seo-block,
.ts-seo > section,
.ts-seo > div {
  border-color: #e1e9f3;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 10px 28px rgba(38, 65, 105, .05);
}

.lp-seo-title,
.ts-seo h2 {
  color: var(--tool-page-ink);
  font-family: 'Inter', 'Inter Fallback', sans-serif;
}

html.theme-dark body {
  background:
    radial-gradient(circle at 90% 5%, rgba(37, 99, 235, .16), transparent 25rem),
    #070b15;
}

html.theme-dark {
  --tool-page-ink: #eef4ff;
  --tool-page-copy: #9aa8bc;
  --tool-page-line: #27354a;
  --tool-page-surface: #0e1728;
}

html.theme-dark .tool-overlay-inner > .back-link-btn,
html.theme-dark #app-root .back-link-btn,
html.theme-dark .btn-secondary {
  color: #d7e3f4;
  border-color: #2b3a50;
  background: #111b2d;
}

html.theme-dark .tool-head-icon {
  color: #78a9ff;
  border-color: #2c4160;
  background: #111e33;
}

html.theme-dark .panel,
html.theme-dark .lux-card,
html.theme-dark .converter-card,
html.theme-dark .calculator-card,
html.theme-dark .lp-seo-block,
html.theme-dark .ts-seo > section,
html.theme-dark .ts-seo > div {
  border-color: #263349;
  background: #0e1728;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
}

html.theme-dark .drop-zone,
html.theme-dark .file-upload-area {
  border-color: #30415b;
  background: #0b1424;
}

html.theme-dark .lux-input,
html.theme-dark .lux-select,
html.theme-dark .lux-textarea,
html.theme-dark .form-group input,
html.theme-dark .form-group select,
html.theme-dark .form-group textarea {
  border-color: #2b3a50;
  color: #eef4ff;
  background: #0b1424;
}

@media (max-width: 640px) {
  .tool-overlay-inner {
    padding: .75rem 1rem 3rem;
  }

  .tool-head {
    min-height: 66px;
    gap: .75rem;
    padding: .55rem 0 .85rem;
  }

  .tool-head-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: .75rem;
  }

  .tool-head-icon .tci-svg,
  .tool-head-icon svg {
    width: 1.45rem;
    height: 1.45rem;
  }

  .tool-head h1,
  .tool-head h2 {
    font-size: clamp(1.35rem, 7vw, 1.75rem);
  }

  .tool-head p {
    font-size: .8rem;
  }

  .panel {
    padding: 1rem;
    border-radius: .9rem;
  }
}

/* Image tools are visual workspaces, not compact form cards. Let their main
   editor use the site canvas and remove the redundant card around the entire
   tool while preserving the meaningful controls and preview surfaces inside. */
body:has(.nav-links a[data-page="images"].active) .tool-overlay-inner {
  width: 100%;
  max-width: none;
  padding-inline: clamp(.85rem, 2.25vw, 2.5rem);
}

body:has(.nav-links a[data-page="images"].active) .tool-page {
  width: 100%;
  max-width: none;
}

body:has(.nav-links a[data-page="images"].active) .tool-page > .panel {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body:has(.nav-links a[data-page="images"].active) .tool-page > .panel > .drop-zone {
  width: 100%;
  max-width: none;
}

@media (max-width: 640px) {
  body:has(.nav-links a[data-page="images"].active) .tool-overlay-inner {
    padding-inline: .75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .back-link-btn,
  .panel {
    transition: none !important;
  }
}