/* ==========================================================================
   WebToolsHub - Ultra Modern Design System & Stylesheet
   Crafted to World-Class Developer Platform Standards (Vercel / Raycast / Linear)
   100% Client-Side, Responsive, Glassmorphism & High-Rank Aesthetics
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens & CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Light Theme */
  --bg-primary: #f8fafc;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-subtle: #f1f5f9;
  --bg-hover: #e2e8f0;
  --bg-glass: rgba(255, 255, 255, 0.82);
  --border-color: #e2e8f0;
  --border-subtle: #edf2f7;
  --border-focus: #6366f1;
  --border-glow: rgba(99, 102, 241, 0.35);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  --accent-primary: #4f46e5;
  --accent-primary-hover: #4338ca;
  --accent-secondary: #06b6d4;
  --accent-subtle: rgba(79, 70, 229, 0.08);
  --accent-glow: rgba(79, 70, 229, 0.18);
  --accent-gradient: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
  --accent-gradient-radial: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 70%);

  --accent-success: #10b981;
  --accent-success-glow: rgba(16, 185, 129, 0.18);
  --accent-warning: #f59e0b;
  --accent-danger: #ef4444;
  --accent-info: #0ea5e9;

  /* Aliases & Compatibility Tokens */
  --primary: #4f46e5;
  --primary-light: rgba(79, 70, 229, 0.1);
  --danger: #ef4444;
  --bg-base: #f8fafc;
  --bg-card: #ffffff;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  --card-bg: #ffffff;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  /* Category Color Accents */
  --cat-beautifier: #8b5cf6;
  --cat-text: #0ea5e9;
  --cat-security: #10b981;
  --cat-web: #3b82f6;
  --cat-developer: #f59e0b;
  --cat-images: #ec4899;
  --cat-pdf: #ef4444;
  --cat-math: #6366f1;
  --cat-design: #d946ef;
  --cat-info: #14b8a6;
  --cat-utility: #64748b;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.1), 0 4px 10px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 24px 38px -6px rgba(0, 0, 0, 0.12), 0 8px 16px -6px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.2);

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-full: 3px;

  /* Layout & Transitions */
  --max-width: 1240px;
  --header-height: 72px;
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --card-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
}

[data-theme="dark"] {
  /* High-Rank Dark Theme (Deep Obsidian / Zinc Matrix) */
  --bg-primary: #090d16;
  --bg-surface: #111726;
  --bg-elevated: #172033;
  --bg-subtle: #141c2e;
  --bg-hover: #1e293b;
  --bg-glass: rgba(17, 23, 38, 0.85);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-focus: #818cf8;
  --border-glow: rgba(129, 140, 248, 0.4);

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #090d16;

  --accent-primary: #6366f1;
  --accent-primary-hover: #4f46e5;
  --accent-secondary: #38bdf8;
  --accent-subtle: rgba(99, 102, 241, 0.15);
  --accent-glow: rgba(99, 102, 241, 0.3);
  --accent-gradient: linear-gradient(135deg, #818cf8 0%, #38bdf8 50%, #34d399 100%);
  --accent-gradient-radial: radial-gradient(circle at 50% -10%, rgba(99, 102, 241, 0.22) 0%, transparent 70%);

  /* Aliases & Compatibility Tokens for Dark Mode */
  --primary: #6366f1;
  --primary-light: rgba(99, 102, 241, 0.2);
  --danger: #ef4444;
  --bg-base: #090d16;
  --bg-card: #111726;
  --bg-secondary: #141c2e;
  --bg-tertiary: #172033;
  --card-bg: #111726;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 16px -2px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 14px 28px -4px rgba(0, 0, 0, 0.75);
  --shadow-xl: 0 28px 45px -6px rgba(0, 0, 0, 0.85);
  --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.35);

  --card-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}

/* --------------------------------------------------------------------------
   2. Reset & Global Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient Background Lighting Mesh */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-gradient-radial);
  pointer-events: none;
  z-index: -1;
  opacity: 0.9;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  text-decoration: none;
  color: var(--accent-primary-hover);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* --------------------------------------------------------------------------
   3. Header & Sticky Glass Navigation
   -------------------------------------------------------------------------- */
.site-header, .header {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--header-height);
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header .container,
.header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
}

.logo-wrapper, .logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-decoration: none !important;
  flex-shrink: 0;
}

.logo-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo-icon img,
.logo-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.logo-wrapper:hover .logo-icon,
.logo:hover .logo-icon {
  transform: scale(1.1) rotate(6deg);
}

.logo-text {
  display: flex;
  align-items: center;
  font-weight: 800;
}

.logo-text span {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 1px;
}

/* Global Logo & Brand Image Constraint */
.brand-logo-img,
img[src*="logo.svg"],
.logo img,
.logo-icon img,
.footer-brand .logo img {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  display: inline-block;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Site Navigation Links */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none !important;
  transition: var(--transition-fast);
  border: 1px solid transparent;
}

.nav-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
  border-color: var(--border-color);
  transform: translateY(-1px);
}

.nav-link:hover svg {
  transform: scale(1.15);
}

.nav-link.active {
  color: #ffffff;
  background: var(--accent-primary);
  box-shadow: 0 2px 10px var(--accent-glow);
  border-color: var(--accent-primary);
}

[data-theme="dark"] .nav-link.active {
  color: #ffffff;
  background: var(--accent-primary);
}

/* Header Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.search-trigger-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.95rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.search-trigger-btn:hover {
  background: var(--bg-surface);
  border-color: var(--accent-primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.shortcut-badge {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--text-muted);
  box-shadow: var(--shadow-xs);
}

.icon-btn {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.icon-btn:hover {
  background: var(--bg-surface);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-glow);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   4. Hero Section & Announcement Pill
   -------------------------------------------------------------------------- */
.hero-section {
  padding: 4rem 0 2.5rem;
  text-align: center;
  position: relative;
}

.hero-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.hero-badge:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 16px var(--accent-glow);
  transform: translateY(-1px);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-success);
  position: relative;
}

.pulse-dot::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent-success);
  animation: pulseRipple 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes pulseRipple {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.hero-title {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin-bottom: 1.25rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-subtitle {
  font-size: 1.18rem;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 auto 2.25rem;
  line-height: 1.65;
}

/* Hero Feature Highlights Ribbon */
.hero-highlights {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}

.highlight-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.highlight-item svg, .highlight-item span.highlight-icon {
  color: var(--accent-primary);
  font-size: 1rem;
}

/* Live Search Bar (Hero) */
.hero-search-wrapper {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

.hero-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.hero-search-input {
  width: 100%;
  padding: 1.15rem 3.5rem 1.15rem 3.5rem;
  font-size: 1.05rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transition: var(--transition-normal);
  outline: none;
}

.hero-search-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 5px var(--accent-glow), var(--shadow-lg);
  background: var(--bg-elevated);
}

.hero-search-icon {
  position: absolute;
  left: 1.35rem;
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.hero-search-clear {
  position: absolute;
  right: 1.25rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: var(--transition-fast);
}

.hero-search-clear.visible {
  display: flex;
}

.hero-search-clear:hover {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}

/* Quick Search Tags Underneath Hero */
.hero-quick-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.quick-tag {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.65rem;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.quick-tag:hover {
  background: var(--bg-surface);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* --------------------------------------------------------------------------
   5. Category Filter Pills Bar
   -------------------------------------------------------------------------- */
.categories-filter-wrapper {
  position: relative;
  margin: 2.5rem 0 2rem;
}

.categories-filter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 0.55rem;
  padding: 0.5rem 0.25rem 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (min-width: 992px) {
  .categories-filter {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-xs);
  user-select: none;
}

.filter-pill:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.filter-pill.active {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  box-shadow: 0 4px 14px var(--accent-glow);
}

.filter-pill .pill-count {
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.25);
  font-weight: 700;
}

.filter-pill:not(.active) .pill-count {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   6. Homepage Toolbar & View Mode Switcher
   -------------------------------------------------------------------------- */
.homepage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding: 1.15rem 1.4rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.homepage-toolbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--card-highlight);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.toolbar-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
}

.quick-action-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
}

.quick-action-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
  box-shadow: 0 2px 10px var(--accent-glow);
}

.view-mode-toggle {
  display: inline-flex;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 2px;
}

.view-mode-btn {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--transition-fast);
}

.view-mode-btn.active {
  background: var(--bg-surface);
  color: var(--accent-primary);
  box-shadow: var(--shadow-xs);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. Tools Grid & Cards (Modern Elevated Styling)
   -------------------------------------------------------------------------- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
  position: relative;
}

.tool-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  transition: var(--transition-normal);
  position: relative;
  text-decoration: none !important;
  color: inherit;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tool-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--card-highlight);
  pointer-events: none;
}

.tool-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-primary);
}

.tool-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.15rem;
  position: relative;
}

.tool-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--accent-primary);
  transition: var(--transition-normal);
  flex-shrink: 0;
}

.tool-card:hover .tool-icon {
  background: var(--accent-primary);
  color: #ffffff;
  transform: scale(1.08) rotate(-3deg);
  border-color: var(--accent-primary);
  box-shadow: 0 4px 16px var(--accent-glow);
}

.tool-badge-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tool-badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  letter-spacing: 0.02em;
}

.tool-card-title {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0.55rem;
  line-height: 1.3;
}

.tool-card-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  flex-grow: 1;
  margin-bottom: 1.35rem;
  line-height: 1.55;
}

.tool-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-color);
  padding-top: 1.1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-primary);
}

.tool-card-footer span.arrow-icon {
  transition: transform 0.2s ease;
  font-size: 1.1rem;
}

.tool-card:hover .tool-card-footer span.arrow-icon {
  transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   8. Compact List View Mode (For Developers & Fast Navigation)
   -------------------------------------------------------------------------- */
.tools-grid.list-view {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.tools-grid.list-view .tool-card {
  flex-direction: row;
  align-items: center;
  padding: 1rem 1.4rem;
  gap: 1.25rem;
}

.tools-grid.list-view .tool-card-header {
  margin-bottom: 0;
}

.tools-grid.list-view .tool-icon {
  width: 42px;
  height: 42px;
  font-size: 1.35rem;
}

.tools-grid.list-view .tool-card-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.tools-grid.list-view .tool-card-title {
  margin-bottom: 0;
  font-size: 1.05rem;
  white-space: nowrap;
}

.tools-grid.list-view .tool-card-desc {
  margin-bottom: 0;
  font-size: 0.88rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tools-grid.list-view .tool-card-footer {
  border-top: none;
  padding-top: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .tools-grid.list-view .tool-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .tools-grid.list-view .tool-card-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
  }
  .tools-grid.list-view .tool-card-footer {
    width: 100%;
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   9. View More & Pagination Progress
   -------------------------------------------------------------------------- */
.view-more-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem 0 3.5rem;
  gap: 0.9rem;
  text-align: center;
}

.btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 2.5rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: var(--radius-full);
  background: var(--accent-gradient);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px var(--accent-glow);
  transition: var(--transition-normal);
}

.btn-view-more:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.4);
}

.btn-view-more:active {
  transform: translateY(0) scale(0.98);
}

.btn-view-more.btn-all-loaded {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  box-shadow: none;
  cursor: default;
  transform: none !important;
}

.view-more-badge {
  background: rgba(255, 255, 255, 0.28);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 800;
}

.view-more-progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 340px;
}

.view-more-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-subtle);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.view-more-progress-fill {
  height: 100%;
  background: var(--accent-gradient);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.view-more-status-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tool-card-animated {
  animation: cardEntrance 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --------------------------------------------------------------------------
   10. Tool Page Layout & Internal Workspaces
   -------------------------------------------------------------------------- */
.tool-page-header {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
  margin-bottom: 2.5rem;
  position: relative;
}

.tool-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-gradient);
}

.breadcrumb-nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.84rem;
  transition: var(--transition-fast);
}

.breadcrumb-item:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
}

.breadcrumb-separator {
  color: var(--text-muted);
  font-size: 0.75rem;
  user-select: none;
}

.breadcrumb-current {
  background: var(--accent-glow);
  border-color: rgba(99, 102, 241, 0.3);
  color: var(--accent-primary);
  font-weight: 700;
}

/* Return to Home Pill Button in Header & Breadcrumb */
.btn-return-home-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-fast);
  text-decoration: none !important;
}

.btn-return-home-pill:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  box-shadow: 0 4px 12px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-return-home-pill svg {
  transition: transform 0.2s ease;
}

.btn-return-home-pill:hover svg {
  transform: translateX(-3px);
}

/* Floating Return to Home Button on Tool Pages */
.btn-floating-return {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: var(--transition-normal);
  text-decoration: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-floating-return:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-2px);
}

.btn-floating-return svg {
  transition: transform 0.2s ease;
}

.btn-floating-return:hover svg {
  transform: translateX(-3px);
}

@media (max-width: 768px) {
  .btn-floating-return {
    bottom: 1rem;
    left: 1rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
  }
}

.tool-page-title {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 0.65rem;
  color: var(--text-primary);
}

.tool-page-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 850px;
  line-height: 1.6;
}

.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-success);
  background: var(--accent-success-glow);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  margin-top: 0.85rem;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.tool-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  margin-bottom: 3.5rem;
}

@media (min-width: 992px) {
  .tool-layout.with-sidebar {
    grid-template-columns: 1fr 320px;
  }
}

/* Tool Main Workspace Card */
.tool-workspace {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.tool-workspace::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--card-highlight);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Sidebar & Related Tools */
.tool-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.sidebar-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.sidebar-card h3,
.sidebar-card h4 {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 1.15rem 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.sidebar-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sidebar-links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.95rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  transition: var(--transition-fast);
}

.sidebar-links li a:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.sidebar-links li a span.badge-mini {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(14, 165, 233, 0.14);
  color: var(--accent-primary);
}

/* --------------------------------------------------------------------------
   11. Form Elements & Modern Controls
   -------------------------------------------------------------------------- */
.form-group {
  margin-bottom: 1.4rem;
}

.form-label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.55rem;
  color: var(--text-primary);
}

.form-control,
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.85rem 1.1rem;
  font-size: 0.96rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-subtle);
  color: var(--text-primary);
  outline: none;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.form-textarea {
  min-height: 150px;
  resize: vertical;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
  line-height: 1.5;
}

.form-control:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent-primary);
  background: var(--bg-surface);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

/* Modern Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.6rem;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--accent-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px var(--accent-glow);
}

.btn-primary:hover {
  background: var(--accent-primary-hover);
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
}

.btn-sm {
  padding: 0.45rem 0.85rem;
  font-size: 0.86rem;
  border-radius: var(--radius-sm);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* File Dropzone */
.upload-dropzone {
  border: 2px dashed var(--border-color);
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  padding: 2.75rem 1.75rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-normal);
  position: relative;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
  border-color: var(--accent-primary);
  background: var(--accent-glow);
  transform: scale(1.01);
}

.dropzone-icon {
  font-size: 2.75rem;
  color: var(--accent-primary);
  margin-bottom: 0.85rem;
}

/* Output Code Box */
.output-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  position: relative;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.92rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.copy-float-btn {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 10;
}

/* Stats Counter Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1.15rem;
  margin: 1.75rem 0;
}

.stat-item {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  text-align: center;
  transition: var(--transition-fast);
}

.stat-item:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.stat-value {
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--accent-primary);
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   12. SEO Content & FAQ Accordion Section
   -------------------------------------------------------------------------- */
.seo-content-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 2.25rem;
  margin-top: 2.5rem;
  box-shadow: var(--shadow-sm);
}

.seo-content-card h2 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1.15rem;
  color: var(--text-primary);
}

.seo-content-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1.75rem 0 0.85rem;
  color: var(--text-primary);
}

.seo-content-card p,
.seo-content-card li {
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.65;
  margin-bottom: 0.85rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.faq-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  overflow: hidden;
  transition: var(--transition-fast);
}

.faq-item.open {
  border-color: var(--accent-primary);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  width: 100%;
  padding: 1.15rem 1.35rem;
  text-align: left;
  font-weight: 700;
  font-size: 1.02rem;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text-primary);
}

.faq-toggle-icon {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-primary);
  transition: transform 0.25s ease;
}

.faq-item.open .faq-toggle-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.35rem 1.15rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  display: none;
}

.faq-item.open .faq-answer {
  display: block;
}

/* --------------------------------------------------------------------------
   13. Quick Search Modal (Command Palette / Ctrl+K)
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 4.5rem 1rem 1rem;
}

.modal-overlay.active {
  display: flex;
}

.search-modal {
  width: 100%;
  max-width: 640px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--border-color);
  overflow: hidden;
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.search-modal-header {
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--bg-subtle);
}

.search-modal-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-primary);
  outline: none;
}

.search-results-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 0.65rem;
  list-style: none;
}

.search-result-item a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.search-result-item.selected a,
.search-result-item a:hover {
  background: var(--accent-glow);
  color: var(--accent-primary);
  transform: translateX(4px);
}

.search-modal-footer {
  padding: 0.75rem 1.4rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
}

.kbd-shortcut {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  padding: 0.1rem 0.4rem;
  font-weight: 700;
  font-family: monospace;
}

/* --------------------------------------------------------------------------
   14. Toast Notifications & Floating Back to Top
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  pointer-events: none;
}

.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: auto;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Floating Back-to-Top Button */
.btn-back-to-top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: var(--transition-normal);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.btn-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-back-to-top:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   15. Footer (Modern Multi-Column Developer Platform Layout)
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: 4.5rem 0 2.5rem;
  font-size: 0.92rem;
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--card-highlight);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr repeat(4, 1fr);
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-brand .logo-wrapper {
  margin-bottom: 0.85rem;
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.25rem;
  max-width: 320px;
  line-height: 1.65;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.system-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  box-shadow: var(--shadow-xs);
}

.system-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.footer-col h4 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 1.15rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.footer-links a:hover {
  color: var(--accent-primary);
  transform: translateX(3px);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.86rem;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-bottom-links a {
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition-fast);
}

.footer-bottom-links a:hover {
  color: var(--accent-primary);
}

.btn-scroll-top-footer {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-scroll-top-footer:hover {
  background: var(--accent-primary);
  color: #ffffff;
  border-color: var(--accent-primary);
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .footer-brand {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-brand {
    grid-column: span 1;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   16. Disabled / Cleaned Ad Slots (Zero Interference)
   -------------------------------------------------------------------------- */
.ad-slot,
.ad-slot-leaderboard,
.ad-slot-sidebar,
.sponsor-banner,
.sponsor-hostinger,
.sponsor-nordvpn,
.sponsor-digitalocean,
.sponsor-vercel,
.sponsor-jetbrains {
  display: none !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  border: none !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   17. Global Search Modal & Command Palette (Ctrl+K)
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(9, 13, 22, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 1.25rem 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.search-modal {
  width: 100%;
  max-width: 660px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transform: translateY(-20px) scale(0.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.modal-overlay.active .search-modal {
  transform: translateY(0) scale(1);
}

.search-modal-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.search-modal-header svg {
  color: var(--accent-primary);
  flex-shrink: 0;
}

.search-modal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.08rem;
  color: var(--text-primary);
  font-weight: 500;
  font-family: inherit;
}

.search-modal-input::placeholder {
  color: var(--text-muted);
}

.search-results-list {
  list-style: none;
  max-height: 400px;
  overflow-y: auto;
  padding: 0.65rem;
  margin: 0;
}

.search-result-item {
  margin-bottom: 0.25rem;
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
}

.search-result-item a {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.75rem 0.95rem;
  text-decoration: none !important;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.search-result-item:hover,
.search-result-item.selected {
  background: var(--bg-hover);
}

.search-result-item.selected a {
  color: var(--accent-primary);
}

.search-result-item.selected .tool-badge {
  background: var(--accent-primary);
  color: #ffffff;
}

.search-result-item .tool-badge {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent-primary);
  white-space: nowrap;
}

.search-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-subtle);
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kbd-shortcut {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  padding: 0.12rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   18. Responsive Media Queries
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;
  }
  .nav-actions .shortcut-badge {
    display: none;
  }
  .hero-search-input {
    padding-left: 2.8rem;
    padding-right: 2.8rem;
    font-size: 0.95rem;
  }
  .tool-workspace {
    padding: 1.4rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .btn-back-to-top {
    bottom: 1rem;
    left: 1rem;
  }
  .toast-container {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }
  .modal-overlay {
    padding-top: 5vh;
  }
}

/* ==========================================================================
   19. Tool-Specific Component Styles
   Consolidated from individual tool pages into single master stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tool-specific styles: aspect-ratio-calculator
   -------------------------------------------------------------------------- */
.ratio-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
    .ratio-btn {
      padding: 6px 14px;
      font-size: 12.5px;
      font-weight: 600;
      border-radius: 6px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      cursor: pointer;
      transition: var(--transition-normal);
    }
    .ratio-btn:hover, .ratio-btn.active {
      border-color: var(--accent-primary);
      color: var(--accent-primary);
      background: rgba(99, 102, 241, 0.1);
    }
    .preview-stage {
      background: #0f172a;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }
    .preview-box {
      background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
      font-size: 12px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.3);
      max-width: 100%;
      max-height: 100%;
      transition: all 0.25s ease;
    }

/* --------------------------------------------------------------------------
   Tool-specific styles: base64-encoder-decoder
   -------------------------------------------------------------------------- */
.base64-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
    .tab-btn {
      padding: 8px 18px;
      font-weight: 600;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-secondary);
      cursor: pointer;
      transition: var(--transition-normal);
    }
    .tab-btn.active {
      background: var(--accent-primary);
      color: #fff;
      border-color: var(--accent-primary);
    }
    .file-dropzone {
      border: 2px dashed var(--border-color);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      text-align: center;
      cursor: pointer;
      background: var(--bg-subtle);
      transition: var(--transition-normal);
      margin-bottom: 16px;
    }
    .file-dropzone:hover { border-color: var(--accent-primary); }
    .preview-thumb {
      max-width: 180px;
      max-height: 140px;
      border-radius: 6px;
      object-fit: contain;
      margin: 10px auto;
      display: block;
      border: 1px solid var(--border-color);
    }

/* --------------------------------------------------------------------------
   Tool-specific styles: contrast-checker
   -------------------------------------------------------------------------- */
.badge-pass {
      background: #10b981;
      color: #ffffff;
      padding: 0.25rem 0.6rem;
      border-radius: var(--radius-sm);
      font-weight: 700;
      font-size: 0.8rem;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }
    .badge-fail {
      background: #ef4444;
      color: #ffffff;
      padding: 0.25rem 0.6rem;
      border-radius: var(--radius-sm);
      font-weight: 700;
      font-size: 0.8rem;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

/* --------------------------------------------------------------------------
   Tool-specific styles: credit-card-validator
   -------------------------------------------------------------------------- */
.card-graphic {
      max-width: 270px;
      margin: 0 auto 16px;
      background: linear-gradient(135deg, #1e293b, #0f172a);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 12px;
      padding: 14px 18px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.3);
      color: #fff;
      position: relative;
    }
    .card-chip {
      width: 30px;
      height: 22px;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      border-radius: 4px;
      margin-bottom: 12px;
    }
    .card-display-num {
      font-size: 14.5px;
      letter-spacing: 1.5px;
      font-family: var(--font-mono);
      margin-bottom: 12px;
    }
    .card-brand-badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--accent-primary);
    }
    .validation-status {
      padding: 12px 16px;
      border-radius: var(--radius-md);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
    }
    .status-valid { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }
    .status-invalid { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }

/* --------------------------------------------------------------------------
   Tool-specific styles: css-minifier
   -------------------------------------------------------------------------- */
.stats-card {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }
    .stat-box {
      background: var(--bg-subtle);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: 12px;
      text-align: center;
    }
    .stat-value {
      font-size: 20px;
      font-weight: 800;
      font-family: var(--font-mono);
      color: var(--accent-primary);
    }
    .stat-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }

/* --------------------------------------------------------------------------
   Tool-specific styles: favicon-generator
   -------------------------------------------------------------------------- */
.favicon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    @media (max-width: 860px) { .favicon-grid { grid-template-columns: 1fr; } }
    .preview-sizes {
      display: flex;
      align-items: flex-end;
      gap: 16px;
      padding: 24px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      margin-bottom: 20px;
      overflow-x: auto;
    }
    .size-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .size-box canvas {
      border: 1px solid var(--border-color);
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    .size-box span { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   Tool-specific styles: html-entity-encoder
   -------------------------------------------------------------------------- */
.entity-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .entity-table th, .entity-table td {
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      text-align: left;
    }
    .entity-table th { background: var(--bg-subtle); }
    .entity-row { cursor: pointer; transition: var(--transition-normal); }
    .entity-row:hover { background: rgba(99, 102, 241, 0.08); }
    .entity-char { font-size: 16px; font-weight: bold; text-align: center; }

/* --------------------------------------------------------------------------
   Tool-specific styles: http-status-codes
   -------------------------------------------------------------------------- */
.status-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
    .status-badge {
      display: inline-block;
      padding: 4px 10px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 6px;
      font-family: var(--font-mono);
    }
    .badge-2xx { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }
    .badge-3xx { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
    .badge-4xx { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
    .badge-5xx { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
    .badge-1xx { background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }
    .status-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 18px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: var(--transition-normal);
    }
    .status-card:hover {
      border-color: var(--accent-primary);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .detail-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 20px;
    }
    .detail-modal {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      max-width: 680px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      padding: 28px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

/* --------------------------------------------------------------------------
   Tool-specific styles: ip-lookup
   -------------------------------------------------------------------------- */
.ip-hero-card {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
      border: 1px solid var(--accent-primary);
      border-radius: var(--radius-md);
      padding: 14px 18px;
      text-align: center;
      margin-bottom: 18px;
    }
    .ip-display-text {
      font-size: 22px;
      font-weight: 700;
      font-family: var(--font-mono);
      color: var(--accent-primary);
      margin: 4px 0;
      letter-spacing: 0.5px;
    }
    .data-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    .data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-color); font-size: 13.5px; }
    .data-table td:first-child { font-weight: 600; color: var(--text-secondary); width: 180px; }
    .data-table td:last-child { font-family: var(--font-mono); color: var(--text-primary); }

/* --------------------------------------------------------------------------
   Tool-specific styles: js-minifier
   -------------------------------------------------------------------------- */
.stats-card {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }
    .stat-box {
      background: var(--bg-subtle);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: 12px;
      text-align: center;
    }
    .stat-value {
      font-size: 20px;
      font-weight: 800;
      font-family: var(--font-mono);
      color: var(--accent-primary);
    }
    .stat-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }

/* --------------------------------------------------------------------------
   Tool-specific styles: markdown-previewer
   -------------------------------------------------------------------------- */
.md-toolbar {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      background: var(--bg-subtle);
      padding: 8px 12px;
      border-radius: var(--radius-md) var(--radius-md) 0 0;
      border: 1px solid var(--border-color);
      border-bottom: none;
    }
    .tb-btn {
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      border-radius: 4px;
      cursor: pointer;
      transition: var(--transition-normal);
    }
    .tb-btn:hover {
      background: var(--accent-primary);
      color: #fff;
      border-color: var(--accent-primary);
    }
    .md-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border: 1px solid var(--border-color);
      border-radius: 0 0 var(--radius-md) var(--radius-md);
      min-height: 480px;
    }
    @media (max-width: 860px) {
      .md-container { grid-template-columns: 1fr; }
    }
    #md-input {
      width: 100%;
      height: 100%;
      min-height: 480px;
      border: none;
      border-right: 1px solid var(--border-color);
      border-radius: 0;
      resize: none;
      padding: 16px;
      font-family: var(--font-mono);
      font-size: 13.5px;
      line-height: 1.6;
      background: var(--bg-card);
      color: var(--text-primary);
    }
    #md-preview {
      padding: 20px;
      background: var(--bg-card);
      overflow-y: auto;
      height: 100%;
      max-height: 600px;
      line-height: 1.7;
    }
    #md-preview h1, #md-preview h2, #md-preview h3 {
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 6px;
      margin-top: 16px;
    }
    #md-preview pre {
      background: var(--bg-subtle);
      padding: 12px;
      border-radius: 6px;
      overflow-x: auto;
    }
    #md-preview code {
      font-family: var(--font-mono);
      font-size: 12.5px;
      background: rgba(99, 102, 241, 0.1);
      padding: 2px 6px;
      border-radius: 4px;
    }
    #md-preview table {
      width: 100%;
      border-collapse: collapse;
      margin: 14px 0;
    }
    #md-preview th, #md-preview td {
      border: 1px solid var(--border-color);
      padding: 8px 12px;
    }
    #md-preview th { background: var(--bg-subtle); }
    #md-preview blockquote {
      border-left: 4px solid var(--accent-primary);
      padding-left: 14px;
      color: var(--text-secondary);
      margin: 14px 0;
    }

/* --------------------------------------------------------------------------
   Tool-specific styles: meta-tag-generator
   -------------------------------------------------------------------------- */
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    @media (max-width: 900px) { .meta-grid { grid-template-columns: 1fr; } }
    .google-preview {
      font-family: Arial, sans-serif;
      background: #fff;
      color: #202124;
      padding: 14px;
      border-radius: 8px;
      border: 1px solid #dfe1e5;
    }
    .google-url { font-size: 12px; color: #202124; margin-bottom: 4px; }
    .google-title { font-size: 18px; color: #1a0dab; text-decoration: none; cursor: pointer; line-height: 1.3; margin-bottom: 4px; }
    .google-desc { font-size: 13px; color: #4d5156; line-height: 1.5; }
    .social-preview {
      border: 1px solid var(--border-color);
      border-radius: 12px;
      overflow: hidden;
      background: var(--bg-card);
      margin-top: 10px;
    }
    .social-img {
      width: 100%;
      height: 110px;
      object-fit: cover;
      background: #1e293b;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 12px;
    }
    .social-body { padding: 12px; }
    .social-domain { font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.5px; }
    .social-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
    .social-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
    .counter-badge { font-size: 11.5px; font-weight: 600; }
    .counter-good { color: #22c55e; }
    .counter-warn { color: #f59e0b; }

/* --------------------------------------------------------------------------
   Tool-specific styles: number-base-converter
   -------------------------------------------------------------------------- */
.base-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
    .base-tab-btn {
      padding: 10px 20px;
      font-weight: 600;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-secondary);
      cursor: pointer;
      transition: var(--transition-normal);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .base-tab-btn.active {
      background: var(--accent-primary);
      color: #fff;
      border-color: var(--accent-primary);
      box-shadow: 0 4px 12px var(--accent-glow);
    }
    .input-error {
      border-color: #ef4444 !important;
      background: rgba(239, 68, 68, 0.05) !important;
    }
    .error-msg {
      font-size: 11.5px;
      color: #ef4444;
      margin-top: 4px;
      display: none;
    }
    .bitwise-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 14px;
      font-size: 13.5px;
    }
    .bitwise-table th, .bitwise-table td {
      padding: 10px 14px;
      border: 1px solid var(--border-color);
    }
    .bitwise-table th {
      background: var(--bg-subtle);
      text-align: left;
    }
    .bitwise-table td {
      font-family: var(--font-mono);
    }
    .bit-pill {
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-secondary);
      cursor: pointer;
    }
    .bit-pill.active {
      background: var(--accent-primary);
      color: #fff;
      border-color: var(--accent-primary);
    }

/* --------------------------------------------------------------------------
   Tool-specific styles: slug-generator
   -------------------------------------------------------------------------- */
.slug-preview-box {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
      border: 1px solid var(--accent-primary);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      margin-bottom: 24px;
      font-family: var(--font-mono);
      font-size: 15px;
      word-break: break-all;
    }

/* --------------------------------------------------------------------------
   Tool-specific styles: svg-to-png
   -------------------------------------------------------------------------- */
.svg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    @media (max-width: 860px) { .svg-grid { grid-template-columns: 1fr; } }
    .checker-board {
      background-color: #1e293b;
      background-image: linear-gradient(45deg, #0f172a 25%, transparent 25%), linear-gradient(-45deg, #0f172a 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #0f172a 75%), linear-gradient(-45deg, transparent 75%, #0f172a 75%);
      background-size: 16px 16px;
      background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 160px;
      max-height: 220px;
      padding: 12px;
      overflow: auto;
    }
    #preview-canvas { max-width: 100%; max-height: 200px; object-fit: contain; }
    .dim-btn {
      padding: 4px 10px;
      font-size: 11.5px;
      font-weight: 600;
      border-radius: 4px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      cursor: pointer;
    }
    .dim-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* --------------------------------------------------------------------------
   Tool-specific styles: text-diff
   -------------------------------------------------------------------------- */
.diff-inputs-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 20px;
    }
    @media (max-width: 768px) {
      .diff-inputs-grid { grid-template-columns: 1fr; }
    }
    .diff-viewer {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      overflow-x: auto;
      font-family: var(--font-mono);
      font-size: 13px;
    }
    .diff-line {
      display: flex;
      padding: 3px 12px;
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-all;
    }
    .diff-ln {
      width: 44px;
      user-select: none;
      color: var(--text-muted);
      text-align: right;
      padding-right: 12px;
      flex-shrink: 0;
    }
    .diff-sign {
      width: 20px;
      user-select: none;
      text-align: center;
      flex-shrink: 0;
      font-weight: bold;
    }
    .diff-content { flex: 1; }
    .line-added { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
    .line-added .diff-sign { color: #22c55e; }
    .line-deleted { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
    .line-deleted .diff-sign { color: #ef4444; }
    .line-equal { color: var(--text-secondary); }
    .diff-split-table {
      width: 100%;
      border-collapse: collapse;
    }
    .diff-split-table td {
      width: 50%;
      vertical-align: top;
      padding: 2px 8px;
      font-family: var(--font-mono);
      font-size: 13px;
      border-right: 1px solid var(--border-color);
    }
    .stat-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-mono);
    }

/* --------------------------------------------------------------------------
   Tool-specific styles: timestamp-converter
   -------------------------------------------------------------------------- */
.epoch-live-card {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
      border: 1px solid var(--accent-primary);
      border-radius: var(--radius-md);
      padding: 12px 18px;
      text-align: center;
      margin-bottom: 18px;
    }
    .epoch-number {
      font-size: 22px;
      font-weight: 700;
      font-family: var(--font-mono);
      color: var(--accent-primary);
      letter-spacing: 0.5px;
    }
    .result-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
    .result-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-color); font-size: 13.5px; }
    .result-table td:first-child { font-weight: 600; color: var(--text-secondary); width: 180px; }
    .result-table td:last-child { font-family: var(--font-mono); color: var(--text-primary); }

/* --------------------------------------------------------------------------
   Tool-specific styles: typing-test
   -------------------------------------------------------------------------- */
.char-correct {
      color: #10b981;
      background: rgba(16, 185, 129, 0.1);
    }
    .char-incorrect {
      color: #ef4444;
      background: rgba(239, 68, 68, 0.2);
      text-decoration: underline;
    }
    .char-current {
      background: var(--accent-primary);
      color: #ffffff;
      border-radius: 2px;
    }

/* --------------------------------------------------------------------------
   Tool-specific styles: user-agent-parser
   -------------------------------------------------------------------------- */
.specs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 14px;
      margin-bottom: 24px;
    }
    .spec-card {
      background: var(--bg-subtle);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: 16px;
    }
    .spec-icon { font-size: 24px; margin-bottom: 6px; }
    .spec-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; }
    .spec-val { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Netlify Badge & Drawer Removal
   -------------------------------------------------------------------------- */
netlify-drawer,
#netlify-drawer-widget,
iframe[id*="netlify"],
iframe[title*="Netlify"],
[class*="netlify-drawer"],
[data-netlify-deploy-id],
[class*="netlify-feedback"],
div[id*="netlify"],
a[href*="netlify.com"][class*="badge"],
div:has(> a[href*="netlify.com"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Shared classes extracted from the HTML pages */
body.page-age-calculator .inline-1 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-age-calculator .inline-2 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; align-items: flex-end;}
body.page-age-calculator .inline-3 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; margin-bottom: 1.5rem;}
body.page-age-calculator .inline-4 {font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 700; margin-bottom: 0.5rem;}
body.page-age-calculator .inline-5 {font-size: 2.2rem; font-weight: 900; color: var(--accent-primary); line-height: 1.2;}
body.page-age-calculator .inline-6 {font-size: 0.95rem; color: var(--text-secondary); margin-top: 0.5rem;}
body.page-age-calculator .inline-7 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-age-calculator .inline-8 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-age-calculator .inline-9 {font-size: 0.8rem; color: var(--text-secondary);}
body.page-age-calculator .inline-10 {font-size: 1.4rem; font-weight: 800; color: var(--accent-success); margin-top: 0.25rem;}
body.page-age-calculator .inline-11 {font-size: 1.4rem; font-weight: 800; color: var(--accent-primary); margin-top: 0.25rem;}
body.page-age-calculator .inline-12 {font-size: 1.4rem; font-weight: 800; color: var(--accent-info); margin-top: 0.25rem;}
body.page-age-calculator .inline-13 {font-size: 1.2rem; font-weight: 800; color: #a855f7; margin-top: 0.25rem;}
body.page-age-calculator .inline-14 {margin-top: 3rem;}
body.page-api-tester .inline-15 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-api-tester .inline-16 {display: flex; gap: 0.5rem; flex-wrap: wrap;}
body.page-api-tester .inline-17 {width: 120px; font-weight: 700;}
body.page-api-tester .inline-18 {flex: 1; min-width: 250px; font-family: monospace;}
body.page-api-tester .inline-19 {justify-content: flex-start; margin: 1.25rem 0 0.75rem;}
body.page-api-tester .inline-20 {display: flex; flex-direction: column; gap: 0.5rem;}
body.page-api-tester .inline-21 {display: flex; gap: 0.5rem;}
body.page-api-tester .inline-22 {flex: 1;}
body.page-api-tester .inline-23 {margin-top: 0.75rem;}
body.page-api-tester .inline-24 {display: none;}
body.page-api-tester .inline-25 {min-height: 120px; font-family: monospace; font-size: 0.85rem;}
body.page-api-tester .inline-26 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden;}
body.page-api-tester .inline-27 {padding: 1rem 1.25rem; background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;}
body.page-api-tester .inline-28 {display: flex; align-items: center; gap: 1rem;}
body.page-api-tester .inline-29 {display: inline-block; padding: 4px 10px; border-radius: 4px; font-weight: 800; font-family: monospace; background: var(--bg-surface); border: 1px solid var(--border-color);}
body.page-api-tester .inline-30 {font-size: 0.85rem; color: var(--text-secondary);}
body.page-api-tester .inline-31 {padding: 1.25rem;}
body.page-api-tester .inline-32 {font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.35rem;}
body.page-api-tester .inline-33 {background: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-family: monospace; font-size: 0.85rem; min-height: 220px; max-height: 400px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; margin: 0;}
body.page-api-tester .inline-34 {margin-top: 3rem;}
body.page-ascii-art-generator .inline-35 {background: var(--bg-subtle); padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;}
body.page-ascii-art-generator .inline-36 {flex: 1; min-width: 240px;}
body.page-ascii-art-generator .inline-37 {min-width: 180px;}
body.page-ascii-art-generator .inline-38 {background: var(--bg-surface); color: var(--accent-primary); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); font-family: monospace; font-size: 0.85rem; line-height: 1.2; overflow-x: auto; white-space: pre; min-height: 200px;}
body.page-ascii-art-generator .inline-39 {display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; align-items: center;}
body.page-ascii-art-generator .inline-40 {font-size: 0.875rem; color: var(--text-secondary);}
body.page-ascii-art-generator .inline-41 {margin-top: 3rem;}
body.page-aspect-ratio-calculator .inline-42 {color:var(--accent-primary);}
body.page-aspect-ratio-calculator .inline-43 {margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--text-secondary);}
body.page-aspect-ratio-calculator .inline-44 {grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 24px;}
body.page-aspect-ratio-calculator .inline-45 {padding: 24px;}
body.page-aspect-ratio-calculator .inline-46 {font-size: 18px; margin-bottom: 16px;}
body.page-aspect-ratio-calculator .inline-47 {grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px;}
body.page-aspect-ratio-calculator .inline-48 {margin: 0;}
body.page-aspect-ratio-calculator .inline-49 {grid-template-columns: 1fr 1fr; gap: 14px;}
body.page-aspect-ratio-calculator .inline-50 {margin-top: 20px; padding: 12px; background: var(--bg-subtle); border-radius: 6px; font-size: 14px;}
body.page-aspect-ratio-calculator .inline-51 {color: var(--accent-primary);}
body.page-aspect-ratio-calculator .inline-52 {margin-top: 18px;}
body.page-aspect-ratio-calculator .inline-53 {display: flex; gap: 8px;}
body.page-aspect-ratio-calculator .inline-54 {font-family: var(--font-mono); font-size: 13px;}
body.page-aspect-ratio-calculator .inline-55 {margin: 2.5rem 0 1.5rem;}
body.page-aspect-ratio-calculator .inline-56 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-aspect-ratio-calculator .inline-57 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-aspect-ratio-calculator .inline-58 {margin-top: 24px;}
body.page-barcode-generator .inline-59 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 1.5rem; min-height: 240px; box-shadow: var(--shadow-sm);}
body.page-barcode-generator .inline-60 {background: #ffffff; padding: 1.5rem 2rem; border-radius: var(--radius-sm); border: 1px solid #e2e8f0; max-width: 100%; overflow-x: auto; display: flex; justify-content: center;}
body.page-barcode-generator .inline-61 {display: none; color: #ef4444; font-weight: 700; margin-top: 1rem; font-size: 0.9rem;}
body.page-barcode-generator .inline-62 {display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; justify-content: center;}
body.page-barcode-generator .inline-63 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-barcode-generator .inline-64 {font-size: 1.1rem; margin-top: 0; margin-bottom: 1.25rem;}
body.page-barcode-generator .inline-65 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem;}
body.page-barcode-generator .inline-66 {font-weight: 700;}
body.page-barcode-generator .inline-67 {font-family: monospace; font-weight: 700;}
body.page-barcode-generator .inline-68 {font-weight: 600;}
body.page-barcode-generator .inline-69 {display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; border-top: 1px solid var(--border-color); padding-top: 1.25rem;}
body.page-barcode-generator .inline-70 {display: flex; justify-content: space-between; margin-bottom: 0.35rem;}
body.page-barcode-generator .inline-71 {font-weight: 700; margin: 0;}
body.page-barcode-generator .inline-72 {font-weight: 700; color: var(--accent-primary);}
body.page-barcode-generator .inline-73 {width: 100%;}
body.page-barcode-generator .inline-74 {display: flex; align-items: center;}
body.page-barcode-generator .inline-75 {display: flex; align-items: center; gap: 0.5rem; font-weight: 600; cursor: pointer; margin-top: 1rem;}
body.page-barcode-generator .inline-76 {display: flex; gap: 1.5rem; flex-wrap: wrap; border-top: 1px solid var(--border-color); padding-top: 1.25rem;}
body.page-barcode-generator .inline-77 {display: flex; gap: 0.5rem; align-items: center;}
body.page-barcode-generator .inline-78 {width: 44px; height: 38px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; padding: 2px;}
body.page-barcode-generator .inline-79 {width: 100px; font-family: monospace; font-weight: 700;}
body.page-base64-encoder-decoder .inline-80 {color:var(--accent-primary);}
body.page-base64-encoder-decoder .inline-81 {padding: 24px; margin-bottom: 24px;}
body.page-base64-encoder-decoder .inline-82 {grid-template-columns: 1fr 1fr; gap: 20px;}
body.page-base64-encoder-decoder .inline-83 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;}
body.page-base64-encoder-decoder .inline-84 {margin: 0;}
body.page-base64-encoder-decoder .inline-85 {padding: 2px 8px; font-size: 11px;}
body.page-base64-encoder-decoder .inline-86 {font-family: var(--font-mono); font-size: 13px;}
body.page-base64-encoder-decoder .inline-87 {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 16px;}
body.page-base64-encoder-decoder .inline-88 {display: flex; gap: 16px; font-size: 13.5px;}
body.page-base64-encoder-decoder .inline-89 {display: flex; align-items: center; gap: 6px; cursor: pointer;}
body.page-base64-encoder-decoder .inline-90 {display: flex; gap: 8px;}
body.page-base64-encoder-decoder .inline-91 {padding: 24px; margin-bottom: 24px; display: none;}
body.page-base64-encoder-decoder .inline-92 {font-size: 18px; margin-bottom: 14px;}
body.page-base64-encoder-decoder .inline-93 {display: none;}
body.page-base64-encoder-decoder .inline-94 {font-size: 20px; margin-bottom: 4px;}
body.page-base64-encoder-decoder .inline-95 {font-size: 14px;}
body.page-base64-encoder-decoder .inline-96 {font-size: 12px; color: var(--text-muted); margin-top: 2px;}
body.page-base64-encoder-decoder .inline-97 {display: none; text-align: center; margin-bottom: 16px;}
body.page-base64-encoder-decoder .inline-98 {font-size: 13px; color: var(--text-secondary); margin-top: 6px;}
body.page-base64-encoder-decoder .inline-99 {padding: 2px 10px; font-size: 11px;}
body.page-base64-encoder-decoder .inline-100 {font-family: var(--font-mono); font-size: 12.5px;}
body.page-base64-encoder-decoder .inline-101 {margin: 2.5rem 0 1.5rem;}
body.page-base64-encoder-decoder .inline-102 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-base64-encoder-decoder .inline-103 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-base64-encoder-decoder .inline-104 {margin-top: 24px;}
body.page-base64-image-converter .inline-105 {justify-content: flex-start; margin-bottom: 1.5rem;}
body.page-base64-image-converter .inline-106 {cursor: pointer; border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 2rem; text-align: center; background: var(--bg-surface); margin-bottom: 1.5rem;}
body.page-base64-image-converter .inline-107 {font-size: 2rem; margin-bottom: 0.5rem;}
body.page-base64-image-converter .inline-108 {margin-bottom: 0.25rem;}
body.page-base64-image-converter .inline-109 {color: var(--text-secondary); font-size: 0.85rem; margin: 0;}
body.page-base64-image-converter .inline-110 {display: none;}
body.page-base64-image-converter .inline-111 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-base64-image-converter .inline-112 {margin-bottom: 0;}
body.page-base64-image-converter .inline-113 {min-height: 200px; font-family: monospace; font-size: 0.85rem; word-break: break-all;}
body.page-base64-image-converter .inline-114 {min-height: 180px; font-family: monospace; font-size: 0.85rem;}
body.page-base64-image-converter .inline-115 {margin-bottom: 1.5rem;}
body.page-base64-image-converter .inline-116 {display: none; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; text-align: center;}
body.page-base64-image-converter .inline-117 {margin-bottom: 1rem;}
body.page-base64-image-converter .inline-118 {max-height: 260px; max-width: 100%; object-fit: contain; border-radius: 4px; border: 1px solid var(--border-color); padding: 4px; background: #fff;}
body.page-base64-image-converter .inline-119 {margin-top: 3rem;}
body.page-bcrypt-generator .inline-120 {justify-content: flex-start; margin-bottom: 1.5rem;}
body.page-bcrypt-generator .inline-121 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md);}
body.page-bcrypt-generator .inline-122 {display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1.25rem;}
body.page-bcrypt-generator .inline-123 {width: 140px;}
body.page-bcrypt-generator .inline-124 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-bcrypt-generator .inline-125 {margin-bottom: 0;}
body.page-bcrypt-generator .inline-126 {font-family: monospace; font-size: 0.95rem; background: var(--bg-subtle);}
body.page-bcrypt-generator .inline-127 {display: none;}
body.page-bcrypt-generator .inline-128 {font-family: monospace;}
body.page-bcrypt-generator .inline-129 {margin-bottom: 1rem;}
body.page-bcrypt-generator .inline-130 {display: none; padding: 1rem; border-radius: var(--radius-md); font-weight: 600;}
body.page-bcrypt-generator .inline-131 {margin-top: 3rem;}
body.page-binary-to-text .inline-132 {justify-content: flex-start; margin-bottom: 1.5rem;}
body.page-binary-to-text .inline-133 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
body.page-binary-to-text .inline-134 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-binary-to-text .inline-135 {margin-bottom: 0;}
body.page-binary-to-text .inline-136 {min-height: 260px; font-family: monospace; font-size: 0.95rem;}
body.page-binary-to-text .inline-137 {min-height: 260px; font-family: monospace; font-size: 0.95rem; background: var(--bg-surface);}
body.page-binary-to-text .inline-138 {margin-top: 3rem;}
body.page-bmi-calculator .inline-139 {justify-content: flex-start; margin-bottom: 1.5rem;}
body.page-bmi-calculator .inline-140 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;}
body.page-bmi-calculator .inline-141 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md);}
body.page-bmi-calculator .inline-142 {font-size: 1.1rem; margin-bottom: 1.25rem;}
body.page-bmi-calculator .inline-143 {display: none;}
body.page-bmi-calculator .inline-144 {display: flex; gap: 0.5rem;}
body.page-bmi-calculator .inline-145 {display: flex; flex-direction: column; gap: 1rem;}
body.page-bmi-calculator .inline-146 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; border-top: 4px solid var(--accent-primary);}
body.page-bmi-calculator .inline-147 {font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 700; margin-bottom: 0.25rem;}
body.page-bmi-calculator .inline-148 {font-size: 2.8rem; font-weight: 900; color: var(--accent-primary);}
body.page-bmi-calculator .inline-149 {display: inline-block; padding: 4px 12px; border-radius: var(--radius-full); font-weight: 700; font-size: 0.95rem; background: rgba(16, 185, 129, 0.15); color: var(--accent-success); margin-top: 0.5rem;}
body.page-bmi-calculator .inline-150 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-bmi-calculator .inline-151 {display: flex; justify-content: space-between; margin-bottom: 0.5rem;}
body.page-bmi-calculator .inline-152 {color: var(--text-secondary);}
body.page-bmi-calculator .inline-153 {display: flex; justify-content: space-between; border-top: 1px solid var(--border-color); padding-top: 0.5rem;}
body.page-bmi-calculator .inline-154 {color: var(--accent-primary); font-size: 1.1rem;}
body.page-bmi-calculator .inline-155 {margin-top: 3rem;}
body.page-border-radius-generator .inline-156 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 2.5rem; display: flex; align-items: center; justify-content: center; min-height: 300px; margin-bottom: 1.5rem;}
body.page-border-radius-generator .inline-157 {width: 220px; height: 220px; background: linear-gradient(135deg, var(--accent-primary) 0%, #ec4899 100%); transition: border-radius 0.2s; box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;}
body.page-border-radius-generator .inline-158 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-border-radius-generator .inline-159 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;}
body.page-border-radius-generator .inline-160 {font-size: 1.1rem; margin: 0;}
body.page-border-radius-generator .inline-161 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;}
body.page-border-radius-generator .inline-162 {width: 100%;}
body.page-border-radius-generator .inline-163 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-border-radius-generator .inline-164 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-border-radius-generator .inline-165 {margin-bottom: 0; font-weight: 700;}
body.page-border-radius-generator .inline-166 {background: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-family: monospace; font-size: 0.95rem; margin: 0; color: var(--accent-primary);}
body.page-border-radius-generator .inline-167 {margin-top: 3rem;}
body.page-case-converter .inline-168 {margin-bottom: 0.75rem;}
body.page-case-converter .inline-169 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem;}
body.page-case-converter .inline-170 {margin-bottom: 0;}
body.page-case-converter .inline-171 {font-size: 0.85rem; color: var(--text-muted);}
body.page-case-converter .inline-172 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.75rem 1rem; margin-bottom: 0.75rem;}
body.page-case-converter .inline-173 {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;}
body.page-case-converter .inline-174 {display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;}
body.page-case-converter .inline-175 {width: 1px; height: 22px; background: var(--border-color); margin: 0 0.2rem;}
body.page-case-converter .inline-176 {padding: 0.25rem 0.6rem; font-size: 0.8rem;}
body.page-case-converter .inline-177 {display: none; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.75rem; margin-top: 0.75rem;}
body.page-case-converter .inline-178 {display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;}
body.page-case-converter .inline-179 {flex: 1; min-width: 160px; height: 32px; font-size: 0.85rem;}
body.page-case-converter .inline-180 {display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;}
body.page-case-converter .inline-181 {height: 32px;}
body.page-case-converter .inline-182 {font-size: 0.8rem; font-weight: 700; color: var(--accent-primary);}
body.page-case-converter .inline-183 {flex: 1; min-width: 150px; height: 32px; font-size: 0.85rem;}
body.page-case-converter .inline-184 {width: 130px; height: 32px; font-size: 0.85rem; padding: 0.2rem 0.4rem;}
body.page-case-converter .inline-185 {min-height: 240px; font-size: 15px; line-height: 1.6; border-radius: var(--radius-md);}
body.page-case-converter .inline-186 {display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem;}
body.page-case-converter .inline-187 {justify-content: flex-end; border-top: 1px solid var(--border-color); padding-top: 1rem;}
body.page-character-counter .inline-188 {margin-top: 0; margin-bottom: 1.5rem;}
body.page-character-counter .inline-189 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem;}
body.page-character-counter .inline-190 {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem;}
body.page-character-counter .inline-191 {display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;}
body.page-character-counter .inline-192 {width: 1px; height: 24px; background: var(--border-color); margin: 0 0.25rem;}
body.page-character-counter .inline-193 {color: #ef4444;}
body.page-character-counter .inline-194 {display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--border-color); padding-top: 0.75rem;}
body.page-character-counter .inline-195 {display: flex; align-items: center; gap: 0.35rem;}
body.page-character-counter .inline-196 {font-size: 0.8rem; font-weight: 700; color: var(--text-secondary);}
body.page-character-counter .inline-197 {padding: 0.2rem 0.55rem; font-size: 0.8rem;}
body.page-character-counter .inline-198 {width: 1px; height: 20px; background: var(--border-color); margin: 0 0.2rem;}
body.page-character-counter .inline-199 {display: none; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin-top: 0.75rem;}
body.page-character-counter .inline-200 {display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;}
body.page-character-counter .inline-201 {flex: 1; min-width: 160px; height: 34px; font-size: 0.85rem;}
body.page-character-counter .inline-202 {display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;}
body.page-character-counter .inline-203 {height: 34px;}
body.page-character-counter .inline-204 {font-size: 0.8rem; font-weight: 700; color: var(--accent-primary);}
body.page-character-counter .inline-205 {margin-bottom: 1.5rem;}
body.page-character-counter .inline-206 {min-height: 240px; font-size: 15px; line-height: 1.6; border-radius: var(--radius-md);}
body.page-character-counter .inline-207 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-top: 1.5rem;}
body.page-character-counter .inline-208 {font-size: 1.1rem; margin-bottom: 1.25rem;}
body.page-character-counter .inline-209 {display: flex; flex-direction: column; gap: 1rem;}
body.page-character-counter .inline-210 {display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.35rem;}
body.page-character-counter .inline-211 {font-weight: 600;}
body.page-character-counter .inline-212 {background: var(--bg-subtle); border-radius: var(--radius-full); height: 8px; overflow: hidden;}
body.page-character-counter .inline-213 {width: 0%; height: 100%; background: var(--accent-primary); transition: width 0.2s;}
body.page-character-counter .inline-214 {width: 0%; height: 100%; background: #10b981; transition: width 0.2s;}
body.page-character-counter .inline-215 {width: 0%; height: 100%; background: #ec4899; transition: width 0.2s;}
body.page-character-counter .inline-216 {width: 0%; height: 100%; background: #f59e0b; transition: width 0.2s;}
body.page-character-counter .inline-217 {width: 0%; height: 100%; background: #0284c7; transition: width 0.2s;}
body.page-character-counter .inline-218 {margin-top: 3rem;}
body.page-character-counter .inline-219 {margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem;}
body.page-chmod-calculator .inline-220 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-chmod-calculator .inline-221 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md); text-align: center;}
body.page-chmod-calculator .inline-222 {font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.25rem;}
body.page-chmod-calculator .inline-223 {font-size: 2.2rem; font-weight: 900; font-family: monospace; color: var(--accent-primary);}
body.page-chmod-calculator .inline-224 {font-size: 1.8rem; font-weight: 800; font-family: monospace; color: var(--accent-success);}
body.page-chmod-calculator .inline-225 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; overflow-x: auto;}
body.page-chmod-calculator .inline-226 {width: 100%; border-collapse: collapse; min-width: 480px;}
body.page-chmod-calculator .inline-227 {border-bottom: 2px solid var(--border-color); text-align: left;}
body.page-chmod-calculator .inline-228 {padding: 10px 14px;}
body.page-chmod-calculator .inline-229 {border-bottom: 1px solid var(--border-color);}
body.page-chmod-calculator .inline-230 {padding: 12px 14px; font-weight: 700;}
body.page-chmod-calculator .inline-231 {padding: 12px 14px;}
body.page-chmod-calculator .inline-232 {width: 20px; height: 20px;}
body.page-chmod-calculator .inline-233 {background: var(--bg-subtle); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-chmod-calculator .inline-234 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-chmod-calculator .inline-235 {margin-bottom: 0; font-weight: 700;}
body.page-chmod-calculator .inline-236 {font-family: monospace; font-size: 1.05rem; font-weight: 700; color: var(--accent-primary);}
body.page-chmod-calculator .inline-237 {margin-top: 1.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;}
body.page-chmod-calculator .inline-238 {font-size: 0.85rem; color: var(--text-secondary);}
body.page-chmod-calculator .inline-239 {margin-top: 3rem;}
body.page-clip-path-generator .inline-240 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-clip-path-generator .inline-241 {font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; font-weight: 700;}
body.page-clip-path-generator .inline-242 {display: flex; gap: 0.5rem; flex-wrap: wrap;}
body.page-clip-path-generator .inline-243 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 3rem; display: flex; align-items: center; justify-content: center; min-height: 320px; margin-bottom: 1.5rem;}
body.page-clip-path-generator .inline-244 {width: 240px; height: 240px; background: linear-gradient(135deg, var(--accent-primary) 0%, #3b82f6 100%); transition: clip-path 0.2s; box-shadow: var(--shadow-lg);}
body.page-clip-path-generator .inline-245 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-clip-path-generator .inline-246 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-clip-path-generator .inline-247 {margin-bottom: 0; font-weight: 700;}
body.page-clip-path-generator .inline-248 {background: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-family: monospace; font-size: 0.95rem; margin: 0; color: var(--accent-primary);}
body.page-clip-path-generator .inline-249 {margin-top: 3rem;}
body.page-color-picker .inline-250 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; align-items: start; margin-bottom: 2rem;}
body.page-color-picker .inline-251 {display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem;}
body.page-color-picker .inline-252 {width: 100%; height: 180px; border-radius: var(--radius-md); background-color: #4f46e5; box-shadow: var(--shadow-md); margin-bottom: 1.25rem; transition: background-color 0.15s ease;}
body.page-color-picker .inline-253 {display: flex; align-items: center; gap: 1rem; width: 100%;}
body.page-color-picker .inline-254 {width: 50px; height: 44px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; padding: 2px;}
body.page-color-picker .inline-255 {font-family: 'Consolas', monospace; font-size: 1.1rem; font-weight: 700; text-transform: uppercase;}
body.page-color-picker .inline-256 {display: flex; flex-direction: column; gap: 0.85rem;}
body.page-color-picker .inline-257 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between;}
body.page-color-picker .inline-258 {font-size: 0.75rem; color: var(--text-muted); font-weight: 700;}
body.page-color-picker .inline-259 {font-family: 'Consolas', monospace; font-weight: 700; font-size: 1.05rem;}
body.page-color-picker .inline-260 {font-family: 'Consolas', monospace; font-weight: 700; font-size: 0.95rem;}
body.page-color-picker .inline-261 {border-top: 1px solid var(--border-color); padding-top: 1.5rem; margin-bottom: 2rem;}
body.page-color-picker .inline-262 {font-size: 1.15rem; margin-bottom: 1rem;}
body.page-color-picker .inline-263 {display: flex; flex-direction: column; gap: 1rem;}
body.page-color-picker .inline-264 {font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text-secondary);}
body.page-color-picker .inline-265 {display: flex; height: 50px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-color);}
body.page-color-picker .inline-266 {border-top: 1px solid var(--border-color); padding-top: 1.5rem;}
body.page-color-picker .inline-267 {font-size: 1.15rem; margin-bottom: 0.75rem;}
body.page-color-picker .inline-268 {font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem;}
body.page-color-picker .inline-269 {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;}
body.page-color-picker .inline-270 {padding: 1.25rem; border-radius: var(--radius-md); background-color: #4f46e5; color: #ffffff; text-align: center;}
body.page-color-picker .inline-271 {font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem;}
body.page-color-picker .inline-272 {font-size: 0.85rem;}
body.page-color-picker .inline-273 {display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); margin-top: 0.5rem; background: #fff; color: #10b981;}
body.page-color-picker .inline-274 {padding: 1.25rem; border-radius: var(--radius-md); background-color: #4f46e5; color: #000000; text-align: center;}
body.page-color-picker .inline-275 {display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: var(--radius-full); margin-top: 0.5rem; background: #000; color: #ef4444;}
body.page-compound-interest-calculator .inline-276 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;}
body.page-compound-interest-calculator .inline-277 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md);}
body.page-compound-interest-calculator .inline-278 {font-size: 1.1rem; margin-bottom: 1.25rem;}
body.page-compound-interest-calculator .inline-279 {display: flex; flex-direction: column; gap: 1rem;}
body.page-compound-interest-calculator .inline-280 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; border-top: 4px solid var(--accent-success);}
body.page-compound-interest-calculator .inline-281 {font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 700; margin-bottom: 0.25rem;}
body.page-compound-interest-calculator .inline-282 {font-size: 2.4rem; font-weight: 900; color: var(--accent-success);}
body.page-compound-interest-calculator .inline-283 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-compound-interest-calculator .inline-284 {display: flex; justify-content: space-between; margin-bottom: 0.5rem;}
body.page-compound-interest-calculator .inline-285 {color: var(--text-secondary);}
body.page-compound-interest-calculator .inline-286 {display: flex; justify-content: space-between; border-top: 1px solid var(--border-color); padding-top: 0.5rem;}
body.page-compound-interest-calculator .inline-287 {color: var(--text-secondary); font-weight: 700;}
body.page-compound-interest-calculator .inline-288 {color: var(--accent-success); font-size: 1.15rem;}
body.page-compound-interest-calculator .inline-289 {margin-top: 3rem;}
body.page-contrast-checker .inline-290 {display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-bottom: 1.5rem;}
body.page-contrast-checker .inline-291 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-contrast-checker .inline-292 {font-weight: 700;}
body.page-contrast-checker .inline-293 {display: flex; gap: 0.75rem; align-items: center;}
body.page-contrast-checker .inline-294 {width: 50px; height: 42px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; padding: 2px; background: transparent;}
body.page-contrast-checker .inline-295 {font-family: monospace; font-weight: 700; text-transform: uppercase;}
body.page-contrast-checker .inline-296 {height: 44px; width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; align-self: center;}
body.page-contrast-checker .inline-297 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 2rem; text-align: center; margin-bottom: 1.5rem;}
body.page-contrast-checker .inline-298 {font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 0.5rem; font-weight: 700;}
body.page-contrast-checker .inline-299 {font-size: 3.5rem; font-weight: 900; line-height: 1; color: var(--accent-primary); margin-bottom: 0.5rem;}
body.page-contrast-checker .inline-300 {font-size: 1rem; padding: 0.35rem 1rem;}
body.page-contrast-checker .inline-301 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-contrast-checker .inline-302 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem;}
body.page-contrast-checker .inline-303 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-contrast-checker .inline-304 {font-weight: 700; font-size: 0.9rem;}
body.page-contrast-checker .inline-305 {font-size: 0.8rem; color: var(--text-secondary);}
body.page-contrast-checker .inline-306 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-contrast-checker .inline-307 {font-size: 1rem; margin-bottom: 1rem;}
body.page-contrast-checker .inline-308 {padding: 2rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); transition: all 0.2s;}
body.page-contrast-checker .inline-309 {margin-top: 0; margin-bottom: 0.5rem; font-size: 1.75rem; font-weight: 800;}
body.page-contrast-checker .inline-310 {font-size: 1rem; line-height: 1.6; margin-bottom: 1rem;}
body.page-contrast-checker .inline-311 {padding: 0.6rem 1.2rem; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; border: 2px solid currentColor; background: transparent;}
body.page-contrast-checker .inline-312 {font-size: 0.85rem;}
body.page-contrast-checker .inline-313 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.75rem;}
body.page-contrast-checker .inline-314 {display: flex; gap: 0.5rem; flex-wrap: wrap;}
body.page-country-info .inline-315 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem;}
body.page-country-info .inline-316 {display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; margin-bottom: 1rem;}
body.page-country-info .inline-317 {position: relative;}
body.page-country-info .inline-318 {display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;}
body.page-country-info .inline-319 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap;}
body.page-country-info .inline-320 {flex: 1; min-width: 200px; padding: 0.55rem 0.85rem; font-size: 0.9rem;}
body.page-country-info .inline-321 {display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 1rem; align-items: center;}
body.page-country-info .inline-322 {font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); margin-right: 0.25rem;}
body.page-country-info .inline-323 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 2rem; margin-bottom: 2rem; box-shadow: var(--shadow-sm);}
body.page-country-info .inline-324 {display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem;}
body.page-country-info .inline-325 {width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);}
body.page-country-info .inline-326 {flex: 1; min-width: 240px;}
body.page-country-info .inline-327 {display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;}
body.page-country-info .inline-328 {margin: 0; font-size: 1.85rem; font-weight: 800; color: var(--text-primary);}
body.page-country-info .inline-329 {background: var(--bg-subtle); border: 1px solid var(--border-color); padding: 0.2rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 700; color: var(--accent-primary);}
body.page-country-info .inline-330 {font-size: 0.95rem; color: var(--text-secondary); margin-top: 0.25rem;}
body.page-country-info .inline-331 {display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;}
body.page-country-info .inline-332 {background: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color);}
body.page-country-info .inline-333 {font-size: 0.78rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 700;}
body.page-country-info .inline-334 {font-size: 1.15rem; font-weight: 700; margin-top: 0.25rem;}
body.page-country-info .inline-335 {display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--border-color); padding-top: 1.25rem;}
body.page-country-info .inline-336 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);}
body.page-country-info .inline-337 {font-size: 0.9rem; font-family: monospace; color: var(--accent-primary); font-weight: 700;}
body.page-country-info .inline-338 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 2rem;}
body.page-country-info .inline-339 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;}
body.page-country-info .inline-340 {margin: 0; font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem;}
body.page-country-info .inline-341 {background: rgba(14, 165, 233, 0.15); color: var(--accent-primary); font-size: 0.75rem;}
body.page-country-info .inline-342 {font-size: 0.82rem; color: var(--text-secondary);}
body.page-country-info .inline-343 {display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; max-height: 480px; overflow-y: auto; padding: 0.5rem 0.25rem;}
body.page-country-info .inline-344 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 2rem; margin-top: 2rem;}
body.page-country-info .inline-345 {margin-bottom: 1rem;}
body.page-country-info .inline-346 {font-size: 1.05rem;}
body.page-country-info .inline-347 {color: var(--text-secondary);}
body.page-credit-card-validator .inline-348 {color:var(--accent-primary);}
body.page-credit-card-validator .inline-349 {display: flex; justify-content: space-between; align-items: center;}
body.page-credit-card-validator .inline-350 {display: flex; justify-content: space-between; font-size: 11px; opacity: 0.8; font-family: var(--font-mono);}
body.page-credit-card-validator .inline-351 {font-size: 9px; display: block; opacity: 0.6;}
body.page-credit-card-validator .inline-352 {max-width: 580px; margin: 0 auto 32px; padding: 24px;}
body.page-credit-card-validator .inline-353 {font-family: var(--font-mono); font-size: 17px; letter-spacing: 1px;}
body.page-credit-card-validator .inline-354 {grid-template-columns: 2fr 1fr 1fr; gap: 12px;}
body.page-credit-card-validator .inline-355 {margin: 0;}
body.page-credit-card-validator .inline-356 {font-family: var(--font-mono); text-align: center;}
body.page-credit-card-validator .inline-357 {margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border-color); font-size: 12.5px; color: var(--text-muted);}
body.page-credit-card-validator .inline-358 {font-size: 18px; margin-bottom: 12px;}
body.page-credit-card-validator .inline-359 {font-size: 13px; color: var(--text-secondary); margin-bottom: 14px;}
body.page-credit-card-validator .inline-360 {display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;}
body.page-credit-card-validator .inline-361 {background: var(--bg-subtle); border: 1.5px solid var(--accent-primary); border-radius: var(--radius-md); padding: 16px; margin-top: 14px;}
body.page-credit-card-validator .inline-362 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
body.page-credit-card-validator .inline-363 {font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-primary);}
body.page-credit-card-validator .inline-364 {font-size: 11px; font-weight: 700; color: var(--accent-success); background: rgba(16, 185, 129, 0.12); padding: 2px 8px; border-radius: var(--radius-full);}
body.page-credit-card-validator .inline-365 {display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 10px;}
body.page-credit-card-validator .inline-366 {font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: 1px;}
body.page-credit-card-validator .inline-367 {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
body.page-credit-card-validator .inline-368 {display: flex; align-items: center; justify-content: space-between; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px 12px;}
body.page-credit-card-validator .inline-369 {font-size: 12px; color: var(--text-muted);}
body.page-credit-card-validator .inline-370 {color: var(--text-primary); font-family: var(--font-mono);}
body.page-credit-card-validator .inline-371 {padding: 2px 8px; font-size: 11px;}
body.page-credit-card-validator .inline-372 {display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 11.5px; color: var(--text-muted);}
body.page-credit-card-validator .inline-373 {font-size: 11px;}
body.page-credit-card-validator .inline-374 {max-width: 580px; margin: 0 auto;}
body.page-credit-card-validator .inline-375 {margin: 2.5rem 0 1.5rem;}
body.page-credit-card-validator .inline-376 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-credit-card-validator .inline-377 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-credit-card-validator .inline-378 {margin-top: 24px;}
body.page-cron-generator .inline-379 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-cron-generator .inline-380 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem;}
body.page-cron-generator .inline-381 {margin-bottom: 0; font-size: 0.85rem; color: var(--text-secondary);}
body.page-cron-generator .inline-382 {font-family: monospace; font-size: 1.5rem; font-weight: 800; letter-spacing: 2px; text-align: center; color: var(--accent-primary); margin-bottom: 1rem;}
body.page-cron-generator .inline-383 {background: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); border-left: 4px solid var(--accent-success); display: flex; align-items: center; gap: 0.75rem;}
body.page-cron-generator .inline-384 {font-size: 1.3rem;}
body.page-cron-generator .inline-385 {font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 700;}
body.page-cron-generator .inline-386 {font-size: 1.1rem; color: var(--text-primary);}
body.page-cron-generator .inline-387 {font-size: 1.1rem; margin-bottom: 1.25rem;}
body.page-cron-generator .inline-388 {display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem;}
body.page-cron-generator .inline-389 {background: var(--bg-subtle); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-cron-generator .inline-390 {font-size: 0.95rem; margin-bottom: 0.75rem;}
body.page-cron-generator .inline-391 {display: flex; gap: 0.5rem; flex-wrap: wrap;}
body.page-cron-generator .inline-392 {margin-top: 3rem;}
body.page-cron-generator .inline-393 {margin-left: 1.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem;}
body.page-csr-generator .inline-394 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-csr-generator .inline-395 {font-size: 1.1rem; margin-bottom: 1.25rem;}
body.page-csr-generator .inline-396 {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;}
body.page-csr-generator .inline-397 {text-transform: uppercase;}
body.page-csr-generator .inline-398 {margin-top: 1.5rem;}
body.page-csr-generator .inline-399 {display: none; flex-direction: column; gap: 1.5rem;}
body.page-csr-generator .inline-400 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-csr-generator .inline-401 {margin-bottom: 0; font-weight: 700;}
body.page-csr-generator .inline-402 {min-height: 180px; font-family: monospace; font-size: 0.85rem; background: var(--bg-surface);}
body.page-csr-generator .inline-403 {margin-bottom: 0; font-weight: 700; color: var(--accent-danger);}
body.page-csr-generator .inline-404 {margin-top: 3rem;}
body.page-css-beautifier .inline-405 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.85rem 1.25rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;}
body.page-css-beautifier .inline-406 {display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;}
body.page-css-beautifier .inline-407 {display: flex; align-items: center; gap: 0.4rem;}
body.page-css-beautifier .inline-408 {font-size: 0.85rem; font-weight: 600;}
body.page-css-beautifier .inline-409 {width: 110px; height: 32px; font-size: 0.85rem; padding: 0.2rem 0.5rem;}
body.page-css-beautifier .inline-410 {display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;}
body.page-css-beautifier .inline-411 {display: flex; gap: 0.4rem; align-items: center;}
body.page-css-beautifier .inline-412 {color: #ef4444;}
body.page-css-beautifier .inline-413 {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-css-beautifier .inline-414 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;}
body.page-css-beautifier .inline-415 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);}
body.page-css-beautifier .inline-416 {font-size: 0.8rem; color: var(--text-muted);}
body.page-css-beautifier .inline-417 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; resize: vertical;}
body.page-css-beautifier .inline-418 {font-size: 0.85rem; font-weight: 700; color: var(--accent-primary);}
body.page-css-beautifier .inline-419 {display: flex; gap: 0.35rem;}
body.page-css-beautifier .inline-420 {height: 24px; padding: 0 0.5rem; font-size: 0.75rem;}
body.page-css-beautifier .inline-421 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; background: var(--bg-surface); resize: vertical;}
body.page-css-box-shadow-generator .inline-422 {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;}
body.page-css-box-shadow-generator .inline-423 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md);}
body.page-css-box-shadow-generator .inline-424 {font-size: 1.1rem; margin-bottom: 1.25rem;}
body.page-css-box-shadow-generator .inline-425 {margin-bottom: 1rem;}
body.page-css-box-shadow-generator .inline-426 {display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.25rem;}
body.page-css-box-shadow-generator .inline-427 {width: 100%;}
body.page-css-box-shadow-generator .inline-428 {display: flex; justify-content: space-between; align-items: center; pt: 0.5rem; border-top: 1px solid var(--border-color); padding-top: 0.75rem;}
body.page-css-box-shadow-generator .inline-429 {display: flex; align-items: center; gap: 0.5rem;}
body.page-css-box-shadow-generator .inline-430 {margin-bottom: 0;}
body.page-css-box-shadow-generator .inline-431 {width: 40px; height: 32px; padding: 0; border: none; cursor: pointer; border-radius: 4px;}
body.page-css-box-shadow-generator .inline-432 {display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer;}
body.page-css-box-shadow-generator .inline-433 {width: 18px; height: 18px;}
body.page-css-box-shadow-generator .inline-434 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; min-height: 280px; padding: 2rem;}
body.page-css-box-shadow-generator .inline-435 {width: 180px; height: 180px; background: var(--bg-surface); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-primary); transition: box-shadow 0.1s;}
body.page-css-box-shadow-generator .inline-436 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-css-box-shadow-generator .inline-437 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-css-box-shadow-generator .inline-438 {margin-bottom: 0; font-weight: 700;}
body.page-css-box-shadow-generator .inline-439 {background: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-family: monospace; font-size: 0.95rem; margin: 0; color: var(--accent-primary);}
body.page-css-box-shadow-generator .inline-440 {margin-top: 3rem;}
body.page-css-gradient-generator .inline-441 {height: 220px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-md); margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center;}
body.page-css-gradient-generator .inline-442 {background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); padding: 0.5rem 1.25rem; border-radius: var(--radius-full); color: #fff; font-weight: 700; font-size: 0.95rem;}
body.page-css-gradient-generator .inline-443 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-css-gradient-generator .inline-444 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: center; margin-bottom: 1.25rem;}
body.page-css-gradient-generator .inline-445 {display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.25rem;}
body.page-css-gradient-generator .inline-446 {font-weight: 700;}
body.page-css-gradient-generator .inline-447 {width: 100%;}
body.page-css-gradient-generator .inline-448 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-css-gradient-generator .inline-449 {margin: 0;}
body.page-css-gradient-generator .inline-450 {padding: 2px 8px; font-size: 0.75rem;}
body.page-css-gradient-generator .inline-451 {display: flex; gap: 0.75rem;}
body.page-css-gradient-generator .inline-452 {flex: 1; height: 38px; border: none; cursor: pointer; border-radius: 4px; padding: 0;}
body.page-css-gradient-generator .inline-453 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem;}
body.page-css-gradient-generator .inline-454 {font-size: 0.85rem; color: var(--text-secondary); font-weight: 600;}
body.page-css-gradient-generator .inline-455 {padding: 3px 10px; font-size: 0.78rem;}
body.page-css-gradient-generator .inline-456 {display: flex; gap: 0.5rem; flex-wrap: wrap;}
body.page-css-gradient-generator .inline-457 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-css-gradient-generator .inline-458 {margin-bottom: 0; font-weight: 700;}
body.page-css-gradient-generator .inline-459 {display: flex; gap: 0.4rem;}
body.page-css-gradient-generator .inline-460 {background: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-family: monospace; font-size: 0.95rem; margin: 0; color: var(--accent-primary);}
body.page-css-gradient-generator .inline-461 {margin-top: 3rem;}
body.page-css-grid-generator .inline-462 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-css-grid-generator .inline-463 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.5rem;}
body.page-css-grid-generator .inline-464 {display: flex; gap: 0.5rem; flex-wrap: wrap;}
body.page-css-grid-generator .inline-465 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-css-grid-generator .inline-466 {display: flex; justify-content: space-between; margin-bottom: 0.35rem;}
body.page-css-grid-generator .inline-467 {font-weight: 700; margin: 0;}
body.page-css-grid-generator .inline-468 {font-weight: 700; color: var(--accent-primary);}
body.page-css-grid-generator .inline-469 {width: 100%;}
body.page-css-grid-generator .inline-470 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem; min-height: 280px;}
body.page-css-grid-generator .inline-471 {display: grid; min-height: 240px; transition: all 0.2s;}
body.page-css-grid-generator .inline-472 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-css-grid-generator .inline-473 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;}
body.page-css-grid-generator .inline-474 {display: flex; gap: 0.5rem;}
body.page-css-grid-generator .inline-475 {background: var(--bg-subtle); padding: 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-family: monospace; font-size: 0.9rem; margin: 0; color: var(--accent-primary); overflow-x: auto; white-space: pre-wrap;}
body.page-css-minifier .inline-476 {color:var(--accent-primary);}
body.page-css-minifier .inline-477 {padding: 24px; margin-bottom: 24px;}
body.page-css-minifier .inline-478 {grid-template-columns: 1fr 1fr; gap: 20px;}
body.page-css-minifier .inline-479 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;}
body.page-css-minifier .inline-480 {margin: 0;}
body.page-css-minifier .inline-481 {display: flex; gap: 6px;}
body.page-css-minifier .inline-482 {padding: 2px 8px; font-size: 11px;}
body.page-css-minifier .inline-483 {font-family: var(--font-mono); font-size: 13px;}
body.page-css-minifier .inline-484 {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 20px;}
body.page-css-minifier .inline-485 {display: flex; gap: 16px; font-size: 13px; flex-wrap: wrap;}
body.page-css-minifier .inline-486 {display: flex; align-items: center; gap: 6px; cursor: pointer;}
body.page-css-minifier .inline-487 {display: flex; gap: 10px;}
body.page-css-minifier .inline-488 {margin: 2.5rem 0 1.5rem;}
body.page-css-minifier .inline-489 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-css-minifier .inline-490 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-css-minifier .inline-491 {margin-top: 24px;}
body.page-curl-converter .inline-492 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-curl-converter .inline-493 {margin-bottom: 0;}
body.page-curl-converter .inline-494 {min-height: 140px; font-family: monospace; font-size: 0.85rem;}
body.page-curl-converter .inline-495 {justify-content: flex-start; margin-bottom: 0.75rem;}
body.page-curl-converter .inline-496 {margin-bottom: 0; font-weight: 700;}
body.page-curl-converter .inline-497 {min-height: 280px; font-family: monospace; font-size: 0.9rem; background: var(--bg-surface);}
body.page-curl-converter .inline-498 {margin-top: 3rem;}
body.page-currency-converter .inline-499 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-currency-converter .inline-500 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: flex-end; margin-bottom: 1.5rem;}
body.page-currency-converter .inline-501 {font-size: 1.1rem; font-weight: 700;}
body.page-currency-converter .inline-502 {font-weight: 600;}
body.page-currency-converter .inline-503 {text-align: center; margin-bottom: 0.25rem;}
body.page-currency-converter .inline-504 {border-radius: 50%; width: 42px; height: 42px; padding: 0;}
body.page-currency-converter .inline-505 {background: var(--bg-subtle); border-radius: var(--radius-sm); padding: 1.5rem; border-left: 4px solid var(--accent-primary); text-align: center;}
body.page-currency-converter .inline-506 {font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 0.5rem;}
body.page-currency-converter .inline-507 {font-size: 2.2rem; font-weight: 800; color: var(--accent-primary);}
body.page-currency-converter .inline-508 {font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem;}
body.page-currency-converter .inline-509 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden;}
body.page-currency-converter .inline-510 {padding: 1rem 1.25rem; background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); font-weight: 700;}
body.page-currency-converter .inline-511 {overflow-x: auto;}
body.page-currency-converter .inline-512 {width: 100%; border-collapse: collapse; font-size: 0.9rem;}
body.page-currency-converter .inline-513 {border-bottom: 1px solid var(--border-color); text-align: left; color: var(--text-secondary);}
body.page-currency-converter .inline-514 {padding: 10px 14px;}
body.page-currency-converter .inline-515 {margin-top: 3rem;}
body.page-dictionary .inline-516 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem;}
body.page-dictionary .inline-517 {display: flex; gap: 0.75rem; flex-wrap: wrap;}
body.page-dictionary .inline-518 {flex-grow: 1; min-width: 260px;}
body.page-dictionary .inline-519 {display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; align-items: center;}
body.page-dictionary .inline-520 {font-size: 0.8rem; font-weight: 700; color: var(--text-secondary);}
body.page-dictionary .inline-521 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 2rem; margin-bottom: 1.5rem;}
body.page-dictionary .inline-522 {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1.5rem; margin-bottom: 1.5rem;}
body.page-dictionary .inline-523 {margin: 0; font-size: 2.2rem; font-weight: 900; color: var(--accent-primary);}
body.page-dictionary .inline-524 {font-size: 1.1rem; color: var(--text-secondary); margin-top: 0.35rem; font-family: monospace;}
body.page-dictionary .inline-525 {display: flex; align-items: center; gap: 0.5rem;}
body.page-discount-calculator .inline-526 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;}
body.page-discount-calculator .inline-527 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md);}
body.page-discount-calculator .inline-528 {font-size: 1.1rem; margin-bottom: 1.25rem;}
body.page-discount-calculator .inline-529 {font-size: 1.1rem; font-weight: 700;}
body.page-discount-calculator .inline-530 {display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem;}
body.page-discount-calculator .inline-531 {display: flex; flex-direction: column; gap: 1rem;}
body.page-discount-calculator .inline-532 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; border-top: 4px solid var(--accent-primary);}
body.page-discount-calculator .inline-533 {font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 700; margin-bottom: 0.25rem;}
body.page-discount-calculator .inline-534 {font-size: 2.5rem; font-weight: 900; color: var(--accent-primary);}
body.page-discount-calculator .inline-535 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-discount-calculator .inline-536 {display: flex; justify-content: space-between; margin-bottom: 0.5rem;}
body.page-discount-calculator .inline-537 {color: var(--text-secondary);}
body.page-discount-calculator .inline-538 {color: var(--accent-success); font-weight: 700;}
body.page-discount-calculator .inline-539 {display: flex; justify-content: space-between; border-top: 1px solid var(--border-color); padding-top: 0.5rem;}
body.page-discount-calculator .inline-540 {margin-top: 3rem;}
body.page-dns-lookup .inline-541 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;}
body.page-dns-lookup .inline-542 {flex: 1; min-width: 220px;}
body.page-dns-lookup .inline-543 {min-width: 140px;}
body.page-dns-lookup .inline-544 {min-width: 150px;}
body.page-dns-lookup .inline-545 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden;}
body.page-dns-lookup .inline-546 {padding: 1rem 1.25rem; background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;}
body.page-dns-lookup .inline-547 {font-size: 1rem; margin: 0;}
body.page-dns-lookup .inline-548 {overflow-x: auto;}
body.page-dns-lookup .inline-549 {width: 100%; border-collapse: collapse; font-size: 0.875rem;}
body.page-dns-lookup .inline-550 {border-bottom: 1px solid var(--border-color); text-align: left; color: var(--text-secondary);}
body.page-dns-lookup .inline-551 {padding: 10px 14px;}
body.page-dns-lookup .inline-552 {padding: 10px 14px; width: 90px;}
body.page-dns-lookup .inline-553 {padding: 2rem; text-align: center; color: var(--text-muted);}
body.page-dns-lookup .inline-554 {margin-top: 3rem;}
body.page-exif-viewer .inline-555 {cursor: pointer; border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; text-align: center; background: var(--bg-surface); margin-bottom: 1.5rem;}
body.page-exif-viewer .inline-556 {font-size: 2.5rem; margin-bottom: 0.5rem;}
body.page-exif-viewer .inline-557 {margin-bottom: 0.5rem;}
body.page-exif-viewer .inline-558 {color: var(--text-secondary); font-size: 0.85rem; margin: 0;}
body.page-exif-viewer .inline-559 {display: none;}
body.page-exif-viewer .inline-560 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.75rem;}
body.page-exif-viewer .inline-561 {font-size: 1.1rem; margin: 0;}
body.page-exif-viewer .inline-562 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
body.page-exif-viewer .inline-563 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden;}
body.page-exif-viewer .inline-564 {width: 100%; border-collapse: collapse; font-size: 0.85rem;}
body.page-exif-viewer .inline-565 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; display: flex; align-items: center; justify-content: center;}
body.page-exif-viewer .inline-566 {max-height: 280px; max-width: 100%; object-fit: contain; border-radius: 4px;}
body.page-exif-viewer .inline-567 {margin-top: 3rem;}
body.page-favicon-generator .inline-568 {color:var(--accent-primary);}
body.page-favicon-generator .inline-569 {padding: 24px;}
body.page-favicon-generator .inline-570 {font-size: 18px; margin-bottom: 16px;}
body.page-favicon-generator .inline-571 {font-size: 16px; text-align: center; width: 64px; height: 38px;}
body.page-favicon-generator .inline-572 {grid-template-columns: 1fr 1fr; gap: 14px;}
body.page-favicon-generator .inline-573 {height: 42px; padding: 4px; cursor: pointer;}
body.page-favicon-generator .inline-574 {width: 52px; height: 52px;}
body.page-favicon-generator .inline-575 {width: 40px; height: 40px;}
body.page-favicon-generator .inline-576 {width: 32px; height: 32px;}
body.page-favicon-generator .inline-577 {width: 24px; height: 24px;}
body.page-favicon-generator .inline-578 {width: 16px; height: 16px;}
body.page-favicon-generator .inline-579 {display: flex; gap: 8px; flex-wrap: wrap;}
body.page-favicon-generator .inline-580 {margin-top: 24px; padding: 24px;}
body.page-favicon-generator .inline-581 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px;}
body.page-favicon-generator .inline-582 {font-size: 18px; margin: 0;}
body.page-favicon-generator .inline-583 {font-family: var(--font-mono); font-size: 13px;}
body.page-favicon-generator .inline-584 {margin-top: 32px;}
body.page-favicon-generator .inline-585 {margin: 2.5rem 0 1.5rem;}
body.page-favicon-generator .inline-586 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-favicon-generator .inline-587 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-favicon-generator .inline-588 {margin-top: 24px;}
body.page-glassmorphism-generator .inline-589 {position: relative; height: 320px; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #3b82f6 100%); display: flex; align-items: center; justify-content: center; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-md);}
body.page-glassmorphism-generator .inline-590 {position: absolute; width: 140px; height: 140px; border-radius: 50%; background: #facc15; top: 20px; left: 30px; opacity: 0.85;}
body.page-glassmorphism-generator .inline-591 {position: absolute; width: 110px; height: 110px; border-radius: 50%; background: #10b981; bottom: 25px; right: 40px; opacity: 0.85;}
body.page-glassmorphism-generator .inline-592 {position: relative; z-index: 10; width: 340px; padding: 1.75rem; border-radius: 16px; color: #ffffff; text-align: center;}
body.page-glassmorphism-generator .inline-593 {font-size: 2rem; margin-bottom: 0.25rem;}
body.page-glassmorphism-generator .inline-594 {font-size: 1.25rem; font-weight: 800; margin-bottom: 0.5rem;}
body.page-glassmorphism-generator .inline-595 {font-size: 0.85rem; opacity: 0.9; margin: 0; line-height: 1.5;}
body.page-glassmorphism-generator .inline-596 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-glassmorphism-generator .inline-597 {font-size: 1.1rem; margin-bottom: 1.25rem;}
body.page-glassmorphism-generator .inline-598 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem;}
body.page-glassmorphism-generator .inline-599 {display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.25rem;}
body.page-glassmorphism-generator .inline-600 {font-weight: 700;}
body.page-glassmorphism-generator .inline-601 {width: 100%;}
body.page-glassmorphism-generator .inline-602 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-glassmorphism-generator .inline-603 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-glassmorphism-generator .inline-604 {margin-bottom: 0; font-weight: 700;}
body.page-glassmorphism-generator .inline-605 {background: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-family: monospace; font-size: 0.95rem; margin: 0; color: var(--accent-primary);}
body.page-glassmorphism-generator .inline-606 {margin-top: 3rem;}
body.page-graphql-formatter .inline-607 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.85rem 1.25rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;}
body.page-graphql-formatter .inline-608 {display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;}
body.page-graphql-formatter .inline-609 {display: flex; align-items: center; gap: 0.4rem;}
body.page-graphql-formatter .inline-610 {font-size: 0.85rem; font-weight: 600;}
body.page-graphql-formatter .inline-611 {width: 110px; height: 32px; font-size: 0.85rem; padding: 0.2rem 0.5rem;}
body.page-graphql-formatter .inline-612 {display: flex; gap: 0.4rem; align-items: center;}
body.page-graphql-formatter .inline-613 {color: #ef4444;}
body.page-graphql-formatter .inline-614 {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-graphql-formatter .inline-615 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;}
body.page-graphql-formatter .inline-616 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);}
body.page-graphql-formatter .inline-617 {font-size: 0.8rem; color: var(--text-muted);}
body.page-graphql-formatter .inline-618 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; resize: vertical;}
body.page-graphql-formatter .inline-619 {font-size: 0.85rem; font-weight: 700; color: var(--accent-primary);}
body.page-graphql-formatter .inline-620 {display: flex; gap: 0.35rem;}
body.page-graphql-formatter .inline-621 {height: 24px; padding: 0 0.5rem; font-size: 0.75rem;}
body.page-graphql-formatter .inline-622 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; background: var(--bg-surface); resize: vertical;}
body.page-hash-generator .inline-623 {justify-content: flex-start; margin: 0 0 1.5rem;}
body.page-hash-generator .inline-624 {display: flex; justify-content: space-between; margin-bottom: 0.5rem;}
body.page-hash-generator .inline-625 {margin: 0;}
body.page-hash-generator .inline-626 {min-height: 120px;}
body.page-hash-generator .inline-627 {display: none;}
body.page-hash-generator .inline-628 {margin-bottom: 1.5rem;}
body.page-hash-generator .inline-629 {margin-bottom: 0.5rem;}
body.page-hash-generator .inline-630 {color: var(--text-muted); font-size: 0.875rem;}
body.page-hash-generator .inline-631 {margin-top: 1rem;}
body.page-hash-generator .inline-632 {display: none; padding: 0.75rem 1rem; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 1.5rem; font-size: 0.9rem;}
body.page-hash-generator .inline-633 {display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem;}
body.page-hash-generator .inline-634 {background: var(--bg-subtle); border: 2px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem;}
body.page-hash-generator .inline-635 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;}
body.page-hash-generator .inline-636 {font-weight: 700; font-size: 0.9rem; color: var(--accent-primary);}
body.page-hash-generator .inline-637 {padding: 0.5rem; font-size: 0.85rem; word-break: break-all;}
body.page-hash-generator .inline-638 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem;}
body.page-hash-generator .inline-639 {font-weight: 700; font-size: 0.9rem;}
body.page-hash-generator .inline-640 {margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;}
body.page-hash-generator .inline-641 {font-size: 1rem; margin-bottom: 0.75rem;}
body.page-hash-generator .inline-642 {font-family: 'Consolas', monospace;}
body.page-hash-generator .inline-643 {display: none; margin-top: 0.75rem; font-size: 0.9rem; font-weight: 600;}
body.page-hmac-generator .inline-644 {min-height: 140px;}
body.page-hmac-generator .inline-645 {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-hmac-generator .inline-646 {display: flex; flex-direction: column; gap: 1rem;}
body.page-hmac-generator .inline-647 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-hmac-generator .inline-648 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-hmac-generator .inline-649 {font-weight: 600; font-size: 0.95rem;}
body.page-hmac-generator .inline-650 {font-family: monospace; font-size: 0.9rem; word-break: break-all; color: var(--accent-primary); margin: 0; background: var(--bg-subtle); padding: 0.75rem; border-radius: var(--radius-sm);}
body.page-hmac-generator .inline-651 {font-family: monospace; font-size: 0.9rem; word-break: break-all; color: var(--accent-success); margin: 0; background: var(--bg-subtle); padding: 0.75rem; border-radius: var(--radius-sm);}
body.page-hmac-generator .inline-652 {margin-top: 3rem;}
body.page-html-entity-encoder .inline-653 {color:var(--accent-primary);}
body.page-html-entity-encoder .inline-654 {padding: 24px; margin-bottom: 24px;}
body.page-html-entity-encoder .inline-655 {grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px;}
body.page-html-entity-encoder .inline-656 {margin: 0;}
body.page-html-entity-encoder .inline-657 {grid-template-columns: 1fr 1fr; gap: 20px;}
body.page-html-entity-encoder .inline-658 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;}
body.page-html-entity-encoder .inline-659 {padding: 2px 8px; font-size: 11px;}
body.page-html-entity-encoder .inline-660 {font-family: var(--font-mono); font-size: 13px;}
body.page-html-entity-encoder .inline-661 {display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; align-items: center;}
body.page-html-entity-encoder .inline-662 {margin-top: 20px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface);}
body.page-html-entity-encoder .inline-663 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;}
body.page-html-entity-encoder .inline-664 {font-size: 14px; font-weight: 600; margin: 0; color: var(--text-primary);}
body.page-html-entity-encoder .inline-665 {font-size: 11px; color: var(--text-muted);}
body.page-html-entity-encoder .inline-666 {border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; background: #ffffff;}
body.page-html-entity-encoder .inline-667 {width: 100%; height: 160px; border: none; display: block;}
body.page-html-entity-encoder .inline-668 {font-size: 18px; margin-bottom: 14px;}
body.page-html-entity-encoder .inline-669 {max-height: 280px; overflow-y: auto;}
body.page-html-entity-encoder .inline-670 {margin: 2.5rem 0 1.5rem;}
body.page-html-entity-encoder .inline-671 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-html-entity-encoder .inline-672 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-html-entity-encoder .inline-673 {margin-top: 24px;}
body.page-html-formatter .inline-674 {background: var(--bg-subtle); border: 1px solid var(--border-color); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;}
body.page-html-formatter .inline-675 {display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;}
body.page-html-formatter .inline-676 {display: flex; gap: 1rem; align-items: center;}
body.page-html-formatter .inline-677 {display: flex; align-items: center; gap: 0.5rem;}
body.page-html-formatter .inline-678 {font-size: 0.875rem; color: var(--text-secondary); font-weight: 600;}
body.page-html-formatter .inline-679 {padding: 0.25rem 0.5rem; font-size: 0.85rem;}
body.page-html-formatter .inline-680 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
body.page-html-formatter .inline-681 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-html-formatter .inline-682 {margin-bottom: 0;}
body.page-html-formatter .inline-683 {color: var(--accent-danger);}
body.page-html-formatter .inline-684 {min-height: 380px; font-family: monospace; font-size: 0.9rem;}
body.page-html-formatter .inline-685 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem;}
body.page-html-formatter .inline-686 {margin: 0; justify-content: flex-start; gap: 0.35rem;}
body.page-html-formatter .inline-687 {padding: 0.3rem 0.85rem; font-size: 0.82rem;}
body.page-html-formatter .inline-688 {min-height: 380px; font-family: monospace; font-size: 0.9rem; background: var(--bg-surface);}
body.page-html-formatter .inline-689 {display: none; min-height: 380px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #ffffff; overflow: hidden;}
body.page-html-formatter .inline-690 {width: 100%; height: 380px; border: none; background: #ffffff;}
body.page-html-formatter .inline-691 {margin-top: 3rem;}
body.page-http-status-checker .inline-692 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-http-status-checker .inline-693 {display: flex; gap: 0.75rem; flex-wrap: wrap;}
body.page-http-status-checker .inline-694 {flex: 1; min-width: 260px;}
body.page-http-status-checker .inline-695 {display: none; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-http-status-checker .inline-696 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;}
body.page-http-status-checker .inline-697 {display: flex; align-items: center; gap: 0.75rem;}
body.page-http-status-checker .inline-698 {font-size: 1.3rem; font-weight: 800; padding: 4px 12px; border-radius: 6px; font-family: monospace;}
body.page-http-status-checker .inline-699 {font-size: 0.85rem; font-weight: 700; background: var(--bg-subtle); padding: 4px 8px; border-radius: 4px;}
body.page-http-status-checker .inline-700 {font-size: 0.9rem; color: var(--text-secondary);}
body.page-http-status-checker .inline-701 {color: var(--accent-primary);}
body.page-http-status-checker .inline-702 {color: var(--text-secondary); margin-bottom: 1.25rem; font-size: 0.95rem;}
body.page-http-status-checker .inline-703 {font-size: 0.95rem; margin-bottom: 0.5rem;}
body.page-http-status-checker .inline-704 {background: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-family: monospace; font-size: 0.85rem; max-height: 200px; overflow-y: auto;}
body.page-http-status-checker .inline-705 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-http-status-checker .inline-706 {font-size: 1rem; margin-bottom: 0.5rem;}
body.page-http-status-checker .inline-707 {font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.75rem;}
body.page-http-status-checker .inline-708 {margin-top: 3rem;}
body.page-http-status-codes .inline-709 {color:var(--accent-primary);}
body.page-http-status-codes .inline-710 {padding: 20px; margin-bottom: 24px;}
body.page-http-status-codes .inline-711 {margin-bottom: 14px;}
body.page-http-status-codes .inline-712 {margin-top: 32px;}
body.page-http-status-codes .inline-713 {margin: 2.5rem 0 1.5rem;}
body.page-http-status-codes .inline-714 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-http-status-codes .inline-715 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-http-status-codes .inline-716 {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;}
body.page-http-status-codes .inline-717 {display: flex; align-items: center; gap: 12px;}
body.page-http-status-codes .inline-718 {font-size: 22px; margin: 0;}
body.page-http-status-codes .inline-719 {padding: 4px 12px; font-size: 16px;}
body.page-http-status-codes .inline-720 {margin-bottom: 16px;}
body.page-http-status-codes .inline-721 {margin: 0 0 6px; color: var(--text-secondary); font-size: 13px; text-transform: uppercase;}
body.page-http-status-codes .inline-722 {font-size: 14px; line-height: 1.6;}
body.page-http-status-codes .inline-723 {font-size: 14px; line-height: 1.6; color: var(--text-secondary);}
body.page-http-status-codes .inline-724 {margin-bottom: 20px;}
body.page-http-status-codes .inline-725 {margin: 0 0 8px; color: var(--text-secondary); font-size: 13px; text-transform: uppercase;}
body.page-http-status-codes .inline-726 {background: var(--bg-subtle); padding: 12px; border-radius: 6px; font-family: var(--font-mono); font-size: 12.5px; overflow-x: auto;}
body.page-http-status-codes .inline-727 {margin-top: 24px;}
body.page-image-color-extractor .inline-728 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;}
body.page-image-color-extractor .inline-729 {display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;}
body.page-image-color-extractor .inline-730 {color: var(--accent-danger);}
body.page-image-color-extractor .inline-731 {display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;}
body.page-image-color-extractor .inline-732 {font-size: 0.85rem; color: var(--text-secondary); font-weight: 600;}
body.page-image-color-extractor .inline-733 {margin: 0; gap: 0.25rem;}
body.page-image-color-extractor .inline-734 {padding: 0.2rem 0.6rem; font-size: 0.78rem;}
body.page-image-color-extractor .inline-735 {cursor: pointer; border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; text-align: center; background: var(--bg-surface); margin-bottom: 1.5rem; transition: var(--transition);}
body.page-image-color-extractor .inline-736 {font-size: 2.5rem; margin-bottom: 0.5rem;}
body.page-image-color-extractor .inline-737 {margin-bottom: 0.5rem; font-size: 1.15rem;}
body.page-image-color-extractor .inline-738 {color: var(--text-secondary); font-size: 0.85rem; margin: 0 0 1rem 0;}
body.page-image-color-extractor .inline-739 {display: none;}
body.page-image-color-extractor .inline-740 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-image-color-extractor .inline-741 {font-size: 1.15rem; margin: 0 0 0.25rem 0; font-weight: 700;}
body.page-image-color-extractor .inline-742 {font-size: 0.8rem; color: var(--text-muted);}
body.page-image-color-extractor .inline-743 {display: flex; gap: 0.4rem; flex-wrap: wrap;}
body.page-image-color-extractor .inline-744 {display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-image-color-extractor .inline-745 {display: flex; flex-direction: column; align-items: center; background: var(--bg-subtle); padding: 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color);}
body.page-image-color-extractor .inline-746 {font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.75rem;}
body.page-image-color-extractor .inline-747 {max-height: 280px; max-width: 100%; object-fit: contain; border-radius: 6px; box-shadow: var(--shadow-sm);}
body.page-image-color-extractor .inline-748 {margin-top: 3rem;}
body.page-image-compressor .inline-749 {margin-bottom: 0.5rem;}
body.page-image-compressor .inline-750 {color: var(--text-muted); font-size: 0.875rem;}
body.page-image-compressor .inline-751 {display: none;}
body.page-image-compressor .inline-752 {margin-top: 1rem;}
body.page-image-compressor .inline-753 {display: none; margin-top: 2rem;}
body.page-image-compressor .inline-754 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;}
body.page-image-compressor .inline-755 {color: var(--accent-primary);}
body.page-image-compressor .inline-756 {width: 100%; cursor: pointer;}
body.page-image-compressor .inline-757 {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;}
body.page-image-compressor .inline-758 {border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; background: var(--bg-subtle); text-align: center;}
body.page-image-compressor .inline-759 {margin-bottom: 0.5rem; color: var(--text-secondary);}
body.page-image-compressor .inline-760 {height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 0.75rem;}
body.page-image-compressor .inline-761 {max-height: 100%; max-width: 100%; object-fit: contain; border-radius: var(--radius-sm);}
body.page-image-compressor .inline-762 {font-size: 0.85rem; color: var(--text-secondary);}
body.page-image-compressor .inline-763 {font-size: 0.8rem; color: var(--text-muted);}
body.page-image-compressor .inline-764 {border: 2px solid var(--accent-primary); border-radius: var(--radius-md); padding: 1rem; background: var(--bg-subtle); text-align: center;}
body.page-image-compressor .inline-765 {margin-bottom: 0.5rem; color: var(--accent-primary);}
body.page-image-compressor .inline-766 {color: var(--accent-success);}
body.page-image-compressor .inline-767 {display: inline-block; background: var(--accent-success); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); margin-top: 0.25rem;}
body.page-image-compressor .inline-768 {justify-content: center;}
body.page-image-converter .inline-769 {cursor: pointer; border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; text-align: center; background: var(--bg-surface); margin-bottom: 1.5rem;}
body.page-image-converter .inline-770 {font-size: 2.5rem; margin-bottom: 0.5rem;}
body.page-image-converter .inline-771 {margin-bottom: 0.5rem;}
body.page-image-converter .inline-772 {color: var(--text-secondary); font-size: 0.85rem; margin: 0;}
body.page-image-converter .inline-773 {display: none;}
body.page-image-converter .inline-774 {display: none; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-image-converter .inline-775 {display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; justify-content: space-between;}
body.page-image-converter .inline-776 {width: 180px;}
body.page-image-converter .inline-777 {flex: 1; min-width: 200px;}
body.page-image-converter .inline-778 {display: flex; justify-content: space-between; margin-bottom: 0.35rem; font-size: 0.85rem;}
body.page-image-converter .inline-779 {margin-bottom: 0;}
body.page-image-converter .inline-780 {font-weight: 700;}
body.page-image-converter .inline-781 {width: 100%;}
body.page-image-converter .inline-782 {display: flex; flex-direction: column; gap: 0.75rem;}
body.page-image-converter .inline-783 {margin-top: 3rem;}
body.page-image-resizer .inline-784 {cursor: pointer; border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; text-align: center; background: var(--bg-surface); margin-bottom: 1.5rem;}
body.page-image-resizer .inline-785 {font-size: 2.5rem; margin-bottom: 0.5rem;}
body.page-image-resizer .inline-786 {margin-bottom: 0.5rem;}
body.page-image-resizer .inline-787 {color: var(--text-secondary); font-size: 0.85rem; margin: 0;}
body.page-image-resizer .inline-788 {display: none;}
body.page-image-resizer .inline-789 {display: none; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-image-resizer .inline-790 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
body.page-image-resizer .inline-791 {font-size: 1.1rem; margin-bottom: 1rem;}
body.page-image-resizer .inline-792 {display: flex; gap: 1rem; margin-bottom: 1rem;}
body.page-image-resizer .inline-793 {flex: 1;}
body.page-image-resizer .inline-794 {display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem;}
body.page-image-resizer .inline-795 {display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer;}
body.page-image-resizer .inline-796 {width: 18px; height: 18px;}
body.page-image-resizer .inline-797 {margin-bottom: 1.5rem;}
body.page-image-resizer .inline-798 {font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.4rem;}
body.page-image-resizer .inline-799 {display: flex; gap: 0.5rem; flex-wrap: wrap;}
body.page-image-resizer .inline-800 {width: 100%;}
body.page-image-resizer .inline-801 {display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-subtle); border-radius: var(--radius-md); padding: 1.5rem; border: 1px solid var(--border-color);}
body.page-image-resizer .inline-802 {max-width: 100%; max-height: 280px; overflow: hidden; display: flex; align-items: center; justify-content: center;}
body.page-image-resizer .inline-803 {max-width: 100%; max-height: 260px; object-fit: contain; border-radius: 4px; box-shadow: var(--shadow-sm);}
body.page-image-resizer .inline-804 {font-size: 0.85rem; color: var(--text-secondary); margin-top: 1rem;}
body.page-image-resizer .inline-805 {margin-top: 3rem;}
body.page-index .inline-806 {margin-bottom: 3rem;}
body.page-index .inline-807 {font-size: 1.3rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 0.6rem;}
body.page-index .inline-808 {background: rgba(14, 165, 233, 0.15); color: var(--accent-primary); font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 9999px; font-weight: 700;}
body.page-index .inline-809 {font-size: 0.88rem; color: var(--text-secondary); margin: 0.2rem 0 0;}
body.page-index .inline-810 {display: none; grid-column: 1 / -1; text-align: center; padding: 4rem 1.5rem; background: var(--bg-surface); border: 1px dashed var(--border-color); border-radius: var(--radius-lg);}
body.page-index .inline-811 {font-size: 3rem; margin-bottom: 1rem;}
body.page-index .inline-812 {font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem;}
body.page-index .inline-813 {color: var(--text-secondary); max-width: 460px; margin: 0 auto 1.5rem; font-size: 0.92rem;}
body.page-index .inline-814 {display: inline-block;}
body.page-index .inline-815 {width: 60%;}
body.page-index .inline-816 {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 1.5rem 0;}
body.page-index .inline-817 {background: var(--bg-subtle); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-index .inline-818 {margin-top: 0;}
body.page-ip-lookup .inline-819 {color:var(--accent-primary);}
body.page-ip-lookup .inline-820 {font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary);}
body.page-ip-lookup .inline-821 {font-size: 13px; color: var(--text-muted);}
body.page-ip-lookup .inline-822 {margin-top: 14px; display: flex; justify-content: center; gap: 8px;}
body.page-ip-lookup .inline-823 {padding: 6px 14px; font-size: 12px;}
body.page-ip-lookup .inline-824 {padding: 24px; margin-bottom: 24px;}
body.page-ip-lookup .inline-825 {font-size: 18px; margin-bottom: 14px;}
body.page-ip-lookup .inline-826 {grid-template-columns: 2fr 1fr auto; gap: 12px; align-items: flex-end; margin-bottom: 16px;}
body.page-ip-lookup .inline-827 {margin: 0;}
body.page-ip-lookup .inline-828 {font-family: var(--font-mono);}
body.page-ip-lookup .inline-829 {height: 42px;}
body.page-ip-lookup .inline-830 {margin: 2.5rem 0 1.5rem;}
body.page-ip-lookup .inline-831 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-ip-lookup .inline-832 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-ip-lookup .inline-833 {margin-top: 24px;}
body.page-javascript-beautifier .inline-834 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.85rem 1.25rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;}
body.page-javascript-beautifier .inline-835 {display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;}
body.page-javascript-beautifier .inline-836 {display: flex; align-items: center; gap: 0.4rem;}
body.page-javascript-beautifier .inline-837 {font-size: 0.85rem; font-weight: 600;}
body.page-javascript-beautifier .inline-838 {width: 110px; height: 32px; font-size: 0.85rem; padding: 0.2rem 0.5rem;}
body.page-javascript-beautifier .inline-839 {width: 130px; height: 32px; font-size: 0.85rem; padding: 0.2rem 0.5rem;}
body.page-javascript-beautifier .inline-840 {display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;}
body.page-javascript-beautifier .inline-841 {display: flex; gap: 0.4rem; align-items: center;}
body.page-javascript-beautifier .inline-842 {color: #ef4444;}
body.page-javascript-beautifier .inline-843 {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-javascript-beautifier .inline-844 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;}
body.page-javascript-beautifier .inline-845 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);}
body.page-javascript-beautifier .inline-846 {font-size: 0.8rem; color: var(--text-muted);}
body.page-javascript-beautifier .inline-847 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; resize: vertical;}
body.page-javascript-beautifier .inline-848 {font-size: 0.85rem; font-weight: 700; color: var(--accent-primary);}
body.page-javascript-beautifier .inline-849 {display: flex; gap: 0.35rem;}
body.page-javascript-beautifier .inline-850 {height: 24px; padding: 0 0.5rem; font-size: 0.75rem;}
body.page-javascript-beautifier .inline-851 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; background: var(--bg-surface); resize: vertical;}
body.page-js-minifier .inline-852 {color:var(--accent-primary);}
body.page-js-minifier .inline-853 {padding: 24px; margin-bottom: 24px;}
body.page-js-minifier .inline-854 {grid-template-columns: 1fr 1fr; gap: 20px;}
body.page-js-minifier .inline-855 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;}
body.page-js-minifier .inline-856 {margin: 0;}
body.page-js-minifier .inline-857 {display: flex; gap: 6px;}
body.page-js-minifier .inline-858 {padding: 2px 8px; font-size: 11px;}
body.page-js-minifier .inline-859 {font-family: var(--font-mono); font-size: 13px;}
body.page-js-minifier .inline-860 {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 20px;}
body.page-js-minifier .inline-861 {display: flex; gap: 16px; font-size: 13px; flex-wrap: wrap;}
body.page-js-minifier .inline-862 {display: flex; align-items: center; gap: 6px; cursor: pointer;}
body.page-js-minifier .inline-863 {display: flex; gap: 10px;}
body.page-js-minifier .inline-864 {margin: 2.5rem 0 1.5rem;}
body.page-js-minifier .inline-865 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-js-minifier .inline-866 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-js-minifier .inline-867 {margin-top: 24px;}
body.page-json-csv-converter .inline-868 {justify-content: flex-start; margin-bottom: 1.5rem;}
body.page-json-csv-converter .inline-869 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
body.page-json-csv-converter .inline-870 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-json-csv-converter .inline-871 {margin-bottom: 0;}
body.page-json-csv-converter .inline-872 {min-height: 380px; font-family: monospace; font-size: 0.85rem;}
body.page-json-csv-converter .inline-873 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.4rem;}
body.page-json-csv-converter .inline-874 {margin: 0; justify-content: flex-start; gap: 0.35rem; align-items: center;}
body.page-json-csv-converter .inline-875 {font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); margin-right: 0.25rem;}
body.page-json-csv-converter .inline-876 {padding: 0.25rem 0.75rem; font-size: 0.8rem;}
body.page-json-csv-converter .inline-877 {min-height: 380px; font-family: monospace; font-size: 0.85rem; background: var(--bg-surface);}
body.page-json-csv-converter .inline-878 {display: none; min-height: 380px; max-height: 500px; overflow-y: auto; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface);}
body.page-json-csv-converter .inline-879 {overflow-x: auto;}
body.page-json-csv-converter .inline-880 {color: var(--text-muted); font-style: italic;}
body.page-json-csv-converter .inline-881 {margin-top: 3rem;}
body.page-json-formatter .inline-882 {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem;}
body.page-json-formatter .inline-883 {display: none; padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; margin-bottom: 1rem;}
body.page-json-formatter .inline-884 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;}
body.page-json-formatter .inline-885 {display: flex; justify-content: space-between; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--text-secondary);}
body.page-json-formatter .inline-886 {height: 380px; font-size: 0.875rem;}
body.page-json-formatter .inline-887 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; flex-wrap: wrap; gap: 0.4rem;}
body.page-json-formatter .inline-888 {margin: 0; justify-content: flex-start; gap: 0.35rem;}
body.page-json-formatter .inline-889 {padding: 0.25rem 0.75rem; font-size: 0.8rem;}
body.page-json-formatter .inline-890 {font-size: 0.85rem; color: var(--text-secondary);}
body.page-json-formatter .inline-891 {height: 380px; font-size: 0.875rem; background: var(--bg-surface);}
body.page-json-formatter .inline-892 {display: none; height: 380px; overflow-y: auto; padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;}
body.page-json-formatter .inline-893 {display: flex; gap: 0.5rem; margin-bottom: 0.5rem;}
body.page-json-formatter .inline-894 {padding: 2px 8px; font-size: 0.75rem;}
body.page-jwt-decoder .inline-895 {display: none; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; font-weight: 600;}
body.page-jwt-decoder .inline-896 {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem;}
body.page-jwt-decoder .inline-897 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-jwt-decoder .inline-898 {margin-bottom: 0;}
body.page-jwt-decoder .inline-899 {min-height: 480px; font-family: monospace; font-size: 0.9rem; line-height: 1.5;}
body.page-jwt-decoder .inline-900 {display: flex; flex-direction: column; gap: 1.25rem;}
body.page-jwt-decoder .inline-901 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;}
body.page-jwt-decoder .inline-902 {margin-bottom: 0; color: #ef4444; font-weight: 700;}
body.page-jwt-decoder .inline-903 {background: var(--bg-surface); border: 1px solid var(--border-color); border-left: 4px solid #ef4444; padding: 1rem; border-radius: var(--radius-md); font-family: monospace; font-size: 0.85rem; max-height: 150px; overflow-y: auto; white-space: pre-wrap;}
body.page-jwt-decoder .inline-904 {margin-bottom: 0; color: #a855f7; font-weight: 700;}
body.page-jwt-decoder .inline-905 {background: var(--bg-surface); border: 1px solid var(--border-color); border-left: 4px solid #a855f7; padding: 1rem; border-radius: var(--radius-md); font-family: monospace; font-size: 0.85rem; min-height: 160px; max-height: 250px; overflow-y: auto; white-space: pre-wrap;}
body.page-jwt-decoder .inline-906 {margin-bottom: 0.4rem; color: #06b6d4; font-weight: 700;}
body.page-jwt-decoder .inline-907 {background: var(--bg-surface); border: 1px solid var(--border-color); border-left: 4px solid #06b6d4; padding: 0.85rem; border-radius: var(--radius-md); font-family: monospace; font-size: 0.85rem; word-break: break-all; color: var(--text-secondary);}
body.page-jwt-decoder .inline-908 {margin-top: 3rem;}
body.page-line-counter-sorter .inline-909 {background: var(--bg-subtle); padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 1rem;}
body.page-line-counter-sorter .inline-910 {display: flex; flex-wrap: wrap; gap: 0.5rem;}
body.page-line-counter-sorter .inline-911 {display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; pt: 0.5rem; border-top: 1px solid var(--border-color); padding-top: 0.75rem;}
body.page-line-counter-sorter .inline-912 {display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem;}
body.page-line-counter-sorter .inline-913 {width: 16px; height: 16px;}
body.page-line-counter-sorter .inline-914 {display: inline-flex; align-items: center; gap: 0.5rem;}
body.page-line-counter-sorter .inline-915 {font-size: 0.875rem; color: var(--text-secondary);}
body.page-line-counter-sorter .inline-916 {width: 100px; padding: 0.25rem 0.5rem; font-size: 0.875rem;}
body.page-line-counter-sorter .inline-917 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
body.page-line-counter-sorter .inline-918 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-line-counter-sorter .inline-919 {margin-bottom: 0;}
body.page-line-counter-sorter .inline-920 {min-height: 320px; font-family: monospace; font-size: 0.9rem;}
body.page-line-counter-sorter .inline-921 {min-height: 320px; font-family: monospace; font-size: 0.9rem; background: var(--bg-surface);}
body.page-line-counter-sorter .inline-922 {margin-top: 3rem;}
body.page-loan-calculator .inline-923 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;}
body.page-loan-calculator .inline-924 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md);}
body.page-loan-calculator .inline-925 {font-size: 1.1rem; margin-bottom: 1.25rem;}
body.page-loan-calculator .inline-926 {display: flex; flex-direction: column; gap: 1rem;}
body.page-loan-calculator .inline-927 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; border-top: 4px solid var(--accent-primary);}
body.page-loan-calculator .inline-928 {font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 700; margin-bottom: 0.25rem;}
body.page-loan-calculator .inline-929 {font-size: 2.4rem; font-weight: 900; color: var(--accent-primary);}
body.page-loan-calculator .inline-930 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-loan-calculator .inline-931 {display: flex; justify-content: space-between; margin-bottom: 0.5rem;}
body.page-loan-calculator .inline-932 {color: var(--text-secondary);}
body.page-loan-calculator .inline-933 {color: var(--accent-danger);}
body.page-loan-calculator .inline-934 {display: flex; justify-content: space-between; border-top: 1px solid var(--border-color); padding-top: 0.5rem;}
body.page-loan-calculator .inline-935 {color: var(--text-secondary); font-weight: 700;}
body.page-loan-calculator .inline-936 {color: var(--accent-primary); font-size: 1.1rem;}
body.page-loan-calculator .inline-937 {display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.4rem;}
body.page-loan-calculator .inline-938 {height: 12px; border-radius: var(--radius-full); overflow: hidden; display: flex; background: var(--bg-subtle);}
body.page-loan-calculator .inline-939 {background: var(--accent-primary); width: 44%; height: 100%;}
body.page-loan-calculator .inline-940 {background: var(--accent-danger); width: 56%; height: 100%;}
body.page-loan-calculator .inline-941 {margin-top: 3rem;}
body.page-lorem-ipsum-generator .inline-942 {color:var(--accent-primary);}
body.page-lorem-ipsum-generator .inline-943 {padding: 24px; margin-bottom: 24px;}
body.page-lorem-ipsum-generator .inline-944 {grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 18px;}
body.page-lorem-ipsum-generator .inline-945 {margin: 0;}
body.page-lorem-ipsum-generator .inline-946 {display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; padding: 12px; background: var(--bg-subtle); border-radius: var(--radius-sm);}
body.page-lorem-ipsum-generator .inline-947 {display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer;}
body.page-lorem-ipsum-generator .inline-948 {display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;}
body.page-lorem-ipsum-generator .inline-949 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;}
body.page-lorem-ipsum-generator .inline-950 {font-size: 12px; color: var(--text-muted); font-family: var(--font-mono);}
body.page-lorem-ipsum-generator .inline-951 {font-size: 14px; line-height: 1.7;}
body.page-lorem-ipsum-generator .inline-952 {margin: 2.5rem 0 1.5rem;}
body.page-lorem-ipsum-generator .inline-953 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-lorem-ipsum-generator .inline-954 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-lorem-ipsum-generator .inline-955 {margin-top: 24px;}
body.page-mac-lookup .inline-956 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem;}
body.page-mac-lookup .inline-957 {font-weight: 700;}
body.page-mac-lookup .inline-958 {display: flex; gap: 0.75rem; flex-wrap: wrap;}
body.page-mac-lookup .inline-959 {flex-grow: 1; min-width: 260px; font-family: monospace; font-weight: 700; text-transform: uppercase;}
body.page-mac-lookup .inline-960 {display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; align-items: center;}
body.page-mac-lookup .inline-961 {font-size: 0.8rem; font-weight: 700; color: var(--text-secondary);}
body.page-mac-lookup .inline-962 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.75rem; margin-bottom: 1.5rem;}
body.page-mac-lookup .inline-963 {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1.25rem;}
body.page-mac-lookup .inline-964 {font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 700;}
body.page-mac-lookup .inline-965 {margin: 0.25rem 0 0; font-size: 1.75rem; color: var(--accent-primary); font-weight: 800;}
body.page-mac-lookup .inline-966 {background: var(--bg-subtle); border: 1px solid var(--border-color); font-family: monospace; font-size: 1rem; font-weight: 700; padding: 0.4rem 0.8rem; border-radius: var(--radius-sm);}
body.page-mac-lookup .inline-967 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-mac-lookup .inline-968 {background: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm);}
body.page-mac-lookup .inline-969 {font-size: 0.8rem; color: var(--text-secondary); font-weight: 700;}
body.page-mac-lookup .inline-970 {font-size: 1.1rem; font-weight: 700; margin-top: 0.25rem;}
body.page-mac-lookup .inline-971 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.5rem;}
body.page-mac-lookup .inline-972 {display: flex; flex-direction: column; gap: 0.5rem;}
body.page-mac-lookup .inline-973 {display: flex; justify-content: space-between; align-items: center; background: var(--bg-subtle); padding: 0.6rem 1rem; border-radius: var(--radius-sm);}
body.page-mac-lookup .inline-974 {font-size: 0.85rem; color: var(--text-secondary);}
body.page-mac-lookup .inline-975 {font-family: monospace; font-weight: 700;}
body.page-markdown-formatter .inline-976 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.85rem 1.25rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;}
body.page-markdown-formatter .inline-977 {display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;}
body.page-markdown-formatter .inline-978 {display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;}
body.page-markdown-formatter .inline-979 {display: flex; gap: 0.4rem; align-items: center;}
body.page-markdown-formatter .inline-980 {color: #ef4444;}
body.page-markdown-formatter .inline-981 {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-markdown-formatter .inline-982 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;}
body.page-markdown-formatter .inline-983 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);}
body.page-markdown-formatter .inline-984 {font-size: 0.8rem; color: var(--text-muted);}
body.page-markdown-formatter .inline-985 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; resize: vertical;}
body.page-markdown-formatter .inline-986 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; flex-wrap: wrap; gap: 0.4rem;}
body.page-markdown-formatter .inline-987 {margin: 0; justify-content: flex-start; gap: 0.35rem;}
body.page-markdown-formatter .inline-988 {padding: 0.25rem 0.75rem; font-size: 0.8rem;}
body.page-markdown-formatter .inline-989 {display: flex; gap: 0.35rem;}
body.page-markdown-formatter .inline-990 {height: 24px; padding: 0 0.5rem; font-size: 0.75rem;}
body.page-markdown-formatter .inline-991 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; background: var(--bg-surface); resize: vertical;}
body.page-markdown-formatter .inline-992 {display: none; min-height: 380px; padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); overflow-y: auto; line-height: 1.6;}
body.page-markdown-previewer .inline-993 {color:var(--accent-primary);}
body.page-markdown-previewer .inline-994 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px;}
body.page-markdown-previewer .inline-995 {display: flex; align-items: center; gap: 8px;}
body.page-markdown-previewer .inline-996 {margin: 0; font-size: 13px;}
body.page-markdown-previewer .inline-997 {padding: 6px 12px; font-size: 13px;}
body.page-markdown-previewer .inline-998 {display: flex; gap: 8px; flex-wrap: wrap;}
body.page-markdown-previewer .inline-999 {padding: 6px 12px; font-size: 12px;}
body.page-markdown-previewer .inline-1000 {display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono);}
body.page-markdown-previewer .inline-1001 {margin-top: 32px;}
body.page-markdown-previewer .inline-1002 {margin: 2.5rem 0 1.5rem;}
body.page-markdown-previewer .inline-1003 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-markdown-previewer .inline-1004 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-markdown-previewer .inline-1005 {margin-top: 24px;}
body.page-markdown-table-generator .inline-1006 {background: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;}
body.page-markdown-table-generator .inline-1007 {overflow-x: auto; margin-bottom: 1.5rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); padding: 0.75rem;}
body.page-markdown-table-generator .inline-1008 {width: 100%; border-collapse: collapse; min-width: 500px;}
body.page-markdown-table-generator .inline-1009 {justify-content: flex-start; margin-bottom: 0.75rem; gap: 0.35rem;}
body.page-markdown-table-generator .inline-1010 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-markdown-table-generator .inline-1011 {margin-bottom: 0;}
body.page-markdown-table-generator .inline-1012 {min-height: 220px; font-family: monospace; font-size: 0.9rem;}
body.page-markdown-table-generator .inline-1013 {display: none; overflow-x: auto; padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); min-height: 220px;}
body.page-markdown-table-generator .inline-1014 {width: 100%; border-collapse: collapse; font-size: 0.92rem;}
body.page-markdown-table-generator .inline-1015 {margin-top: 3rem;}
body.page-meta-tag-generator .inline-1016 {color:var(--accent-primary);}
body.page-meta-tag-generator .inline-1017 {display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;}
body.page-meta-tag-generator .inline-1018 {font-size: 13px; font-weight: 600; color: var(--text-secondary);}
body.page-meta-tag-generator .inline-1019 {padding: 4px 12px; font-size: 12px;}
body.page-meta-tag-generator .inline-1020 {padding: 24px;}
body.page-meta-tag-generator .inline-1021 {font-size: 18px; margin-bottom: 16px;}
body.page-meta-tag-generator .inline-1022 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;}
body.page-meta-tag-generator .inline-1023 {margin: 0;}
body.page-meta-tag-generator .inline-1024 {grid-template-columns: 1fr 1fr; gap: 12px;}
body.page-meta-tag-generator .inline-1025 {margin-bottom: 22px;}
body.page-meta-tag-generator .inline-1026 {font-size: 12px; font-weight: 700; color: var(--text-secondary); display:block; margin-bottom: 8px;}
body.page-meta-tag-generator .inline-1027 {margin-top: 24px; padding: 24px;}
body.page-meta-tag-generator .inline-1028 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px;}
body.page-meta-tag-generator .inline-1029 {font-size: 18px; margin: 0;}
body.page-meta-tag-generator .inline-1030 {font-family: var(--font-mono); font-size: 13px;}
body.page-meta-tag-generator .inline-1031 {margin-top: 32px;}
body.page-meta-tag-generator .inline-1032 {margin: 2.5rem 0 1.5rem;}
body.page-meta-tag-generator .inline-1033 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-meta-tag-generator .inline-1034 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-meta-tag-generator .inline-1035 {margin-top: 24px;}
body.page-mime-types .inline-1036 {background: var(--bg-surface); border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; margin-bottom: 1.5rem; cursor: pointer;}
body.page-mime-types .inline-1037 {display: none;}
body.page-mime-types .inline-1038 {font-size: 2rem; margin-bottom: 0.5rem;}
body.page-mime-types .inline-1039 {font-weight: 700; margin-bottom: 0.25rem;}
body.page-mime-types .inline-1040 {font-size: 0.85rem; color: var(--text-secondary);}
body.page-mime-types .inline-1041 {display: none; margin-top: 1rem; background: var(--bg-subtle); padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-family: monospace; font-weight: 700; color: var(--accent-primary);}
body.page-mime-types .inline-1042 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem;}
body.page-mime-types .inline-1043 {font-weight: 700;}
body.page-mime-types .inline-1044 {display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem;}
body.page-mime-types .inline-1045 {flex-grow: 1; min-width: 260px;}
body.page-mime-types .inline-1046 {display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;}
body.page-mime-types .inline-1047 {font-size: 0.8rem; font-weight: 700; color: var(--text-secondary);}
body.page-mime-types .inline-1048 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow-x: auto;}
body.page-mime-types .inline-1049 {width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem;}
body.page-mime-types .inline-1050 {background: var(--bg-subtle); border-bottom: 1px solid var(--border-color);}
body.page-mime-types .inline-1051 {padding: 0.85rem 1rem; font-weight: 700;}
body.page-mime-types .inline-1052 {padding: 0.85rem 1rem; text-align: right; font-weight: 700;}
body.page-mnemonic-generator .inline-1053 {background: var(--bg-subtle); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-end;}
body.page-mnemonic-generator .inline-1054 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-mnemonic-generator .inline-1055 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;}
body.page-mnemonic-generator .inline-1056 {font-size: 1.1rem; margin: 0;}
body.page-mnemonic-generator .inline-1057 {display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem;}
body.page-mnemonic-generator .inline-1058 {background: rgba(245, 158, 11, 0.1); border: 1px solid var(--accent-warning); padding: 1.25rem; border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.9rem;}
body.page-mnemonic-generator .inline-1059 {margin-top: 3rem;}
body.page-morse-code-translator .inline-1060 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.5rem;}
body.page-morse-code-translator .inline-1061 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.5rem;}
body.page-morse-code-translator .inline-1062 {display: flex; gap: 0.5rem; flex-wrap: wrap;}
body.page-morse-code-translator .inline-1063 {display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem;}
body.page-morse-code-translator .inline-1064 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-morse-code-translator .inline-1065 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-morse-code-translator .inline-1066 {font-weight: 700; margin: 0;}
body.page-morse-code-translator .inline-1067 {font-family: inherit; font-size: 0.95rem; line-height: 1.5;}
body.page-morse-code-translator .inline-1068 {font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; line-height: 1.6; letter-spacing: 0.05em;}
body.page-morse-code-translator .inline-1069 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;}
body.page-morse-code-translator .inline-1070 {display: flex; align-items: center; gap: 1rem;}
body.page-morse-code-translator .inline-1071 {min-width: 140px; font-weight: 700;}
body.page-morse-code-translator .inline-1072 {width: 18px; height: 18px; border-radius: 50%; background: #64748b; transition: background 0.05s;}
body.page-morse-code-translator .inline-1073 {display: flex; align-items: center; gap: 0.75rem;}
body.page-morse-code-translator .inline-1074 {margin: 0; font-weight: 700; font-size: 0.85rem;}
body.page-morse-code-translator .inline-1075 {width: 120px; font-size: 0.85rem;}
body.page-morse-code-translator .inline-1076 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem;}
body.page-morse-code-translator .inline-1077 {margin-top: 0; font-size: 1.1rem; margin-bottom: 1rem;}
body.page-morse-code-translator .inline-1078 {display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.5rem; text-align: center;}
body.page-morse-code-translator .inline-1079 {background: var(--bg-subtle); padding: 0.5rem; border-radius: var(--radius-sm);}
body.page-morse-code-translator .inline-1080 {color: var(--accent-primary);}
body.page-morse-code-translator .inline-1081 {font-family: monospace; font-weight: 700;}
body.page-number-base-converter .inline-1082 {color:var(--accent-primary);}
body.page-number-base-converter .inline-1083 {padding: 28px; max-width: 860px; margin: 0 auto 32px;}
body.page-number-base-converter .inline-1084 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px;}
body.page-number-base-converter .inline-1085 {font-size: 18px; margin: 0;}
body.page-number-base-converter .inline-1086 {display: flex; gap: 10px; align-items: center;}
body.page-number-base-converter .inline-1087 {font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer;}
body.page-number-base-converter .inline-1088 {padding: 3px 10px; font-size: 12px;}
body.page-number-base-converter .inline-1089 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;}
body.page-number-base-converter .inline-1090 {margin: 0; font-weight: 700;}
body.page-number-base-converter .inline-1091 {padding: 2px 8px; font-size: 11px;}
body.page-number-base-converter .inline-1092 {font-family: var(--font-mono); font-size: 15px;}
body.page-number-base-converter .inline-1093 {grid-template-columns: 140px 1fr; gap: 12px; margin-top: 18px;}
body.page-number-base-converter .inline-1094 {margin: 0;}
body.page-number-base-converter .inline-1095 {font-weight: 700;}
body.page-number-base-converter .inline-1096 {font-family: var(--font-mono);}
body.page-number-base-converter .inline-1097 {padding: 28px; max-width: 860px; margin: 0 auto 32px; display: none;}
body.page-number-base-converter .inline-1098 {font-size: 18px; margin-bottom: 14px;}
body.page-number-base-converter .inline-1099 {font-size: 13px; color: var(--text-secondary); margin-bottom: 16px;}
body.page-number-base-converter .inline-1100 {font-family: var(--font-mono); font-size: 13px;}
body.page-number-base-converter .inline-1101 {display: flex; gap: 10px;}
body.page-number-base-converter .inline-1102 {display: flex; align-items: center; gap: 6px;}
body.page-number-base-converter .inline-1103 {font-size: 12px; color: var(--text-secondary); font-weight: 600;}
body.page-number-base-converter .inline-1104 {grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px;}
body.page-number-base-converter .inline-1105 {font-size: 11.5px; color: var(--text-muted); margin-top: 4px;}
body.page-number-base-converter .inline-1106 {max-width: 860px; margin: 0 auto;}
body.page-number-base-converter .inline-1107 {margin: 2.5rem 0 1.5rem;}
body.page-number-base-converter .inline-1108 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-number-base-converter .inline-1109 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-number-base-converter .inline-1110 {margin-top: 24px;}
body.page-og-card-previewer .inline-1111 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
body.page-og-card-previewer .inline-1112 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md);}
body.page-og-card-previewer .inline-1113 {font-size: 1.1rem; margin-bottom: 1rem;}
body.page-og-card-previewer .inline-1114 {min-height: 80px;}
body.page-og-card-previewer .inline-1115 {font-weight: 700; margin-bottom: 0.5rem;}
body.page-og-card-previewer .inline-1116 {background: #000000; border-radius: 16px; padding: 1.25rem; border: 1px solid #2f3336; color: #e7e9ea; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;}
body.page-og-card-previewer .inline-1117 {display: flex; gap: 0.75rem; margin-bottom: 0.75rem;}
body.page-og-card-previewer .inline-1118 {width: 40px; height: 40px; border-radius: 50%; background: var(--accent-primary); display: flex; align-items: center; justify-content: center; font-weight: 700;}
body.page-og-card-previewer .inline-1119 {font-weight: 700; font-size: 0.95rem;}
body.page-og-card-previewer .inline-1120 {font-weight: 400; color: #71767b;}
body.page-og-card-previewer .inline-1121 {font-size: 0.85rem; color: #71767b;}
body.page-og-card-previewer .inline-1122 {border: 1px solid #2f3336; border-radius: 14px; overflow: hidden; background: #0f1419;}
body.page-og-card-previewer .inline-1123 {width: 100%; height: 180px; overflow: hidden; background: #1a2234;}
body.page-og-card-previewer .inline-1124 {width: 100%; height: 100%; object-fit: cover;}
body.page-og-card-previewer .inline-1125 {padding: 12px 14px;}
body.page-og-card-previewer .inline-1126 {font-size: 0.75rem; color: #71767b; text-transform: lowercase; margin-bottom: 4px;}
body.page-og-card-previewer .inline-1127 {font-weight: 700; font-size: 0.95rem; line-height: 1.3; margin-bottom: 6px;}
body.page-og-card-previewer .inline-1128 {font-size: 0.82rem; color: #71767b; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
body.page-og-card-previewer .inline-1129 {margin-top: 1rem;}
body.page-og-card-previewer .inline-1130 {margin-top: 3rem;}
body.page-password-generator .inline-1131 {justify-content: flex-start; margin: 0 0 1.5rem;}
body.page-password-generator .inline-1132 {position: relative; background: var(--bg-subtle); border: 2px solid var(--border-color); border-radius: var(--radius-lg); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem;}
body.page-password-generator .inline-1133 {width: 100%; border: none; background: transparent; font-family: 'Consolas', monospace; font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700; color: var(--text-primary); outline: none;}
body.page-password-generator .inline-1134 {display: flex; gap: 0.4rem; flex-shrink: 0; align-items: center;}
body.page-password-generator .inline-1135 {width: 36px; height: 36px;}
body.page-password-generator .inline-1136 {font-size: 0.75rem; color: var(--text-muted); margin-bottom: 1.25rem;}
body.page-password-generator .inline-1137 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.75rem;}
body.page-password-generator .inline-1138 {display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem;}
body.page-password-generator .inline-1139 {color: var(--accent-success);}
body.page-password-generator .inline-1140 {font-size: 0.85rem; color: var(--text-secondary);}
body.page-password-generator .inline-1141 {color: var(--text-primary);}
body.page-password-generator .inline-1142 {color: var(--text-muted); font-size: 0.8rem;}
body.page-password-generator .inline-1143 {width: 100%; height: 8px; background: var(--bg-surface); border-radius: var(--radius-full); overflow: hidden;}
body.page-password-generator .inline-1144 {width: 80%; height: 100%; background: var(--accent-success); transition: width 0.3s ease, background 0.3s ease;}
body.page-password-generator .inline-1145 {display: flex; justify-content: space-between; margin-bottom: 0.5rem;}
body.page-password-generator .inline-1146 {margin: 0;}
body.page-password-generator .inline-1147 {color: var(--accent-primary);}
body.page-password-generator .inline-1148 {font-size: 0.85rem; color: var(--text-muted);}
body.page-password-generator .inline-1149 {width: 100%; cursor: pointer;}
body.page-password-generator .inline-1150 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.25rem;}
body.page-password-generator .inline-1151 {display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.95rem;}
body.page-password-generator .inline-1152 {width: 18px; height: 18px;}
body.page-password-generator .inline-1153 {display: none;}
body.page-password-generator .inline-1154 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.25rem;}
body.page-password-generator .inline-1155 {margin-bottom: 0.5rem; font-size: 1rem;}
body.page-password-generator .inline-1156 {font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem;}
body.page-password-generator .inline-1157 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem;}
body.page-password-generator .inline-1158 {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;}
body.page-password-generator .inline-1159 {font-size: 0.85rem;}
body.page-password-generator .inline-1160 {display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem;}
body.page-password-generator .inline-1161 {display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.5rem;}
body.page-password-generator .inline-1162 {margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;}
body.page-password-generator .inline-1163 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;}
body.page-password-generator .inline-1164 {font-size: 1rem;}
body.page-password-generator .inline-1165 {display: flex; flex-direction: column; gap: 0.5rem;}
body.page-password-strength-checker .inline-1166 {position: relative;}
body.page-password-strength-checker .inline-1167 {padding-right: 48px; font-size: 1.1rem; font-family: monospace;}
body.page-password-strength-checker .inline-1168 {position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 1.2rem;}
body.page-password-strength-checker .inline-1169 {margin-bottom: 1.5rem;}
body.page-password-strength-checker .inline-1170 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-password-strength-checker .inline-1171 {font-size: 0.95rem; font-weight: 600;}
body.page-password-strength-checker .inline-1172 {font-weight: 700; font-size: 1.05rem; color: var(--text-muted);}
body.page-password-strength-checker .inline-1173 {background: var(--bg-subtle); border-radius: var(--radius-full); height: 12px; overflow: hidden; border: 1px solid var(--border-color);}
body.page-password-strength-checker .inline-1174 {width: 0%; height: 100%; transition: width 0.3s, background-color 0.3s;}
body.page-password-strength-checker .inline-1175 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-password-strength-checker .inline-1176 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);}
body.page-password-strength-checker .inline-1177 {font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.25rem;}
body.page-password-strength-checker .inline-1178 {font-size: 1.4rem; font-weight: 800; color: var(--accent-primary);}
body.page-password-strength-checker .inline-1179 {font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem;}
body.page-password-strength-checker .inline-1180 {font-size: 1.4rem; font-weight: 800; color: var(--accent-success);}
body.page-password-strength-checker .inline-1181 {font-size: 1.4rem; font-weight: 800;}
body.page-password-strength-checker .inline-1182 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-password-strength-checker .inline-1183 {font-size: 0.95rem; margin-bottom: 0.75rem;}
body.page-password-strength-checker .inline-1184 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem;}
body.page-password-strength-checker .inline-1185 {color: var(--text-muted);}
body.page-password-strength-checker .inline-1186 {margin-top: 1.5rem; display: flex; gap: 0.75rem;}
body.page-password-strength-checker .inline-1187 {margin-top: 3rem;}
body.page-pdf-merger .inline-1188 {cursor: pointer; border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; text-align: center; background: var(--bg-surface); margin-bottom: 1.5rem;}
body.page-pdf-merger .inline-1189 {font-size: 2.5rem; margin-bottom: 0.5rem;}
body.page-pdf-merger .inline-1190 {margin-bottom: 0.5rem;}
body.page-pdf-merger .inline-1191 {color: var(--text-secondary); font-size: 0.85rem; margin: 0;}
body.page-pdf-merger .inline-1192 {display: none;}
body.page-pdf-merger .inline-1193 {display: none; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-pdf-merger .inline-1194 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;}
body.page-pdf-merger .inline-1195 {font-size: 1.1rem; margin: 0;}
body.page-pdf-merger .inline-1196 {display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem;}
body.page-pdf-merger .inline-1197 {width: 100%; font-size: 1.05rem; padding: 0.75rem;}
body.page-pdf-merger .inline-1198 {margin-top: 3rem;}
body.page-pdf-splitter .inline-1199 {cursor: pointer; border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; text-align: center; background: var(--bg-surface); margin-bottom: 1.5rem;}
body.page-pdf-splitter .inline-1200 {font-size: 2.5rem; margin-bottom: 0.5rem;}
body.page-pdf-splitter .inline-1201 {margin-bottom: 0.5rem;}
body.page-pdf-splitter .inline-1202 {color: var(--text-secondary); font-size: 0.85rem; margin: 0;}
body.page-pdf-splitter .inline-1203 {display: none;}
body.page-pdf-splitter .inline-1204 {display: none; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-pdf-splitter .inline-1205 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;}
body.page-pdf-splitter .inline-1206 {font-size: 1.05rem;}
body.page-pdf-splitter .inline-1207 {font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.2rem;}
body.page-pdf-splitter .inline-1208 {font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.4rem;}
body.page-pdf-splitter .inline-1209 {width: 100%; padding: 0.75rem;}
body.page-pdf-splitter .inline-1210 {margin-top: 3rem;}
body.page-pdf-to-image .inline-1211 {cursor: pointer; border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; text-align: center; background: var(--bg-surface); margin-bottom: 1.5rem;}
body.page-pdf-to-image .inline-1212 {font-size: 2.5rem; margin-bottom: 0.5rem;}
body.page-pdf-to-image .inline-1213 {margin-bottom: 0.5rem;}
body.page-pdf-to-image .inline-1214 {color: var(--text-secondary); font-size: 0.85rem; margin: 0;}
body.page-pdf-to-image .inline-1215 {display: none;}
body.page-pdf-to-image .inline-1216 {display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem;}
body.page-pdf-to-image .inline-1217 {margin-top: 3rem;}
body.page-pdf-utilities .inline-1218 {justify-content: flex-start; margin: 0 0 1.5rem;}
body.page-pdf-utilities .inline-1219 {margin-bottom: 0.5rem;}
body.page-pdf-utilities .inline-1220 {color: var(--text-muted); font-size: 0.875rem;}
body.page-pdf-utilities .inline-1221 {display: none;}
body.page-pdf-utilities .inline-1222 {margin-top: 1rem;}
body.page-pdf-utilities .inline-1223 {display: none; margin-top: 1.5rem;}
body.page-pdf-utilities .inline-1224 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;}
body.page-pdf-utilities .inline-1225 {font-size: 1rem;}
body.page-pdf-utilities .inline-1226 {display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-pdf-utilities .inline-1227 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem;}
body.page-pdf-utilities .inline-1228 {display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem;}
body.page-pdf-utilities .inline-1229 {margin: 0;}
body.page-pdf-utilities .inline-1230 {justify-content: center;}
body.page-pdf-utilities .inline-1231 {padding: 0.85rem 2.5rem; font-size: 1.05rem;}
body.page-pdf-utilities .inline-1232 {display: none; margin-top: 1.5rem; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem;}
body.page-pdf-utilities .inline-1233 {margin-bottom: 1rem; color: var(--accent-primary);}
body.page-pdf-utilities .inline-1234 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;}
body.page-pdf-utilities .inline-1235 {color:var(--text-secondary);}
body.page-pdf-utilities .inline-1236 {color:var(--accent-primary); font-size: 1.25rem; font-weight:700;}
body.page-percentage-calculator .inline-1237 {display: flex; flex-direction: column; gap: 2rem;}
body.page-percentage-calculator .inline-1238 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem;}
body.page-percentage-calculator .inline-1239 {font-size: 1.15rem; margin-bottom: 0.75rem; color: var(--text-primary);}
body.page-percentage-calculator .inline-1240 {font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem;}
body.page-percentage-calculator .inline-1241 {color: var(--accent-primary);}
body.page-percentage-calculator .inline-1242 {display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;}
body.page-percentage-calculator .inline-1243 {width: 90px;}
body.page-percentage-calculator .inline-1244 {width: 110px;}
body.page-percentage-calculator .inline-1245 {display: flex; align-items: center; gap: 0.5rem; background: var(--bg-surface); border: 2px solid var(--accent-primary); border-radius: var(--radius-sm); padding: 0.5rem 1rem;}
body.page-percentage-calculator .inline-1246 {font-size: 1.25rem; color: var(--accent-primary);}
body.page-percentage-calculator .inline-1247 {margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-muted);}
body.page-percentage-calculator .inline-1248 {width: 100px;}
body.page-percentage-calculator .inline-1249 {font-size: 1.25rem; color: var(--accent-success);}
body.page-ping-tester .inline-1250 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;}
body.page-ping-tester .inline-1251 {font-size: 1.1rem; margin-bottom: 0.25rem;}
body.page-ping-tester .inline-1252 {font-size: 0.85rem; color: var(--text-secondary); margin: 0;}
body.page-ping-tester .inline-1253 {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-ping-tester .inline-1254 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-ping-tester .inline-1255 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-ping-tester .inline-1256 {font-weight: 700;}
body.page-ping-tester .inline-1257 {width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted);}
body.page-ping-tester .inline-1258 {font-size: 1.6rem; font-weight: 800; color: var(--accent-primary);}
body.page-ping-tester .inline-1259 {font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem;}
body.page-ping-tester .inline-1260 {background: var(--bg-subtle); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-ping-tester .inline-1261 {font-size: 0.95rem; margin-bottom: 0.75rem;}
body.page-ping-tester .inline-1262 {display: flex; gap: 0.75rem; flex-wrap: wrap;}
body.page-ping-tester .inline-1263 {flex: 1; min-width: 240px;}
body.page-ping-tester .inline-1264 {margin-top: 0.75rem; font-weight: 600; font-size: 0.95rem; color: var(--accent-primary);}
body.page-ping-tester .inline-1265 {margin-top: 3rem;}
body.page-pomodoro-timer .inline-1266 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2.5rem 1.5rem; text-align: center; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm);}
body.page-pomodoro-timer .inline-1267 {display: inline-flex; background: var(--bg-subtle); padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: 2rem;}
body.page-pomodoro-timer .inline-1268 {font-weight: 700; padding: 0.5rem 1.25rem;}
body.page-pomodoro-timer .inline-1269 {position: relative; width: 240px; height: 240px; margin: 0 auto 2rem;}
body.page-pomodoro-timer .inline-1270 {transform: rotate(-90deg);}
body.page-pomodoro-timer .inline-1271 {transition: stroke-dashoffset 0.5s ease;}
body.page-pomodoro-timer .inline-1272 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
body.page-pomodoro-timer .inline-1273 {font-size: 3.5rem; font-family: monospace; font-weight: 900; line-height: 1; color: var(--text-primary);}
body.page-pomodoro-timer .inline-1274 {font-size: 0.9rem; font-weight: 700; color: var(--accent-primary); margin-top: 0.5rem; text-transform: uppercase;}
body.page-pomodoro-timer .inline-1275 {display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;}
body.page-pomodoro-timer .inline-1276 {min-width: 140px; font-weight: 800;}
body.page-pomodoro-timer .inline-1277 {min-width: 110px;}
body.page-pomodoro-timer .inline-1278 {margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border-color); display: flex; justify-content: center; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 700; color: var(--text-secondary);}
body.page-pomodoro-timer .inline-1279 {color: #ef4444; font-size: 1.2rem;}
body.page-pomodoro-timer .inline-1280 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem;}
body.page-pomodoro-timer .inline-1281 {margin-top: 0; font-size: 1.1rem; margin-bottom: 1rem;}
body.page-pomodoro-timer .inline-1282 {display: flex; gap: 0.5rem; margin-bottom: 1rem;}
body.page-pomodoro-timer .inline-1283 {display: flex; flex-direction: column; gap: 0.5rem;}
body.page-port-lookup .inline-1284 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem;}
body.page-port-lookup .inline-1285 {font-weight: 700;}
body.page-port-lookup .inline-1286 {display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem;}
body.page-port-lookup .inline-1287 {flex-grow: 1; min-width: 260px;}
body.page-port-lookup .inline-1288 {display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;}
body.page-port-lookup .inline-1289 {font-size: 0.8rem; font-weight: 700; color: var(--text-secondary);}
body.page-port-lookup .inline-1290 {display: none; background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-subtle) 100%); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-port-lookup .inline-1291 {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;}
body.page-port-lookup .inline-1292 {font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 700;}
body.page-port-lookup .inline-1293 {margin: 0.25rem 0 0; font-size: 2rem; color: var(--accent-primary); font-weight: 900;}
body.page-port-lookup .inline-1294 {font-size: 0.95rem; color: var(--text-secondary); margin: 0.5rem 0 0;}
body.page-port-lookup .inline-1295 {background: var(--accent-subtle); color: var(--accent-primary); font-weight: 700; padding: 0.35rem 0.8rem; border-radius: var(--radius-sm); font-size: 0.85rem;}
body.page-port-lookup .inline-1296 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow-x: auto;}
body.page-port-lookup .inline-1297 {width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem;}
body.page-port-lookup .inline-1298 {background: var(--bg-subtle); border-bottom: 1px solid var(--border-color);}
body.page-port-lookup .inline-1299 {padding: 0.85rem 1rem; font-weight: 700;}
body.page-programmer-calculator .inline-1300 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-programmer-calculator .inline-1301 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: flex-end; margin-bottom: 1rem;}
body.page-programmer-calculator .inline-1302 {font-family: monospace; font-size: 1.1rem; font-weight: 700;}
body.page-programmer-calculator .inline-1303 {font-family: monospace; font-weight: 700;}
body.page-programmer-calculator .inline-1304 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.5rem;}
body.page-programmer-calculator .inline-1305 {padding: 1rem 1.25rem; background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); font-weight: 700;}
body.page-programmer-calculator .inline-1306 {padding: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem;}
body.page-programmer-calculator .inline-1307 {font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase;}
body.page-programmer-calculator .inline-1308 {font-size: 1.8rem; font-weight: 800; color: var(--accent-primary); font-family: monospace;}
body.page-programmer-calculator .inline-1309 {border-top: 1px solid var(--border-color); padding-top: 0.75rem;}
body.page-programmer-calculator .inline-1310 {font-size: 1.4rem; font-weight: 800; font-family: monospace; color: var(--accent-success);}
body.page-programmer-calculator .inline-1311 {font-size: 1.2rem; font-weight: 700; font-family: monospace; word-break: break-all; color: var(--accent-info);}
body.page-programmer-calculator .inline-1312 {font-size: 1.1rem; font-weight: 700; font-family: monospace;}
body.page-programmer-calculator .inline-1313 {margin-top: 3rem;}
body.page-python-beautifier .inline-1314 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.85rem 1.25rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;}
body.page-python-beautifier .inline-1315 {display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;}
body.page-python-beautifier .inline-1316 {display: flex; align-items: center; gap: 0.4rem;}
body.page-python-beautifier .inline-1317 {font-size: 0.85rem; font-weight: 600;}
body.page-python-beautifier .inline-1318 {width: 125px; height: 32px; font-size: 0.85rem; padding: 0.2rem 0.5rem;}
body.page-python-beautifier .inline-1319 {display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;}
body.page-python-beautifier .inline-1320 {display: flex; gap: 0.4rem; align-items: center;}
body.page-python-beautifier .inline-1321 {color: #ef4444;}
body.page-python-beautifier .inline-1322 {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-python-beautifier .inline-1323 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;}
body.page-python-beautifier .inline-1324 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);}
body.page-python-beautifier .inline-1325 {font-size: 0.8rem; color: var(--text-muted);}
body.page-python-beautifier .inline-1326 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; resize: vertical;}
body.page-python-beautifier .inline-1327 {font-size: 0.85rem; font-weight: 700; color: var(--accent-primary);}
body.page-python-beautifier .inline-1328 {display: flex; gap: 0.35rem;}
body.page-python-beautifier .inline-1329 {height: 24px; padding: 0 0.5rem; font-size: 0.75rem;}
body.page-python-beautifier .inline-1330 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; background: var(--bg-surface); resize: vertical;}
body.page-qr-code-generator .inline-1331 {justify-content: flex-start; margin: 0 0 1.5rem;}
body.page-qr-code-generator .inline-1332 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; align-items: start;}
body.page-qr-code-generator .inline-1333 {display: none;}
body.page-qr-code-generator .inline-1334 {border-top: 1px solid var(--border-color); padding-top: 1.25rem; margin-top: 1.25rem;}
body.page-qr-code-generator .inline-1335 {margin-bottom: 1rem; font-size: 0.95rem;}
body.page-qr-code-generator .inline-1336 {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;}
body.page-qr-code-generator .inline-1337 {width: 100%; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); cursor: pointer; padding: 2px;}
body.page-qr-code-generator .inline-1338 {display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 2rem;}
body.page-qr-code-generator .inline-1339 {padding: 1rem; background: #ffffff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; min-height: 232px; min-width: 232px;}
body.page-qr-code-generator .inline-1340 {margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 240px;}
body.page-qr-code-generator .inline-1341 {width: 100%;}
body.page-random-facts .inline-1342 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.5rem;}
body.page-random-facts .inline-1343 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.5rem;}
body.page-random-facts .inline-1344 {display: flex; gap: 0.5rem; flex-wrap: wrap;}
body.page-random-facts .inline-1345 {background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-subtle) 100%); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2.5rem 2rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); min-height: 220px; display: flex; flex-direction: column; justify-content: space-between;}
body.page-random-facts .inline-1346 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;}
body.page-random-facts .inline-1347 {background: var(--accent-subtle); color: var(--accent-primary); font-weight: 700; font-size: 0.8rem; padding: 0.25rem 0.75rem; border-radius: 999px; text-transform: uppercase;}
body.page-random-facts .inline-1348 {font-size: 0.85rem; color: var(--text-secondary); font-family: monospace;}
body.page-random-facts .inline-1349 {font-size: 1.45rem; font-weight: 700; line-height: 1.5; color: var(--text-primary); margin: 0;}
body.page-random-facts .inline-1350 {display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; flex-wrap: wrap; gap: 0.75rem; border-top: 1px solid var(--border-color); padding-top: 1.25rem;}
body.page-random-facts .inline-1351 {display: flex; gap: 0.5rem;}
body.page-random-facts .inline-1352 {padding: 0.65rem 1.5rem; font-weight: 700;}
body.page-random-picker .inline-1353 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.5rem;}
body.page-random-picker .inline-1354 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.5rem;}
body.page-random-picker .inline-1355 {display: flex; gap: 0.5rem; flex-wrap: wrap;}
body.page-random-picker .inline-1356 {background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-subtle) 100%); border: 2px solid var(--accent-primary); border-radius: var(--radius-lg); padding: 2.5rem 1.5rem; text-align: center; margin-bottom: 1.5rem; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);}
body.page-random-picker .inline-1357 {font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); font-weight: 700; margin-bottom: 0.5rem;}
body.page-random-picker .inline-1358 {font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 900; color: var(--accent-primary); line-height: 1.1; margin-bottom: 0.5rem;}
body.page-random-picker .inline-1359 {font-size: 0.9rem; color: var(--text-secondary);}
body.page-random-picker .inline-1360 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-random-picker .inline-1361 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-random-picker .inline-1362 {font-weight: 700; margin: 0;}
body.page-random-picker .inline-1363 {font-size: 0.85rem; font-weight: 700; color: var(--accent-primary);}
body.page-random-picker .inline-1364 {font-family: inherit; font-size: 0.95rem; margin-bottom: 1.25rem;}
body.page-random-picker .inline-1365 {display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: space-between;}
body.page-random-picker .inline-1366 {display: flex; gap: 1rem; align-items: center;}
body.page-random-picker .inline-1367 {display: flex; align-items: center; gap: 0.4rem; font-weight: 600; cursor: pointer; font-size: 0.9rem;}
body.page-random-picker .inline-1368 {min-width: 160px; font-weight: 800;}
body.page-random-picker .inline-1369 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-random-picker .inline-1370 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;}
body.page-random-picker .inline-1371 {font-weight: 700; font-size: 0.95rem;}
body.page-random-picker .inline-1372 {display: flex; gap: 0.5rem; flex-wrap: wrap; min-height: 36px; align-items: center;}
body.page-random-picker .inline-1373 {font-size: 0.85rem; color: var(--text-secondary); font-style: italic;}
body.page-random-word-generator .inline-1374 {background: var(--bg-subtle); padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-end;}
body.page-random-word-generator .inline-1375 {width: 100px;}
body.page-random-word-generator .inline-1376 {min-height: 180px; padding: 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 1rem;}
body.page-random-word-generator .inline-1377 {display: flex; gap: 0.75rem; justify-content: flex-end;}
body.page-random-word-generator .inline-1378 {margin-top: 3rem;}
body.page-regex-tester .inline-1379 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-regex-tester .inline-1380 {display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;}
body.page-regex-tester .inline-1381 {font-size: 1.2rem; font-family: monospace; color: var(--text-muted); font-weight: 700;}
body.page-regex-tester .inline-1382 {flex: 1; min-width: 220px; font-family: monospace; font-size: 1.05rem;}
body.page-regex-tester .inline-1383 {width: 80px; font-family: monospace; font-size: 1rem;}
body.page-regex-tester .inline-1384 {display: flex; gap: 1rem; margin-top: 0.75rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-secondary);}
body.page-regex-tester .inline-1385 {min-height: 160px; font-family: monospace;}
body.page-regex-tester .inline-1386 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-regex-tester .inline-1387 {margin-bottom: 0; font-weight: 700;}
body.page-regex-tester .inline-1388 {font-size: 0.85rem; font-weight: 700; background: var(--bg-subtle); padding: 3px 8px; border-radius: 4px; color: var(--accent-primary);}
body.page-regex-tester .inline-1389 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; min-height: 120px; font-family: monospace; font-size: 0.95rem; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; word-break: break-word;}
body.page-regex-tester .inline-1390 {display: none; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.5rem;}
body.page-regex-tester .inline-1391 {padding: 0.75rem 1rem; background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); font-weight: 700; font-size: 0.9rem;}
body.page-regex-tester .inline-1392 {max-height: 200px; overflow-y: auto;}
body.page-regex-tester .inline-1393 {width: 100%; border-collapse: collapse; font-size: 0.85rem;}
body.page-regex-tester .inline-1394 {border-bottom: 1px solid var(--border-color); color: var(--text-secondary); text-align: left;}
body.page-regex-tester .inline-1395 {padding: 8px 12px; width: 60px;}
body.page-regex-tester .inline-1396 {padding: 8px 12px;}
body.page-regex-tester .inline-1397 {margin-top: 3rem;}
body.page-remove-duplicate-lines .inline-1398 {margin-top: 0; margin-bottom: 1.5rem;}
body.page-remove-duplicate-lines .inline-1399 {color: var(--accent-danger);}
body.page-remove-duplicate-lines .inline-1400 {background: var(--bg-subtle); padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;}
body.page-remove-duplicate-lines .inline-1401 {display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem;}
body.page-remove-duplicate-lines .inline-1402 {width: 18px; height: 18px;}
body.page-remove-duplicate-lines .inline-1403 {display: inline-flex; align-items: center; gap: 0.5rem;}
body.page-remove-duplicate-lines .inline-1404 {font-size: 0.9rem; color: var(--text-secondary);}
body.page-remove-duplicate-lines .inline-1405 {padding: 0.35rem 0.75rem; font-size: 0.875rem;}
body.page-remove-duplicate-lines .inline-1406 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
body.page-remove-duplicate-lines .inline-1407 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-remove-duplicate-lines .inline-1408 {margin-bottom: 0;}
body.page-remove-duplicate-lines .inline-1409 {min-height: 320px; font-family: monospace; font-size: 0.9rem;}
body.page-remove-duplicate-lines .inline-1410 {min-height: 320px; font-family: monospace; font-size: 0.9rem; background: var(--bg-surface);}
body.page-remove-duplicate-lines .inline-1411 {margin-top: 3rem;}
body.page-robots-txt-generator .inline-1412 {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;}
body.page-robots-txt-generator .inline-1413 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md);}
body.page-robots-txt-generator .inline-1414 {font-size: 1.1rem; margin-bottom: 1rem;}
body.page-robots-txt-generator .inline-1415 {min-height: 100px; font-family: monospace; font-size: 0.85rem;}
body.page-robots-txt-generator .inline-1416 {min-height: 80px; font-family: monospace; font-size: 0.85rem;}
body.page-robots-txt-generator .inline-1417 {display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.875rem;}
body.page-robots-txt-generator .inline-1418 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-robots-txt-generator .inline-1419 {margin-bottom: 0; font-weight: 700;}
body.page-robots-txt-generator .inline-1420 {min-height: 480px; font-family: monospace; font-size: 0.9rem; background: var(--bg-surface);}
body.page-robots-txt-generator .inline-1421 {margin-top: 3rem;}
body.page-rot13-cipher .inline-1422 {background: var(--bg-subtle); padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;}
body.page-rot13-cipher .inline-1423 {display: flex; align-items: center; gap: 0.5rem;}
body.page-rot13-cipher .inline-1424 {margin-bottom: 0;}
body.page-rot13-cipher .inline-1425 {padding: 0.35rem 0.75rem;}
body.page-rot13-cipher .inline-1426 {display: none; align-items: center; gap: 0.5rem;}
body.page-rot13-cipher .inline-1427 {width: 70px; padding: 0.35rem 0.5rem;}
body.page-rot13-cipher .inline-1428 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
body.page-rot13-cipher .inline-1429 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-rot13-cipher .inline-1430 {min-height: 250px;}
body.page-rot13-cipher .inline-1431 {min-height: 250px; background: var(--bg-surface);}
body.page-rot13-cipher .inline-1432 {margin-top: 2rem; display: none;}
body.page-rot13-cipher .inline-1433 {font-size: 1.1rem; margin-bottom: 1rem;}
body.page-rot13-cipher .inline-1434 {max-height: 300px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface);}
body.page-rot13-cipher .inline-1435 {width: 100%; border-collapse: collapse; font-size: 0.875rem;}
body.page-rot13-cipher .inline-1436 {background: var(--bg-subtle); border-bottom: 1px solid var(--border-color);}
body.page-rot13-cipher .inline-1437 {padding: 8px 12px; text-align: left; width: 80px;}
body.page-rot13-cipher .inline-1438 {padding: 8px 12px; text-align: left;}
body.page-rot13-cipher .inline-1439 {margin-top: 3rem;}
body.page-scratchpad .inline-1440 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.75rem 1.25rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.75rem;}
body.page-scratchpad .inline-1441 {display: flex; gap: 1.25rem; font-size: 0.85rem; font-weight: 600;}
body.page-scratchpad .inline-1442 {color: var(--accent-primary);}
body.page-scratchpad .inline-1443 {display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; color: #10b981;}
body.page-scratchpad .inline-1444 {display: inline-block; width: 8px; height: 8px; background: #10b981; border-radius: 50%;}
body.page-scratchpad .inline-1445 {background: var(--bg-surface); border: 1px solid var(--border-color); border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0; padding: 0.75rem 1rem;}
body.page-scratchpad .inline-1446 {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem;}
body.page-scratchpad .inline-1447 {display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;}
body.page-scratchpad .inline-1448 {width: 1px; height: 20px; background: var(--border-color); margin: 0 0.2rem;}
body.page-scratchpad .inline-1449 {color: #ef4444;}
body.page-scratchpad .inline-1450 {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; border-top: 1px solid var(--border-color); padding-top: 0.5rem;}
body.page-scratchpad .inline-1451 {display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;}
body.page-scratchpad .inline-1452 {font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);}
body.page-scratchpad .inline-1453 {padding: 0.15rem 0.5rem; font-size: 0.75rem;}
body.page-scratchpad .inline-1454 {display: flex; align-items: center; gap: 0.35rem;}
body.page-scratchpad .inline-1455 {width: 100px; height: 26px; font-size: 0.75rem; padding: 0.1rem 0.3rem;}
body.page-scratchpad .inline-1456 {width: 75px; height: 26px; font-size: 0.75rem; padding: 0.1rem 0.3rem;}
body.page-scratchpad .inline-1457 {display: none; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-top: 0.6rem;}
body.page-scratchpad .inline-1458 {display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;}
body.page-scratchpad .inline-1459 {flex: 1; min-width: 150px; height: 32px; font-size: 0.85rem;}
body.page-scratchpad .inline-1460 {display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;}
body.page-scratchpad .inline-1461 {height: 32px;}
body.page-scratchpad .inline-1462 {font-size: 0.8rem; font-weight: 700; color: var(--accent-primary);}
body.page-scratchpad .inline-1463 {min-height: 420px; font-family: inherit; font-size: 16px; line-height: 1.6; border-radius: 0 0 var(--radius-md) var(--radius-md); resize: vertical; margin-bottom: 1.5rem;}
body.page-sitemap-generator .inline-1464 {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;}
body.page-sitemap-generator .inline-1465 {min-height: 250px; font-family: monospace; font-size: 0.85rem;}
body.page-sitemap-generator .inline-1466 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 1rem;}
body.page-sitemap-generator .inline-1467 {display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem;}
body.page-sitemap-generator .inline-1468 {width: 16px; height: 16px;}
body.page-sitemap-generator .inline-1469 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-sitemap-generator .inline-1470 {margin-bottom: 0; font-weight: 700;}
body.page-sitemap-generator .inline-1471 {min-height: 440px; font-family: monospace; font-size: 0.85rem; background: var(--bg-surface);}
body.page-sitemap-generator .inline-1472 {margin-top: 3rem;}
body.page-slug-generator .inline-1473 {color:var(--accent-primary);}
body.page-slug-generator .inline-1474 {font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.5px;}
body.page-slug-generator .inline-1475 {color: var(--text-secondary);}
body.page-slug-generator .inline-1476 {color: var(--accent-primary);}
body.page-slug-generator .inline-1477 {padding: 24px; margin-bottom: 24px;}
body.page-slug-generator .inline-1478 {grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px;}
body.page-slug-generator .inline-1479 {margin: 0;}
body.page-slug-generator .inline-1480 {display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; padding: 14px; background: var(--bg-subtle); border-radius: var(--radius-sm);}
body.page-slug-generator .inline-1481 {display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer;}
body.page-slug-generator .inline-1482 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;}
body.page-slug-generator .inline-1483 {font-size: 12px; color: var(--text-muted); font-family: var(--font-mono);}
body.page-slug-generator .inline-1484 {font-family: var(--font-mono); font-size: 14px;}
body.page-slug-generator .inline-1485 {display: flex; gap: 10px; flex-wrap: wrap;}
body.page-slug-generator .inline-1486 {margin: 2.5rem 0 1.5rem;}
body.page-slug-generator .inline-1487 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-slug-generator .inline-1488 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-slug-generator .inline-1489 {margin-top: 24px;}
body.page-sql-formatter .inline-1490 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.85rem 1.25rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;}
body.page-sql-formatter .inline-1491 {display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;}
body.page-sql-formatter .inline-1492 {display: flex; align-items: center; gap: 0.4rem;}
body.page-sql-formatter .inline-1493 {font-size: 0.85rem; font-weight: 600;}
body.page-sql-formatter .inline-1494 {width: 130px; height: 32px; font-size: 0.85rem; padding: 0.2rem 0.5rem;}
body.page-sql-formatter .inline-1495 {width: 105px; height: 32px; font-size: 0.85rem; padding: 0.2rem 0.5rem;}
body.page-sql-formatter .inline-1496 {display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;}
body.page-sql-formatter .inline-1497 {display: flex; gap: 0.4rem; align-items: center;}
body.page-sql-formatter .inline-1498 {color: #ef4444;}
body.page-sql-formatter .inline-1499 {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-sql-formatter .inline-1500 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;}
body.page-sql-formatter .inline-1501 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);}
body.page-sql-formatter .inline-1502 {font-size: 0.8rem; color: var(--text-muted);}
body.page-sql-formatter .inline-1503 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; resize: vertical;}
body.page-sql-formatter .inline-1504 {font-size: 0.85rem; font-weight: 700; color: var(--accent-primary);}
body.page-sql-formatter .inline-1505 {display: flex; gap: 0.35rem;}
body.page-sql-formatter .inline-1506 {height: 24px; padding: 0 0.5rem; font-size: 0.75rem;}
body.page-sql-formatter .inline-1507 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; background: var(--bg-surface); resize: vertical;}
body.page-stopwatch-timer .inline-1508 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm);}
body.page-stopwatch-timer .inline-1509 {font-size: clamp(3rem, 9vw, 5rem); font-family: monospace; font-weight: 900; color: var(--accent-primary); letter-spacing: -0.03em; line-height: 1; margin-bottom: 1.5rem;}
body.page-stopwatch-timer .inline-1510 {font-size: 0.55em; opacity: 0.7;}
body.page-stopwatch-timer .inline-1511 {display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;}
body.page-stopwatch-timer .inline-1512 {min-width: 140px; font-weight: 800; font-size: 1.1rem;}
body.page-stopwatch-timer .inline-1513 {min-width: 120px; font-weight: 700;}
body.page-stopwatch-timer .inline-1514 {display: none; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem;}
body.page-stopwatch-timer .inline-1515 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;}
body.page-stopwatch-timer .inline-1516 {margin: 0; font-size: 1.1rem;}
body.page-stopwatch-timer .inline-1517 {max-height: 320px; overflow-y: auto;}
body.page-stopwatch-timer .inline-1518 {width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem;}
body.page-stopwatch-timer .inline-1519 {background: var(--bg-subtle); border-bottom: 1px solid var(--border-color);}
body.page-stopwatch-timer .inline-1520 {padding: 0.75rem 1rem;}
body.page-stopwatch-timer .inline-1521 {padding: 0.75rem 1rem; text-align: right;}
body.page-subnet-calculator .inline-1522 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;}
body.page-subnet-calculator .inline-1523 {flex: 1; min-width: 200px;}
body.page-subnet-calculator .inline-1524 {min-width: 240px;}
body.page-subnet-calculator .inline-1525 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.5rem;}
body.page-subnet-calculator .inline-1526 {padding: 1rem 1.25rem; background: var(--bg-subtle); border-bottom: 1px solid var(--border-color);}
body.page-subnet-calculator .inline-1527 {font-size: 1.05rem; margin: 0;}
body.page-subnet-calculator .inline-1528 {padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.95rem;}
body.page-subnet-calculator .inline-1529 {display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;}
body.page-subnet-calculator .inline-1530 {color: var(--text-secondary);}
body.page-subnet-calculator .inline-1531 {font-family: monospace; color: var(--accent-primary);}
body.page-subnet-calculator .inline-1532 {font-family: monospace; color: var(--accent-success);}
body.page-subnet-calculator .inline-1533 {font-family: monospace;}
body.page-subnet-calculator .inline-1534 {display: flex; justify-content: space-between; padding-top: 0.25rem;}
body.page-subnet-calculator .inline-1535 {font-weight: 600;}
body.page-subnet-calculator .inline-1536 {margin-top: 3rem;}
body.page-svg-to-png .inline-1537 {color:var(--accent-primary);}
body.page-svg-to-png .inline-1538 {padding: 24px;}
body.page-svg-to-png .inline-1539 {font-size: 18px; margin-bottom: 14px;}
body.page-svg-to-png .inline-1540 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;}
body.page-svg-to-png .inline-1541 {margin: 0;}
body.page-svg-to-png .inline-1542 {display: flex; gap: 4px;}
body.page-svg-to-png .inline-1543 {padding: 2px 6px; font-size: 11px;}
body.page-svg-to-png .inline-1544 {font-family: var(--font-mono); font-size: 13px;}
body.page-svg-to-png .inline-1545 {margin-bottom: 16px;}
body.page-svg-to-png .inline-1546 {margin-bottom: 6px;}
body.page-svg-to-png .inline-1547 {display: flex; gap: 6px; flex-wrap: wrap;}
body.page-svg-to-png .inline-1548 {grid-template-columns: 1fr 1fr; gap: 12px;}
body.page-svg-to-png .inline-1549 {margin-top: 14px; margin-bottom: 0;}
body.page-svg-to-png .inline-1550 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px;}
body.page-svg-to-png .inline-1551 {font-size: 18px; margin: 0;}
body.page-svg-to-png .inline-1552 {display: flex; gap: 8px;}
body.page-svg-to-png .inline-1553 {padding: 6px 12px; font-size: 12px;}
body.page-svg-to-png .inline-1554 {padding: 6px 14px; font-size: 12px;}
body.page-svg-to-png .inline-1555 {margin-top: 14px; font-size: 13px; color: var(--text-secondary); display: flex; justify-content: space-between;}
body.page-svg-to-png .inline-1556 {margin-top: 32px;}
body.page-svg-to-png .inline-1557 {margin: 2.5rem 0 1.5rem;}
body.page-svg-to-png .inline-1558 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-svg-to-png .inline-1559 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-svg-to-png .inline-1560 {margin-top: 24px;}
body.page-svg-wave-generator .inline-1561 {background: #0f172a; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); margin-bottom: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; transition: background 0.2s;}
body.page-svg-wave-generator .inline-1562 {padding: 1.5rem 2rem; color: #ffffff; flex-grow: 1;}
body.page-svg-wave-generator .inline-1563 {margin-top: 0; font-size: 1.25rem;}
body.page-svg-wave-generator .inline-1564 {font-size: 0.9rem; opacity: 0.8; margin-bottom: 0;}
body.page-svg-wave-generator .inline-1565 {line-height: 0; width: 100%;}
body.page-svg-wave-generator .inline-1566 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-svg-wave-generator .inline-1567 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;}
body.page-svg-wave-generator .inline-1568 {font-size: 1.1rem; margin: 0;}
body.page-svg-wave-generator .inline-1569 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem;}
body.page-svg-wave-generator .inline-1570 {display: flex; justify-content: space-between; margin-bottom: 0.35rem;}
body.page-svg-wave-generator .inline-1571 {font-weight: 700; margin: 0;}
body.page-svg-wave-generator .inline-1572 {font-weight: 700; color: var(--accent-primary);}
body.page-svg-wave-generator .inline-1573 {width: 100%;}
body.page-svg-wave-generator .inline-1574 {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; align-items: center; border-top: 1px solid var(--border-color); padding-top: 1.25rem;}
body.page-svg-wave-generator .inline-1575 {font-weight: 700;}
body.page-svg-wave-generator .inline-1576 {display: flex; gap: 0.5rem; align-items: center;}
body.page-svg-wave-generator .inline-1577 {width: 44px; height: 38px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; padding: 2px;}
body.page-svg-wave-generator .inline-1578 {font-family: monospace; font-weight: 700;}
body.page-svg-wave-generator .inline-1579 {display: flex; gap: 1.25rem;}
body.page-svg-wave-generator .inline-1580 {display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.9rem; font-weight: 600;}
body.page-svg-wave-generator .inline-1581 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-svg-wave-generator .inline-1582 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem;}
body.page-svg-wave-generator .inline-1583 {display: flex; gap: 0.5rem;}
body.page-svg-wave-generator .inline-1584 {background: var(--bg-subtle); padding: 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-family: monospace; font-size: 0.85rem; margin: 0; color: var(--accent-primary); overflow-x: auto; max-height: 180px;}
body.page-test-data-generator .inline-1585 {justify-content: flex-start; margin-bottom: 1.5rem;}
body.page-test-data-generator .inline-1586 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-test-data-generator .inline-1587 {display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1.25rem;}
body.page-test-data-generator .inline-1588 {width: 80px;}
body.page-test-data-generator .inline-1589 {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem;}
body.page-test-data-generator .inline-1590 {display: none;}
body.page-test-data-generator .inline-1591 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md);}
body.page-test-data-generator .inline-1592 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;}
body.page-test-data-generator .inline-1593 {display: flex; flex-direction: column; gap: 1rem;}
body.page-test-data-generator .inline-1594 {margin-top: 3rem;}
body.page-text-diff .inline-1595 {color:var(--accent-primary);}
body.page-text-diff .inline-1596 {padding: 24px; margin-bottom: 24px;}
body.page-text-diff .inline-1597 {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px;}
body.page-text-diff .inline-1598 {display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px;}
body.page-text-diff .inline-1599 {display: flex; align-items: center; gap: 6px; cursor: pointer;}
body.page-text-diff .inline-1600 {display: flex; gap: 8px;}
body.page-text-diff .inline-1601 {padding: 6px 12px; font-size: 12px;}
body.page-text-diff .inline-1602 {margin: 0;}
body.page-text-diff .inline-1603 {font-family: var(--font-mono); font-size: 13px;}
body.page-text-diff .inline-1604 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 12px;}
body.page-text-diff .inline-1605 {background: rgba(34, 197, 94, 0.15); color: #22c55e;}
body.page-text-diff .inline-1606 {background: rgba(239, 68, 68, 0.15); color: #ef4444;}
body.page-text-diff .inline-1607 {background: var(--bg-subtle); color: var(--text-muted);}
body.page-text-diff .inline-1608 {padding: 30px; text-align: center; color: var(--text-muted);}
body.page-text-diff .inline-1609 {margin: 2.5rem 0 1.5rem;}
body.page-text-diff .inline-1610 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-text-diff .inline-1611 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-text-diff .inline-1612 {margin-top: 24px;}
body.page-timestamp-converter .inline-1613 {color:var(--accent-primary);}
body.page-timestamp-converter .inline-1614 {font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin-bottom: 4px;}
body.page-timestamp-converter .inline-1615 {margin-top: 10px; display: flex; justify-content: center; gap: 8px;}
body.page-timestamp-converter .inline-1616 {font-size: 12px; padding: 4px 12px;}
body.page-timestamp-converter .inline-1617 {grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 24px;}
body.page-timestamp-converter .inline-1618 {padding: 24px;}
body.page-timestamp-converter .inline-1619 {font-size: 18px; margin-bottom: 14px;}
body.page-timestamp-converter .inline-1620 {display: flex; gap: 8px;}
body.page-timestamp-converter .inline-1621 {font-family: var(--font-mono);}
body.page-timestamp-converter .inline-1622 {display: flex; gap: 8px; margin-bottom: 14px;}
body.page-timestamp-converter .inline-1623 {padding: 24px; margin-bottom: 24px;}
body.page-timestamp-converter .inline-1624 {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;}
body.page-timestamp-converter .inline-1625 {font-size: 13px; color: var(--text-secondary); margin-bottom: 16px;}
body.page-timestamp-converter .inline-1626 {grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: flex-end;}
body.page-timestamp-converter .inline-1627 {margin: 0;}
body.page-timestamp-converter .inline-1628 {display: flex; gap: 6px;}
body.page-timestamp-converter .inline-1629 {height: 42px;}
body.page-timestamp-converter .inline-1630 {margin-top: 16px; padding: 14px; background: var(--bg-subtle); border-radius: 6px; font-size: 14px;}
body.page-timestamp-converter .inline-1631 {font-family: var(--font-mono); color: var(--accent-primary);}
body.page-timestamp-converter .inline-1632 {font-size: 12px; color: var(--text-secondary); margin-top: 4px;}
body.page-timestamp-converter .inline-1633 {margin: 2.5rem 0 1.5rem;}
body.page-timestamp-converter .inline-1634 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-timestamp-converter .inline-1635 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-timestamp-converter .inline-1636 {margin-top: 24px;}
body.page-timezone-converter .inline-1637 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-timezone-converter .inline-1638 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;}
body.page-timezone-converter .inline-1639 {margin-bottom: 0; font-weight: 700;}
body.page-timezone-converter .inline-1640 {width: 100%; cursor: pointer;}
body.page-timezone-converter .inline-1641 {display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;}
body.page-timezone-converter .inline-1642 {display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem;}
body.page-timezone-converter .inline-1643 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;}
body.page-timezone-converter .inline-1644 {flex: 1; min-width: 220px;}
body.page-timezone-converter .inline-1645 {margin-top: 3rem;}
body.page-typing-test .inline-1646 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; text-align: center;}
body.page-typing-test .inline-1647 {font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 700;}
body.page-typing-test .inline-1648 {font-size: 2.2rem; font-weight: 900; color: var(--accent-primary); line-height: 1.1; margin-top: 0.2rem;}
body.page-typing-test .inline-1649 {font-size: 2.2rem; font-weight: 900; color: #10b981; line-height: 1.1; margin-top: 0.2rem;}
body.page-typing-test .inline-1650 {font-size: 2.2rem; font-family: monospace; font-weight: 900; color: var(--text-primary); line-height: 1.1; margin-top: 0.2rem;}
body.page-typing-test .inline-1651 {font-size: 2.2rem; font-weight: 900; color: #ef4444; line-height: 1.1; margin-top: 0.2rem;}
body.page-typing-test .inline-1652 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;}
body.page-typing-test .inline-1653 {display: flex; gap: 0.5rem; align-items: center;}
body.page-typing-test .inline-1654 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);}
body.page-typing-test .inline-1655 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.75rem; margin-bottom: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 1.15rem; line-height: 1.8; letter-spacing: 0.02em; user-select: none; min-height: 150px;}
body.page-typing-test .inline-1656 {opacity: 0; position: absolute; left: -9999px;}
body.page-typing-test .inline-1657 {text-align: center; color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 0.75rem; background: var(--bg-subtle); border-radius: var(--radius-sm); border: 1px dashed var(--border-color); margin-bottom: 1.5rem;}
body.page-typing-test .inline-1658 {display: none; background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-subtle) 100%); border: 2px solid var(--accent-primary); border-radius: var(--radius-md); padding: 2rem; text-align: center; margin-bottom: 1.5rem;}
body.page-typing-test .inline-1659 {margin: 0 0 0.5rem; font-size: 1.75rem;}
body.page-typing-test .inline-1660 {font-size: 1.1rem; font-weight: 700; color: var(--accent-primary); margin-bottom: 1.5rem;}
body.page-typing-test .inline-1661 {display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; flex-wrap: wrap;}
body.page-typing-test .inline-1662 {font-size: 0.85rem; color: var(--text-secondary);}
body.page-typing-test .inline-1663 {font-size: 2.5rem; font-weight: 900; color: var(--accent-primary);}
body.page-typing-test .inline-1664 {font-size: 2.5rem; font-weight: 900; color: #10b981;}
body.page-typing-test .inline-1665 {font-size: 2.5rem; font-weight: 900; color: var(--text-primary);}
body.page-unit-converter .inline-1666 {justify-content: flex-start; margin: 0 0 1.5rem;}
body.page-unit-converter .inline-1667 {background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.75rem;}
body.page-unit-converter .inline-1668 {display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center;}
body.page-unit-converter .inline-1669 {font-size: 1.15rem; font-weight: 600; margin-bottom: 0.75rem;}
body.page-unit-converter .inline-1670 {padding-top: 1.5rem;}
body.page-unit-converter .inline-1671 {margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;}
body.page-unit-converter .inline-1672 {font-size: 0.85rem; color: var(--text-secondary);}
body.page-unit-converter .inline-1673 {font-weight: 600; font-size: 1rem; color: var(--accent-primary);}
body.page-url-cleaner .inline-1674 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-url-cleaner .inline-1675 {margin-bottom: 0;}
body.page-url-cleaner .inline-1676 {min-height: 140px; font-family: monospace; font-size: 0.95rem;}
body.page-url-cleaner .inline-1677 {min-height: 140px; font-family: monospace; font-size: 0.95rem; background: var(--bg-surface); color: var(--accent-success); font-weight: 600;}
body.page-url-cleaner .inline-1678 {display: none; background: var(--bg-subtle); border: 1px solid var(--border-color); padding: 1.25rem; border-radius: var(--radius-md);}
body.page-url-cleaner .inline-1679 {font-size: 0.95rem; margin-bottom: 0.5rem; color: var(--accent-danger);}
body.page-url-cleaner .inline-1680 {display: flex; flex-wrap: wrap; gap: 0.5rem;}
body.page-url-cleaner .inline-1681 {margin-top: 3rem;}
body.page-url-encoder-decoder .inline-1682 {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem;}
body.page-url-encoder-decoder .inline-1683 {margin: 0;}
body.page-url-encoder-decoder .inline-1684 {display: flex; align-items: center; gap: 0.75rem;}
body.page-url-encoder-decoder .inline-1685 {margin: 0; font-size: 0.85rem;}
body.page-url-encoder-decoder .inline-1686 {width: auto; padding: 0.4rem 0.75rem; font-size: 0.85rem;}
body.page-url-encoder-decoder .inline-1687 {display: flex; justify-content: space-between; margin-bottom: 0.5rem;}
body.page-url-encoder-decoder .inline-1688 {min-height: 150px;}
body.page-url-encoder-decoder .inline-1689 {margin-top: 1.5rem;}
body.page-url-encoder-decoder .inline-1690 {min-height: 150px; background: var(--bg-subtle);}
body.page-url-shortener .inline-1691 {background: var(--bg-surface); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;}
body.page-url-shortener .inline-1692 {display: flex; gap: 0.75rem; flex-wrap: wrap;}
body.page-url-shortener .inline-1693 {flex: 1; min-width: 260px;}
body.page-url-shortener .inline-1694 {display: none; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;}
body.page-url-shortener .inline-1695 {font-size: 1.1rem; margin-bottom: 1rem; color: var(--accent-success);}
body.page-url-shortener .inline-1696 {display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;}
body.page-url-shortener .inline-1697 {flex: 1; min-width: 240px;}
body.page-url-shortener .inline-1698 {font-size: 0.85rem; color: var(--text-secondary);}
body.page-url-shortener .inline-1699 {display: flex; gap: 0.5rem; margin-bottom: 1rem;}
body.page-url-shortener .inline-1700 {font-weight: 700; font-size: 1.1rem; color: var(--accent-primary); background: var(--bg-subtle);}
body.page-url-shortener .inline-1701 {font-size: 0.875rem; color: var(--text-secondary);}
body.page-url-shortener .inline-1702 {word-break: break-all;}
body.page-url-shortener .inline-1703 {display: flex; flex-direction: column; align-items: center; background: #ffffff; padding: 1rem; border-radius: var(--radius-md); border: 1px solid var(--border-color);}
body.page-url-shortener .inline-1704 {width: 128px; height: 128px;}
body.page-url-shortener .inline-1705 {font-size: 0.75rem; color: #475569; margin-top: 0.5rem;}
body.page-url-shortener .inline-1706 {display: none; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem;}
body.page-url-shortener .inline-1707 {font-size: 0.95rem; margin-bottom: 0.75rem;}
body.page-url-shortener .inline-1708 {display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem;}
body.page-url-shortener .inline-1709 {margin-top: 3rem;}
body.page-user-agent-parser .inline-1710 {color:var(--accent-primary);}
body.page-user-agent-parser .inline-1711 {font-size: 18px; margin-bottom: 14px;}
body.page-user-agent-parser .inline-1712 {padding: 24px; margin-bottom: 24px;}
body.page-user-agent-parser .inline-1713 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px;}
body.page-user-agent-parser .inline-1714 {font-size: 18px; margin: 0;}
body.page-user-agent-parser .inline-1715 {display: flex; align-items: center; gap: 8px;}
body.page-user-agent-parser .inline-1716 {font-size: 13px; color: var(--text-secondary); margin: 0;}
body.page-user-agent-parser .inline-1717 {padding: 4px 10px; font-size: 12px;}
body.page-user-agent-parser .inline-1718 {font-family: var(--font-mono); font-size: 13px;}
body.page-user-agent-parser .inline-1719 {display: flex; gap: 10px; margin-bottom: 20px;}
body.page-user-agent-parser .inline-1720 {font-size: 16px; margin-bottom: 10px;}
body.page-user-agent-parser .inline-1721 {width: 100%; border-collapse: collapse; font-size: 13.5px;}
body.page-user-agent-parser .inline-1722 {padding: 8px; border-bottom: 1px solid var(--border-color); width: 180px; font-weight: 600; color: var(--text-secondary);}
body.page-user-agent-parser .inline-1723 {padding: 8px; border-bottom: 1px solid var(--border-color);}
body.page-user-agent-parser .inline-1724 {padding: 8px; border-bottom: 1px solid var(--border-color); font-weight: 600; color: var(--text-secondary);}
body.page-user-agent-parser .inline-1725 {margin: 2.5rem 0 1.5rem;}
body.page-user-agent-parser .inline-1726 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-user-agent-parser .inline-1727 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-user-agent-parser .inline-1728 {margin-top: 24px;}
body.page-uuid-generator .inline-1729 {color:var(--accent-primary);}
body.page-uuid-generator .inline-1730 {padding: 24px; margin-bottom: 24px;}
body.page-uuid-generator .inline-1731 {grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px;}
body.page-uuid-generator .inline-1732 {margin: 0;}
body.page-uuid-generator .inline-1733 {grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; padding: 14px; background: var(--bg-subtle); border-radius: var(--radius-sm);}
body.page-uuid-generator .inline-1734 {font-size: 12px;}
body.page-uuid-generator .inline-1735 {font-size: 13px;}
body.page-uuid-generator .inline-1736 {display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;}
body.page-uuid-generator .inline-1737 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;}
body.page-uuid-generator .inline-1738 {font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7;}
body.page-uuid-generator .inline-1739 {margin: 2.5rem 0 1.5rem;}
body.page-uuid-generator .inline-1740 {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem;}
body.page-uuid-generator .inline-1741 {display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.2s ease;}
body.page-uuid-generator .inline-1742 {margin-top: 24px;}
body.page-weather-checker .inline-1743 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem;}
body.page-weather-checker .inline-1744 {display: flex; gap: 0.75rem; flex-wrap: wrap;}
body.page-weather-checker .inline-1745 {flex-grow: 1; min-width: 240px; position: relative;}
body.page-weather-checker .inline-1746 {display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; align-items: center;}
body.page-weather-checker .inline-1747 {font-size: 0.8rem; font-weight: 700; color: var(--text-secondary);}
body.page-weather-checker .inline-1748 {background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #ffffff; border-radius: var(--radius-md); padding: 2rem; border: 1px solid var(--border-color); margin-bottom: 1.5rem; position: relative; overflow: hidden;}
body.page-weather-checker .inline-1749 {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;}
body.page-weather-checker .inline-1750 {display: flex; align-items: center; gap: 0.5rem;}
body.page-weather-checker .inline-1751 {font-size: 1.75rem; font-weight: 800;}
body.page-weather-checker .inline-1752 {background: rgba(255,255,255,0.2); padding: 0.2rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600;}
body.page-weather-checker .inline-1753 {font-size: 0.85rem; opacity: 0.7; margin-top: 0.25rem;}
body.page-weather-checker .inline-1754 {display: flex; gap: 0.35rem; background: rgba(255,255,255,0.1); padding: 3px; border-radius: var(--radius-sm);}
body.page-weather-checker .inline-1755 {background: #ffffff; color: #0f172a; padding: 0.25rem 0.75rem; font-weight: 700; border-radius: 4px;}
body.page-weather-checker .inline-1756 {background: transparent; color: #ffffff; padding: 0.25rem 0.75rem; font-weight: 700; border-radius: 4px;}
body.page-weather-checker .inline-1757 {display: flex; align-items: center; gap: 1.5rem; margin: 2rem 0 1.5rem;}
body.page-weather-checker .inline-1758 {font-size: 4rem; line-height: 1;}
body.page-weather-checker .inline-1759 {font-size: 3.5rem; font-weight: 900; line-height: 1;}
body.page-weather-checker .inline-1760 {font-size: 1.25rem; font-weight: 600; opacity: 0.9; margin-top: 0.25rem;}
body.page-weather-checker .inline-1761 {display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.25rem;}
body.page-weather-checker .inline-1762 {font-size: 0.8rem; opacity: 0.7; text-transform: uppercase;}
body.page-weather-checker .inline-1763 {font-size: 1.1rem; font-weight: 700; margin-top: 0.25rem;}
body.page-weather-checker .inline-1764 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem;}
body.page-weather-checker .inline-1765 {font-size: 1.1rem; margin-top: 0; margin-bottom: 1rem;}
body.page-weather-checker .inline-1766 {display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.75rem;}
body.page-word-counter .inline-1767 {margin-top: 0; margin-bottom: 1.5rem;}
body.page-word-counter .inline-1768 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem;}
body.page-word-counter .inline-1769 {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem;}
body.page-word-counter .inline-1770 {display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap;}
body.page-word-counter .inline-1771 {width: 1px; height: 24px; background: var(--border-color); margin: 0 0.25rem;}
body.page-word-counter .inline-1772 {color: #ef4444;}
body.page-word-counter .inline-1773 {display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--border-color); padding-top: 0.75rem;}
body.page-word-counter .inline-1774 {display: flex; align-items: center; gap: 0.35rem;}
body.page-word-counter .inline-1775 {font-size: 0.8rem; font-weight: 700; color: var(--text-secondary);}
body.page-word-counter .inline-1776 {padding: 0.2rem 0.55rem; font-size: 0.8rem;}
body.page-word-counter .inline-1777 {width: 1px; height: 20px; background: var(--border-color); margin: 0 0.2rem;}
body.page-word-counter .inline-1778 {width: 100px; padding: 0.2rem 0.4rem; font-size: 0.8rem; height: 28px;}
body.page-word-counter .inline-1779 {width: 75px; padding: 0.2rem 0.4rem; font-size: 0.8rem; height: 28px;}
body.page-word-counter .inline-1780 {display: none; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin-top: 0.75rem;}
body.page-word-counter .inline-1781 {display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;}
body.page-word-counter .inline-1782 {flex: 1; min-width: 180px; height: 34px; font-size: 0.85rem;}
body.page-word-counter .inline-1783 {display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;}
body.page-word-counter .inline-1784 {height: 34px;}
body.page-word-counter .inline-1785 {font-size: 0.8rem; font-weight: 700; color: var(--accent-primary);}
body.page-word-counter .inline-1786 {margin-bottom: 1.5rem;}
body.page-word-counter .inline-1787 {min-height: 320px; font-size: 15px; line-height: 1.6; border-radius: var(--radius-md);}
body.page-word-counter .inline-1788 {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.5rem;}
body.page-word-counter .inline-1789 {background: var(--bg-subtle); padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--border-color);}
body.page-word-counter .inline-1790 {margin-bottom: 0.75rem; font-size: 0.95rem;}
body.page-word-counter .inline-1791 {font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.4rem;}
body.page-word-counter .inline-1792 {color: var(--text-primary);}
body.page-word-counter .inline-1793 {font-size: 0.9rem; color: var(--text-secondary);}
body.page-word-counter .inline-1794 {font-size: 0.875rem; color: var(--text-secondary);}
body.page-xml-formatter .inline-1795 {display: none; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; font-weight: 600;}
body.page-xml-formatter .inline-1796 {background: var(--bg-subtle); border: 1px solid var(--border-color); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;}
body.page-xml-formatter .inline-1797 {display: flex; gap: 0.75rem; align-items: center;}
body.page-xml-formatter .inline-1798 {display: flex; align-items: center; gap: 0.5rem;}
body.page-xml-formatter .inline-1799 {font-size: 0.875rem; color: var(--text-secondary);}
body.page-xml-formatter .inline-1800 {padding: 0.25rem 0.5rem; font-size: 0.85rem;}
body.page-xml-formatter .inline-1801 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
body.page-xml-formatter .inline-1802 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-xml-formatter .inline-1803 {margin-bottom: 0;}
body.page-xml-formatter .inline-1804 {min-height: 380px; font-family: monospace; font-size: 0.9rem;}
body.page-xml-formatter .inline-1805 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.4rem;}
body.page-xml-formatter .inline-1806 {margin: 0; justify-content: flex-start; gap: 0.35rem;}
body.page-xml-formatter .inline-1807 {padding: 0.25rem 0.75rem; font-size: 0.8rem;}
body.page-xml-formatter .inline-1808 {min-height: 380px; font-family: monospace; font-size: 0.9rem; background: var(--bg-surface);}
body.page-xml-formatter .inline-1809 {display: none; min-height: 380px; max-height: 520px; overflow-y: auto; padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;}
body.page-xml-formatter .inline-1810 {display: flex; gap: 0.5rem; margin-bottom: 0.75rem;}
body.page-xml-formatter .inline-1811 {padding: 2px 8px; font-size: 0.75rem;}
body.page-xml-formatter .inline-1812 {margin-top: 3rem;}
body.page-yaml-formatter .inline-1813 {background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.85rem 1.25rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem;}
body.page-yaml-formatter .inline-1814 {display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;}
body.page-yaml-formatter .inline-1815 {display: flex; align-items: center; gap: 0.4rem;}
body.page-yaml-formatter .inline-1816 {font-size: 0.85rem; font-weight: 600;}
body.page-yaml-formatter .inline-1817 {width: 110px; height: 32px; font-size: 0.85rem; padding: 0.2rem 0.5rem;}
body.page-yaml-formatter .inline-1818 {display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;}
body.page-yaml-formatter .inline-1819 {display: none; padding: 0.2rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 700;}
body.page-yaml-formatter .inline-1820 {display: flex; gap: 0.4rem; align-items: center;}
body.page-yaml-formatter .inline-1821 {color: #ef4444;}
body.page-yaml-formatter .inline-1822 {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;}
body.page-yaml-formatter .inline-1823 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;}
body.page-yaml-formatter .inline-1824 {font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);}
body.page-yaml-formatter .inline-1825 {font-size: 0.8rem; color: var(--text-muted);}
body.page-yaml-formatter .inline-1826 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; resize: vertical;}
body.page-yaml-formatter .inline-1827 {font-size: 0.85rem; font-weight: 700; color: var(--accent-primary);}
body.page-yaml-formatter .inline-1828 {display: flex; gap: 0.35rem;}
body.page-yaml-formatter .inline-1829 {height: 24px; padding: 0 0.5rem; font-size: 0.75rem;}
body.page-yaml-formatter .inline-1830 {min-height: 380px; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5; background: var(--bg-surface); resize: vertical;}
body.page-yaml-json-converter .inline-1831 {justify-content: flex-start; margin-bottom: 1.5rem;}
body.page-yaml-json-converter .inline-1832 {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;}
body.page-yaml-json-converter .inline-1833 {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
body.page-yaml-json-converter .inline-1834 {margin-bottom: 0;}
body.page-yaml-json-converter .inline-1835 {min-height: 380px; font-family: monospace; font-size: 0.85rem;}
body.page-yaml-json-converter .inline-1836 {min-height: 380px; font-family: monospace; font-size: 0.85rem; background: var(--bg-surface);}
body.page-yaml-json-converter .inline-1837 {margin-top: 3rem;}

/* Tool page additions and static catalog footer */
.tool-extra-section { margin: 2.5rem 0; padding: 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 3px; }
.tool-extra-section h2 { margin-bottom: 1rem; }
.faq-item { border-top: 1px solid var(--border-color); padding: .9rem 0; }
.faq-item summary { cursor: pointer; font-weight: 700; }
.faq-item p { margin: .7rem 0 0; color: var(--text-secondary); }
.related-tool-grid, .footer-category ul { list-style: none; padding: 0; }
.related-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.related-tool-grid a { display: block; padding: .8rem 1rem; border: 1px solid var(--border-color); border-radius: 2px; background: var(--bg-subtle); }
.author-card { display: flex; align-items: center; gap: 1rem; }
.author-card h3 { margin-bottom: .2rem; }
.author-card p { color: var(--text-secondary); }
.author-mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; border: 1px solid var(--border-color); border-radius: 2px; font-weight: 800; color: var(--accent-primary); }
.footer-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.footer-heading nav { display: flex; gap: 1.25rem; }
.footer-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.6rem; }
.footer-category h2 { font-size: 1rem; margin-bottom: .75rem; }
.footer-category li { margin: .35rem 0; }
.footer-category a, .footer-heading a, .footer-bottom a { color: var(--text-secondary); }
.footer-category a:hover, .footer-heading a:hover, .footer-bottom a:hover { color: var(--accent-primary); }
.human-sitemap-section { margin: 2rem 0; }
.human-sitemap-section ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: .5rem 1rem; list-style: none; padding: 0; }
.human-sitemap-section li a { display: block; padding: .6rem .8rem; background: var(--bg-surface); border: 1px solid var(--border-color); }
button, .btn, .tool-card, .form-input, .search-trigger-btn, .filter-pill, .icon-btn, .quick-action-btn, .view-mode-btn, .sidebar-card, .tool-workspace, .footer-category a, input, select, textarea { border-radius: 3px !important; }
.btn:hover, button:hover, .tool-card:hover { transform: none; box-shadow: var(--shadow-sm); }
button:active, .btn:active { transform: none; }