/* Shared look for every Shared tools page.
   Tokens copied from iac-ith-url-shortener/frontend-vue/src/styles/main.css — keep in sync. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --yellow: #FFCC00; --yellow-dim: rgba(255, 204, 0, 0.12); --yellow-hover: #e6b800;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --ease: cubic-bezier(.4, 0, .2, 1); --fast: 120ms; --normal: 200ms;
  --topbar-height: 72px;
}
:root, [data-theme="dark"] {
  --bg-0: #0a0a0a; --bg-1: #111111; --bg-2: #191919; --bg-3: #222222;
  --fg-0: #fafafa; --fg-1: #a1a1aa; --fg-2: #71717a; --fg-3: #3f3f46;
  --border: #27272a; --border-hover: #3f3f46;
  --glow: 0 0 0 1px rgba(255, 204, 0, 0.25), 0 0 20px rgba(255, 204, 0, 0.08);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg-0: #ededeb; --bg-1: #f5f5f3; --bg-2: #e8e8e5; --bg-3: #ddddd9;
  --fg-0: #1a1a1c; --fg-1: #3d3d42; --fg-2: #6b6b73; --fg-3: #9a9aa2;
  --border: #d5d5d1; --border-hover: #a8a8a4;
  --yellow: #c9a200; --yellow-dim: rgba(201, 162, 0, 0.12); --yellow-hover: #b89400;
  --glow: 0 0 0 1px rgba(201, 162, 0, 0.3), 0 0 14px rgba(201, 162, 0, 0.05);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); background: var(--bg-0); color: var(--fg-0); line-height: 1.5;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  transition: background var(--normal) var(--ease), color var(--normal) var(--ease);
}
:focus-visible { outline: none; box-shadow: var(--glow); }

/* Topbar — as in the shortener */
.topbar {
  height: var(--topbar-height); border-bottom: 1px solid var(--border); display: flex; align-items: center;
  padding: 0 32px; position: sticky; top: 0; z-index: 100; background: var(--bg-1);
}
[data-theme="light"] .topbar { box-shadow: 0 1px 0 var(--border); }
.topbar-inner { max-width: 960px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.topbar.wide .topbar-inner { max-width: none; }
.topbar-left { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.topbar-logo { height: 56px; width: auto; display: block; }
.topbar-title { font-size: 14px; font-weight: 600; color: var(--fg-2); padding-left: 14px; border-left: 1px solid var(--border); }
.topbar-title a { color: inherit; text-decoration: none; }
.topbar-title a:hover { color: var(--fg-0); }
.topbar-title .sep { margin: 0 8px; color: var(--fg-3); }
.topbar-title .current { color: var(--fg-0); }
.topbar-right { display: flex; align-items: center; gap: 4px; }

.btn-ghost {
  appearance: none; background: transparent; border: 1px solid transparent; color: var(--fg-2);
  height: 36px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 5px; padding: 0 10px; font: 600 13px var(--font);
  transition: all var(--fast) var(--ease);
}
.btn-ghost:hover { color: var(--fg-0); background: var(--bg-2); border-color: var(--border); }
.btn-ghost svg { width: 20px; height: 20px; }
.btn-yellow {
  appearance: none; background: var(--yellow); color: #0a0a0a; border: none; padding: 8px 18px;
  border-radius: 8px; font: 700 13px var(--font); cursor: pointer; transition: all var(--fast) var(--ease);
}
[data-theme="light"] .btn-yellow { color: #1a1a1a; }
.btn-yellow:hover { background: var(--yellow-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3); }

.footer-bar { text-align: center; padding: 20px 32px; font-size: 12px; color: var(--fg-2); border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .topbar { padding: 0 16px; }
  .topbar-logo { height: 44px; }
  .topbar-title { display: none; }
}