/* FreeToolsPro glass design layer — loaded after the base stylesheet on every origin.
   Cosmetic only: layout stays with the base CSS so legacy pages keep working. */
:root {
  --g-bg: rgba(255, 255, 255, .64);
  --g-bg-strong: rgba(255, 255, 255, .86);
  --g-border: rgba(255, 255, 255, .72);
  --g-line: rgba(20, 51, 71, .10);
  --g-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 12px 32px -12px rgba(7, 57, 86, .22);
  --g-shadow-hover: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -14px rgba(7, 57, 86, .32);
  --g-accent: #007b78;
  --g-accent-2: #0a5c8a;
  --g-ring: 0 0 0 3px rgba(0, 123, 120, .35);
  --g-radius: 18px;
  --g-ease: cubic-bezier(.2, .7, .2, 1);
}

body:not(.runtime) {
  background:
    radial-gradient(1100px 620px at 8% -8%, rgba(0, 163, 150, .16), transparent 60%),
    radial-gradient(900px 560px at 100% 0%, rgba(68, 103, 255, .13), transparent 58%),
    radial-gradient(800px 600px at 50% 110%, rgba(255, 176, 32, .10), transparent 60%),
    linear-gradient(180deg, #f7fbfc 0%, #eef4f8 100%);
  background-attachment: fixed;
}
@media (max-width: 760px), (hover: none) { body:not(.runtime) { background-attachment: scroll; } }

/* Sticky frosted header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .72); border-bottom: 1px solid var(--g-line); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .tool-card, .category-card, .tool-aside, .hub-note, .example-card, .workflow-card, .search-box, .tool-content > section, .privacy-banner, .ftp-frame-wrap, .related .section-heading + .card-grid > a {
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  }
}

/* Glass surfaces */
.tool-card, .category-card, .tool-aside, .hub-note, .workflow-card, .tool-content > section, .search-box {
  background: var(--g-bg); border: 1px solid var(--g-border); border-radius: var(--g-radius); box-shadow: var(--g-shadow);
}
.tool-content > section { padding: 22px 24px; margin-bottom: 16px; }
.example-card { background: var(--g-bg-strong); border: 1px solid var(--g-border); border-radius: 14px; }
.ftp-frame-wrap { background: rgba(255, 255, 255, .42); border: 1px solid var(--g-border); border-radius: 22px; box-shadow: var(--g-shadow); padding: 6px; }
.ftp-frame { border-radius: 18px; }
.ftp-frame-note { padding: 4px 10px 6px; }

/* Smooth interactions */
.tool-card, .category-card, .workflow-card, .button, .search-result, .studio-section, .file-row {
  transition: transform .18s var(--g-ease), box-shadow .18s var(--g-ease), background-color .18s var(--g-ease), border-color .18s var(--g-ease);
}
@media (hover: hover) {
  .tool-card:hover, .category-card:hover, .workflow-card:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-hover); }
  .button.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(0, 123, 120, .7); }
  .button.secondary:hover:not(:disabled) { background: rgba(255, 255, 255, .95); }
}
.button { border-radius: 12px; }
.button.primary { background: linear-gradient(135deg, var(--g-accent) 0%, var(--g-accent-2) 100%); border-color: transparent; color: #fff; }
.button.primary:active:not(:disabled) { transform: translateY(0) scale(.98); }
.button.secondary { background: rgba(255, 255, 255, .78); border: 1px solid var(--g-line); }
.button:disabled { opacity: .55; cursor: not-allowed; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--g-ring); border-radius: 10px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
  border-radius: 12px; border: 1px solid var(--g-line); background: rgba(255, 255, 255, .9);
  transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, select:focus, textarea:focus { border-color: var(--g-accent); box-shadow: var(--g-ring); outline: none; }
input[type=checkbox], input[type=range] { accent-color: var(--g-accent); }

.search-box input, .search-box input:focus { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.search-box:focus-within { box-shadow: var(--g-ring), var(--g-shadow); }
.hero h1 span { background: linear-gradient(90deg, var(--g-accent), var(--g-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.privacy-banner { border-radius: 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .tool-card:hover, .category-card:hover, .workflow-card:hover, .button:hover { transform: none !important; }
}
@media (prefers-contrast: more) {
  :root { --g-bg: #fff; --g-bg-strong: #fff; --g-border: #4a5d6b; }
}

/* iOS zooms the page when focusing inputs smaller than 16px; keep form text at 16px on touch devices. */
@media (pointer: coarse) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; } }
/* Respect notches / home indicators in standalone (installed PWA) mode. */
@supports (padding: env(safe-area-inset-left)) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } }