@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600&display=swap");

:root {
  --tool-bg: #f5efe4;
  --tool-bg-deep: #eadfce;
  --tool-panel: rgba(255, 251, 245, 0.88);
  --tool-panel-solid: #fffaf2;
  --tool-border: rgba(88, 67, 43, 0.14);
  --tool-text: #22303a;
  --tool-muted: #6b6359;
  --tool-primary: #1e4d59;
  --tool-primary-hover: #173e47;
  --tool-accent: #b97a3f;
  --tool-success: #2d6a4f;
  --tool-success-hover: #24533e;
  --tool-danger: #a94438;
  --tool-danger-hover: #86352d;
  --tool-secondary: #efe3d0;
  --tool-secondary-hover: #e3d2b8;
  --tool-secondary-border: #ccb89a;
  --tool-shadow: 0 22px 60px rgba(58, 42, 24, 0.11);
}

body.tool-page {
  font-family: "Manrope", sans-serif;
  color: var(--tool-text);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.78), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(185, 122, 63, 0.18), transparent 18%),
    linear-gradient(180deg, #faf4ea 0%, var(--tool-bg) 50%, var(--tool-bg-deep) 100%);
}

.tool-title {
  font-family: "Fraunces", serif;
  letter-spacing: -.03em;
}

.tool-header-card,
.tool-panel,
.tool-inline-panel {
  background: var(--tool-panel);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--tool-shadow);
  backdrop-filter: blur(14px);
}

.tool-header-card {
  border-radius: 28px;
  overflow: hidden;
}

.tool-hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent 40%),
    linear-gradient(135deg, var(--tool-primary), #2f5d62 60%, var(--tool-accent) 100%);
  color: #faf7f2;
}

.tool-hero-subtitle {
  color: rgba(250, 247, 242, 0.82);
}

.tool-panel,
.tool-inline-panel {
  border-radius: 24px;
}

.tool-input,
.tool-select {
  border: 1px solid var(--tool-border);
  border-radius: 16px;
  background: #fffdf9;
  color: var(--tool-text);
}

.tool-input:focus,
.tool-select:focus {
  outline: none;
  border-color: rgba(30, 77, 89, 0.42);
  box-shadow: 0 0 0 4px rgba(30, 77, 89, 0.12);
}

.tool-dropzone {
  border: 2px dashed rgba(120, 95, 62, 0.26);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,250,242,0.82));
  transition: border-color .16s ease, transform .16s ease, background-color .16s ease;
}

.tool-dropzone:hover {
  border-color: rgba(30, 77, 89, 0.42);
  transform: translateY(-1px);
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  box-shadow: 0 10px 22px rgba(31, 24, 16, 0.08);
}

.tool-btn:hover { transform: translateY(-2px); }
.tool-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.tool-btn-primary { background: var(--tool-primary); color: #fff; }
.tool-btn-primary:hover { background: var(--tool-primary-hover); }
.tool-btn-secondary { background: var(--tool-secondary); color: var(--tool-text); border-color: var(--tool-secondary-border); }
.tool-btn-secondary:hover { background: var(--tool-secondary-hover); }
.tool-btn-success { background: var(--tool-success); color: #fff; }
.tool-btn-success:hover { background: var(--tool-success-hover); }
.tool-btn-danger { background: var(--tool-danger); color: #fff; }
.tool-btn-danger:hover { background: var(--tool-danger-hover); }
.tool-btn-ghost {
  background: rgba(255,255,255,0.65);
  color: var(--tool-text);
  border-color: var(--tool-border);
  box-shadow: none;
}

.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 250, 242, 0.88);
  border: 1px solid var(--tool-border);
  color: var(--tool-muted);
  font-size: 12px;
  font-weight: 700;
}

.tool-note {
  color: var(--tool-muted);
}

.tool-link {
  color: #5d4b36;
  font-weight: 700;
  text-decoration: none;
}

.tool-link:hover {
  text-decoration: underline;
  color: #36281d;
}

.tile {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.tool-tile {
  background: var(--tool-panel-solid);
  border: 1px solid var(--tool-border);
  box-shadow: 0 16px 36px rgba(44, 28, 14, 0.08);
}

.tile:hover { transform: translateY(-3px); box-shadow: 0 20px 36px rgba(44, 28, 14, 0.12); }
.tile.selected { outline: 3px solid var(--tool-primary); outline-offset: -3px; }

.tool-meta-panel {
  background: rgba(255,255,255,0.8);
}

.badge {
  background: rgba(26, 32, 38, 0.72);
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.btn { transition: transform .08s ease; }
.btn:active { transform: translateY(1px); }
.fade-in { animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }

.ar-square { aspect-ratio: 1 / 1; }
.ar-rect { aspect-ratio: 4 / 3; }
.img-fade { opacity: 0; transition: opacity .25s ease; }
.img-fade.loaded { opacity: 1; }

.action-gradient { background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sticky-bar-shadow { box-shadow: 0 -8px 20px rgba(45, 33, 18, 0.12); }
.skeleton { position: relative; overflow: hidden; background: #e5e7eb; }
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%);} }

@media (max-width: 768px) {
  .tool-header-card,
  .tool-panel,
  .tool-inline-panel {
    border-radius: 22px;
  }
}