:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --soft: #eef3f8;
  --text: #17202a;
  --muted: #647386;
  --line: #dbe4ee;
  --accent: #1666d9;
  --accent-dark: #0d4ea9;
  --green: #17845d;
  --red: #c83b3b;
  --yellow: #ffe76b;
  --shadow: 0 16px 40px rgba(25, 38, 60, 0.1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

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

.topbar {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  min-height: 68px;
  padding: 0 30px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
}

.brand {
  align-items: center;
  display: inline-flex;
  font-weight: 850;
  gap: 10px;
}

.brand-logo {
  display: block;
  height: auto;
  max-width: 100%;
  width: 150px;
}

@media (forced-colors: active), print {
  .brand-logo {
    filter: grayscale(1) contrast(1.3);
  }
}

@media (max-width: 720px) {
  html,
  body {
    overflow-x: clip;
  }

  .topbar {
    overflow: hidden;
    padding-left: 16px;
    padding-right: 0;
  }

  .brand {
    flex: 0 0 auto;
  }

  .brand-logo {
    width: 128px;
  }

  .topnav {
    flex: 1 1 auto;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 16px;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar {
    display: none;
  }
}

.brand-mark {
  align-items: center;
  background: var(--accent);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.topnav {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
  position: relative;
  white-space: nowrap;
}

.topnav a,
.nav-group summary {
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.92rem;
  font-weight: 850;
  list-style: none;
  padding: 8px 10px;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary::after {
  content: "";
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  margin-left: 8px;
  padding: 3px;
  transform: translateY(-2px) rotate(45deg);
}

.nav-group[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.topnav a:hover,
.nav-group summary:hover,
.nav-group[open] summary {
  background: var(--soft);
  color: var(--text);
}

.nav-group {
  position: relative;
}

.nav-menu {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(25, 38, 60, 0.14);
  display: grid;
  gap: 4px;
  min-width: 180px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
}

.nav-menu a {
  color: var(--text);
  display: block;
  padding: 10px 12px;
}

.nav-menu a:hover {
  background: #edf5ff;
}

.nav-home {
  color: var(--text) !important;
}

.language-picker {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 850;
}

.language-picker select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-weight: 850;
  min-height: 38px;
  padding: 6px 32px 6px 10px;
}

main {
  margin: 0 auto;
  max-width: 1240px;
  min-height: calc(100vh - 140px);
  padding: 34px 22px 64px;
}

.hero {
  background: linear-gradient(135deg, #fff 0%, #edf5ff 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 42px;
}

.home-hero {
  align-items: stretch;
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr);
  overflow: hidden;
  padding: 26px;
}

.home-hero-copy {
  align-content: center;
  display: grid;
  padding: 18px 0 18px 16px;
}

.eyebrow {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0;
  margin: 0 0 10px;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  max-width: 800px;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

h3 {
  font-size: 1.18rem;
}

.hero p:not(.eyebrow),
.muted {
  color: var(--muted);
  line-height: 1.65;
}

.hero p:not(.eyebrow) {
  max-width: 760px;
}

.hero-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.home-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.home-trust-row span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
  padding: 7px 11px;
}

.home-hero-visual {
  align-self: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(25, 38, 60, 0.12);
  margin: 0;
  min-height: 420px;
  overflow: hidden;
}

.home-hero-visual img {
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
  width: 100%;
}

.compact-section-head {
  margin-top: 34px;
}

.quick-action-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quick-action {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(25, 38, 60, 0.05);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 96px;
  padding: 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.quick-action:hover {
  border-color: #9fb5cf;
  box-shadow: 0 18px 34px rgba(25, 38, 60, 0.1);
  transform: translateY(-2px);
}

.quick-action strong,
.tool-card-icon,
.home-popular-icon {
  align-items: center;
  border-radius: 12px;
  display: inline-flex;
  height: 52px;
  justify-content: center;
  min-width: 52px;
  padding: 8px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.tool-card-icon svg,
.home-popular-icon svg,
.category-svg {
  width: 24px;
  height: 24px;
  display: block;
}

.quick-action span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.quick-action b {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-action small {
  color: var(--muted);
  display: -webkit-box;
  font-weight: 750;
  line-height: 1.35;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quick-action i {
  color: var(--accent);
  font-style: normal;
  font-weight: 950;
}

.section-head {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin: 38px 0 18px;
}

.tool-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.home-tool-search {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(24, 47, 75, 0.07);
  display: grid;
  gap: 10px;
  margin: 22px 0;
  padding: 18px;
}

.home-tool-search label { display: grid; gap: 8px; }
.home-tool-search span { color: #246fc2; font-size: 0.72rem; font-weight: 950; letter-spacing: 0.08em; text-transform: uppercase; }
.home-tool-search input { background: #f7f9fc; border: 1px solid #d6e2ee; border-radius: 13px; font-size: 1rem; font-weight: 800; min-height: 54px; outline: 0; padding: 0 16px; }
.home-tool-search input:focus { background: #fff; border-color: #74a9e8; box-shadow: 0 0 0 4px rgba(37, 112, 205, 0.1); }
.home-tool-search p { background: #fff7df; border: 1px solid #f0dc9d; border-radius: 12px; color: #82662a; font-size: 0.82rem; font-weight: 800; margin: 0; padding: 12px; }
.tool-card[hidden] { display: none !important; }
.tool-card {
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(25, 38, 60, 0.06);
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 168px;
  padding: 18px;
  position: relative;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.tool-card:hover {
  border-color: #b8c9dc;
  box-shadow: 0 18px 38px rgba(25, 38, 60, 0.12);
  transform: translateY(-2px);
}

/* Color Tones - Pastel backgrounds with high-contrast foreground icons */
.tool-card-blue .tool-card-icon,
.quick-action-blue strong,
.home-popular-card:hover .home-popular-icon {
  background-color: #e3f2fd;
  color: #1976d2;
}
.home-popular-icon {
  background-color: #f0f7ff;
  color: #1e88e5;
}

.tool-card-green .tool-card-icon,
.quick-action-green strong {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.tool-card-mint .tool-card-icon,
.quick-action-mint strong {
  background-color: #e0f2f1;
  color: #00695c;
}

.tool-card-teal .tool-card-icon,
.quick-action-teal strong {
  background-color: #e0f7fa;
  color: #00838f;
}

.tool-card-slate .tool-card-icon,
.quick-action-slate strong {
  background-color: #eceff1;
  color: #37474f;
}

.tool-card-amber .tool-card-icon,
.quick-action-amber strong {
  background-color: #fff8e1;
  color: #ef6c00;
}

.tool-card-purple .tool-card-icon,
.quick-action-purple strong {
  background-color: #f3e5f5;
  color: #6a1b9a;
}

.tool-card-red .tool-card-icon,
.quick-action-red strong {
  background-color: #ffebee;
  color: #c62828;
}

.tool-card-magenta .tool-card-icon,
.quick-action-magenta strong {
  background-color: #fce4ec;
  color: #d81b60;
}

.tool-card-palette .tool-card-icon,
.quick-action-palette strong {
  background-color: #efebe9;
  color: #4e342e;
}

.tool-card-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.tool-card-body span {
  color: var(--accent);
  display: block;
  font-size: 0.78rem;
  font-weight: 850;
}

.tool-card p {
  color: var(--muted);
  line-height: 1.48;
  margin: 0;
}

.tool-card-action {
  align-self: end;
  color: var(--accent);
  font-size: 0.86rem;
  grid-column: 2;
  justify-self: start;
}

.page-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.workspace,
.compressor-shell,
.watermark-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 22px;
}

.compressor-shell {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 330px;
  min-height: 620px;
}

.watermark-shell {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 330px;
}

.compressor-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.compress-toolbar {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.compressor-panel {
  background: #17253a;
  border-radius: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.watermark-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.watermark-panel {
  background: #17253a;
  border-radius: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.watermark-panel label,
.watermark-panel .label {
  color: #c9d6e6;
}

.watermark-panel input {
  background: #22324a;
  border-color: #344965;
  color: #fff;
}

.watermark-panel input[type="range"] {
  padding: 0;
}

.watermark-panel .button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.compressor-panel .muted,
.compressor-panel label {
  color: #c9d6e6;
}

.compressor-panel input,
.compressor-panel select {
  background: #22324a;
  border-color: #344965;
  color: #fff;
}

.compressor-panel input[type="range"] {
  padding: 0;
}

.panel-block {
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  display: grid;
  gap: 12px;
  padding-bottom: 16px;
}

.panel-block:last-of-type {
  border-bottom: 0;
}

.stats-list div {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.stats-list span {
  color: #c9d6e6;
  font-size: 0.82rem;
  font-weight: 800;
}

.stats-list strong {
  font-size: 0.95rem;
  text-align: right;
}

.workspace-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.meta-layout,
.color-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 280px;
  margin-top: 18px;
}

.color-stage {
  align-items: center;
  background: #edf3f9;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  height: min(62vh, 620px);
  justify-content: center;
  min-height: 360px;
  overflow: hidden;
  position: relative;
}

.color-magnifier {
  background: #101a2a;
  border: 2px solid #fff;
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(10, 21, 38, 0.28);
  color: #fff;
  display: grid;
  gap: 6px;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  width: 190px;
  z-index: 5;
}

.color-magnifier[hidden] {
  display: none;
}

.color-magnifier canvas {
  background: #fff;
  border-radius: 6px;
  display: block;
  image-rendering: pixelated;
  width: 100%;
}

.color-magnifier span {
  color: #dce8f7;
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
}

.media-preview {
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  min-height: 260px;
  overflow: hidden;
}

.media-preview img,
.media-preview video {
  display: block;
  max-height: 60vh;
  max-width: 100%;
}

.color-panel {
  background: #17253a;
  border-radius: 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.color-panel input {
  background: #22324a;
  border-color: #344965;
  color: #fff;
}

.color-swatch {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #eaf0f6, #c8d6e5);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  min-height: 180px;
}

.controls {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 18px 0;
}

.tight-controls {
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

label {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
  gap: 7px;
}

.check {
  align-items: center;
  flex-direction: row;
  gap: 9px;
  justify-content: flex-start;
}

input,
select,
textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 42px;
  padding: 10px 12px;
  width: 100%;
}

input[type="checkbox"] {
  accent-color: var(--accent);
  flex: 0 0 auto;
  height: 18px;
  min-height: 18px;
  padding: 0;
  width: 18px;
}

input[type="color"] {
  padding: 4px;
  width: 56px;
}

textarea {
  line-height: 1.5;
  min-height: 120px;
  resize: vertical;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.field-with-action {
  display: grid;
  gap: 8px;
}

.field-with-action .small-button {
  justify-self: end;
}

.base64-workspace {
  display: grid;
  gap: 16px;
}

.base64-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.base64-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.base64-tabs {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
  padding: 6px;
}

.base64-tab {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
  min-height: 42px;
  padding: 10px 14px;
}

.base64-tab.active {
  background: #fff;
  box-shadow: 0 6px 18px rgba(25, 38, 60, 0.08);
  color: var(--accent);
}

.base64-panel {
  display: none;
  gap: 14px;
}

.base64-panel.active {
  display: grid;
}

.base64-action-row {
  align-items: center;
  justify-content: center;
  position: relative;
}

.base64-action-row .primary-button {
  position: absolute;
  left: 0;
}

.swap-button {
  background: #fff;
  border-color: var(--line);
  color: var(--accent);
  font-size: 1.45rem;
  height: 46px;
  width: 46px;
}

.swap-button:hover {
  background: #eef5ff;
  border-color: #b7cff4;
}

.base64-link-preview {
  align-items: center;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 12px;
}

.base64-link-preview:hover,
.base64-link-preview:focus-visible {
  border-color: #9fc2ef;
  box-shadow: 0 8px 22px rgba(31, 87, 153, 0.1);
  outline: none;
}

.base64-link-preview[hidden] {
  display: none;
}

.link-thumb {
  align-items: center;
  background: #e6eef8;
  border: 1px solid #cfdae8;
  border-radius: 8px;
  color: var(--accent);
  display: grid;
  font-weight: 900;
  height: 54px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 54px;
}

.link-thumb img {
  background: #fff;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.link-thumb span {
  position: relative;
  z-index: 0;
}

.link-preview-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.link-preview-text strong,
.link-preview-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-preview-text span {
  color: var(--muted);
  font-size: 0.9rem;
}

.base64-history {
  background: #f7fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  max-height: 720px;
  overflow: hidden;
  padding: 14px;
  position: sticky;
  top: 18px;
}

.base64-history-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.base64-history-head h2 {
  font-size: 1rem;
  margin: 0;
}

.base64-history-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  max-height: 620px;
  overflow: auto;
  padding: 0;
}

.base64-history-item {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  min-height: 70px;
  padding: 10px;
  transform: translateY(0) scale(1);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.base64-history-item.is-link {
  cursor: pointer;
}

.base64-history-item.is-copy {
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.base64-history-item.is-link:hover,
.base64-history-item.is-link:focus-visible,
.base64-history-item.is-copy:hover,
.base64-history-item.is-copy:focus-visible {
  background: #f8fbff;
  border-color: #8bb7ee;
  box-shadow: 0 12px 26px rgba(31, 87, 153, 0.16);
  outline: none;
  transform: translateY(-2px) scale(1.01);
}

.base64-history-item.is-link:active,
.base64-history-item.is-copy:active {
  box-shadow: 0 5px 14px rgba(31, 87, 153, 0.12);
  transform: translateY(0) scale(0.99);
}

.history-order {
  align-items: center;
  background: #ecf3fb;
  border-radius: 999px;
  color: var(--accent);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.history-favicon {
  align-items: center;
  background: #e6eef8;
  border: 1px solid #cfdae8;
  border-radius: 8px;
  color: var(--accent);
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 38px;
}

.history-favicon img {
  background: #fff;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.history-favicon span {
  position: relative;
  z-index: 0;
}


.history-item-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.history-item-body strong,
.history-item-body p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item-body p {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0;
}

.history-value {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 850;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}

.base64-history-item.is-copy:hover .history-value,
.base64-history-item.is-copy:focus-visible .history-value {
  color: var(--accent);
  transform: translateX(2px);
}

.history-copy-text {
  border-radius: 6px;
  cursor: pointer;
  padding: 3px 4px;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.history-copy-text:hover,
.history-copy-text:focus-visible {
  background: #e6f0ff;
  color: var(--accent);
  outline: none;
  transform: translateX(2px);
}

.history-copy-text:active {
  transform: translateX(0) scale(0.98);
}

.history-link-tag {
  background: #1769e0;
  border-radius: 999px;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 850;
  padding: 6px 8px;
  white-space: nowrap;
}

.history-delete-button {
  align-items: center;
  background: #fff;
  border: 1px solid #d8e3ef;
  border-radius: 8px;
  color: #7b8794;
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  line-height: 1;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
  width: 34px;
}

.history-delete-button:hover,
.history-delete-button:focus-visible {
  background: #fff1f1;
  border-color: #f0a8a8;
  color: #c62828;
  outline: none;
  transform: translateY(-1px);
}

.history-delete-button:active {
  transform: translateY(0) scale(0.96);
}

.base64-history-empty {
  color: var(--muted);
  margin: 0;
  padding: 10px 2px;
}

/* TOOLBOX REDESIGN STYLES */
.tb-layout {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #111827;
  background-color: #ffffff;
  width: 100%;
}

/* Boxed Hero Section - Left aligned modern SaaS layout */
.tb-hero {
  text-align: left;
  padding: 80px 48px;
  background-color: #f8fafc;
  position: relative;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  margin-bottom: 48px;
}
.tb-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #111827;
}
.tb-hero p {
  font-size: 1.25rem;
  color: #475569;
  margin: 0 0 40px;
}

/* Search Bar - Aligns left */
.tb-search-bar {
  max-width: 640px;
  margin: 0;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 6px 6px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.tb-search-bar:focus-within {
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(37,99,235,0.1);
}
.tb-search-icon {
  color: #64748b;
  margin-right: 12px;
  display: flex;
}
.tb-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  outline: none;
  color: #111827;
}
.tb-search-bar input::placeholder {
  color: #94a3b8;
}
.tb-search-bar button {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tb-search-bar button:hover {
  background: #1d4ed8;
}

/* Search Keywords - Aligns left */
.tb-search-keywords {
  margin-top: 24px;
  font-size: 0.9rem;
  color: #64748b;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tb-search-keywords button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 12px;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}
.tb-search-keywords button:hover {
  background: #f1f5f9;
  color: #111827;
}

/* Background Icons (Subtle) */
.tb-hero-bg-icons {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.15;
  pointer-events: none;
}
.tb-bg-icon {
  position: absolute;
  background: transparent;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
}
.tb-bg-icon-1 { top: 20%; left: 60%; transform: rotate(-10deg); }
.tb-bg-icon-2 { top: 60%; left: 75%; transform: rotate(5deg); }
.tb-bg-icon-3 { top: 15%; right: 10%; transform: rotate(15deg); }
.tb-bg-icon-4 { top: 50%; right: 25%; transform: rotate(-5deg); }
.tb-bg-icon-5 { top: 80%; right: 10%; font-size: 1.5rem; font-weight: 800; }
.tb-bg-icon-6 { top: 70%; left: 55%; transform: rotate(10deg); }

/* Section Header */
.tb-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  width: 100%;
}
.tb-section-header h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111827;
}
.tb-section-header p {
  color: #64748b;
  margin: 6px 0 0 0;
  font-size: 0.95rem;
}

/* Popular Tools Section - 6 columns on desktop to fill full container width */
.tb-popular {
  padding: 0 0 48px 0;
  width: 100%;
  position: relative;
}
.tb-popular-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  width: 100%;
}
.tb-popular-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 32px 16px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.tb-popular-card:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(37,99,235,0.08);
}
.tb-popular-icon {
  background: #f1f5f9;
  color: #2563eb;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  flex-shrink: 0;
  font-size: 1.5rem;
}
.tb-popular-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: #111827;
}
.tb-popular-card p {
  font-size: 0.85rem;
  color: #475569;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Slider Controls - Hidden on desktop since 6 columns fit perfectly */
.tb-slider-controls {
  display: none;
  gap: 8px;
}
.tb-slider-arrow {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.tb-slider-arrow:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #111827;
}

/* Catalog / All Tools */
.tb-catalog {
  background: #ffffff;
  padding: 48px 0 0 0;
  border-top: 1px solid #e2e8f0;
  width: 100%;
}
.tb-catalog-header {
  text-align: left;
  margin-bottom: 40px;
}
.tb-catalog-header h2 {
  font-size: 2.25rem;
  font-weight: 800;
  margin: 0 0 12px;
  color: #111827;
}
.tb-catalog-header p {
  color: #64748b;
  margin: 0;
  font-size: 1.1rem;
}

/* Category Pills - Aligns left to match catalog structure */
.tb-category-pills {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
}
.tb-category-pills button {
  background: transparent;
  border: 1px solid #e2e8f0;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tb-category-pills button:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #111827;
}
.tb-category-pills button.active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
  font-weight: 600;
}
.pill-icon {
  flex-shrink: 0;
  color: currentColor;
}

/* All Tools Header & Sort */
.tb-alltools-header {
  width: 100%;
  margin-bottom: 24px;
}
.tb-sort {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tb-sort-label {
  font-size: 0.9rem;
  color: #64748b;
}
.tb-sort select {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 32px 6px 12px;
  background: #ffffff;
  font-size: 0.9rem;
  color: #111827;
  outline: none;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 24 24" stroke="%2364748b"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}
.tb-sort select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

.tb-view-toggles {
  display: flex;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px;
}
.tb-view-toggles button {
  background: transparent;
  border: none;
  padding: 6px;
  color: #94a3b8;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.tb-view-toggles button.active {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Tool Grid (All Tools) */
.tb-tool-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tb-tool-grid .tool-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}
.tb-tool-grid .tool-card:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(37,99,235,0.08);
}
.tool-card-icon-wrap {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  flex-shrink: 0;
}
.tool-card-icon {
  width: 24px;
  height: 24px;
}
.tool-card-body {
  flex: 1;
  min-width: 0;
}
.tool-card-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tool-card-body p {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tool-card-arrow {
  font-size: 1.25rem;
  color: #cbd5e1;
  margin-top: 10px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.tb-tool-grid .tool-card:hover .tool-card-arrow {
  color: #2563eb;
  transform: translateX(4px);
}

/* Card Badge */
.tb-card-badge {
  background: #111827;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.4;
  flex-shrink: 0;
}

.tb-search-empty {
  text-align: center;
  padding: 60px 20px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  color: #64748b;
  width: 100%;
}

/* Bookmark Banner */
.tb-bookmark-banner {
  background: #111827;
  color: #ffffff;
  border-radius: 12px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 40px 0;
  width: 100%;
}
.tb-bookmark-banner-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tb-bookmark-banner-icon {
  background: rgba(255, 255, 255, 0.1);
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}
.tb-bookmark-banner-text h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: #ffffff;
}
.tb-bookmark-banner-text p {
  font-size: 0.95rem;
  color: #94a3b8;
  margin: 0;
}
.tb-bookmark-banner-btn {
  background: #ffffff;
  color: #111827;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.tb-bookmark-banner-btn:hover {
  background: #f1f5f9;
}

/* Benefits */
.tb-benefits {
  width: 100%;
  margin: 48px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 40px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}
.tb-benefits article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.tb-benefits article svg {
  color: #2563eb;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}
.tb-benefits article strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #111827;
}
.tb-benefits article p {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .tb-popular-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .tb-popular-grid::-webkit-scrollbar {
    display: none;
  }
  .tb-popular-card {
    width: 200px;
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 32px 20px;
  }
  .tb-slider-controls {
    display: flex;
  }
  .tb-tool-grid { grid-template-columns: repeat(2, 1fr); }
  .tb-benefits { grid-template-columns: repeat(2, 1fr); }
  .tb-bookmark-banner { flex-direction: column; text-align: center; align-items: center; }
  .tb-bookmark-banner-left { flex-direction: column; }
}
@media (max-width: 600px) {
  .tb-popular-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .tb-popular-card {
    width: 180px;
  }
  .tb-tool-grid { grid-template-columns: 1fr; }
  .tb-benefits { grid-template-columns: 1fr; }
  .tb-hero { padding: 60px 24px; }
  .tb-hero h1 { font-size: 2.2rem; }
  .tb-search-bar { flex-direction: column; border-radius: 12px; padding: 12px; gap: 12px; }
  .tb-search-bar input { text-align: center; }
  .tb-search-bar button { width: 100%; padding: 12px; }
}.timezone-tabs {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
  padding: 6px;
}

.timezone-tab {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
  min-height: 46px;
  padding: 10px 14px;
}

.timezone-tab.active {
  background: #fff;
  box-shadow: 0 6px 18px rgba(25, 38, 60, 0.08);
  color: var(--accent);
}

.timezone-panel {
  display: none;
  gap: 18px;
}

.timezone-panel.active {
  display: grid;
}
.timezone-shell {
  display: grid;
  gap: 18px;
}

.timezone-hero {
  align-items: center;
  background: #17253a;
  border-radius: 8px;
  color: #fff;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 22px;
}

.timezone-kicker {
  color: #8ee0bd;
  display: block;
  font-size: 0.82rem;
  font-weight: 900;
  margin-bottom: 8px;
}

.timezone-hero h2 {
  font-size: clamp(1.35rem, 3vw, 2.2rem);
  margin: 0;
}

.timezone-hero p {
  color: #c9d6e6;
  margin: 8px 0 0;
}


.timezone-live-clock {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-width: 320px;
  padding: 16px;
  text-align: right;
}

.timezone-live-clock span {
  color: #8ee0bd;
  font-weight: 900;
}

.timezone-live-clock strong {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  letter-spacing: 0;
  line-height: 1;
}

.timezone-live-clock small {
  color: #c9d6e6;
  font-size: 0.9rem;
  line-height: 1.45;
}

.timezone-input-section {
  background: #f7fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.timezone-section-title {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.timezone-section-title strong {
  font-size: 1.1rem;
}
.timezone-controls {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr) minmax(220px, 0.7fr);
}

.timezone-controls label {
  display: grid;
  gap: 8px;
}

.timezone-controls input,
.timezone-controls select {
  font-size: 1rem;
  min-height: 52px;
}

.timezone-quick-buttons {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.timezone-quick-buttons .small-button {
  min-height: 38px;
  padding: 8px 10px;
}

.timezone-compare {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.time-card {
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-height: 230px;
  padding: 24px;
}

.time-card span {
  font-size: 0.95rem;
  font-weight: 900;
}

.time-card strong {
  font-size: clamp(2.7rem, 6.8vw, 5.3rem);
  letter-spacing: 0;
  line-height: 1;
}

.time-card small {
  font-size: 1rem;
  line-height: 1.5;
}

.source-card {
  background: #ecf3fb;
  border: 1px solid #cdddf0;
  color: #17253a;
}

.source-card small {
  color: #526173;
}

.target-card {
  background: #1769e0;
  border: 1px solid #1769e0;
  color: #fff;
}

.target-card small {
  color: #d8e7ff;
}
.payment-fee-shell {
  display: grid;
  gap: 18px;
}

.fee-hero {
  align-items: stretch;
  background: #17253a;
  border-radius: 8px;
  color: #fff;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  padding: 22px;
}

.fee-hero label {
  color: #d8e5f4;
  font-weight: 850;
}

.money-input {
  align-items: center;
  background: #fff;
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 8px 14px;
}

.money-input span {
  color: var(--accent);
  font-size: 2rem;
  font-weight: 950;
}

.money-input input {
  border: 0;
  font-size: 3rem;
  font-weight: 950;
  min-height: 76px;
  min-width: 0;
  padding: 0;
  width: 100%;
}

.fee-hero-result {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 18px;
  min-width: 0;
}

.fee-hero-result span {
  color: #b9c9dc;
  font-weight: 850;
}

.fee-hero-result strong {
  font-size: 2rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fee-hero-result small {
  color: #8ee0bd;
  font-size: 1.35rem;
  font-weight: 950;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fee-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.fee-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(25, 38, 60, 0.06);
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
}

.fee-card-head {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
}

.fee-rank-logo {
  align-items: center;
  display: flex;
  gap: 8px;
}

.fee-rank {
  align-items: center;
  background: #17253a;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 950;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.fee-logo {
  align-items: center;
  background: #eef4fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent);
  display: grid;
  font-weight: 950;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 44px;
}

.fee-logo img {
  background: #fff;
  height: 100%;
  object-fit: contain;
  padding: 9px;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.fee-logo span {
  position: relative;
  z-index: 0;
}

.fee-provider {
  display: block;
  font-size: 1.15rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.fee-card small {
  color: var(--muted);
  display: block;
  font-weight: 750;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.fee-net {
  color: var(--green);
  font-size: 1.45rem;
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fee-breakdown {
  background: var(--soft);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.fee-breakdown div {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.fee-breakdown span,
.fee-note {
  color: var(--muted);
}

.fee-breakdown strong {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fee-edit {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.fee-edit input {
  min-height: 38px;
}

.fee-note {
  line-height: 1.6;
  margin: 0;
}

.compressor-panel .button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.primary-button,
.secondary-button,
.small-button,
.back-link {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
}

.primary-button {
  background: var(--accent);
  color: #fff;
}

.primary-button:hover {
  background: var(--accent-dark);
}

.secondary-button,
.small-button,
.back-link {
  background: #fff;
  border-color: var(--line);
  color: var(--text);
}

.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.dropzone {
  align-items: center;
  background: var(--soft);
  border: 1px dashed #9eb4cb;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: 128px;
  padding: 22px;
  text-align: center;
}

.large-drop {
  min-height: 170px;
}

.compact-drop {
  min-height: 58px;
}

.file-pick-button {
  align-items: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  font-weight: 850;
  justify-content: center;
  min-height: 58px;
  min-width: 152px;
  padding: 0 16px;
}

.file-pick-button:hover {
  background: var(--accent-dark);
}

.file-pick-button input {
  display: none;
}

.zoom-readout {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
  min-height: 58px;
  padding: 8px;
}

.zoom-readout strong {
  min-width: 54px;
  text-align: center;
}

.icon-button {
  align-items: center;
  background: #132235;
  border: 1px solid #132235;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 1.25rem;
  font-weight: 850;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.dropzone input {
  display: none;
}

.split-compare {
  --split: 50%;
  --zoom: 1;
  --pan-x: 0px;
  --pan-y: 0px;
  background:
    linear-gradient(45deg, #dfe7f0 25%, transparent 25%) 0 0 / 22px 22px,
    linear-gradient(45deg, transparent 75%, #dfe7f0 75%) 0 0 / 22px 22px,
    linear-gradient(45deg, transparent 75%, #dfe7f0 75%) 11px 11px / 22px 22px,
    linear-gradient(45deg, #dfe7f0 25%, #eef3f8 25%) 11px 11px / 22px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 520px;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}

.split-compare.empty {
  display: none;
}

.split-compare img {
  backface-visibility: hidden;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  transform: translate(var(--pan-x),var(--pan-y)) scale(var(--zoom));
  transform-origin: center center;
  will-change: transform;
  width: 100%;
}

.split-compare .before-layer {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.split-divider {
  align-items: center;
  background: rgba(18, 32, 51, 0.9);
  display: flex;
  height: 100%;
  justify-content: center;
  left: var(--split);
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 4px;
  z-index: 4;
}

.split-divider span {
  align-items: center;
  background: #0d1725;
  border-radius: 999px;
  color: #79d4ff;
  display: inline-flex;
  font-size: 0.9rem;
  height: 54px;
  justify-content: center;
  letter-spacing: 0;
  width: 54px;
}

.compare-slider {
  cursor: ew-resize;
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 5;
}

.compare-label {
  background: rgba(13, 23, 37, 0.82);
  border-radius: 8px;
  color: #fff;
  font-weight: 850;
  padding: 8px 11px;
  position: absolute;
  top: 12px;
  z-index: 6;
}

.compare-label.left {
  left: 12px;
}

.compare-label.right {
  right: 12px;
}

.inline-busy {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: none;
  gap: 10px;
  left: 50%;
  padding: 12px 14px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
}

.inline-busy.active {
  display: flex;
}

.compare-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
}

.compare-card {
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.compare-card header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.compare-card canvas,
.mini-canvas,
.watermark-canvas,
.picker-canvas, {
  background: #eaf0f6;
  display: block;
  width: 100%;
}

.compare-card canvas {
  aspect-ratio: 16 / 10;
  max-height: 470px;
}

.stat-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  margin-top: 18px;
}

.stat {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.stat span,
.label {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 850;
  margin-bottom: 6px;
}

.stat strong {
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

.good {
  color: var(--green);
}

.bad {
  color: var(--red);
}

.qr-output,
.result-box,
.text-preview {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 120px;
  padding: 14px;
}

.qr-output {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 240px;
}

.qr-output svg {
  max-width: 230px;
  width: 100%;
}

.text-preview {
  line-height: 1.6;
  overflow: auto;
  white-space: pre-wrap;
}

.text-preview mark {
  background: var(--yellow);
  border-radius: 3px;
  padding: 0 2px;
}

.mini-canvas,
.watermark-canvas,
.picker-canvas {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 220px;
}

.watermark-canvas {
  cursor: crosshair;
  height: auto;
  max-height: 70vh;
  max-width: 100%;
  object-fit: contain;
  touch-action: none;
  width: auto;
}

.picker-canvas {
  cursor: crosshair;
  height: auto;
  image-rendering: auto;
  max-height: 100%;
  max-width: 100%;
  touch-action: none;
  width: auto;
}

.visually-hidden-file {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.custom-file-picker {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.custom-file-title {
  color: var(--muted);
  font-size: .92rem;
  font-weight: 750;
}

.custom-file-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.custom-file-button {
  background: var(--ink);
  border-radius: 8px;
  color: #fff;
  font-weight: 850;
  padding: 10px 14px;
}

.custom-file-name {
  color: var(--muted);
  font-size: .94rem;
  overflow-wrap: anywhere;
}


.thumb-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 18px;
}

.thumb-card {
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.thumb-card.unavailable {
  opacity: 0.58;
}

.thumb-card img {
  aspect-ratio: 16 / 9;
  background: var(--soft);
  border: 1px solid var(--line);
  display: block;
  object-fit: contain;
  width: 100%;
}

.thumb-meta {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.thumb-meta strong,
.thumb-meta span,
.thumb-meta small,
.thumb-meta em {
  display: block;
}

.thumb-meta span,
.thumb-meta small {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.thumb-status {
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
  margin-top: 6px;
}

.thumb-download {
  flex: 0 0 auto;
}

.busy-overlay {
  align-items: center;
  background: rgba(246, 248, 251, 0.72);
  display: none;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 50;
  backdrop-filter: blur(8px);
}

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

.busy-box {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 12px;
  padding: 18px 20px;
}

.spinner {
  animation: spin 0.85s linear infinite;
  border: 3px solid #d8e3ef;
  border-top-color: var(--accent);
  border-radius: 999px;
  display: inline-block;
  height: 26px;
  width: 26px;
}

.toast {
  background: #122033;
  border-radius: 8px;
  color: #fff;
  display: none;
  font-weight: 750;
  left: 50%;
  min-width: 180px;
  padding: 12px 16px;
  position: fixed;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 120;
}
.toast.active {
  display: block;
}

.footer {
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1240px;
  padding: 24px 22px;
}

.footer-copy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.footer-copy span:first-child {
  color: var(--text);
  font-weight: 900;
}

.footer-language {
  margin-left: auto;
}

.content-guide {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 18px;
  margin-top: 34px;
  padding-top: 30px;
}

.guide-heading {
  display: grid;
  gap: 8px;
  max-width: 860px;
}

.guide-heading h2 {
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.15;
  margin: 0;
}

.guide-heading p {
  color: var(--muted);
  line-height: 1.75;
  margin: 0;
}

.guide-card-grid,
.guide-layout {
  display: grid;
  gap: 14px;
}

.guide-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-card-grid article,
.guide-panel,
.guide-visual {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(25, 38, 60, 0.05);
}

.guide-card-grid article,
.guide-panel {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.guide-card-grid strong,
.guide-panel h3 {
  color: var(--text);
  font-size: 1.05rem;
  margin: 0;
}

.guide-card-grid p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

.guide-layout {
  grid-template-columns: minmax(260px, 0.9fr) repeat(2, minmax(0, 1fr));
}

.guide-panel-wide {
  grid-column: 2 / -1;
}

.guide-panel ol,
.guide-panel ul {
  color: var(--muted);
  display: grid;
  gap: 9px;
  line-height: 1.55;
  margin: 0;
  padding-left: 20px;
}

.guide-visual {
  align-items: center;
  background: linear-gradient(135deg, #17253a 0%, #25415f 100%);
  color: #fff;
  display: grid;
  grid-row: span 2;
  min-height: 280px;
  overflow: hidden;
  padding: 18px;
}

.guide-mini-preview {
  display: grid;
  gap: 12px;
  width: 100%;
}

.guide-mini-preview span {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: #fff;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-visual-palette .guide-mini-preview {
  grid-template-columns: repeat(3, 1fr);
}

.guide-visual-palette .guide-mini-preview span:nth-child(1) {
  background: #1666d9;
}

.guide-visual-palette .guide-mini-preview span:nth-child(2) {
  background: #17845d;
}

.guide-visual-palette .guide-mini-preview span:nth-child(3) {
  background: #ffe76b;
  color: #17202a;
}

.youtube-example {
  display: grid;
  gap: 12px;
  width: 100%;
}

.youtube-example-screen {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #e72929 0%, #111827 72%);
  border-radius: 8px;
  display: grid;
  padding: 18px;
}

.youtube-example-screen span,
.youtube-example-screen small {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 850;
}

.youtube-example-screen strong {
  align-self: center;
  font-size: 1.6rem;
}

.youtube-example-list {
  display: grid;
  gap: 8px;
}

.youtube-example-list span {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-weight: 850;
  padding: 10px 12px;
}

.howto-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  gap: 22px;
  padding: 22px;
}

.home-howto,
.youtube-howto {
  grid-template-columns: minmax(320px, 0.88fr) minmax(0, 1.12fr);
}

.youtube-howto {
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
}

.howto-copy {
  align-content: center;
  display: grid;
  gap: 14px;
}

.howto-copy h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.65rem);
  line-height: 1.12;
  margin: 0;
}

.howto-copy p {
  color: var(--muted);
  line-height: 1.75;
  margin: 0;
}

.howto-media {
  align-self: center;
  border-radius: 8px;
  margin: 0;
  overflow: hidden;
}

.howto-media img {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.howto-steps {
  counter-reset: howto-step;
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.howto-steps li {
  align-items: start;
  background: var(--soft);
  border: 1px solid #dce8f5;
  border-radius: 8px;
  display: grid;
  gap: 3px 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 12px;
}

.howto-steps li::before {
  align-items: center;
  background: var(--green);
  border-radius: 999px;
  color: #fff;
  content: counter(howto-step);
  counter-increment: howto-step;
  display: inline-flex;
  font-weight: 950;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.howto-steps strong,
.howto-steps span {
  grid-column: 2;
}

.howto-steps strong {
  color: var(--text);
  line-height: 1.3;
}

.howto-steps span {
  color: var(--muted);
  line-height: 1.55;
}

.howto-use-cases {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.howto-use-cases article {
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  padding: 16px;
}

.howto-use-cases strong {
  color: var(--text);
}

.howto-use-cases span {
  color: var(--muted);
  line-height: 1.55;
}

.howto-note {
  background: #17253a;
  border-radius: 8px;
  color: #d8e5f4;
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  padding: 18px;
}

.howto-note strong {
  color: #fff;
}

.howto-note ul {
  display: grid;
  gap: 8px;
  line-height: 1.55;
  margin: 0;
  padding-left: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 840px) {
  .topbar {
    align-items: stretch;
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .topnav {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar {
    display: none;
  }

  .nav-menu {
    left: 0;
    right: auto;
  }

  main {
    padding: 22px 14px 48px;
  }

  .hero {
    padding: 28px 20px;
  }

  .home-hero,
  .quick-action-grid {
    grid-template-columns: 1fr;
  }

  .home-hero {
    padding: 20px;
  }

  .home-hero-copy {
    padding: 0;
  }

  .home-hero-visual {
    min-height: 260px;
  }

  .tool-card {
    min-height: 150px;
  }

  .page-head,
  .section-head,
  .footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-language {
    margin-left: 0;
  }

  .guide-card-grid,
  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-visual,
  .guide-panel-wide {
    grid-column: auto;
    grid-row: auto;
  }

  .home-howto,
  .youtube-howto,
  .howto-use-cases {
    grid-template-columns: 1fr;
  }

  .youtube-howto .howto-media {
    order: 2;
  }

  .youtube-howto .howto-copy {
    order: 1;
  }

  .compare-grid {
    grid-template-columns: 1fr;
  }

  .compressor-shell {
    grid-template-columns: 1fr;
  }

  .watermark-shell {
    grid-template-columns: 1fr;
  }

  .meta-layout,
  .color-layout {
    grid-template-columns: 1fr;
  }

  .color-stage {
    height: min(58vh, 460px);
    min-height: 300px;
  }

  .compress-toolbar {
    grid-template-columns: 1fr;
  }

  .split-compare {
    min-height: 360px;
  }
}

.batch-compress-section { gap: 18px; margin-top: 22px; }
.batch-drop span { display: grid; gap: 8px; }
.batch-drop small { color: var(--muted); font-weight: 700; }
.batch-controls { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) auto auto; }
.batch-progress-wrap { align-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; grid-template-columns: 1fr auto; padding: 10px 12px; }
.batch-progress-bar { background: #d9e6f2; border-radius: 999px; height: 10px; overflow: hidden; position: relative; }
.batch-progress-bar::before { background: var(--accent); border-radius: inherit; content: ""; display: block; height: 100%; width: var(--progress); }
.batch-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.batch-grid.empty { align-items: center; background: var(--soft); border-radius: 8px; color: var(--muted); min-height: 160px; padding: 18px; text-align: center; }
.batch-card { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; padding: 12px; }
.batch-preview-button { background: #eef3f8; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; height: 160px; overflow: hidden; padding: 0; }
.batch-preview-button:disabled { cursor: wait; opacity: 0.7; }
.batch-preview-button img { display: block; height: 100%; object-fit: contain; width: 100%; }
.batch-card-body { display: grid; gap: 4px; min-width: 0; }
.batch-card-body strong, .batch-card-body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-card-body span { color: var(--muted); font-size: 0.92rem; }
.batch-rate { color: var(--text) !important; font-weight: 800; }
.batch-kept { color: #a15c00; margin-left: 6px; }
.batch-download.disabled { opacity: 0.45; pointer-events: none; }
.batch-modal { align-items: center; background: rgba(9, 16, 27, 0.72); display: none; inset: 0; justify-content: center; padding: 22px; position: fixed; z-index: 80; }
.batch-modal.active { display: flex; }
.batch-modal-panel { background: #fff; border-radius: 8px; box-shadow: var(--shadow); max-height: 92vh; max-width: 1120px; overflow: auto; padding: 18px; position: relative; width: min(100%, 1120px); }
.modal-close { position: absolute; right: 14px; top: 14px; }
.batch-modal-head { display: grid; gap: 4px; padding: 4px 56px 14px 4px; }
.batch-modal-head span { color: var(--muted); font-weight: 750; }
.batch-modal-compare { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.batch-modal-compare div { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; padding: 12px; }
.batch-modal-compare span { color: var(--muted); font-weight: 850; }
.batch-modal-compare img { background: #fff; border-radius: 8px; display: block; max-height: 68vh; object-fit: contain; width: 100%; }
@media (max-width: 840px) { .batch-controls, .batch-progress-wrap, .batch-modal-compare { grid-template-columns: 1fr; } }
.quality-control {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) 76px auto;
}

.quality-control input[type="range"] {
  accent-color: var(--accent);
  width: 100%;
}

.quality-control input[type="number"] {
  min-height: 42px;
  text-align: right;
}

.batch-page {
  margin-top: 0;
}
.batch-controls {
  grid-template-columns: minmax(160px, 220px) auto minmax(240px, 1fr) auto auto;
}

.batch-progress-wrap {
  grid-template-columns: 1fr;
}

.batch-modal-panel {
  max-width: 980px;
}

.batch-modal-compare {
  --split: 50%;
  background: #eef3f8;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: ew-resize;
  display: block;
  min-height: 68vh;
  overflow: hidden;
  position: relative;
}

.batch-modal-compare img {
  background: #fff;
  display: block;
  height: 100%;
  inset: 0;
  max-height: none;
  object-fit: contain;
  position: absolute;
  width: 100%;
}

.batch-modal-before {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  z-index: 2;
}

.batch-modal-after {
  z-index: 1;
}

.batch-modal-divider {
  align-items: center;
  background: rgba(18, 32, 51, 0.9);
  display: flex;
  height: 100%;
  justify-content: center;
  left: var(--split);
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 4px;
  z-index: 4;
}

.batch-modal-divider span {
  background: #0d1725;
  border-radius: 999px;
  color: #79d4ff;
  font-size: 0.85rem;
  font-weight: 900;
  padding: 8px 10px;
  transform: rotate(-90deg);
}

.batch-modal-label {
  background: rgba(13, 23, 37, 0.78);
  border-radius: 8px;
  color: #fff;
  font-weight: 900;
  padding: 8px 10px;
  position: absolute;
  top: 12px;
  z-index: 5;
}

.batch-modal-label.left { left: 12px; }
.batch-modal-label.right { right: 12px; }

@media (max-width: 840px) {
  .batch-controls,
  .quality-control {
    grid-template-columns: 1fr;
  }


  .timezone-live-clock {
    min-width: 0;
    text-align: left;
  }

  .timezone-section-title {
    align-items: stretch;
    flex-direction: column;
  }
  .timezone-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .timezone-controls,
  .timezone-compare {
    grid-template-columns: 1fr;
  }

  .time-card {
    min-height: 190px;
  }
  .fee-hero,
  .fee-edit {
    grid-template-columns: 1fr;
  }

  .fee-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .fee-net {
    grid-column: 1 / -1;
    text-align: left;
  }

  .base64-layout {
    grid-template-columns: 1fr;
  }

  .base64-history {
    max-height: none;
    position: static;
  }

  .base64-history-list {
    max-height: 360px;
  }

  .base64-action-row {
    justify-content: flex-end;
  }

  .base64-action-row .primary-button {
    position: static;
  }

  .base64-link-preview {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .base64-link-preview .primary-button,
  .base64-link-preview .small-button {
    width: 100%;
  }

  .batch-modal-compare {
    min-height: 62vh;
  }
}
.batch-progress-wrap,
.batch-progress-bar {
  display: none !important;
}

.batch-progress-circle {
  align-items: center;
  background: rgba(255, 255, 255, 0.86);
  border-radius: 8px;
  display: none;
  inset: 0;
  justify-content: center;
  min-height: 150px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.18s ease;
  z-index: 8;
}

.batch-compress-section {
  position: relative;
}

.batch-progress-circle.is-active {
  display: flex;
  opacity: 1;
}

.batch-progress-circle[hidden]:not(.is-active) {
  display: none !important;
}

.batch-progress-ring {
  align-items: center;
  animation: progressPulse 1.2s ease-in-out infinite;
  background: conic-gradient(var(--accent) var(--progress), #d9e6f2 0);
  border-radius: 999px;
  display: flex;
  height: 112px;
  justify-content: center;
  position: relative;
  transition: --progress 0.32s ease;
  width: 112px;
}

.batch-progress-ring::before {
  background: #fff;
  border-radius: inherit;
  content: "";
  inset: 12px;
  position: absolute;
}

.batch-progress-ring strong {
  color: var(--text);
  font-size: 1.35rem;
  position: relative;
  z-index: 1;
}

@keyframes progressPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

.metadata-report {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.metadata-empty {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 800;
  padding: 16px;
}

.metadata-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.metadata-section header {
  display: grid;
  gap: 4px;
}

.metadata-section h3 {
  font-size: 1rem;
}

.metadata-section header span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.metadata-chip-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.metadata-chip {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
}

.metadata-chip span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.metadata-chip strong {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-detail-list {
  display: grid;
  gap: 8px;
}

.metadata-detail {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.metadata-detail.sensitive {
  background: #fff4f0;
  border-color: #f0c5b5;
}

.metadata-detail summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(130px, 0.62fr) minmax(0, 1fr);
  list-style: none;
  min-height: 58px;
  padding: 10px 12px;
}

.metadata-detail summary::-webkit-details-marker {
  display: none;
}

.metadata-detail summary::before {
  color: var(--accent);
  content: "\C5F4\AE30";
  font-size: 0.74rem;
  font-weight: 900;
  grid-column: 1 / -1;
  order: 3;
}

.metadata-detail[open] summary::before {
  content: "\C811\AE30";
}

.metadata-detail summary span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.metadata-detail strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-detail em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-detail small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metadata-detail pre {
  background: #101826;
  color: #eaf2ff;
  font-family: "Cascadia Mono", "Consolas", monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0;
  max-height: 520px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 840px) {
  .metadata-detail summary {
    grid-template-columns: 1fr;
  }
}


.metadata-layout-wide {
  grid-template-columns: 1fr;
}

.metadata-layout-wide .metadata-report {
  margin-top: 16px;
}

.metadata-layout-wide .media-preview {
  max-width: 860px;
}

.unicode-font-shell {
  display: grid;
  gap: 18px;
}

.unicode-font-input-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  padding: 18px;
}

.unicode-font-input-panel label {
  color: var(--muted);
  display: grid;
  font-weight: 850;
  gap: 10px;
}

.unicode-font-input-panel textarea {
  border: 1px solid #cbd8e6;
  border-radius: 8px;
  color: var(--text);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 850;
  line-height: 1.35;
  min-height: 138px;
  padding: 18px;
  resize: vertical;
}

.unicode-font-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.unicode-font-presets,
.unicode-font-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.unicode-font-compare {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.unicode-font-compare article {
  background: #edf5ff;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-height: 170px;
  padding: 20px;
}

.unicode-font-compare .accent-preview {
  background: #17253a;
  border-color: #17253a;
  color: #fff;
}

.unicode-font-compare span {
  color: var(--muted);
  font-weight: 900;
}

.unicode-font-compare .accent-preview span {
  color: #8ee0bd;
}

.unicode-font-compare strong {
  align-self: center;
  font-size: clamp(1.9rem, 4.2vw, 4rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.unicode-font-filter {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
}

.unicode-filter {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
  min-height: 42px;
  padding: 9px 16px;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.unicode-filter.active,
.unicode-filter:hover,
.unicode-filter:focus-visible {
  background: #fff;
  color: var(--accent);
  outline: none;
}

.unicode-filter:active {
  transform: scale(0.98);
}

.unicode-font-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.unicode-font-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 14px;
  min-height: 190px;
  padding: 16px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.unicode-font-card:hover,
.unicode-font-card:focus-visible {
  border-color: #9bbbe2;
  box-shadow: 0 16px 34px rgba(25, 38, 60, 0.12);
  outline: none;
  transform: translateY(-2px);
}

.unicode-font-card:active {
  transform: translateY(0) scale(0.99);
}

.unicode-font-card-head,
.unicode-font-card-foot {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.unicode-font-card-head span {
  font-weight: 950;
}

.unicode-font-card-head small,
.unicode-font-card-foot span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.unicode-font-card p {
  align-self: center;
  font-size: clamp(1.45rem, 3vw, 2.55rem);
  font-weight: 850;
  line-height: 1.18;
  margin: 0;
  min-height: 74px;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .unicode-font-compare {
    grid-template-columns: 1fr;
  }

  .unicode-font-toolbar,
  .unicode-font-card-head,
  .unicode-font-card-foot {
    align-items: stretch;
    flex-direction: column;
  }
}

.unicode-load-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 6px 0 18px;
}

.unicode-font-compare strong.font-size-md,
.unicode-font-card.font-size-md p {
  font-size: clamp(1.25rem, 2.2vw, 2rem);
}

.unicode-font-compare strong.font-size-sm,
.unicode-font-card.font-size-sm p {
  font-size: clamp(1rem, 1.8vw, 1.45rem);
}

.unicode-font-compare strong.font-size-xs,
.unicode-font-card.font-size-xs p {
  font-size: clamp(0.86rem, 1.45vw, 1.08rem);
  line-height: 1.28;
}

.emoji-shell {
  display: grid;
  gap: 18px;
}

.emoji-hero-panel {
  align-items: center;
  background: #17253a;
  border-radius: 8px;
  color: #fff;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 190px;
  padding: 26px;
}

.emoji-kicker {
  color: #8ee0bd;
  display: block;
  font-size: 0.82rem;
  font-weight: 950;
  margin-bottom: 8px;
}

.emoji-hero-panel h2 {
  font-size: clamp(4.6rem, 12vw, 8rem);
  line-height: 0.95;
}

.emoji-hero-panel p {
  color: #d8e5f4;
  font-size: 1.05rem;
  font-weight: 850;
  margin: 12px 0 0;
  text-transform: capitalize;
}

.emoji-search-panel,
.emoji-recent-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(25, 38, 60, 0.06);
  display: grid;
  gap: 14px;
  padding: 16px;
}

.emoji-search-panel label {
  color: var(--muted);
  display: grid;
  font-weight: 900;
  gap: 8px;
}

.emoji-search-panel input {
  border: 1px solid #cbd8e6;
  border-radius: 8px;
  font-size: 1.12rem;
  min-height: 54px;
  padding: 0 16px;
}

.emoji-categories,
.emoji-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.emoji-category {
  align-items: center;
  background: #f7fafc;
  border: 1px solid #d8e3ef;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  gap: 7px;
  min-height: 42px;
  padding: 9px 12px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.emoji-category span {
  font-size: 1.15rem;
}

.emoji-category.active,
.emoji-category:hover,
.emoji-category:focus-visible {
  background: #e9f2ff;
  border-color: #9bbbe2;
  color: var(--accent);
  outline: none;
}

.emoji-category:active,
.emoji-card:active,
.emoji-mini:active {
  transform: scale(0.97);
}

.emoji-section-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.emoji-section-head strong {
  font-size: 1.14rem;
}

.emoji-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
}

.emoji-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 12px 8px;
  text-align: center;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.emoji-card:hover,
.emoji-card:focus-visible {
  border-color: #9bbbe2;
  box-shadow: 0 14px 28px rgba(25, 38, 60, 0.12);
  outline: none;
  transform: translateY(-2px);
}

.emoji-card span {
  font-size: 2.25rem;
  line-height: 1;
}

.emoji-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
  text-transform: capitalize;
}

.emoji-mini {
  align-items: center;
  background: #f7fafc;
  border: 1px solid #d8e3ef;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-size: 1.65rem;
  height: 48px;
  justify-content: center;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  width: 48px;
}

.emoji-mini:hover,
.emoji-mini:focus-visible {
  background: #e9f2ff;
  border-color: #9bbbe2;
  outline: none;
  transform: translateY(-1px);
}

.emoji-empty {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  margin: 0;
  padding: 28px;
  text-align: center;
}

@media (max-width: 760px) {
  .emoji-hero-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .emoji-grid {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  }
}

.emoji-grid {
  display: grid;
  gap: 22px;
}

.emoji-group-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(25, 38, 60, 0.05);
  display: grid;
  gap: 12px;
  padding: 14px;
}

.emoji-group-title {
  align-items: center;
  border-bottom: 1px solid #e7eef6;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 0 2px 12px;
}

.emoji-group-title strong {
  align-items: center;
  display: inline-flex;
  font-size: 1.08rem;
  gap: 8px;
}

.emoji-group-title strong span {
  font-size: 1.45rem;
}

.emoji-group-title small {
  color: var(--muted);
  font-weight: 900;
}

.emoji-grid-inner {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
}

.emoji-group-section + .emoji-group-section {
  margin-top: 4px;
}

.emoji-card {
  min-height: 94px;
}

.emoji-card span {
  font-size: 2.35rem;
}

.emoji-card small {
  font-size: 0.72rem;
}

@media (max-width: 760px) {
  .emoji-grid-inner {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }
}

/* Emoji section layout override: section label left, emoji list right */
.emoji-group-section {
  align-items: start;
  grid-template-columns: 170px minmax(0, 1fr);
  padding: 12px;
}

.emoji-group-title {
  align-self: stretch;
  border-bottom: 0;
  border-right: 1px solid #e7eef6;
  display: grid;
  gap: 8px;
  justify-content: stretch;
  padding: 8px 14px 8px 4px;
}

.emoji-group-title strong {
  align-items: start;
  display: grid;
  gap: 8px;
  line-height: 1.25;
}

.emoji-group-title strong span {
  font-size: 1.8rem;
}

.emoji-grid-inner {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}

@media (max-width: 760px) {
  .emoji-group-section {
    grid-template-columns: 1fr;
  }

  .emoji-group-title {
    align-items: center;
    border-bottom: 1px solid #e7eef6;
    border-right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 2px 12px;
  }

  .emoji-group-title strong {
    align-items: center;
    display: inline-flex;
  }
}

/* Keep emoji groups horizontal even on narrow browser panes */
@media (max-width: 760px) {
  .emoji-group-section {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .emoji-group-title {
    align-self: stretch;
    border-bottom: 0;
    border-right: 1px solid #e7eef6;
    display: grid;
    gap: 6px;
    justify-content: stretch;
    padding: 6px 10px 6px 2px;
  }

  .emoji-group-title strong {
    align-items: start;
    display: grid;
    font-size: 0.9rem;
    gap: 6px;
  }

  .emoji-group-title strong span {
    font-size: 1.35rem;
  }

  .emoji-grid-inner {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  }

  .emoji-card {
    min-height: 76px;
    padding: 8px 4px;
  }

  .emoji-card span {
    font-size: 1.85rem;
  }

  .emoji-card small {
    font-size: 0.64rem;
  }
}

.emoji-grid {
  grid-template-columns: 1fr !important;
}

.emoji-group-section {
  width: 100%;
}

.srt-shell {
  display: grid;
  gap: 18px;
}

.srt-dropzone {
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #edf6ff 100%);
  border: 2px dashed #9bbbe2;
  border-radius: 8px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: grid;
  gap: 12px;
  min-height: 300px;
  padding: 34px;
  place-items: center;
  text-align: center;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.srt-dropzone input {
  display: none;
}

.srt-dropzone:hover,
.srt-dropzone.is-dragging {
  background: #e8f2ff;
  border-color: var(--accent);
  box-shadow: 0 22px 46px rgba(22, 102, 217, 0.18);
  transform: translateY(-2px);
}

.srt-dropzone.is-processing {
  border-style: solid;
  opacity: 0.9;
}

.srt-drop-icon {
  align-items: center;
  background: #17253a;
  border-radius: 8px;
  color: #8ee0bd;
  display: inline-flex;
  font-size: 2rem;
  font-weight: 950;
  height: 96px;
  justify-content: center;
  letter-spacing: 0;
  width: 96px;
}

.srt-dropzone strong {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

.srt-dropzone small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.6;
  max-width: 520px;
}

.srt-result-panel {
  display: grid;
  gap: 16px;
}

.srt-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(120px, 0.5fr));
}

.srt-summary article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px;
}

.srt-summary span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
}

.srt-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srt-preview-head {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.srt-preview {
  background: #101826;
  border: 1px solid #23344d;
  border-radius: 8px;
  color: #edf6ff;
  font-size: 1rem;
  line-height: 1.7;
  min-height: 360px;
  padding: 18px;
  resize: vertical;
}

@media (max-width: 760px) {
  .srt-summary {
    grid-template-columns: 1fr;
  }

  .srt-preview-head {
    align-items: stretch;
    flex-direction: column;
  }
}

.srt-result-panel[hidden] {
  display: none;
}

.srt-drop-icon {
  font-size: 1.05rem;
  text-align: center;
  line-height: 1.15;
  padding: 8px;
}


/* Premium image compressor experience */
.compress-page-head { align-items: end; display: flex; gap: 32px; justify-content: space-between; margin: 4px 0 28px; }
.compress-page-head h1 { font-size: clamp(2.15rem, 4.2vw, 3.65rem); letter-spacing: -.055em; line-height: 1.04; }
.compress-page-head > div > p:last-child { color: var(--muted); font-size: 1.04rem; line-height: 1.7; margin: 18px 0 0; max-width: 650px; }
.privacy-badge { align-items: center; background: #ecf9f3; border: 1px solid #c8ebdb; border-radius: 18px; color: #116947; display: grid; flex: 0 0 auto; grid-template-columns: 38px auto; padding: 13px 18px; }
.privacy-badge > span { align-items: center; background: #16845d; border-radius: 50%; color: #fff; display: flex; font-weight: 900; grid-row: 1 / 3; height: 30px; justify-content: center; width: 30px; }
.privacy-badge strong { font-size: .9rem; }.privacy-badge small { color: #4d7c69; font-size: .75rem; margin-top: 2px; }
.compressor-shell { background: #fff; border: 1px solid #dce5ee; border-radius: 24px; box-shadow: 0 24px 64px rgba(31,55,82,.1); gap: 0; grid-template-columns: minmax(0,1fr) 370px; min-height: 670px; overflow: hidden; padding: 0; }
.compressor-stage { gap: 0; padding: 22px; }
.compress-toolbar { align-items: center; border-bottom: 1px solid var(--line); display:none; grid-template-columns: minmax(0,1fr) auto; margin: -22px -22px 20px; padding: 14px 18px; }
.compressor-stage:has(.compress-drop-surface.has-file) .compress-toolbar { display:grid; }
.selected-file { align-items:center; display:flex; gap:12px; min-width:0; }
.selected-file > span:last-child { display:grid; gap:3px; min-width:0; }
.selected-file small { color:var(--muted); font-size:.7rem; font-weight:800; }
.selected-file strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selected-file-icon { align-items:center; background:#e9f8f1; border-radius:12px; color:#11815a; display:flex; flex:0 0 auto; font-weight:900; height:40px; justify-content:center; width:40px; }
.dropzone-icon { align-items: center; background: #eaf3ff; border: 1px solid #cde0fa; border-radius: 14px; color: var(--accent); display: flex; flex: 0 0 auto; font-size: 1.65rem; height: 46px; justify-content: center; margin-right: 12px; width: 46px; }
.dropzone-copy { display: grid; gap: 3px; min-width: 0; }.dropzone-copy strong { font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.dropzone-copy small { color: var(--muted); font-size: .77rem; }
.compress-toolbar .file-pick-button { min-height: 44px; min-width: 142px; }
.split-compare .zoom-readout { bottom: 20px; box-shadow: 0 8px 24px rgba(13,31,50,.14); left: 50%; min-height: 48px; position: absolute; transform: translateX(-50%); z-index: 8; }
.compressor-stage { position: relative; }.icon-button { background: #fff; border-color: var(--line); color: var(--text); height: 32px; width: 32px; }.zoom-readout .small-button { min-height: 32px; padding: 4px 10px; }
.split-compare { border: 0; border-radius: 16px; flex: 1; min-height: 570px; cursor: ew-resize; }
.compress-drop-surface { min-height:570px; }
.compress-drop-surface.dragging .split-compare { background:#eaf4ff; border-color:#1769d5; box-shadow:inset 0 0 0 4px rgba(23,105,213,.12); }
.split-compare.empty { align-items: center; background: radial-gradient(circle at 50% 30%,#fff,#f3f7fb 70%); border: 2px dashed #8faecc; display: flex; justify-content: center; cursor: pointer; transition:.2s ease; }
.split-compare.empty:hover { background:#eef6ff; border-color:#1769d5; box-shadow:inset 0 0 0 4px rgba(23,105,213,.08); }
.split-compare.empty > :not(.compress-empty-state) { display: none; }
.compress-empty-state { align-items:center; color:var(--text); cursor:pointer; display:flex; flex-direction:column; max-width:520px; padding:48px 36px; text-align:center; width:100%; }
.compress-empty-state input { display:none; }
.compress-empty-state > strong { font-size:clamp(1.3rem,2.4vw,1.8rem); letter-spacing:-.035em; }
.compress-empty-state p { color:var(--muted); font-size:.9rem; line-height:1.65; margin:10px 0 22px; }
.upload-illustration { align-items:center; background:linear-gradient(145deg,#176fe8,#0c55bd); border-radius:24px; box-shadow:0 18px 36px rgba(23,105,213,.24); color:#fff; display:flex; font-size:2rem; height:88px; justify-content:center; margin-bottom:22px; width:88px; }
.upload-step { color:#1769d5; font-size:.75rem; font-weight:900; letter-spacing:.04em; margin-bottom:8px; text-transform:uppercase; }
.upload-action { background:#1769d5; border-radius:12px; box-shadow:0 10px 24px rgba(23,105,213,.2); color:#fff; font-size:.9rem; font-weight:900; padding:13px 24px; }
.empty-illustration { align-items: end; background: #fff; border: 1px solid #dbe6f1; border-radius: 18px; box-shadow: 0 14px 38px rgba(32,67,104,.12); display: flex; gap: 5px; height: 100px; justify-content: center; margin-bottom: 22px; overflow: hidden; padding: 22px; width: 130px; }.empty-illustration span { background: #70a8ef; border-radius: 4px; display: block; height: 34px; transform: rotate(35deg); width: 40px; }.empty-illustration span:nth-child(2) { background:#78cbb0; height: 55px; margin-left:-17px; }.empty-illustration span:nth-child(3) { background:#ffd95c; height: 25px; margin-left:-15px; }
.split-divider { background: #fff; box-shadow: 0 0 0 1px rgba(14,31,50,.14),0 4px 20px rgba(14,31,50,.25); width: 3px; }.split-divider span { background: #fff; box-shadow: 0 4px 18px rgba(15,35,57,.24); color: var(--accent); font-size: 1.1rem; height: 44px; width: 44px; }.compare-label { backdrop-filter: blur(8px); border-radius: 999px; font-size: .78rem; padding: 7px 11px; }
.compressor-panel { background: #f8fafc; border-left: 1px solid var(--line); border-radius: 0; color: var(--text); gap: 0; padding: 24px; }
.panel-heading { display: grid; gap: 4px; padding-bottom: 20px; }.panel-heading span { font-size: 1.25rem; font-weight: 900; letter-spacing: -.025em; }.panel-heading small,.setting-title small { color: var(--muted); }
.compressor-panel .panel-block { border-bottom: 1px solid var(--line); gap: 13px; padding: 20px 0; }.compressor-panel .panel-block:first-of-type { padding-top: 0; }.compressor-panel label { color: var(--text); }.field-label { display: grid; font-size: .88rem; font-weight: 850; gap: 8px; }.field-label > span { color: var(--green); float: right; font-size: .72rem; font-weight: 800; justify-self: end; margin-top: -25px; }
.compressor-panel input,.compressor-panel select { background: #fff; border: 1px solid #ccd9e6; border-radius: 10px; color: var(--text); min-height: 44px; }.compressor-panel select { padding: 0 12px; width: 100%; }
.setting-title { display: grid; gap: 3px; }.setting-title span { font-size: .88rem; font-weight: 850; }.setting-title small { font-size: .72rem; }
.quality-control { gap: 7px; grid-template-columns: 1fr 54px auto; }.quality-control input[type=number] { font-weight: 850; padding: 7px; }.quality-presets { display: grid; gap: 6px; grid-template-columns: repeat(3,1fr); }.quality-presets button { background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); cursor: pointer; font-size: .74rem; font-weight: 800; padding: 8px 4px; }.quality-presets button:hover,.quality-presets button.active { background: #eaf3ff; border-color: #8cb8ee; color: var(--accent); }
.format-presets { display:grid; gap:9px; grid-template-columns:1fr 1fr; }
.format-presets button { align-content:center; background:#fff; border:2px solid #d7e1eb; border-radius:12px; color:var(--muted); cursor:pointer; display:grid; gap:3px; min-height:66px; padding:10px; }
.format-presets button strong { color:var(--text); font-size:1rem; }
.format-presets button small { font-size:.68rem; font-weight:750; }
.format-presets button:hover,.format-presets button.active { background:#eaf3ff; border-color:#1769d5; box-shadow:0 0 0 3px rgba(23,105,213,.08); color:#1769d5; }
.format-presets button.active strong { color:#1769d5; }
.dimension-fields { align-items: end; display: grid; gap: 8px; grid-template-columns: 1fr auto 1fr; }.dimension-fields > i { color: var(--muted); font-style: normal; padding-bottom: 12px; }.dimension-fields label { display: grid; font-size: .73rem; gap: 5px; }.dimension-fields label span { align-items: center; color: var(--muted); display: flex; gap: 5px; }.dimension-fields input { min-width: 0; padding: 8px; width: 100%; }.compressor-panel .check { align-items: center; display: flex; font-size: .8rem; gap: 8px; }.compressor-panel .check input { accent-color: var(--accent); min-height: auto; width: 17px; }
.result-summary { background: #fff; border: 1px solid #dce6ef; border-radius: 16px; box-shadow: 0 8px 24px rgba(29,54,80,.06); display: grid; gap: 13px; margin: 20px 0; padding: 17px; }.result-rate { align-items: center; display:flex; justify-content:space-between; }.result-rate span { color:var(--muted); font-size:.8rem; font-weight:800; }.result-rate strong { color:var(--green); font-size:1.65rem; letter-spacing:-.04em; }.result-sizes { align-items:center; display:grid; gap:8px; grid-template-columns:1fr auto 1fr; }.result-sizes > span { display:grid; gap:3px; }.result-sizes small,.dimension-row span { color:var(--muted); font-size:.72rem; }.result-sizes strong { font-size:.86rem; overflow-wrap:anywhere; }.result-sizes i { color:#8ba0b5; font-style:normal; }.dimension-row { border-top:1px solid var(--line); display:flex; justify-content:space-between; padding-top:11px; }.dimension-row strong { font-size:.72rem; }
.compressor-panel .button-row { grid-template-columns: 100px 1fr; margin-top:auto; }.compressor-panel .primary-button { background:linear-gradient(135deg,#1670e8,#0c56bf); border-radius:12px; box-shadow:0 10px 24px rgba(22,102,217,.25); display:grid; gap:1px; min-height:54px; }.compressor-panel .primary-button small { color:#d9eaff; font-size:.65rem; }.compressor-panel .secondary-button { border-radius:12px; font-size:.78rem; }.compressor-panel > .muted { font-size:.72rem; line-height:1.45; margin:9px 0 0; text-align:center; }
@media (max-width: 900px) { .compress-page-head { align-items:flex-start; flex-direction:column; }.privacy-badge { width:100%; }.compressor-shell { grid-template-columns:1fr; }.compressor-panel { border-left:0; border-top:1px solid var(--line); }.split-compare { min-height:480px; } }
@media (max-width: 620px) { main { padding:24px 14px 48px; }.compress-page-head h1 { font-size:2.25rem; }.compress-page-head { margin-bottom:20px; }.compressor-shell { border-radius:18px; }.compressor-stage { padding:14px; }.compress-toolbar { grid-template-columns:1fr; margin:-14px -14px 14px; padding:12px 14px; }.compress-toolbar .file-pick-button { display:none; }.dropzone-copy small { white-space:normal; }.split-compare { min-height:360px; }.compressor-panel { padding:20px 16px; }.compress-toolbar .zoom-readout { bottom:26px; }.privacy-badge { display:none; } }

.split-compare:not(.empty) .compress-empty-state { display: none; }
.split-compare.empty .zoom-readout,.split-compare.empty .compare-help { display:none; }
.compare-help { align-items:center; background:rgba(13,31,50,.82); border-radius:999px; color:#fff; display:flex; font-size:.72rem; font-weight:800; gap:14px; left:50%; padding:8px 13px; position:absolute; top:16px; transform:translateX(-50%); white-space:nowrap; z-index:7; }
.settings-waiting { align-items:center; background:#eef5fd; border:1px solid #d4e3f3; border-radius:14px; color:#58708a; display:none; gap:10px; margin:0 0 16px; padding:13px; }
.settings-waiting span { align-items:center; background:#fff; border-radius:50%; color:#1769d5; display:flex; flex:0 0 auto; font-weight:900; height:28px; justify-content:center; width:28px; }
.settings-waiting strong { font-size:.78rem; line-height:1.4; }
.compressor-panel.waiting .settings-waiting { display:flex; }
.compressor-panel.waiting > :not(.panel-heading):not(.settings-waiting) { filter:grayscale(.25); opacity:.42; pointer-events:none; }

/* Comfort-focused compressor controls */
.comfort-block {
  display: grid;
  gap: 14px;
}

.comfort-presets {
  gap: 9px;
}

.comfort-presets button {
  align-content: center;
  display: grid;
  gap: 3px;
  min-height: 64px;
  padding: 10px 8px;
}

.comfort-presets button strong {
  font-size: .92rem;
}

.comfort-presets button small {
  color: inherit;
  font-size: .68rem;
  font-weight: 750;
  opacity: .78;
}

.advanced-compress {
  display: grid;
  gap: 13px;
}

.advanced-compress summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 3px;
  grid-template-columns: 1fr auto;
  list-style: none;
  user-select: none;
}

.advanced-compress summary::-webkit-details-marker {
  display: none;
}

.advanced-compress summary::after {
  align-items: center;
  background: #eaf3ff;
  border: 1px solid #cfe2f7;
  border-radius: 999px;
  color: #1769d5;
  content: "+";
  display: flex;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.advanced-compress[open] summary::after {
  content: "-";
}

.advanced-compress summary span {
  font-size: .88rem;
  font-weight: 850;
}

.advanced-compress summary small {
  color: var(--muted);
  font-size: .72rem;
  grid-column: 1;
}

.advanced-compress .dimension-fields {
  margin-top: 13px;
}

/* Premium watermark studio */
.watermark-studio {
  background: #fff;
  border: 1px solid #dce5ee;
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(31,55,82,.1);
  gap: 0;
  grid-template-columns: minmax(0,1fr) 360px;
  min-height: 650px;
  overflow: hidden;
  padding: 0;
}

.watermark-studio .watermark-stage {
  background: linear-gradient(145deg,#f8fbff,#eef5fb);
  gap: 18px;
  padding: 22px;
}

.watermark-dropzone {
  align-items: center;
  background: #fff;
  border: 1px dashed #aec7df;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(31,61,93,.08);
  color: #22364d;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: 54px minmax(0,1fr) auto;
  min-height: 94px;
  padding: 16px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.watermark-dropzone input {
  display: none;
}

.watermark-dropzone:hover,
.watermark-dropzone.is-dragging {
  background: #f3f9ff;
  border-color: #4f97e6;
  box-shadow: 0 18px 44px rgba(31,101,179,.16);
  transform: translateY(-1px);
}

.watermark-dropzone.has-file {
  border-style: solid;
}

.watermark-upload-icon {
  align-items: center;
  background: linear-gradient(145deg,#eaf4ff,#d7ebff);
  border: 1px solid #c4def7;
  border-radius: 16px;
  color: #176bd7;
  display: flex;
  font-size: 1.7rem;
  font-weight: 900;
  height: 54px;
  justify-content: center;
  width: 54px;
}

.watermark-upload-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.watermark-upload-copy strong {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watermark-upload-copy small,
.watermark-dropzone em {
  color: #667b91;
  font-size: .78rem;
  font-style: normal;
  line-height: 1.45;
}

.watermark-dropzone em {
  background: #f1f6fb;
  border: 1px solid #dce8f3;
  border-radius: 999px;
  max-width: 240px;
  overflow: hidden;
  padding: 7px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watermark-canvas-wrap {
  align-items: center;
  background: radial-gradient(circle at 50% 32%,#ffffff,#e8f0f7);
  border: 1px solid #d5e1ec;
  border-radius: 20px;
  display: flex;
  flex: 1;
  justify-content: center;
  min-height: 500px;
  overflow: hidden;
  padding: 18px;
  position: relative;
}

.watermark-empty-preview {
  align-items: center;
  color: #273b53;
  display: grid;
  gap: 8px;
  max-width: 330px;
  position: absolute;
  text-align: center;
}

.watermark-empty-preview strong {
  font-size: 1.25rem;
  font-weight: 900;
}

.watermark-empty-preview span {
  color: #667b91;
  font-size: .9rem;
  line-height: 1.55;
}

.watermark-canvas-wrap.has-image .watermark-empty-preview {
  display: none;
}

.watermark-studio .watermark-canvas {
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 20px 54px rgba(17,38,64,.18);
  cursor: grab;
  display: block;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.watermark-canvas:active {
  cursor: grabbing;
}

.watermark-studio .watermark-panel {
  background: #f8fafc;
  border-left: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  gap: 16px;
  padding: 24px;
}

.watermark-studio .watermark-panel label,
.watermark-studio .watermark-panel .label {
  color: var(--text);
  font-weight: 850;
}

.watermark-text-field {
  display: grid;
  gap: 8px;
}

.watermark-studio .watermark-panel input {
  background: #fff;
  border: 1px solid #ccd9e6;
  border-radius: 11px;
  color: var(--text);
  min-height: 46px;
}

.watermark-control-row {
  background: #fff;
  border: 1px solid #dce6ef;
  border-radius: 15px;
  padding: 14px;
}

.watermark-control-row label {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto;
}

.watermark-control-row input {
  grid-column: 1 / -1;
}

.watermark-control-row strong {
  color: #1769d5;
  font-size: .82rem;
}

.watermark-colors {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.watermark-colors label {
  align-items: center;
  background: #fff;
  border: 1px solid #dce6ef;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 12px;
}

.watermark-colors input[type="color"] {
  border: 0;
  border-radius: 10px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  width: 44px;
}

.watermark-studio .button-row {
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
}

.watermark-studio .primary-button,
.watermark-studio .secondary-button {
  border-radius: 12px;
  min-height: 52px;
}

@media (max-width: 900px) {
  .watermark-studio {
    grid-template-columns: 1fr;
  }

  .watermark-studio .watermark-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .watermark-canvas-wrap {
    min-height: 430px;
  }
}

@media (max-width: 620px) {
  .comfort-presets {
    grid-template-columns: 1fr;
  }

  .compressor-panel .button-row {
    grid-template-columns: 1fr;
  }

  .watermark-studio {
    border-radius: 18px;
  }

  .watermark-studio .watermark-stage,
  .watermark-studio .watermark-panel {
    padding: 16px;
  }

  .watermark-dropzone {
    grid-template-columns: 46px minmax(0,1fr);
    min-height: 0;
    padding: 14px;
  }

  .watermark-upload-icon {
    border-radius: 14px;
    height: 46px;
    width: 46px;
  }

  .watermark-upload-copy strong {
    white-space: normal;
  }

  .watermark-dropzone em {
    grid-column: 1 / -1;
    max-width: none;
    width: 100%;
  }

  .watermark-canvas-wrap {
    min-height: 330px;
    padding: 12px;
  }

  .watermark-colors,
  .watermark-studio .button-row {
    grid-template-columns: 1fr;
  }
}

/* Premium crypto market */
.crypto-hero { align-items:end; background:radial-gradient(circle at 83% 12%,rgba(71,118,255,.25),transparent 30%),linear-gradient(135deg,#07101f,#111f3d 56%,#09283a); border-radius:24px; color:#fff; display:flex; justify-content:space-between; min-height:290px; overflow:hidden; padding:42px; position:relative; }
.crypto-hero::after { border:1px solid rgba(255,255,255,.08); border-radius:50%; content:""; height:380px; position:absolute; right:-80px; top:-210px; width:380px; }.crypto-hero h1{font-size:clamp(3rem,7vw,5.8rem);letter-spacing:-.07em}.crypto-hero>div>p:last-child{color:#aebdd4;font-size:1.02rem;margin:18px 0 0}.crypto-live{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:16px;display:grid;gap:3px;grid-template-columns:14px auto;padding:14px 18px;z-index:1}.crypto-live>span{background:#25d695;border-radius:50%;box-shadow:0 0 0 5px rgba(37,214,149,.12);grid-row:1/3;height:9px;margin-top:5px;width:9px}.crypto-live strong{font-size:.82rem}.crypto-live small{color:#91a7c3}
.crypto-toolbar{align-items:center;display:flex;gap:12px;justify-content:space-between;padding:26px 2px 16px}.crypto-toolbar>div{display:grid;gap:3px}.crypto-toolbar>div strong{font-size:1.35rem}.crypto-toolbar>div span{color:var(--muted);font-size:.78rem}.crypto-toolbar label{align-items:center;color:var(--muted);display:flex;font-size:.78rem;font-weight:800;gap:8px;margin-left:auto}.crypto-toolbar select{background:#fff;border:1px solid var(--line);border-radius:9px;min-height:42px;padding:0 34px 0 12px}.crypto-toolbar button.busy{opacity:.55;pointer-events:none}
.crypto-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}.crypto-card{background:#fff;border:1px solid #dce5ef;border-radius:18px;box-shadow:0 10px 30px rgba(24,46,74,.06);display:grid;gap:20px;min-height:210px;padding:20px;transition:.2s ease}.crypto-card:hover{border-color:#aac6e8;box-shadow:0 18px 40px rgba(24,46,74,.12);transform:translateY(-3px)}.crypto-card-top{align-items:center;display:flex;gap:11px}.crypto-logo,.crypto-logo-fallback{background:#eef3f8;border-radius:50%;height:46px;object-fit:cover;width:46px}.crypto-logo-fallback{align-items:center;display:flex;font-weight:900;justify-content:center}.crypto-name{display:grid;gap:2px}.crypto-name strong{font-size:1rem}.crypto-name span{color:var(--muted);font-size:.72rem;font-weight:850}.crypto-rank{background:#f0f4f8;border-radius:999px;color:#76879a;font-size:.68rem;font-weight:850;margin-left:auto;padding:5px 8px}.crypto-price{font-size:clamp(1.7rem,2.7vw,2.4rem);font-weight:900;letter-spacing:-.055em;line-height:1;overflow-wrap:anywhere}.crypto-card-bottom{align-items:center;border-top:1px solid #edf1f5;display:flex;justify-content:space-between;padding-top:14px}.crypto-card-bottom>span:last-child{color:var(--muted);font-size:.72rem}.crypto-change{border-radius:7px;font-size:.78rem;font-weight:900;padding:5px 7px}.crypto-change.up{background:#e8f8f1;color:#078052}.crypto-change.down{background:#fff0f0;color:#d13d45}.crypto-change.flat{background:#eef2f6;color:#647386}
.exchange-section{margin-top:60px}.exchange-heading{align-items:end;display:flex;justify-content:space-between;margin-bottom:18px}.exchange-heading h2{font-size:2rem}.exchange-heading>p{color:var(--muted)}.exchange-banners{display:grid;gap:11px;grid-template-columns:repeat(3,1fr)}.exchange-banner{align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;display:grid;gap:11px;grid-template-columns:42px 1fr auto auto;padding:14px 16px;transition:.2s}.exchange-banner:hover{border-color:var(--exchange);box-shadow:0 10px 28px rgba(21,43,68,.09);transform:translateY(-2px)}.exchange-banner>span{align-items:center;background:var(--exchange);border-radius:10px;color:#fff;display:flex;font-size:.73rem;font-weight:950;height:38px;justify-content:center;width:38px}.exchange-banner strong{font-size:.95rem}.exchange-banner small{color:var(--muted)}.exchange-banner b{color:var(--exchange);font-size:1.25rem}.crypto-disclaimer{color:var(--muted);font-size:.72rem;line-height:1.6;margin:16px 2px 0}
@media(max-width:1000px){.crypto-grid{grid-template-columns:repeat(2,1fr)}.exchange-banners{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.crypto-hero{align-items:flex-start;flex-direction:column;gap:30px;min-height:330px;padding:28px 22px}.crypto-hero h1{font-size:3.35rem}.crypto-live{width:100%}.crypto-toolbar{align-items:stretch;flex-wrap:wrap}.crypto-toolbar>div{width:100%}.crypto-toolbar label{margin-left:0}.crypto-toolbar button{flex:1}.crypto-grid{grid-template-columns:1fr}.crypto-card{min-height:190px}.crypto-price{font-size:2.25rem}.exchange-heading{align-items:flex-start;flex-direction:column;gap:8px}.exchange-banners{grid-template-columns:1fr}.exchange-section{margin-top:42px}}
/* Animated crypto sparklines */
.chart-period{align-items:center;background:#e9eff6;border:1px solid #d7e1ec;border-radius:10px;display:flex;gap:3px;padding:3px}.chart-period button{background:transparent;border:0;border-radius:7px;color:#6b7c90;cursor:pointer;font-size:.76rem;font-weight:850;min-height:34px;padding:0 12px}.chart-period button.active{background:#fff;box-shadow:0 3px 10px rgba(29,54,80,.1);color:#132235}.crypto-sparkline{display:grid;gap:4px;margin:0 -4px}.crypto-sparkline svg{display:block;height:70px;overflow:visible;width:100%}.spark-line{fill:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-width:2.05;stroke-dasharray:1;stroke-dashoffset:1;animation:sparkDraw .9s cubic-bezier(.22,.8,.3,1) forwards}.spark-area{opacity:0;animation:sparkFade .55s ease .35s forwards}.crypto-sparkline circle{opacity:0;animation:sparkFade .3s ease .85s forwards}.crypto-sparkline>div{align-items:center;display:flex;justify-content:space-between}.crypto-sparkline span{color:var(--muted);font-size:.68rem}.crypto-sparkline strong{font-size:.68rem}.crypto-sparkline.rising strong{color:#078052}.crypto-sparkline.falling strong{color:#d13d45}.sparkline-empty{align-items:center;background:#f3f6f9;border-radius:10px;color:var(--muted);display:flex;font-size:.72rem;height:70px;justify-content:center}.crypto-card{min-height:290px}.crypto-card-bottom{margin-top:-3px}@keyframes sparkDraw{to{stroke-dashoffset:0}}@keyframes sparkFade{to{opacity:1}}@media(prefers-reduced-motion:reduce){.spark-line,.spark-area,.crypto-sparkline circle{animation:none;opacity:1;stroke-dashoffset:0}}@media(max-width:650px){.chart-period{order:2}.crypto-toolbar label{order:3}.crypto-card{min-height:275px}}.crypto-toolbar>.chart-period{display:flex;flex:0 0 auto;gap:3px;grid-auto-flow:column;grid-template-columns:none;white-space:nowrap;width:max-content}.chart-period.busy{opacity:.55;pointer-events:none}.chart-period button{min-width:64px}.chart-period button[data-period="month"]{min-width:70px}@media(max-width:650px){.crypto-toolbar>.chart-period{order:2;width:100%}.chart-period button{flex:1}.crypto-toolbar label{margin-left:0;width:100%}.crypto-toolbar select{flex:1}}.crypto-price{font-size:clamp(1.65rem,2.5vw,2.35rem);max-width:100%;min-width:0;overflow:hidden;text-overflow:clip;white-space:nowrap}
/* Exchange directory */
.exchange-banners{gap:14px}.exchange-banner{background:linear-gradient(145deg,#fff,#f9fbfd);border-radius:17px;grid-template-columns:52px minmax(0,1fr) auto;min-height:88px;padding:16px 17px}.exchange-banner::after{background:var(--exchange);border-radius:0 17px 17px 0;content:"";height:0;position:absolute;right:0;top:50%;transition:.2s;width:3px}.exchange-banner{overflow:hidden;position:relative}.exchange-banner:hover::after{height:100%;top:0}.exchange-banner>.exchange-logo{align-items:center;background:#fff;border:1px solid #e4ebf2;border-radius:14px;color:var(--exchange);display:flex;font-size:.72rem;font-weight:950;height:50px;justify-content:center;overflow:hidden;position:relative;width:50px}.exchange-logo img{background:#fff;height:30px;object-fit:contain;position:absolute;width:30px}.exchange-logo em{font-style:normal}.exchange-banner>.exchange-copy{align-items:start;background:transparent;border-radius:0;color:inherit;display:grid;font-size:inherit;font-weight:inherit;height:auto;justify-content:start;width:auto}.exchange-copy strong{font-size:1rem}.exchange-copy small{color:var(--muted);font-size:.72rem;margin-top:3px}.exchange-banner>.exchange-action{align-items:center;background:#f0f4f8;border-radius:999px;color:#52667d;display:flex;font-size:.72rem;font-weight:850;gap:5px;height:32px;justify-content:center;padding:0 11px;width:auto}.exchange-action b{color:var(--exchange);font-size:.95rem;transition:transform .2s}.exchange-banner:hover .exchange-action{background:#fff;box-shadow:0 4px 12px rgba(22,42,66,.09);color:var(--text)}.exchange-banner:hover .exchange-action b{transform:translate(2px,-2px)}@media(max-width:650px){.exchange-banner{grid-template-columns:48px minmax(0,1fr) auto;min-height:80px;padding:13px}.exchange-banner>.exchange-logo{height:44px;width:44px}.exchange-logo img{height:27px;width:27px}.exchange-banner>.exchange-action{font-size:0;height:36px;padding:0;width:36px}.exchange-action b{font-size:1rem}}
/* Larger exchange directory cards */
.exchange-banners{gap:16px}.exchange-banner{grid-template-columns:64px minmax(0,1fr) auto;min-height:108px;padding:20px 22px}.exchange-banner>.exchange-logo{border-radius:16px;height:60px;width:60px}.exchange-logo img{height:38px;width:38px}.exchange-logo em{font-size:.82rem}.exchange-copy strong{font-size:1.16rem;letter-spacing:-.02em}.exchange-copy small{font-size:.82rem;margin-top:5px}.exchange-banner>.exchange-action{font-size:.82rem;height:40px;padding:0 15px}.exchange-action b{font-size:1.05rem}.crypto-disclaimer{font-size:.78rem;margin-top:20px}.exchange-heading{margin-bottom:22px}.exchange-heading h2{font-size:2.25rem}@media(max-width:650px){.exchange-banner{grid-template-columns:56px minmax(0,1fr) auto;min-height:96px;padding:16px}.exchange-banner>.exchange-logo{height:52px;width:52px}.exchange-logo img{height:33px;width:33px}.exchange-copy strong{font-size:1.05rem}.exchange-copy small{font-size:.76rem}}.crypto-price.price-medium{font-size:1.9rem}.crypto-price.price-long{font-size:1.55rem;letter-spacing:-.045em}.crypto-price.price-xlong{font-size:1.28rem;letter-spacing:-.035em}@media(max-width:650px){.crypto-price.price-medium{font-size:1.85rem}.crypto-price.price-long{font-size:1.5rem}.crypto-price.price-xlong{font-size:1.25rem}}
/* Premium multilingual footer */
.footer{background:radial-gradient(circle at 82% 0,rgba(34,105,204,.25),transparent 34%),linear-gradient(135deg,#07101f,#0d1d34 60%,#092838);border-top:0;color:#a9b8ca;margin:72px 0 0;max-width:none;padding:0}.footer-inner{display:grid;gap:42px;grid-template-columns:minmax(300px,1.3fr) minmax(180px,.65fr) minmax(190px,.55fr);margin:0 auto;max-width:1240px;padding:52px 28px 24px;width:100%}.footer-brand-block{max-width:580px}.footer-brand{align-items:center;color:#fff;display:inline-flex;font-size:1.08rem;gap:10px;margin-bottom:28px}.footer-brand .brand-mark{background:linear-gradient(135deg,#2b7ef2,#19a879);box-shadow:0 8px 22px rgba(30,119,219,.28)}.footer-eyebrow{color:#55a3ff;font-size:.72rem;font-weight:900;letter-spacing:.12em;margin:0 0 10px}.footer-brand-block h2{color:#fff;font-size:clamp(1.75rem,3vw,2.65rem);letter-spacing:-.045em;line-height:1.12;max-width:560px}.footer-description{color:#9eafc3;line-height:1.75;margin:16px 0 0;max-width:520px}.footer-tool-links{align-content:start;display:grid;gap:7px}.footer-tool-links>strong,.footer-settings-label{color:#71859d;font-size:.72rem;font-weight:900;letter-spacing:.08em;margin-bottom:8px;text-transform:uppercase}.footer-tool-links a{align-items:center;border-bottom:1px solid rgba(255,255,255,.08);color:#dce7f5;display:flex;font-size:.9rem;font-weight:800;justify-content:space-between;padding:11px 2px;transition:.2s}.footer-tool-links a b{color:#52a2ff;transition:transform .2s}.footer-tool-links a:hover{color:#fff;padding-left:5px}.footer-tool-links a:hover b{transform:translate(2px,-2px)}.footer-settings{align-content:start;display:grid;gap:11px}.footer-select-wrap{align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:12px;display:grid;grid-template-columns:30px 1fr;padding:5px 8px}.footer-select-wrap>span{color:#65adff;text-align:center}.footer-select-wrap select{appearance:auto;background:transparent;border:0;color:#fff;cursor:pointer;font-weight:850;min-height:38px;padding:0 8px;width:100%}.footer-select-wrap option{background:#102139;color:#fff}.footer-trust{align-items:center;background:rgba(24,182,124,.09);border:1px solid rgba(44,211,151,.16);border-radius:999px;color:#78dfb8;display:inline-flex;font-size:.75rem;font-weight:850;gap:8px;justify-self:start;padding:8px 12px}.footer-trust i{background:#2bd293;border-radius:50%;box-shadow:0 0 0 4px rgba(43,210,147,.12);height:7px;width:7px}.footer-bottom{border-top:1px solid rgba(255,255,255,.09);display:flex;font-size:.72rem;grid-column:1/-1;justify-content:space-between;padding-top:20px}.footer-bottom span:last-child{color:#71859d}@media(max-width:840px){.footer{align-items:stretch}.footer-inner{gap:34px;grid-template-columns:1fr 1fr;padding:42px 22px 22px}.footer-brand-block{grid-column:1/-1}.footer-settings{margin-left:0}}@media(max-width:560px){.footer-inner{grid-template-columns:1fr}.footer-brand-block{grid-column:auto}.footer-brand-block h2{font-size:1.9rem}.footer-tool-links,.footer-settings{border-top:1px solid rgba(255,255,255,.08);padding-top:25px}.footer-bottom{align-items:flex-start;flex-direction:column;gap:7px}.footer-select-wrap{max-width:260px;width:100%}}
/* Premium crypto detail modal */
.crypto-card[data-coin]{cursor:pointer;outline:none}.crypto-card[data-coin]:focus-visible{border-color:#4b91e7;box-shadow:0 0 0 4px rgba(39,118,216,.16),0 18px 40px rgba(24,46,74,.12)}.crypto-detail-modal{background:transparent;border:0;height:100dvh;inset:0;margin:0;max-height:none;max-width:none;padding:24px;width:100vw}.crypto-detail-modal::backdrop{background:rgba(5,12,24,.72);backdrop-filter:blur(10px)}.crypto-modal-panel{background:#f6f8fb;border:1px solid rgba(255,255,255,.5);border-radius:26px;box-shadow:0 35px 100px rgba(0,0,0,.34);margin:0;max-height:calc(100dvh - 48px);max-width:1040px;overflow:auto;position:relative;width:100%}.crypto-modal-close{align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:42px;justify-content:center;position:absolute;right:20px;top:20px;transition:.2s;width:42px;z-index:3}.crypto-modal-close:hover{background:#fff;color:#122033;transform:rotate(4deg)}.crypto-modal-hero{background:radial-gradient(circle at 83% 0,rgba(50,126,233,.32),transparent 38%),linear-gradient(135deg,#07101f,#102443 65%,#0a3040);border-radius:25px 25px 0 0;color:#fff;display:grid;gap:24px;grid-template-columns:1fr 1.25fr;padding:38px 40px 32px}.crypto-modal-coin{align-items:center;display:flex;gap:15px}.crypto-modal-coin img{background:#fff;border:3px solid rgba(255,255,255,.16);border-radius:50%;height:62px;width:62px}.crypto-modal-coin span{color:#7fabdf;font-size:.76rem;font-weight:900}.crypto-modal-coin h2{font-size:1.75rem;margin-top:3px}.crypto-modal-price{align-items:flex-end;display:grid;justify-items:end;padding-right:44px}.crypto-modal-price>span{color:#8fa6c1;font-size:.76rem;font-weight:800}.crypto-modal-price>strong{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.06em;line-height:1.08;margin:6px 0 12px;max-width:100%;overflow:hidden;white-space:nowrap}.crypto-modal-price>strong.price-medium{font-size:2.8rem}.crypto-modal-price>strong.price-long{font-size:2.25rem}.crypto-modal-price>strong.price-xlong{font-size:1.85rem}.crypto-modal-price .crypto-change{justify-self:end}.crypto-modal-chart{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);border-radius:16px;grid-column:1/-1;padding:14px 18px 11px}.crypto-modal-chart .crypto-sparkline svg{height:128px}.crypto-modal-chart .spark-line{stroke-width:1.35;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(0 0 1px rgba(255,255,255,.14))}.spark-pulse{display:none}.crypto-modal-chart .spark-pulse{display:block;opacity:.45;transform-box:fill-box;transform-origin:center;animation:sonarPulse 1.9s ease-out infinite}.crypto-modal-chart .spark-pulse-two{animation-delay:.75s}.crypto-modal-chart .spark-dot{filter:drop-shadow(0 0 7px currentColor)}@keyframes sonarPulse{0%{opacity:.5;stroke-width:1.1;transform:scale(.8)}70%{opacity:.08;stroke-width:.55;transform:scale(3.5)}100%{opacity:0;stroke-width:.35;transform:scale(4.4)}}.crypto-modal-chart .crypto-sparkline span{color:#8fa6c1}.crypto-modal-trade-head{align-items:end;display:flex;justify-content:space-between;padding:30px 34px 18px}.crypto-modal-trade-head h3{font-size:1.65rem}.crypto-modal-trade-head>p{color:var(--muted);font-size:.78rem}.crypto-modal-exchanges{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);padding:0 34px}.crypto-modal-exchange{align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;display:grid;gap:10px;grid-template-columns:44px 1fr;padding:12px;transition:.2s}.crypto-modal-exchange:hover{border-color:var(--exchange);box-shadow:0 10px 24px rgba(23,45,70,.09);transform:translateY(-2px)}.crypto-modal-exchange:hover>b{color:var(--exchange)}.crypto-modal-exchange>.exchange-logo{grid-row:1/3;height:42px;width:42px}.crypto-modal-exchange>.exchange-logo img{height:27px;width:27px}.crypto-modal-exchange>.exchange-logo em{display:none}.crypto-modal-exchange>span:nth-child(2){display:grid}.crypto-modal-exchange>span strong{color:#0f172a;font-size:1.02rem}.crypto-modal-exchange>span small{color:#334155;font-size:.74rem;font-weight:700}.crypto-modal-exchange>b{color:#0f172a;font-size:.82rem;font-weight:950;grid-column:2;letter-spacing:-.01em}.crypto-modal-notice{color:var(--muted);font-size:.7rem;line-height:1.6;margin:18px 34px 28px}.crypto-detail-modal[open]{align-items:center;animation:modalFade .22s ease;display:grid;justify-items:center}.crypto-detail-modal[open] .crypto-modal-panel{animation:modalRise .35s cubic-bezier(.2,.8,.25,1)}@keyframes modalFade{from{opacity:0}}@keyframes modalRise{from{opacity:0;transform:translateY(22px) scale(.98)}}@media(max-width:720px){.crypto-detail-modal{padding:0}.crypto-modal-panel{border-radius:0;max-height:100vh;min-height:100vh}.crypto-modal-hero{border-radius:0;grid-template-columns:1fr;padding:28px 20px 22px}.crypto-modal-price{align-items:start;justify-items:start;padding-right:0}.crypto-modal-price .crypto-change{justify-self:start}.crypto-modal-chart{grid-column:auto}.crypto-modal-trade-head{align-items:flex-start;flex-direction:column;gap:8px;padding:25px 18px 14px}.crypto-modal-exchanges{grid-template-columns:1fr;padding:0 18px}.crypto-modal-notice{margin:16px 18px 24px}.crypto-modal-close{right:14px;top:14px}.crypto-modal-price>strong,.crypto-modal-price>strong.price-medium,.crypto-modal-price>strong.price-long{font-size:2.2rem}.crypto-modal-price>strong.price-xlong{font-size:1.65rem}}
/* Premium Base64 workspace */
.base64-hero{align-items:end;background:radial-gradient(circle at 86% 10%,rgba(105,91,255,.34),transparent 35%),linear-gradient(135deg,#091326,#142856 62%,#173c4f);border-radius:24px;color:#fff;display:flex;justify-content:space-between;margin-bottom:22px;min-height:300px;overflow:hidden;padding:42px;position:relative}.base64-hero::after{border:1px solid rgba(255,255,255,.08);border-radius:50%;content:"";height:340px;position:absolute;right:-65px;top:-190px;width:340px}.base64-hero h1{font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.065em;line-height:1.03}.base64-hero>div>p:last-child{color:#acbdd5;line-height:1.7;margin:17px 0 0;max-width:610px}.base64-hero-badges{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;max-width:300px;position:relative;z-index:1}.base64-hero-badges span{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);border-radius:999px;color:#dceaff;font-size:.72rem;font-weight:800;padding:8px 11px}.base64-workspace{background:transparent;border:0;box-shadow:none;padding:0}.base64-layout{gap:20px;grid-template-columns:minmax(0,1fr) 330px}.base64-main{gap:14px}.base64-tabs{background:#e7edf5;border:0;border-radius:15px;gap:5px;padding:5px}.base64-tab{align-items:center;border-radius:11px;display:grid;gap:3px;grid-template-columns:34px 1fr;justify-items:start;min-height:66px;padding:9px 14px;text-align:left}.base64-tab>span{align-items:center;background:rgba(99,116,139,.1);border-radius:8px;color:#7b8da3;display:flex;font-size:.68rem;grid-row:1/3;height:30px;justify-content:center;width:30px}.base64-tab strong{font-size:.9rem}.base64-tab small{font-size:.68rem;font-weight:750}.base64-tab.active{box-shadow:0 8px 24px rgba(29,53,83,.11)}.base64-tab.active>span{background:#e6f0ff;color:var(--accent)}.base64-panel{gap:0}.base64-field-card{background:#fff;border:1px solid #dbe5ef;border-radius:17px;box-shadow:0 10px 30px rgba(24,46,74,.055);overflow:hidden;transition:.2s}.base64-field-card:focus-within{border-color:#82afe8;box-shadow:0 0 0 4px rgba(30,108,210,.1),0 15px 36px rgba(24,46,74,.09)}.base64-field-head{align-items:center;border-bottom:1px solid #e8eef4;display:flex;justify-content:space-between;min-height:56px;padding:10px 14px}.base64-field-head>div{align-items:center;display:flex;gap:9px}.base64-field-head label{font-size:.86rem;font-weight:900}.base64-field-head em{background:#eaf3ff;border-radius:999px;color:var(--accent);font-size:.62rem;font-style:normal;font-weight:900;padding:4px 7px}.step-dot{align-items:center;background:#edf2f7;border-radius:50%;color:#66798e;display:flex;font-size:.68rem;font-weight:900;height:27px;justify-content:center;width:27px}.step-dot.done{background:#e7f8f1;color:#087d55}.base64-count{color:#8291a3;font-size:.68rem;font-weight:800}.base64-copy-button{background:#f1f5f9;border:1px solid #e1e8ef;border-radius:8px;color:#526579;cursor:pointer;font-size:.7rem;font-weight:850;min-height:32px;padding:5px 9px}.base64-copy-button:hover{background:#e8f2ff;border-color:#bdd5f2;color:var(--accent)}.base64-field-card textarea{background:#fbfcfe;border:0;border-radius:0;color:#172333;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:.9rem;line-height:1.7;min-height:210px;outline:0;padding:18px;resize:vertical;width:100%}.base64-field-card.result-card textarea{background:#f8fbff}.base64-convert-row{align-items:center;display:grid;gap:10px;grid-template-columns:1fr auto auto 1fr;padding:12px 4px}.base64-convert-row>span{background:#dbe5ef;height:1px}.base64-convert-button{border-radius:11px;display:grid;gap:1px;min-height:48px;min-width:145px;padding:7px 24px}.base64-convert-button small{color:#d8e9ff;font-size:.6rem}.base64-convert-row .swap-button{border-radius:11px;height:48px;width:48px}.base64-history{background:linear-gradient(160deg,#102039,#132943);border:0;border-radius:18px;box-shadow:0 18px 42px rgba(19,39,65,.14);color:#fff;gap:14px;max-height:790px;padding:18px;top:88px}.base64-history-intro>span{color:#6eb1ff;font-size:.64rem;font-weight:900;letter-spacing:.1em}.base64-history-intro h2{font-size:1.2rem;margin:6px 0}.base64-history-intro p{color:#91a5bd;font-size:.72rem;line-height:1.55;margin:0}.base64-history-head{border-top:1px solid rgba(255,255,255,.09);padding-top:13px}.base64-history-head>strong{color:#9aafc7;font-size:.7rem}.base64-history-head .small-button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);color:#d9e6f4;font-size:.68rem;min-height:32px;padding:5px 9px}.base64-history-list{max-height:560px}.base64-history-item{border:0;border-radius:11px;min-height:66px}.base64-history-empty{align-items:center;background:rgba(255,255,255,.055);border:1px dashed rgba(255,255,255,.14);border-radius:13px;color:#91a5bd;display:flex;flex-direction:column;gap:5px;justify-content:center;min-height:180px;padding:22px;text-align:center}.base64-history-empty>span{font-size:1.5rem}.base64-history-empty strong{color:#d9e6f4;font-size:.82rem}.base64-history-empty small{font-size:.68rem}.base64-link-preview{border-radius:15px;margin-top:14px;padding:14px}@media(max-width:840px){.base64-hero{align-items:flex-start;flex-direction:column;gap:26px;min-height:330px;padding:30px 24px}.base64-hero-badges{justify-content:flex-start}.base64-layout{grid-template-columns:1fr}.base64-history{max-height:none;position:static}.base64-history-list{max-height:360px}}@media(max-width:560px){.base64-hero{border-radius:18px;margin-left:-2px;margin-right:-2px;padding:25px 18px}.base64-hero h1{font-size:2.35rem}.base64-hero-badges span:last-child{display:none}.base64-tab{grid-template-columns:28px 1fr;padding:8px}.base64-tab>span{height:25px;width:25px}.base64-field-head{align-items:flex-start;gap:9px}.base64-field-head>div:last-child{justify-content:flex-end}.base64-count{display:none}.base64-field-card textarea{min-height:180px;padding:14px}.base64-convert-row{grid-template-columns:1fr auto auto 1fr}.base64-convert-button{min-width:120px;padding:7px 17px}}
/* Social media image studio */
.social-resize-hero{align-items:end;background:radial-gradient(circle at 82% 6%,rgba(244,79,177,.34),transparent 34%),radial-gradient(circle at 10% 100%,rgba(28,178,143,.22),transparent 30%),linear-gradient(135deg,#09111f,#251d4b 60%,#123f4c);border-radius:28px;color:#fff;display:flex;justify-content:space-between;margin-bottom:18px;min-height:300px;overflow:hidden;padding:44px;position:relative}.social-resize-hero::after{border:1px solid rgba(255,255,255,.09);border-radius:999px;content:"";height:340px;position:absolute;right:-120px;top:-160px;width:340px}.social-resize-hero h1{font-size:clamp(2.8rem,5.6vw,5.05rem);letter-spacing:-.075em;line-height:.98}.social-resize-hero>div{position:relative;z-index:1}.social-resize-hero>div>p:last-child{color:#c6d0e3;line-height:1.7;margin:18px 0 0;max-width:680px}.social-steps{display:grid;gap:9px;position:relative;z-index:1}.social-steps span{align-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);border-radius:14px;color:#edf3ff;display:flex;font-size:.78rem;font-weight:900;gap:10px;min-width:188px;padding:11px 14px}.social-steps b{align-items:center;background:#fff;border-radius:50%;color:#28214f;display:flex;height:24px;justify-content:center;width:24px}.social-resize-shell{display:grid;gap:16px}.social-upload{align-items:center;background:linear-gradient(135deg,#fff,#f8fbff);border:2px dashed #adc5dd;border-radius:18px;cursor:pointer;display:flex;justify-content:center;min-height:104px;padding:18px;transition:.18s}.social-upload:hover,.social-upload.dragging{background:#eef7ff;border-color:#2173d5;box-shadow:0 12px 30px rgba(31,101,190,.08)}.social-upload input{display:none}.social-upload-icon{align-items:center;background:#e8f2ff;border-radius:14px;color:#176bd7;display:flex;font-size:1.55rem;font-weight:900;height:48px;justify-content:center;margin-right:14px;width:48px}.social-upload>span:last-child{display:grid;gap:4px}.social-upload small{color:var(--muted)}.social-resize-grid{align-items:start;display:grid;gap:16px;grid-template-columns:300px minmax(420px,1fr) 300px}.social-preset-panel,.social-control-panel{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 14px 38px rgba(25,47,74,.075);padding:16px}.social-panel-title{align-items:center;display:flex;gap:10px;margin-bottom:14px}.social-panel-title>span{align-items:center;background:#edf5ff;border-radius:10px;color:#176bd7;display:flex;font-size:.7rem;font-weight:950;height:34px;justify-content:center;width:34px}.social-panel-title>div{display:grid;gap:2px}.social-panel-title strong{font-size:.92rem}.social-panel-title small{color:var(--muted);font-size:.68rem;line-height:1.45}.social-preset-list{display:grid;gap:8px;max-height:680px;overflow:auto;padding-right:2px}.social-preset-list button{align-items:center;background:#fff;border:1px solid #e0e9f2;border-radius:13px;cursor:pointer;display:grid;gap:10px;grid-template-columns:5px 1fr auto;min-height:70px;padding:9px 11px;text-align:left;transition:.16s}.social-preset-list button>i{background:var(--platform);border-radius:99px;height:42px}.social-preset-list button>span{display:grid;gap:2px;min-width:0}.social-preset-list button strong{font-size:.92rem}.social-preset-list button small{color:#253345;font-size:.74rem;font-weight:900}.social-preset-list button em{color:var(--muted);font-size:.62rem;font-style:normal;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.social-preset-list button>b{background:#f2f6fb;border:1px solid #dce7f2;border-radius:999px;color:#657990;font-size:.62rem;font-weight:900;padding:5px 7px;white-space:nowrap}.social-preset-list button:hover,.social-preset-list button.active{background:#f8fbff;border-color:var(--platform);box-shadow:0 8px 22px rgba(25,47,74,.08);transform:translateY(-1px)}.social-preset-list button.active>b{background:#fff;color:#18283a}.social-preview-area{background:#101928;border-radius:22px;box-shadow:0 20px 50px rgba(15,30,50,.18);min-width:0;padding:17px}.social-preview-head{align-items:center;color:#fff;display:flex;justify-content:space-between;margin-bottom:14px}.social-preview-head>div{display:grid}.social-preview-head span{color:#9cb2ce;font-size:.68rem;font-weight:850}.social-preview-head strong{font-size:1.08rem}.social-preview-head>span:last-child{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:999px;color:#d9e7f7;padding:7px 10px}.social-device{align-items:center;background:radial-gradient(circle at 48% 38%,rgba(59,130,246,.16),transparent 35%),linear-gradient(145deg,#1c2c43,#0b1422);border:1px solid rgba(255,255,255,.08);border-radius:17px;display:flex;justify-content:center;min-height:630px;padding:25px}.social-platform-card{background:#f8fafc;border:1px solid rgba(255,255,255,.1);border-radius:24px;box-shadow:0 22px 60px rgba(0,0,0,.28);max-width:100%;overflow:hidden;padding:14px;width:min(100%,660px)}.social-device-phone .social-platform-card{background:#05070b;border:8px solid #0b1220;border-radius:34px;max-width:390px;padding:12px}.social-device-video .social-platform-card{background:#0f172a}.social-device-banner .social-platform-card{max-width:760px}.social-card-top{align-items:center;color:#111827;display:grid;gap:9px;grid-template-columns:32px 1fr auto;margin-bottom:12px}.social-device-phone .social-card-top,.social-device-video .social-card-top{color:#f8fafc}.social-card-top>span{border-radius:50%;box-shadow:0 0 0 5px rgba(255,255,255,.5);height:28px;width:28px}.social-card-top strong{font-size:.9rem}.social-card-top small{background:rgba(15,23,42,.08);border-radius:999px;font-size:.66rem;font-weight:900;padding:6px 9px}.social-device-phone .social-card-top small,.social-device-video .social-card-top small{background:rgba(255,255,255,.11);color:#dbeafe}.social-stage{align-items:center;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);justify-items:center}.social-device-banner .social-stage{grid-template-columns:1fr}.social-cut-note{border:1px dashed rgba(148,163,184,.45);border-radius:999px;color:#94a3b8;font-size:.62rem;font-weight:900;opacity:.9;padding:7px 10px;text-align:center;text-transform:uppercase}.social-device-banner .social-cut-note{display:none}.social-preview-frame{background:#26364c;border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 48px rgba(0,0,0,.32);max-height:580px;max-width:100%;overflow:hidden;position:relative;width:min(100%,440px)}.social-preview-frame::before{background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 8px,rgba(255,255,255,.02) 8px 16px);content:"";inset:0;opacity:.18;pointer-events:none;position:absolute}.social-preview-frame img{display:none;height:100%;inset:0;object-fit:cover;position:absolute;transform-origin:center;width:100%;will-change:transform}.social-preview-frame.has-image img{display:block}.social-empty-preview{align-items:center;color:#92a4ba;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center;min-height:300px;padding:28px;text-align:center}.social-empty-preview>span{background:linear-gradient(135deg,#4f7fb8,#263b5a);border:1px solid rgba(255,255,255,.18);border-radius:14px;height:46px;width:46px}.social-empty-preview strong{color:#d9e5f4;font-size:.92rem}.social-empty-preview small{font-size:.7rem;line-height:1.55;max-width:260px}.social-preview-frame.has-image .social-empty-preview{display:none}.social-safe-zone{border:2px dashed rgba(255,255,255,.84);box-shadow:0 0 0 999px rgba(2,6,23,.18);display:none;inset:9% 8%;pointer-events:none;position:absolute}.social-safe-story .social-safe-zone{inset:11% 9% 17%}.social-safe-wide .social-safe-zone{inset:10% 8%}.social-safe-banner .social-safe-zone{inset:36% 18%}.social-safe-zone.visible{display:block}.social-safe-zone span{background:rgba(0,0,0,.68);border-radius:999px;color:#fff;font-size:.6rem;font-weight:900;left:50%;padding:5px 8px;position:absolute;top:7px;transform:translateX(-50%);white-space:nowrap}.social-preview-frame-label{background:var(--platform,#176bd7);border-radius:999px;bottom:10px;color:#fff;font-size:.62rem;font-weight:950;left:10px;padding:6px 8px;position:absolute}.social-card-actions{align-items:center;display:grid;gap:8px;grid-template-columns:22px 22px 22px 1fr;margin-top:12px}.social-card-actions span{background:#dbe5ef;border-radius:999px;height:8px}.social-device-phone .social-card-actions span,.social-device-video .social-card-actions span{background:rgba(255,255,255,.2)}.social-card-actions b{color:#64748b;font-size:.68rem;justify-self:end}.social-device-phone .social-card-actions b,.social-device-video .social-card-actions b{color:#cbd5e1}.social-preview-tips{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:15px;color:#b8c7db;display:grid;gap:7px;margin-top:14px;padding:13px 14px}.social-preview-tips strong{color:#fff;font-size:.78rem}.social-preview-tips span{font-size:.68rem;line-height:1.45;padding-left:14px;position:relative}.social-preview-tips span::before{background:#38bdf8;border-radius:50%;content:"";height:5px;left:0;position:absolute;top:.5em;width:5px}.social-control-panel{display:grid;gap:15px;position:sticky;top:88px}.social-control-panel>label{color:#526579;display:grid;font-size:.75rem;font-weight:850;gap:8px;grid-template-columns:1fr auto}.social-control-panel output{background:#edf6ff;border-radius:999px;color:#176bd7;font-size:.68rem;padding:4px 8px}.social-control-panel input[type=range]{accent-color:#176bd7;grid-column:1/-1;width:100%}.social-format{border-top:1px solid var(--line);padding-top:15px}.social-format select{background:#f8fafc;border:1px solid var(--line);border-radius:11px;grid-column:1/-1;min-height:44px;padding:0 10px}.social-download{border-radius:14px;display:grid;gap:2px;min-height:68px}.social-download small{color:#dceaff;font-size:.66rem}.social-control-panel>.small-button{width:100%}@media(max-width:1120px){.social-resize-grid{grid-template-columns:260px 1fr}.social-control-panel{grid-column:1/-1;grid-template-columns:repeat(3,1fr);position:static}.social-control-panel .social-panel-title,.social-control-panel .social-format,.social-control-panel .social-download,.social-control-panel>.small-button{grid-column:1/-1}.social-device{min-height:560px}}@media(max-width:820px){.social-resize-hero{align-items:flex-start;flex-direction:column;gap:25px;padding:30px 22px}.social-resize-grid{grid-template-columns:1fr}.social-preset-panel{order:2}.social-preview-area{order:1}.social-control-panel{grid-template-columns:1fr;order:3}.social-preset-list{grid-auto-flow:column;grid-template-columns:repeat(12,230px);overflow-x:auto}.social-device{min-height:500px}.social-upload{justify-content:flex-start}.social-stage{grid-template-columns:1fr}.social-cut-note{display:none}}@media(max-width:540px){.social-resize-hero{border-radius:20px}.social-resize-hero h1{font-size:2.5rem}.social-steps{width:100%}.social-steps span{min-width:0}.social-preview-area{padding:11px}.social-device{min-height:420px;padding:12px}.social-platform-card{border-radius:18px;padding:10px}.social-device-phone .social-platform-card{border-width:5px;border-radius:26px}.social-preview-frame{max-height:410px}.social-preview-head{align-items:flex-start;flex-direction:column;gap:7px}.social-card-top{grid-template-columns:28px 1fr auto}.social-card-top>span{height:24px;width:24px}.social-preset-list{grid-template-columns:repeat(12,210px)}}@media(prefers-reduced-motion:reduce){.social-preset-list button{transition:none}.social-preset-list button:hover,.social-preset-list button.active{transform:none}}
/* Premium local calendar and D-Day */
.calendar-hero{align-items:flex-end;background:radial-gradient(circle at 84% 8%,rgba(255,190,73,.25),transparent 33%),linear-gradient(135deg,#0b1728,#17334a 60%,#1b4b4b);border-radius:24px;color:#fff;display:flex;gap:28px;justify-content:space-between;margin-bottom:18px;min-height:300px;overflow:hidden;padding:42px;position:relative}.calendar-hero::after{border:1px solid rgba(255,255,255,.08);border-radius:50%;content:"";height:360px;position:absolute;right:-110px;top:-210px;width:360px}.calendar-hero>div{position:relative;z-index:1}.calendar-hero h1{font-size:clamp(2.7rem,5.5vw,4.8rem);letter-spacing:-.07em;line-height:1.02}.calendar-hero>div>p:last-child{color:#b5c5d2;line-height:1.7;margin:18px 0 0;max-width:640px}.calendar-now{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 16px 38px rgba(0,0,0,.16);display:grid;min-width:310px;padding:18px 20px;position:relative;z-index:1}.calendar-now>span{color:#87d5c1;font-size:.72rem;font-weight:850}.calendar-now strong{color:#fff;font-size:2.15rem;letter-spacing:-.04em;margin:5px 0}.calendar-now small{color:#aabccc}.calendar-tool{display:grid;gap:16px}.calendar-tabs{background:#e8eef4;border-radius:15px;display:grid;gap:5px;grid-template-columns:1fr 1fr;padding:5px}.calendar-tabs button{align-items:center;background:transparent;border:0;border-radius:11px;color:#64768a;cursor:pointer;display:grid;gap:3px;grid-template-columns:40px minmax(0,1fr);min-height:68px;padding:9px 16px;text-align:left}.calendar-tabs button>span{align-items:center;background:rgba(91,110,134,.1);border-radius:10px;display:flex;font-size:1.1rem;grid-row:1/3;height:36px;justify-content:center;width:36px}.calendar-tabs button strong{font-size:.92rem}.calendar-tabs button small{font-size:.68rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-tabs button.active{background:#fff;box-shadow:0 8px 22px rgba(25,49,77,.1);color:#174f87}.calendar-tabs button.active>span{background:#e8f3ff;color:#176bd7}.calendar-tab-panel{display:none}.calendar-tab-panel.active{display:block}.calendar-layout{align-items:start;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 300px}.calendar-paper{background:#fff;border:1px solid #dae4ee;border-radius:20px;box-shadow:0 18px 45px rgba(24,47,75,.09);overflow:hidden;padding:20px}.calendar-paper-head{align-items:center;display:flex;gap:12px;justify-content:space-between;padding:4px 5px 20px}.calendar-paper-head button,.dday-mini-head button{align-items:center;background:#f0f4f8;border:1px solid #e0e8f0;border-radius:10px;color:#334960;cursor:pointer;display:flex;font-size:1.35rem;height:42px;justify-content:center;line-height:1;width:42px}.calendar-paper-head button:hover,.dday-mini-head button:hover{background:#e7f2ff;border-color:#a9caef;color:var(--accent)}.calendar-paper-head>div{text-align:center}.calendar-paper-head span{color:#8291a3;font-size:.72rem;font-weight:800}.calendar-paper-head h2{font-size:1.8rem;margin-top:3px}.calendar-weekdays,.calendar-grid,.dday-week,.dday-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-weekdays{border-bottom:1px solid #e8edf3;color:#718399;font-size:.72rem;font-weight:900;padding-bottom:9px;text-align:center}.calendar-weekdays span:first-child,.dday-week span:first-child{color:#e25058}.calendar-weekdays span:last-child,.dday-week span:last-child{color:#397ed1}.calendar-grid{border-left:1px solid #edf1f5;border-top:1px solid #edf1f5}.calendar-day{background:#fff;border:0;border-bottom:1px solid #edf1f5;border-radius:0;border-right:1px solid #edf1f5;color:#243347;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:92px;padding:10px;text-align:left;transition:background .15s ease,box-shadow .15s ease}.calendar-day:hover{background:#f2f7fd}.calendar-day.outside{background:#fafbfd;color:#b0bac5}.calendar-day>span{font-weight:800}.calendar-day.today>span{align-items:center;background:#1769dc;border-radius:50%;color:#fff;display:flex;height:28px;justify-content:center;width:28px}.calendar-day.selected{background:#eaf4ff;box-shadow:inset 0 0 0 2px #4b91e7}.calendar-day.holiday:not(.outside)>span{color:#df3d48;font-weight:900}.calendar-day small{color:#df5059;font-size:.58rem;font-weight:750;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis}.calendar-side{display:grid;gap:14px;position:sticky;top:88px}.calendar-selected{background:linear-gradient(145deg,#13253b,#183b4a);border-radius:18px;color:#fff;display:grid;padding:20px}.calendar-selected>span{color:#7eb6f0;font-size:.68rem;font-weight:900}.calendar-selected strong{font-size:1.12rem;margin:9px 0 5px}.calendar-selected small{color:#9fb3c6}.holiday-head{align-items:flex-end;display:flex;justify-content:space-between;padding:8px 4px 0}.holiday-head span{color:#3478c5;font-size:.62rem;font-weight:900}.holiday-head h3{font-size:1.1rem;margin-top:4px}.holiday-head>b{align-items:center;background:#e8f2ff;border-radius:999px;color:#1769dc;display:flex;height:30px;justify-content:center;width:30px}.holiday-list{display:grid;gap:8px}.holiday-list button{align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;cursor:pointer;display:grid;gap:10px;grid-template-columns:38px minmax(0,1fr);padding:10px;text-align:left}.holiday-list button:hover{border-color:#e9858c;box-shadow:0 7px 18px rgba(34,54,78,.07)}.holiday-list button>span{align-items:center;background:#fff0f1;border-radius:9px;color:#df3d48;display:flex;font-weight:900;height:36px;justify-content:center}.holiday-list button>div{display:grid;min-width:0}.holiday-list strong,.holiday-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.holiday-list small,.holiday-list>p{color:var(--muted);font-size:.68rem}.holiday-list>p{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:20px;text-align:center}.dday-intro{text-align:center;padding:32px 10px 24px}.dday-intro h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.05em}.dday-intro>p:last-child{color:var(--muted);margin:10px 0 0}.dday-layout{align-items:center;display:grid;gap:18px;grid-template-columns:minmax(280px,1fr) 220px minmax(280px,1fr)}.dday-calendar-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 15px 38px rgba(25,48,75,.08);overflow:hidden;padding:18px}.dday-card-label{border-bottom:1px solid #e8edf3;display:grid;margin-bottom:14px;padding-bottom:13px}.dday-card-label>span{color:#397bc7;font-size:.62rem;font-weight:900}.dday-card-label strong{font-size:1.02rem;margin:3px 0}.dday-card-label small{color:var(--muted)}.dday-mini-head{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-bottom:10px}.dday-mini-head button{font-size:1rem;height:32px;width:32px}.dday-mini-head strong{font-size:.88rem;text-align:center}.dday-week{color:#7b8b9e;font-size:.62rem;font-weight:850;margin-bottom:5px;text-align:center}.dday-grid{gap:3px}.dday-grid .calendar-day{align-items:center;border:0;border-radius:8px;justify-content:center;min-height:40px;padding:3px;text-align:center}.dday-grid .calendar-day small{display:none}.dday-grid .calendar-day.selected{background:#1769dc;color:#fff;box-shadow:none}.dday-grid .calendar-day.today:not(.selected)>span{height:27px;width:27px}.dday-result{align-items:center;background:linear-gradient(160deg,#10243d,#164b53);border-radius:22px;box-shadow:0 20px 48px rgba(13,42,59,.2);color:#fff;display:flex;flex-direction:column;justify-content:center;min-height:270px;padding:24px;text-align:center}.dday-result>span{color:#8fc8bd;font-size:.72rem;font-weight:850}.dday-result>strong{font-size:3.5rem;letter-spacing:-.07em;margin:10px 0}.dday-result>small{color:#9eb1c2;font-size:.68rem}.dday-result .primary-button{border-radius:11px;margin-top:22px;min-height:48px;width:100%}@media(max-width:1000px){.dday-layout{grid-template-columns:1fr 1fr}.dday-result{grid-column:1/-1;grid-row:2;min-height:200px}.calendar-layout{grid-template-columns:1fr}.calendar-side{grid-template-columns:1fr 1fr;position:static}.holiday-list{grid-column:1/-1}}@media(max-width:700px){.calendar-hero{align-items:flex-start;flex-direction:column;gap:25px;padding:28px 21px}.calendar-now{min-width:0;width:100%}.calendar-layout{gap:12px}.calendar-paper{padding:10px}.calendar-day{min-height:66px;padding:6px}.calendar-day small{display:none}.calendar-side{grid-template-columns:1fr}.calendar-tabs button{padding:8px}.dday-layout{grid-template-columns:1fr}.dday-result{grid-column:auto;grid-row:auto;order:2}.dday-calendar-card:last-child{order:3}.dday-calendar-card{padding:14px}}@media(max-width:440px){.calendar-hero h1{font-size:2.4rem}.calendar-tabs button>small{display:none}.calendar-tabs button{grid-template-columns:32px minmax(0,1fr);min-height:56px}.calendar-tabs button>span{height:29px;width:29px}.calendar-day{min-height:54px}.calendar-day>span{font-size:.75rem}}

/* Premium percentage, discount and tax calculator */
.percent-hero{align-items:center;background:radial-gradient(circle at 82% 12%,rgba(255,206,84,.28),transparent 34%),linear-gradient(135deg,#0a1626,#173954 58%,#165647);border-radius:24px;color:#fff;display:flex;justify-content:space-between;margin-bottom:18px;min-height:310px;padding:42px}.percent-hero h1{font-size:clamp(2.7rem,5.5vw,4.8rem);letter-spacing:-.07em;line-height:1.02}.percent-hero>div>p:last-child{color:#b7c8d4;line-height:1.7;margin:18px 0 0;max-width:610px}.money-visual{align-items:center;display:flex;gap:10px;position:relative}.money-coin{align-items:center;background:linear-gradient(145deg,#ffda62,#f8a928);border:5px solid rgba(255,255,255,.13);border-radius:50%;box-shadow:0 14px 35px rgba(0,0,0,.22);color:#533600;display:flex;font-size:1.5rem;font-weight:950;height:74px;justify-content:center;position:absolute;right:42%;top:-48px;width:74px;z-index:2;animation:moneyFloat 2.6s ease-in-out infinite}.money-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:15px;display:grid;min-width:145px;padding:15px}.money-card small{color:#9fb2c4}.money-card strong{font-size:1.1rem;margin-top:4px}.money-card.result{background:rgba(53,216,151,.13);border-color:rgba(73,226,164,.24)}.money-visual>i{color:#6cd9ad;font-size:1.5rem;font-style:normal}@keyframes moneyFloat{50%{transform:translateY(-7px) rotate(4deg)}}@keyframes discountFloat{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-9px) rotate(-4deg)}}@keyframes discountHalo{0%{opacity:.65;transform:scale(.88)}70%{opacity:.08;transform:scale(1.3)}100%{opacity:0;transform:scale(1.42)}}.percent-tool{display:grid;gap:16px}.percent-tabs{background:#e9eff5;border-radius:16px;display:grid;gap:5px;grid-template-columns:repeat(3,1fr);padding:5px}.percent-tabs button{align-items:center;background:transparent;border:0;border-radius:12px;color:#63778c;cursor:pointer;display:grid;gap:3px;grid-template-columns:42px 1fr;min-height:72px;padding:9px 15px;text-align:left}.percent-tabs button>span{align-items:center;background:rgba(95,112,134,.1);border-radius:11px;display:flex;font-size:1.05rem;grid-row:1/3;height:38px;justify-content:center;width:38px}.percent-tabs button strong{font-size:.9rem}.percent-tabs button small{font-size:.67rem;font-weight:700}.percent-tabs button.active{background:#fff;box-shadow:0 8px 24px rgba(25,48,76,.1);color:#174d80}.percent-tabs button.active>span{background:#e8f3ff;color:#176bd7}.percent-panel{display:none}.percent-panel.active{display:block}.percent-panel-head{margin-bottom:22px}.percent-panel-head>span{color:#2573c9;font-size:.66rem;font-weight:900;letter-spacing:.09em}.percent-panel-head h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.05em;margin-top:5px}.percent-panel-head p{color:var(--muted);margin:8px 0 0}.percent-question-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}.percent-question{background:#fff;border:1px solid #dce5ee;border-radius:18px;box-shadow:0 13px 36px rgba(24,47,75,.07);display:grid;gap:17px;min-width:0;padding:20px}.question-number{align-items:center;background:#ecf4fd;border-radius:9px;color:#1769d5;display:flex;font-size:.68rem;font-weight:900;height:30px;justify-content:center;width:36px}.percent-question h3{font-size:1rem}.percent-sentence{align-items:center;background:#f5f8fb;border-radius:13px;display:flex;flex-wrap:wrap;font-size:.8rem;font-weight:800;gap:7px;padding:12px}.percent-sentence label{align-items:center;background:#fff;border:1px solid #cedbe8;border-radius:9px;display:flex;padding:3px 7px}.percent-sentence input{border:0;font-size:1.08rem;font-weight:950;min-height:34px;min-width:92px;outline:0;padding:2px 6px;width:clamp(92px,7.5vw,128px)}.percent-visual{background:linear-gradient(135deg,#f8fbff,#eef6ff);border:1px solid #dbe8f5;border-radius:13px;display:grid;gap:8px;padding:11px 12px}.visual-track{background:#dfe9f4;border-radius:999px;height:12px;overflow:visible;position:relative}.visual-track i{background:linear-gradient(90deg,#62a7ff,#34d399);border-radius:999px;display:block;height:100%;transition:width .42s cubic-bezier(.2,.8,.2,1);width:var(--level)}.visual-track b{background:#fff;border:3px solid #176bd7;border-radius:50%;box-shadow:0 6px 16px rgba(23,107,215,.24);height:22px;left:var(--level);position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .42s cubic-bezier(.2,.8,.2,1);width:22px}.percent-visual>div:last-child{align-items:center;color:#607488;display:flex;font-size:.7rem;font-weight:850;justify-content:space-between}.percent-visual strong{background:#fff;border-radius:999px;color:#0f172a;font-size:.82rem;padding:4px 9px}.percent-visual.change .visual-track i{background:linear-gradient(90deg,#34d399,#53e6ae)}.percent-visual.change.down .visual-track i{background:linear-gradient(90deg,#ff9aa4,#ef476f)}.percent-visual.change.down .visual-track b{border-color:#ef476f}.percent-visual.change.down strong{color:#d13d45}.percent-visual.change.up strong{color:#078052}.percent-question:focus-within .visual-track b,.percent-question:hover .visual-track b{animation:percentDotPulse 1.4s ease-in-out infinite}@keyframes percentDotPulse{50%{box-shadow:0 6px 16px rgba(23,107,215,.18),0 0 0 8px rgba(23,107,215,.08)}}.percent-answer{background:linear-gradient(145deg,#10243a,#164559);border-radius:14px;color:#fff;display:grid;margin-top:auto;padding:16px}.percent-answer small{color:#8fc5bb}.percent-answer strong{font-size:clamp(1.55rem,3.2vw,2.1rem);letter-spacing:-.05em;line-height:1.08;margin:5px 0;overflow-wrap:anywhere}.percent-answer strong.up{color:#54dfad}.percent-answer strong.down{color:#ff7e88}.percent-answer p{color:#9fb1c2;font-size:.69rem;margin:0}.money-calculator-layout,.tax-layout{align-items:stretch;display:grid;gap:18px;grid-template-columns:minmax(320px,.9fr) minmax(360px,1.1fr)}.money-form{background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:0 14px 38px rgba(25,48,75,.07);display:grid;gap:15px;padding:25px}.money-input{display:grid;gap:7px}.money-input>span,.currency-select{color:#586b80;font-size:.76rem;font-weight:850}.money-input>div{align-items:center;background:#f7f9fc;border:1px solid #ccd9e6;border-radius:12px;display:flex;min-height:58px;padding:0 14px}.money-input>div:focus-within{border-color:#74a9e8;box-shadow:0 0 0 4px rgba(37,112,205,.1)}.money-input input{background:transparent;border:0;font-size:1.45rem;font-weight:950;min-width:0;outline:0;padding:8px;width:100%}.money-input b{color:#71849a;font-size:1.1rem}.currency-select{display:grid;gap:7px}.currency-select select{background:#f7f9fc;border:1px solid #ccd9e6;border-radius:10px;min-height:44px;padding:0 11px}.discount-receipt{background:linear-gradient(160deg,#fffef8,#fff8df);border:1px solid #efdfab;border-radius:20px;box-shadow:0 20px 50px rgba(105,79,17,.12);display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:34px;position:relative;text-align:center}.discount-receipt::after{background:repeating-linear-gradient(90deg,transparent 0 12px,#f6f8fb 12px 24px);bottom:-1px;content:"";height:12px;left:0;position:absolute;right:0}.discount-receipt>p{color:#a98625;font-size:.68rem;font-weight:950;letter-spacing:.14em}.discount-badge{align-items:center;background:radial-gradient(circle at 32% 24%,#ff7b8b,#ef3d55 58%,#d92a43);border-radius:50%;box-shadow:0 10px 25px rgba(239,61,85,.24),0 0 0 0 rgba(239,61,85,.18);color:#fff;display:flex;flex-direction:column;height:86px;justify-content:center;margin:12px auto 20px;position:relative;transform:rotate(-7deg);width:86px;animation:discountFloat 3.1s ease-in-out infinite}.discount-badge::after{border:1px solid rgba(239,61,85,.28);border-radius:50%;content:"";inset:-7px;position:absolute;animation:discountHalo 2.6s ease-out infinite}.discount-badge strong{font-size:1.45rem}.discount-badge span{font-size:.62rem;font-weight:900}.discount-receipt>small{color:#8a7851}.discount-receipt>strong{font-size:clamp(1.95rem,5vw,4.4rem);letter-spacing:-.07em;line-height:1.02;margin:7px 0 24px;overflow-wrap:anywhere}.saving-row{border-top:1px dashed #d8c995;display:grid;gap:10px;grid-template-columns:1fr 1fr;padding-top:16px}.saving-row span{color:#877958;display:grid;font-size:.7rem}.saving-row b{color:#2d3c4c;font-size:.96rem;margin-top:3px;overflow-wrap:anywhere}.discount-meter{background:#eadfb8;border-radius:99px;height:9px;margin-top:18px;overflow:hidden}.discount-meter i{background:linear-gradient(90deg,#ffc43d,#ef3d55);display:block;height:100%;position:relative;transition:width .45s cubic-bezier(.2,.8,.2,1);width:20%}.discount-meter i::after{background:rgba(255,255,255,.65);border-radius:50%;content:"";height:13px;position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:13px}.tax-mode{display:grid;gap:8px;grid-template-columns:1fr 1fr}.tax-mode button{background:#f5f8fb;border:1px solid var(--line);border-radius:11px;cursor:pointer;display:grid;gap:3px;padding:11px;text-align:left}.tax-mode button small{color:var(--muted);font-size:.66rem}.tax-mode button.active{background:#eaf4ff;border-color:#82b1e7;color:#1768ce}.tax-note{background:#fff8df;border-radius:9px;color:#816c30;font-size:.68rem;line-height:1.5;margin:0;padding:10px}.tax-result-card{background:linear-gradient(150deg,#0d1d32,#153b4a);border-radius:20px;box-shadow:0 20px 48px rgba(14,35,54,.2);color:#fff;display:grid;gap:12px;padding:30px}.tax-result-card>span{color:#75c9b3;font-size:.68rem;font-weight:900;letter-spacing:.08em}.tax-result-card>div{align-items:center;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.08);border-radius:13px;display:flex;justify-content:space-between;padding:15px}.tax-result-card small{color:#9db0c3}.tax-result-card strong{font-size:1.25rem}.tax-result-card>i{color:#6b8299;font-style:normal;text-align:center}.tax-result-card .tax-total{background:rgba(47,209,150,.13);border-color:rgba(72,222,166,.2);padding:20px}.tax-result-card .tax-total strong{color:#65e0b4;font-size:1.8rem}@media(max-width:900px){.percent-question-grid{grid-template-columns:1fr}.money-calculator-layout,.tax-layout{grid-template-columns:1fr}.percent-hero{align-items:flex-start;flex-direction:column;gap:65px}.money-visual{align-self:center}}@media(max-width:600px){.percent-hero{padding:28px 20px}.percent-hero h1{font-size:2.5rem}.money-visual{gap:5px;transform:scale(.88)}.money-card{min-width:125px}.percent-tabs button{grid-template-columns:34px 1fr;padding:7px}.percent-tabs button>span{height:31px;width:31px}.percent-tabs button small{display:none}.percent-question{padding:15px}.percent-sentence input{width:68px}.money-form,.discount-receipt,.tax-result-card{padding:20px}}.calendar-country-select{border-top:1px solid rgba(255,255,255,.12);display:grid;gap:6px;margin-top:13px;padding-top:13px}.calendar-country-select>span{color:#89a1b8;font-size:.66rem;font-weight:850}.calendar-country-select select{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:9px;color:#fff;cursor:pointer;font-size:.78rem;font-weight:800;min-height:40px;padding:0 10px;width:100%}.calendar-country-select option{background:#173047;color:#fff}.calendar-nav-group{display:flex;gap:6px}.calendar-paper-head .year-nav{background:#eaf2fb;color:#266aaa;font-size:1.15rem}.calendar-paper-head .year-nav:hover{background:#dcecff}@media(max-width:440px){.calendar-paper-head button{height:36px;width:36px}.calendar-nav-group{gap:3px}}.holiday-list button{grid-template-columns:38px minmax(0,1fr) auto}.holiday-list button>i{background:#edf3f8;border-radius:7px;color:#6b7d91;font-size:.62rem;font-style:normal;font-weight:850;opacity:0;padding:6px 7px;transition:.15s}.holiday-list button:hover>i,.holiday-list button:focus-visible>i{opacity:1}.holiday-list button:active>i{background:#1769dc;color:#fff}@media(max-width:700px){.holiday-list button>i{opacity:1}}.country-combobox{display:grid;grid-template-columns:1fr 38px;position:relative}.country-combobox>input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);border-radius:10px 0 0 10px;color:#fff;font-size:.78rem;font-weight:800;min-height:42px;min-width:0;outline:0;padding:0 11px;width:100%}.country-combobox>input::placeholder{color:#a9bac9}.country-combobox>input:focus{background:rgba(255,255,255,.15);border-color:#7bc2ee;box-shadow:0 0 0 3px rgba(89,174,233,.12)}.country-combobox>#calendarCountryToggle{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.17);border-left:0;border-radius:0 10px 10px 0;color:#fff;cursor:pointer;font-size:1rem}.country-menu{background:#fff;border:1px solid #d8e3ed;border-radius:14px;box-shadow:0 22px 55px rgba(4,18,34,.3);display:grid;gap:3px;left:0;max-height:310px;overflow:auto;padding:7px;position:absolute;right:0;top:calc(100% + 7px);z-index:50}.country-menu[hidden]{display:none}.country-menu button{align-items:center;background:#fff;border:0;border-radius:9px;color:#1c2c3d;cursor:pointer;display:grid;gap:2px;grid-template-columns:1fr auto;padding:9px 10px;text-align:left}.country-menu button:hover,.country-menu button:focus-visible{background:#edf5ff;outline:none}.country-menu button.selected{background:#e8f7f1}.country-menu button>span{font-size:.8rem;font-weight:850}.country-menu button>small{color:#78899b;font-size:.62rem;grid-column:1}.country-menu button>b{color:#13865d;grid-column:2;grid-row:1/3}.country-menu>p{color:#78899b;font-size:.75rem;margin:0;padding:18px;text-align:center}
.calendar-country-context{align-items:center;background:linear-gradient(135deg,#edf6ff,#eefbf6);border:1px solid #cfe1ee;border-radius:16px;box-shadow:0 10px 24px rgba(26,70,105,.08);display:grid;gap:12px;grid-template-columns:48px minmax(0,1fr) auto;margin:0 4px 18px;overflow:hidden;padding:14px 16px;position:relative}.calendar-country-context::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);content:"";height:140%;pointer-events:none;position:absolute;right:-45px;top:-20%;transform:rotate(14deg);width:80px}.calendar-country-context-icon{align-items:center;background:linear-gradient(145deg,#176bd7,#1bb78a);border-radius:14px;box-shadow:0 8px 18px rgba(23,107,215,.2);color:#fff;display:flex;font-size:1.35rem;height:48px;justify-content:center;width:48px}.calendar-country-context>div{display:grid;gap:2px;min-width:0}.calendar-country-context small{color:#567086;font-size:.67rem;font-weight:850}.calendar-country-context strong{color:#10283d;font-size:clamp(1.15rem,2.1vw,1.5rem);letter-spacing:-.035em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-country-context>b{align-items:center;background:#fff;border:1px solid #cfdeea;border-radius:999px;color:#1769d5;display:flex;font-size:.78rem;font-weight:950;height:36px;justify-content:center;min-width:48px;padding:0 12px;position:relative;z-index:1}.dday-country-context{margin:0 auto 22px;max-width:760px;width:calc(100% - 20px)}.dday-country-context strong{font-size:clamp(1.08rem,2vw,1.35rem)}@media(max-width:700px){.calendar-country-context{grid-template-columns:42px minmax(0,1fr) auto;margin:0 0 14px;padding:12px}.calendar-country-context-icon{border-radius:12px;font-size:1.1rem;height:42px;width:42px}.calendar-country-context>b{height:32px;min-width:42px;padding:0 10px}.dday-country-context{width:100%}}
.calendar-country-context-icon{background:#fff;border:1px solid #d4e2ec;box-shadow:0 8px 18px rgba(26,71,108,.12);font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:1.7rem}.country-menu button{grid-template-columns:32px minmax(0,1fr) auto}.country-menu button>i{align-items:center;display:flex;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:1.2rem;font-style:normal;grid-column:1;grid-row:1/3;justify-content:center}.country-menu button>span{grid-column:2}.country-menu button>small{grid-column:2}.country-menu button>b{grid-column:3;grid-row:1/3}
.calendar-country-context{grid-template-columns:48px minmax(0,1fr)}.calendar-country-context-icon img{display:block;height:32px;max-width:38px;object-fit:contain;width:auto}.country-menu button>i img{display:block;height:20px;max-width:27px;object-fit:contain;width:auto}.twemoji-credit{color:#8795a5;font-size:.62rem;margin:10px 4px 0;text-align:right}.twemoji-credit a{color:#607b98;text-decoration:none}.twemoji-credit a:hover{text-decoration:underline}@media(max-width:700px){.calendar-country-context{grid-template-columns:42px minmax(0,1fr)}.calendar-country-context-icon img{height:28px;max-width:34px}}
.emoji-load-more{align-items:center;background:linear-gradient(135deg,#f8fbff,#eef7ff);border:1px solid #d5e5f4;border-radius:16px;color:#45627e;cursor:pointer;display:grid;gap:4px;grid-template-columns:38px 1fr auto;min-height:68px;padding:12px 18px;text-align:left;transition:border-color .16s ease,box-shadow .16s ease;width:100%}.emoji-load-more:hover,.emoji-load-more:focus-visible{border-color:#91b8e4;box-shadow:0 10px 26px rgba(32,81,128,.09);outline:none}.emoji-load-more>span{border:3px solid #d8e7f5;border-radius:50%;border-top-color:#2376d8;height:28px;width:28px}.emoji-load-more.loading>span{animation:emojiLoadSpin .72s linear infinite}.emoji-load-more strong{font-size:.78rem}.emoji-load-more small{background:#fff;border:1px solid #d8e5f1;border-radius:999px;color:#64809b;font-size:.65rem;font-weight:850;padding:6px 10px}.emoji-load-more.loading strong::after{content:" loading";color:#2376d8}@keyframes emojiLoadSpin{to{transform:rotate(360deg)}}@media(max-width:600px){.emoji-load-more{grid-template-columns:34px 1fr;padding:10px 13px}.emoji-load-more small{grid-column:2;justify-self:start}.emoji-load-more>span{height:25px;width:25px}}@media(prefers-reduced-motion:reduce){.emoji-load-more.loading>span{animation-duration:1.4s}}

/* ==========================================
   Favicon Extractor Styles
   ========================================== */

.favicon-extractor-workspace {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem 0.5rem;
}

.favicon-extractor-workspace [hidden] {
  display: none !important;
}

/* Extractor Form Card */
.favicon-extractor-workspace .extractor-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 18px;
  padding: 2.25rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}

.favicon-extractor-workspace .input-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.favicon-extractor-workspace #faviconUrlInput {
  flex: 1;
  padding: 0.95rem 1.25rem;
  border-radius: 12px;
  border: 2px solid var(--border-color, #e5e7eb);
  font-size: 1.1rem;
  background: var(--input-bg, #ffffff);
  color: var(--text-color, #1f2937);
  transition: all 0.22s ease-in-out;
  outline: none;
  font-weight: 500;
}

.favicon-extractor-workspace #faviconUrlInput:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.favicon-extractor-workspace #faviconUrlInput::placeholder {
  color: #9ca3af;
}

.favicon-extractor-workspace #extractFaviconButton {
  padding: 0 2.25rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
}

.favicon-extractor-workspace #extractFaviconButton:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
}

.favicon-extractor-workspace #extractFaviconButton:active {
  transform: translateY(0);
}

.favicon-extractor-workspace .quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.88rem;
  color: var(--muted-color, #6b7280);
}

.favicon-extractor-workspace .quick-chips span {
  font-weight: 600;
  margin-right: 0.5rem;
}

.favicon-extractor-workspace .chip-button {
  background: var(--chip-bg, #f3f4f6);
  border: 1px solid var(--border-color, #e5e7eb);
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-color, #374151);
  cursor: pointer;
  transition: all 0.18s ease;
}

.favicon-extractor-workspace .chip-button:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  transform: scale(1.05);
}

/* Status Boxes */
.favicon-extractor-workspace .extractor-status-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3.5rem;
  background: var(--card-bg, #ffffff);
  border-radius: 18px;
  border: 2px dashed var(--border-color, #e5e7eb);
  color: var(--text-color, #374151);
}

.favicon-extractor-workspace .extractor-status-box .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: emojiLoadSpin 0.8s linear infinite;
}

.favicon-extractor-workspace .extractor-error-box {
  padding: 1.25rem;
  background: #fef2f2;
  border: 1px solid #fee2e2;
  border-radius: 12px;
  color: #dc2626;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.05);
}

/* Results Layout */
.favicon-extractor-workspace .extractor-result-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 820px) {
  .favicon-extractor-workspace .extractor-result-layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* Cards shared */
.favicon-extractor-workspace .simulator-card,
.favicon-extractor-workspace .download-toolkit-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 18px;
  padding: 2.25rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04);
}

.favicon-extractor-workspace .simulator-card h3,
.favicon-extractor-workspace .download-toolkit-card h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-color, #111827);
}

.favicon-extractor-workspace .simulator-card p {
  color: var(--muted-color, #6b7280);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* Browser Tab Simulator */
.favicon-extractor-workspace .browser-tab-simulator {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.favicon-extractor-workspace .browser-tab-head {
  background: #f3f4f6;
  padding: 0.5rem 0.75rem 0 0.75rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
}

.favicon-extractor-workspace .window-controls {
  display: flex;
  gap: 6px;
  margin-right: 1.5rem;
}

.favicon-extractor-workspace .control-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.favicon-extractor-workspace .control-dot.close { background: #ff5f56; }
.favicon-extractor-workspace .control-dot.minimize { background: #ffbd2e; }
.favicon-extractor-workspace .control-dot.maximize { background: #27c93f; }

.favicon-extractor-workspace .simulator-tabs {
  display: flex;
  align-items: flex-end;
}

.favicon-extractor-workspace .simulator-tab {
  background: #ffffff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-bottom: none;
  font-size: 0.82rem;
  font-weight: 600;
  max-width: 150px;
  min-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  top: 1px;
}

.favicon-extractor-workspace .tab-favicon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.favicon-extractor-workspace .tab-title-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #374151;
}

.favicon-extractor-workspace .tab-close-icon {
  color: #9ca3af;
  font-size: 1.15rem;
  cursor: pointer;
  line-height: 1;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.favicon-extractor-workspace .tab-close-icon:hover {
  background: #e5e7eb;
  color: #4b5563;
}

.favicon-extractor-workspace .simulator-tab-add {
  padding: 6px 10px;
  color: #6b7280;
  font-size: 1.1rem;
  cursor: pointer;
  user-select: none;
}

.favicon-extractor-workspace .browser-tab-address-bar {
  background: #ffffff;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.favicon-extractor-workspace .address-input {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 8px;
}

.favicon-extractor-workspace .security-lock {
  font-size: 0.78rem;
}

.favicon-extractor-workspace .browser-tab-body {
  background: #ffffff;
  padding: 3.5rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.favicon-extractor-workspace .brand-preview-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.88rem;
  text-align: center;
}

.favicon-extractor-workspace .brand-hero-logo {
  width: 90px;
  height: 90px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  padding: 16px;
  transition: transform 0.3s ease;
}

.favicon-extractor-workspace .brand-hero-logo:hover {
  transform: scale(1.08) rotate(3deg);
}

.favicon-extractor-workspace .brand-hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.favicon-extractor-workspace #heroDomainName {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

.favicon-extractor-workspace #heroDomainLink {
  font-size: 0.88rem;
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.05);
}

.favicon-extractor-workspace #heroDomainLink:hover {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.1);
}

/* Download Toolkit Card */
.favicon-extractor-workspace .toolkit-header {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  padding-bottom: 1.25rem;
}

@media (min-width: 480px) {
  .favicon-extractor-workspace .toolkit-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.favicon-extractor-workspace .action-bar-top {
  display: flex;
  gap: 0.5rem;
}

.favicon-extractor-workspace .action-bar-top button {
  font-size: 0.88rem;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
}

/* Grid Cards */
.favicon-extractor-workspace .favicon-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 1.25rem;
}

.favicon-extractor-workspace .size-preview-card {
  background: var(--nested-bg, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.favicon-extractor-workspace .size-preview-card:hover {
  transform: translateY(-3px);
  border-color: #2563eb;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.05);
  background: #ffffff;
}

/* Checkerboard background for transparent images */
.favicon-extractor-workspace .checkerboard-bg {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #f3f4f6 25%, transparent 25%),
                    linear-gradient(-45deg, #f3f4f6 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #f3f4f6 75%),
                    linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e5e7eb;
  margin-bottom: 0.88rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.favicon-extractor-workspace .favicon-size-preview {
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.favicon-extractor-workspace .size-label {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.88rem;
  gap: 2px;
}

.favicon-extractor-workspace .size-label strong {
  font-size: 0.95rem;
  color: var(--text-color, #111827);
  font-weight: 700;
}

.favicon-extractor-workspace .size-label span {
  font-size: 0.75rem;
  color: var(--muted-color, #6b7280);
  font-weight: 500;
}

.favicon-extractor-workspace .download-single-btn {
  width: 100%;
  padding: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
}
/* Simulator mode select buttons */
.favicon-extractor-workspace .simulator-modes {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  padding-bottom: 0.75rem;
}

.favicon-extractor-workspace .sim-mode-btn {
  background: transparent;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted-color, #6b7280);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  font-family: inherit;
}

.favicon-extractor-workspace .sim-mode-btn:hover {
  background: var(--chip-bg, #f3f4f6);
  color: var(--text-color, #1f2937);
}

.favicon-extractor-workspace .sim-mode-btn.active {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

/* 2. Google Search Result Mockup CSS */
.favicon-extractor-workspace .google-search-simulator {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.favicon-extractor-workspace .search-result-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 520px;
  text-align: left;
}

.favicon-extractor-workspace .search-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.favicon-extractor-workspace .search-favicon-img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f3f4;
  padding: 4px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
}

.favicon-extractor-workspace .search-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.favicon-extractor-workspace .search-site-name {
  font-size: 0.85rem;
  color: #202124;
  font-weight: 500;
}

.favicon-extractor-workspace .search-site-url {
  font-size: 0.75rem;
  color: #4b5563;
}

.favicon-extractor-workspace .search-title {
  font-size: 1.15rem;
  color: #1a0dab;
  text-decoration: none;
  font-weight: 500;
  margin-top: 2px;
}

.favicon-extractor-workspace .search-title:hover {
  text-decoration: underline;
}

.favicon-extractor-workspace .search-snippet {
  font-size: 0.85rem;
  color: #4d5156;
  margin: 0;
  line-height: 1.4;
}

/* 3. Mobile App Icon Mockup CSS */
.favicon-extractor-workspace .mobile-app-simulator {
  background: radial-gradient(circle at center, #3a3b3c, #1e1f20);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 3rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.favicon-extractor-workspace .mobile-screen-mockup {
  display: flex;
  justify-content: center;
}

.favicon-extractor-workspace .mobile-app-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.favicon-extractor-workspace .mobile-app-icon {
  width: 60px;
  height: 60px;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.favicon-extractor-workspace .mobile-app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.favicon-extractor-workspace .mobile-app-label {
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 500;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Premium QR Code Reader workspace styling */
.qr-hero {
  align-items: end;
  background: radial-gradient(circle at 86% 10%, rgba(99, 102, 241, 0.34), transparent 35%), linear-gradient(135deg, #090e24, #191c4d 62%, #133a4f);
  border-radius: 24px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
  min-height: 300px;
  overflow: hidden;
  padding: 42px;
  position: relative;
}
.qr-hero::after {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
  height: 340px;
  position: absolute;
  right: -65px;
  top: -190px;
  width: 340px;
}
.qr-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  letter-spacing: -0.065em;
  line-height: 1.05;
}
.qr-hero > div > p:last-child {
  color: #acbdd5;
  line-height: 1.7;
  margin: 17px 0 0;
  max-width: 610px;
}
.qr-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  max-width: 300px;
  position: relative;
  z-index: 1;
}
.qr-hero-badges span {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: #dceaff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 8px 11px;
}

.qr-workspace {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.qr-layout {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 330px;
}
@media (max-width: 900px) {
  .qr-layout {
    grid-template-columns: 1fr;
  }
}
.qr-main {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
@media (max-width: 760px) {
  .qr-main {
    grid-template-columns: 1fr;
  }
}
.qr-card {
  background: #fff;
  border: 1px solid #dbe5ef;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(24, 46, 74, 0.055);
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.qr-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e8eef4;
  padding-bottom: 14px;
}
.qr-card-title span.badge {
  background: #eef3f9;
  border-radius: 8px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  height: 32px;
  width: 32px;
}
.qr-card-title h3 {
  font-size: 1.05rem;
  margin: 0;
  font-weight: 900;
  color: #0f172a;
}

/* Upload zone with scanner animation */
.qr-dropzone {
  border: 2px dashed #afc2d7;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  background: #fbfcfe;
  transition: all 0.25s ease;
}
.qr-dropzone:hover {
  background: #edf5ff;
  border-color: #3b82f6;
}
.qr-dropzone.dragging {
  background: #eef6ff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}
.qr-dropzone-icon {
  background: #eaf3ff;
  border-radius: 50%;
  color: #3b82f6;
  display: flex;
  font-size: 2.2rem;
  height: 72px;
  width: 72px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform 0.2s ease;
}
.qr-dropzone:hover .qr-dropzone-icon {
  transform: translateY(-4px);
}
.qr-dropzone-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qr-dropzone-text strong {
  font-size: 1rem;
  color: #1e293b;
}
.qr-dropzone-text span {
  font-size: 0.8rem;
  color: #64748b;
}

/* Scanning Line Animation */
.qr-scanner-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #10b981, transparent);
  box-shadow: 0 0 8px #10b981;
  animation: scanLine 2.5s linear infinite;
  display: none;
  pointer-events: none;
  z-index: 2;
}
.qr-dropzone.scanning .qr-scanner-line {
  display: block;
}
@keyframes scanLine {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}

/* Preview Canvas Container */
.qr-preview-container {
  display: none;
  position: relative;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-top: 10px;
  background: #f1f5f9;
}
.qr-preview-container.active {
  display: block;
}
.qr-preview-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.qr-preview-reset {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease;
  font-weight: bold;
}
.qr-preview-reset:hover {
  background: rgba(15, 23, 42, 0.9);
}

/* Result Card UI */
.qr-result-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 300px;
  color: #64748b;
  gap: 12px;
  border: 1px dashed #dbe5ef;
  border-radius: 16px;
  background: #fafcfe;
}
.qr-result-placeholder .icon {
  font-size: 2.5rem;
  opacity: 0.6;
}
.qr-result-placeholder strong {
  font-size: 0.95rem;
  color: #334155;
}
.qr-result-placeholder p {
  font-size: 0.8rem;
  margin: 0;
}

.qr-result-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.qr-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
}
.qr-type-badge.url {
  background: #e0f2fe;
  color: #0369a1;
}
.qr-type-badge.wifi {
  background: #ecfdf5;
  color: #047857;
}
.qr-type-badge.text {
  background: #f1f5f9;
  color: #475569;
}
.qr-type-badge.email {
  background: #fef3c7;
  color: #b45309;
}
.qr-type-badge.phone {
  background: #fdf2f8;
  color: #be185d;
}

.qr-text-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1e293b;
  word-break: break-all;
  white-space: pre-wrap;
  max-height: 140px;
  overflow-y: auto;
}

.qr-action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 5px;
}
@media (max-width: 480px) {
  .qr-action-buttons {
    grid-template-columns: 1fr;
  }
}

/* Rich Preview (Thumbnail View) */
.qr-rich-preview-container {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.qr-rich-preview-header {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qr-rich-preview-header strong {
  font-size: 0.72rem;
  font-weight: 900;
  color: #64748b;
  letter-spacing: 0.06em;
}
.qr-rich-preview-body {
  padding: 16px;
}

/* Rich Link Preview Card */
.qr-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.qr-link-favicon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.25rem;
  color: #3b82f6;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.044);
}
.qr-link-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.qr-link-info h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qr-link-info span {
  font-size: 0.8rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* WiFi Preview Card */
.qr-wifi-card {
  display: flex;
  align-items: center;
  gap: 16px;
}
.qr-wifi-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.qr-wifi-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}
.qr-wifi-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}
.qr-wifi-row span {
  color: #64748b;
}
.qr-wifi-row strong {
  color: #1e293b;
}

/* Email Card */
.qr-email-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.qr-email-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fef3c7;
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.qr-email-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.qr-email-info strong {
  font-size: 0.9rem;
  color: #1e293b;
}
.qr-email-info span {
  font-size: 0.78rem;
  color: #64748b;
  word-break: break-all;
}

/* SMS/Phone Card */
.qr-phone-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.qr-phone-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fdf2f8;
  color: #db2777;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.qr-phone-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qr-phone-info strong {
  font-size: 0.95rem;
  color: #1e293b;
}
.qr-phone-info span {
  font-size: 0.8rem;
  color: #64748b;
}

/* QR Code Reader History Sidebar */
.qr-history {
  background: linear-gradient(160deg, #09152b, #0f243d);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(19, 39, 65, 0.14);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 790px;
  padding: 18px;
  top: 88px;
  position: sticky;
}
.qr-history-intro > span {
  color: #6eb1ff;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.qr-history-intro h2 {
  font-size: 1.2rem;
  margin: 6px 0;
}
.qr-history-intro p {
  color: #91a5bd;
  font-size: 0.72rem;
  line-height: 1.55;
  margin: 0;
}
.qr-history-head {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qr-history-head > strong {
  color: #9aafc7;
  font-size: 0.7rem;
}
.qr-history-head .small-button {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: #d9e6f4;
  font-size: 0.68rem;
  min-height: 32px;
  padding: 5px 9px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  border: 1px solid rgba(255,255,255,0.1);
  outline: none;
}
.qr-history-head .small-button:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.2);
}
.qr-history-list {
  max-height: 560px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qr-history-item {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 11px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s ease;
  text-align: left;
}
.qr-history-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.qr-history-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qr-history-item-badge {
  font-size: 0.65rem;
  font-weight: 850;
  padding: 2px 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  color: #d1e2f6;
}
.qr-history-item-badge.url { background: rgba(3, 105, 161, 0.2); color: #7dd3fc; }
.qr-history-item-badge.wifi { background: rgba(4, 120, 87, 0.2); color: #6ee7b7; }
.qr-history-item-badge.email { background: rgba(180, 83, 9, 0.2); color: #fde047; }
.qr-history-item-badge.phone { background: rgba(190, 24, 93, 0.2); color: #fbcfe8; }
.qr-history-item-time {
  font-size: 0.62rem;
  color: #71859d;
}
.qr-history-item-text {
  font-size: 0.76rem;
  color: #e2e8f0;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qr-history-empty {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  color: #91a5bd;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  min-height: 180px;
  padding: 22px;
  text-align: center;
}
.qr-history-empty > span {
  font-size: 1.5rem;
}
.qr-history-empty strong {
  color: #d9e6f4;
  font-size: 0.82rem;
}
.qr-history-empty small {
  font-size: 0.68rem;
}

/* Copy Tokens & URL Preview Elements */
.qr-token-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 5px;
}
.qr-token-title {
  font-size: 0.72rem;
  font-weight: 900;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
}
.qr-tokens-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qr-token-pill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #334155;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 6px 10px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e2e8f0;
  outline: none;
}
.qr-token-pill:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #0f172a;
}
.qr-token-pill.link-part {
  background: #f0fdf4;
  border-color: #dcfce7;
  color: #166534;
}
.qr-token-pill.link-part:hover {
  background: #dcfce7;
  border-color: #bbf7d0;
}

/* Secure/Insecure URL highlights */
.qr-url-security-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 850;
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
  align-self: flex-start;
}
.qr-url-security-badge.secure {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #dcfce7;
}
.qr-url-security-badge.insecure {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fef3c7;
}

@media (max-width: 840px) {
  .qr-layout {
    grid-template-columns: 1fr;
  }
  .qr-history {
    max-height: none;
    position: static;
  }
}

/* QR reader mode switch and batch reader */
.qr-reader-switch {
  background: #e9eef5;
  border: 1px solid #d8e1eb;
  border-radius: 17px;
  display: grid;
  gap: 5px;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 22px;
  padding: 5px;
}
.qr-reader-tab {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 13px;
  color: #66778a;
  cursor: pointer;
  display: grid;
  gap: 2px 11px;
  grid-template-columns: 38px 1fr auto;
  min-height: 64px;
  padding: 9px 14px;
  text-align: left;
  transition: .2s ease;
}
.qr-reader-tab > span {
  align-items: center;
  background: rgba(255,255,255,.65);
  border-radius: 10px;
  display: flex;
  font-size: .7rem;
  font-weight: 950;
  grid-row: 1/3;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.qr-reader-tab strong { color: #334155; font-size: .9rem; }
.qr-reader-tab small { color: #8190a2; font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.qr-reader-tab.active { background: #fff; box-shadow: 0 7px 20px rgba(23,44,70,.1); color: #1769d7; }
.qr-reader-tab.active > span { background: #e9f2ff; }
.qr-reader-tab.active strong { color: #10243a; }
.qr-reader-panel[hidden] { display: none; }
.qr-reader-panel .qr-card { border-radius: 22px; box-shadow: 0 16px 42px rgba(26,49,76,.075); }
.qr-reader-panel .qr-card-title span.badge { background: #e9f3ff; color: #176bd7; }
.qr-reader-panel .qr-dropzone { background: linear-gradient(145deg,#fbfdff,#f3f7fb); min-height: 285px; }

.qr-bulk-workspace { background: transparent; border: 0; box-shadow: none; display: grid; gap: 18px; padding: 0; }
.qr-bulk-intro-card {
  align-items: center;
  background: radial-gradient(circle at 92% 5%,rgba(54,211,165,.16),transparent 30%),linear-gradient(135deg,#0c1d33,#11354b);
  border-radius: 23px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  padding: 28px 30px;
  position: relative;
}
.qr-bulk-intro-copy > span { color: #55d9af; font-size: .65rem; font-weight: 950; letter-spacing: .12em; }
.qr-bulk-intro-copy h2 { font-size: clamp(1.65rem,3vw,2.35rem); letter-spacing: -.045em; margin: 6px 0; }
.qr-bulk-intro-copy p { color: #9fb6c8; margin: 0; }
.qr-bulk-limit { align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); border-radius: 17px; display: flex; flex-direction: column; min-width: 116px; padding: 16px; }
.qr-bulk-limit strong { color: #67e0b9; font-size: 1.35rem; }
.qr-bulk-limit span { color: #8098aa; font-size: .58rem; font-weight: 900; letter-spacing: .1em; margin-top: 3px; }

.qr-bulk-dropzone {
  align-items: center;
  background: #fff;
  border: 2px dashed #b9cada;
  border-radius: 21px;
  cursor: pointer;
  display: grid;
  gap: 18px;
  grid-template-columns: 92px 1fr auto;
  min-height: 150px;
  padding: 26px 30px;
  transition: .2s ease;
}
.qr-bulk-dropzone:hover,.qr-bulk-dropzone.dragging { background: #f1f7ff; border-color: #3985df; box-shadow: 0 0 0 5px rgba(50,126,219,.08); transform: translateY(-2px); }
.qr-bulk-dropzone.processing { border-color: #63a4e8; box-shadow: inset 0 0 0 1px rgba(45,126,219,.1); }
.qr-bulk-drop-visual { height: 80px; position: relative; width: 82px; }
.qr-bulk-drop-visual > span { align-items: center; background: #176bd7; border-radius: 17px; box-shadow: 0 12px 25px rgba(23,107,215,.25); color: #fff; display: flex; font-size: 1.55rem; height: 64px; justify-content: center; left: 0; position: absolute; top: 8px; width: 64px; z-index: 3; }
.qr-bulk-drop-visual > i { background: #e8f1fb; border: 1px solid #c8d9ea; border-radius: 12px; height: 58px; position: absolute; right: 0; top: 11px; transform: rotate(8deg); width: 48px; }
.qr-bulk-drop-visual > i:nth-child(3) { right: 7px; transform: rotate(3deg); }
.qr-bulk-dropzone > div:nth-child(3) { min-width: 0; }
.qr-bulk-dropzone > div:nth-child(3) strong { color: #13273d; display: block; font-size: 1.05rem; }
.qr-bulk-dropzone > div:nth-child(3) p { color: #718297; font-size: .75rem; margin: 6px 0 0; }
.qr-bulk-choose-action { align-items: center; background: #176bd7; border: 0; border-radius: 12px; color: #fff; display: flex; font-weight: 900; justify-content: center; min-height: 46px; padding: 0 18px; }

.qr-bulk-progress { align-items: center; background: #fff; border: 1px solid #dce5ee; border-radius: 15px; display: grid; gap: 18px; grid-template-columns: minmax(190px,.45fr) 1fr; padding: 15px 18px; }
.qr-bulk-progress > div { display: grid; gap: 2px; }
.qr-bulk-progress strong { color: #24384d; font-size: .78rem; }
.qr-bulk-progress span { color: #8a9aac; font-size: .56rem; font-weight: 900; letter-spacing: .1em; }
.qr-bulk-progress > i { background: #e7edf3; border-radius: 999px; display: block; height: 8px; overflow: hidden; }
.qr-bulk-progress > i > b { background: linear-gradient(90deg,#287be1,#24c995); border-radius: inherit; display: block; height: 100%; transition: width .28s ease; width: 0; }

.qr-bulk-results-head { align-items: end; display: flex; justify-content: space-between; margin-top: 16px; }
.qr-bulk-results-head > div:first-child > span { color: #3478c8; font-size: .62rem; font-weight: 950; letter-spacing: .12em; }
.qr-bulk-results-head h2 { font-size: 1.6rem; margin-top: 4px; }
.qr-bulk-top-actions { display: flex; gap: 7px; }
.qr-bulk-top-actions[hidden],.qr-bulk-results[hidden],.qr-bulk-empty[hidden] { display: none; }
.qr-bulk-top-actions button { background: #fff; border: 1px solid #ccd9e5; border-radius: 9px; color: #34506c; cursor: pointer; font-size: .7rem; font-weight: 850; min-height: 38px; padding: 0 12px; }
.qr-bulk-top-actions button:first-child { background: #eaf4ff; border-color: #bdd8f5; color: #1768ce; }
.qr-bulk-top-actions button:disabled { cursor: not-allowed; opacity: .45; }
.qr-bulk-empty { align-items: center; background: #fff; border: 1px dashed #c8d5e2; border-radius: 20px; color: #78899c; display: flex; flex-direction: column; min-height: 260px; justify-content: center; padding: 30px; text-align: center; }
.qr-bulk-empty > span { align-items: center; background: #edf4fb; border-radius: 16px; color: #4c7dac; display: flex; font-size: 1.7rem; height: 64px; justify-content: center; margin-bottom: 13px; width: 64px; }
.qr-bulk-empty strong { color: #2b4056; }
.qr-bulk-empty p { font-size: .75rem; margin: 7px 0 0; }
.qr-bulk-results { display: grid; gap: 13px; }

.qr-bulk-result-card { align-items: stretch; background: #fff; border: 1px solid #dce5ee; border-radius: 19px; box-shadow: 0 12px 32px rgba(22,45,71,.055); display: grid; gap: 18px; grid-template-columns: 156px minmax(0,1fr); overflow: hidden; padding: 15px; }
.qr-bulk-result-card.success { border-left: 4px solid #20b986; }
.qr-bulk-result-card.failed { border-left: 4px solid #e35b69; }
.qr-bulk-thumb { background: #edf2f7; border-radius: 13px; min-height: 142px; overflow: hidden; position: relative; }
.qr-bulk-thumb img { background: #e9eef3; height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; }
.qr-bulk-thumb::after { background: linear-gradient(transparent,rgba(8,18,31,.35)); content: ""; inset: 40% 0 0; position: absolute; }
.qr-bulk-thumb b { align-items: center; background: #0e2339; border: 2px solid #fff; border-radius: 10px; bottom: 9px; color: #fff; display: flex; font-size: .72rem; height: 34px; justify-content: center; left: 9px; position: absolute; width: 38px; z-index: 2; }
.qr-bulk-result-main { display: grid; gap: 11px; min-width: 0; padding: 3px 4px 3px 0; }
.qr-bulk-card-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; min-width: 0; }
.qr-bulk-card-head > strong { color: #13283e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-bulk-card-head > span { color: #788a9d; flex: 0 0 auto; font-size: .68rem; font-weight: 850; }
.qr-bulk-type { border-radius: 999px; padding: 6px 9px; }
.qr-bulk-type.url { background: #e7f3ff; color: #1768ca; }.qr-bulk-type.wifi { background: #e8f8f2; color: #07825e; }.qr-bulk-type.email { background: #fff5d8; color: #9b6910; }.qr-bulk-type.phone { background: #fff0f5; color: #b8386b; }.qr-bulk-type.text { background: #edf1f5; color: #56697e; }
.qr-bulk-payload > span,.qr-bulk-destination > span { color: #7a8da1; display: block; font-size: .62rem; font-weight: 900; letter-spacing: .05em; margin-bottom: 5px; text-transform: uppercase; }
.qr-bulk-payload p { background: #f5f8fb; border-radius: 9px; color: #2d4258; font-size: .8rem; line-height: 1.55; margin: 0; max-height: 70px; overflow: auto; padding: 9px 11px; white-space: pre-wrap; word-break: break-all; }
.qr-bulk-destination a { align-items: center; background: linear-gradient(135deg,#eef7ff,#f4fbff); border: 1px solid #cfe3f5; border-radius: 11px; color: inherit; display: grid; gap: 10px; grid-template-columns: 38px 1fr auto; padding: 9px 11px; text-decoration: none; }
.qr-bulk-destination a > i { align-items: center; background: #fff; border-radius: 9px; display: flex; font-style: normal; height: 36px; justify-content: center; width: 36px; }.qr-bulk-destination a > div { display: grid; min-width: 0; }.qr-bulk-destination a strong,.qr-bulk-destination a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.qr-bulk-destination a strong { color: #174f87; font-size: .8rem; }.qr-bulk-destination a small { color: #70869b; font-size: .68rem; }.qr-bulk-destination a > b { color: #2877c6; }
.qr-bulk-card-actions { display: flex; gap: 7px; justify-content: flex-end; margin-top: auto; }.qr-bulk-card-actions button,.qr-bulk-card-actions a { align-items: center; background: #fff; border: 1px solid #cbd8e4; border-radius: 8px; color: #405970; cursor: pointer; display: flex; font-size: .68rem; font-weight: 850; min-height: 34px; padding: 0 10px; text-decoration: none; }.qr-bulk-card-actions a { background: #176bd7; border-color: #176bd7; color: #fff; }
.qr-bulk-error { align-items: center; background: #fff1f2; border-radius: 11px; color: #b4404b; display: flex; font-size: .78rem; line-height: 1.55; margin: 0; padding: 13px; }
.qr-bulk-skeleton { display: grid; gap: 9px; }.qr-bulk-skeleton i { animation: qrBulkPulse 1.25s infinite alternate; background: #edf2f6; border-radius: 8px; height: 42px; }.qr-bulk-skeleton i:last-child { height: 25px; width: 65%; }@keyframes qrBulkPulse{to{opacity:.45}}

@media (max-width: 760px) {
  .qr-reader-switch { grid-template-columns: 1fr; }
  .qr-reader-tab { grid-template-columns: 38px 1fr auto; }
  .qr-bulk-intro-card { align-items: flex-start; gap: 20px; padding: 23px; }
  .qr-bulk-dropzone { grid-template-columns: 70px 1fr; padding: 22px; }
  .qr-bulk-choose-action { grid-column: 1/-1; width: 100%; }
  .qr-bulk-drop-visual { transform: scale(.82); transform-origin: left center; width: 70px; }
  .qr-bulk-progress { grid-template-columns: 1fr; }
  .qr-bulk-results-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .qr-bulk-top-actions { width: 100%; }.qr-bulk-top-actions button { flex: 1; }
  .qr-bulk-result-card { grid-template-columns: 92px minmax(0,1fr); gap: 12px; padding: 11px; }
  .qr-bulk-thumb { min-height: 118px; }
  .qr-bulk-card-head { align-items: flex-start; flex-direction: column; gap: 6px; }
}
@media (max-width: 520px) {
  .qr-bulk-intro-card { flex-direction: column; }.qr-bulk-limit { align-self: stretch; flex-direction: row; justify-content: space-between; }
  .qr-bulk-result-card { grid-template-columns: 1fr; }.qr-bulk-thumb { min-height: 180px; }
  .qr-bulk-card-actions { justify-content: stretch; }.qr-bulk-card-actions > * { flex: 1; justify-content: center; }
}

/* QR Generator & Wi-Fi Generator Layout */
.gen-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px;
  align-items: start;
}

.gen-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 8px;
  overflow-x: auto;
}

.gen-tab-btn {
  background: transparent;
  border: none;
  font-weight: 800;
  font-size: 0.88rem;
  color: #64748b;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.gen-tab-btn:hover {
  background: #f1f5f9;
  color: #334155;
}

.gen-tab-btn.active {
  background: #2563eb;
  color: #ffffff;
}

/* Color & Logo Options Customizations */
.customization-section {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.gen-custom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.logo-upload-button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 850;
  min-height: 46px;
  padding: 0 16px;
}

.logo-upload-button:hover,
.logo-upload-button.active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
}

.qr-emoji-picker {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 8px;
  padding: 12px;
}

.qr-logo-hint {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.6;
  margin: 7px 0 0;
}

.qr-emoji-picker > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
}

.qr-emoji-picker > summary::-webkit-details-marker { display: none; }

.qr-emoji-picker > summary span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
}

.qr-emoji-picker > summary span::before {
  content: ""; display: inline-block;
  margin-right: 7px;
  transition: transform .16s ease;
}

.qr-emoji-picker[open] > summary span::before { transform: rotate(90deg); }

.qr-emoji-picker > summary strong {
  color: #1d4ed8;
  font-size: .78rem;
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qr-emoji-picker-body {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.qr-emoji-picker-body > input[type="search"] {
  background: #fff;
  min-height: 44px;
}

.qr-emoji-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  max-height: 250px;
  overflow: auto;
  padding: 2px;
  scrollbar-color: #94a3b8 transparent;
}

.qr-emoji-option {
  align-items: center;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid #dbe3ed;
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.3rem;
  justify-content: center;
  min-width: 0;
  padding: 4px;
}

.qr-emoji-option:hover,
.qr-emoji-option:focus-visible,
.qr-emoji-option.active {
  background: #eff6ff;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
  outline: none;
}

.qr-emoji-option small { display: none; }

.qr-logo-or {
  align-items: center;
  color: #94a3b8;
  display: flex;
  font-size: .7rem;
  font-weight: 850;
  gap: 10px;
  margin: 10px 0;
  text-transform: uppercase;
}

.qr-logo-or::before,
.qr-logo-or::after {
  background: #e2e8f0;
  content: "";
  flex: 1;
  height: 1px;
}

.qr-logo-or + .logo-upload-button {
  background: #f8fafc;
  border-style: dashed;
  font-size: .9rem;
  min-height: 50px;
  width: 100%;
}

.field-hint {
  color: var(--muted);
  display: block;
  font-size: .72rem;
  line-height: 1.55;
  margin-top: 7px;
}

@media (max-width: 560px) {
  .logo-upload-button { width: 100%; }
  .qr-emoji-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Live preview canvas styling */
.gen-preview-box {
  background: radial-gradient(circle at top, #1e293b, #0f172a);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
}

.gen-canvas-wrapper {
  background: #ffffff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.gen-canvas-wrapper canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Wi-Fi Preview Card */
.wifi-card {
  width: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.wifi-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wifi-card-brand {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  font-weight: 900;
  color: #60a5fa;
}

.wifi-card-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wifi-card-ssid {
  font-size: 1.4rem;
  font-weight: 950;
  word-break: break-all;
}

.wifi-card-password {
  font-family: monospace;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 8px;
  display: inline-block;
  align-self: flex-start;
  word-break: break-all;
}

/* Wi-Fi Guest Card Printing Styles */
@media print {
  body * {
    visibility: hidden;
  }
  .print-area, .print-area * {
    visibility: visible;
  }
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 40px;
    background: #ffffff !important;
    color: #000000 !important;
  }
  .print-card-box {
    border: 3px solid #000000;
    border-radius: 20px;
    padding: 30px;
    width: 450px;
    text-align: center;
    background: #ffffff !important;
    color: #000000 !important;
  }
}

.hidden-print-template {
  display: none;
}

@media (max-width: 840px) {
  .gen-layout {
    grid-template-columns: 1fr;
  }
}

/* Home page ??intentionally scoped so tool pages keep their existing UI. */
.home-shell {
  display: grid;
  gap: 76px;
}

.home-shell .home-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(143, 123, 255, 0.2), transparent 25%),
    radial-gradient(circle at 8% 92%, rgba(89, 196, 255, 0.13), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8f8ff 48%, #eef2ff 100%);
  border: 1px solid #e4e6f2;
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(42, 40, 90, 0.09);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  min-height: 520px;
  overflow: hidden;
  padding: 58px 62px;
  position: relative;
}

.home-shell .home-hero::before {
  background-image: radial-gradient(rgba(101, 91, 224, 0.13) 1px, transparent 1px);
  background-size: 19px 19px;
  content: "";
  height: 160px;
  left: -14px;
  mask-image: linear-gradient(90deg, #000, transparent);
  position: absolute;
  top: 24px;
  width: 210px;
}

.home-shell .home-hero-copy {
  align-content: center;
  display: grid;
  padding: 0;
  position: relative;
  z-index: 2;
}

.home-badge {
  align-items: center;
  background: #f0efff;
  border: 1px solid #dedbff;
  border-radius: 999px;
  color: #5d53d9;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 900;
  gap: 7px;
  justify-self: start;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
  padding: 8px 12px;
}

.home-badge span { color: #8a7cff; }

.home-shell .home-hero h1 {
  color: #14192b;
  font-size: clamp(2.65rem, 5vw, 4.45rem);
  letter-spacing: -0.055em;
  line-height: 1.06;
  max-width: 650px;
  word-break: keep-all;
}

.home-shell .home-hero h1 strong {
  background: linear-gradient(100deg, #6658ed, #5b7df5 55%, #7d58e9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  font-weight: 950;
}

.home-hero-description {
  color: #657086;
  font-size: 1.03rem;
  line-height: 1.75;
  margin: 22px 0 24px;
  max-width: 610px;
  word-break: keep-all;
}

.home-search-panel {
  align-items: center;
  background: #fff;
  border: 1px solid #e1e4ef;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(39, 43, 84, 0.12);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 610px;
  padding: 7px;
}

.home-search-field {
  align-items: center;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}

.home-search-field span {
  color: #5f6880;
  font-size: 1.75rem;
  line-height: 1;
  padding-left: 14px;
  transform: rotate(-18deg);
}

.home-search-field input {
  background: transparent;
  border: 0;
  color: #171d2f;
  font-size: 0.94rem;
  font-weight: 750;
  min-height: 54px;
  min-width: 0;
  outline: 0;
  padding: 0 13px;
  width: 100%;
}

.home-search-field input::placeholder { color: #98a0b2; }

.home-search-panel button {
  background: linear-gradient(135deg, #6759ee, #586ee9);
  border: 0;
  border-radius: 13px;
  box-shadow: 0 8px 20px rgba(94, 86, 232, 0.27);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  min-height: 48px;
  padding: 0 25px;
}

.home-search-panel:focus-within {
  border-color: #9d95f1;
  box-shadow: 0 0 0 4px rgba(102, 89, 238, 0.1), 0 14px 36px rgba(39, 43, 84, 0.12);
}

.home-search-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.home-search-chips b {
  color: #655bea;
  font-size: 0.75rem;
  margin-right: 2px;
}

.home-search-chips button {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #e1e3ed;
  border-radius: 999px;
  color: #6a7183;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 10px;
}

.home-search-chips button:hover { border-color: #a9a2ef; color: #5a50d1; }

.home-hero-art {
  min-height: 390px;
  perspective: 900px;
  position: relative;
}

.home-orbit {
  border: 1px solid rgba(107, 95, 228, 0.16);
  border-radius: 50%;
  left: 50%;
  position: absolute;
  top: 48%;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.home-orbit-one { height: 330px; width: 390px; }
.home-orbit-two { height: 420px; width: 480px; }

.home-toolbox {
  background: linear-gradient(145deg, #7b70f4 0%, #6276e8 46%, #4c5ac5 100%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 28px 28px 44px 44px;
  bottom: 15px;
  box-shadow: 0 38px 52px rgba(56, 53, 135, 0.28), inset 0 2px 0 rgba(255,255,255,.35);
  color: #fff;
  height: 190px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) rotateX(7deg);
  width: 310px;
  z-index: 3;
}

.home-toolbox::before {
  background: linear-gradient(180deg, #363068, #5e55ad);
  border: 9px solid #8f87f6;
  border-bottom-width: 19px;
  border-radius: 30px 30px 18px 18px;
  box-shadow: 0 18px 28px rgba(43, 38, 100, 0.26);
  content: "";
  height: 120px;
  left: 32px;
  position: absolute;
  top: -95px;
  transform: rotate(-3deg);
  width: 246px;
  z-index: -1;
}

.home-toolbox::after {
  background: rgba(32, 28, 77, 0.38);
  border-radius: 50%;
  content: "";
  height: 38px;
  left: 24px;
  position: absolute;
  top: -24px;
  width: 260px;
}

.home-toolbox strong {
  display: block;
  font-size: 3.2rem;
  font-weight: 950;
  letter-spacing: -0.08em;
  margin: 62px 0 0 30px;
  text-shadow: 0 4px 10px rgba(40, 34, 105, 0.24);
}

.home-toolbox small { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.24em; margin-left: 34px; opacity: 0.72; }

.home-art-card {
  align-items: center;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 20px;
  box-shadow: 0 20px 35px rgba(49, 45, 115, 0.2);
  display: grid;
  height: 112px;
  justify-items: center;
  padding: 14px;
  position: absolute;
  width: 100px;
  z-index: 4;
}

.home-art-card span { font-size: 2rem; font-weight: 950; }
.home-art-card b { font-size: 0.6rem; letter-spacing: 0.13em; }
.home-art-card-image { background: linear-gradient(145deg, #e6f4ff, #92c8ff); color: #3f67d7; left: 8%; top: 100px; transform: rotate(-14deg); }
.home-art-card-qr { background: linear-gradient(145deg, #f2e9ff, #c8a8ff); color: #6b42c8; left: 34%; top: 25px; transform: rotate(-4deg); }
.home-art-card-text { background: linear-gradient(145deg, #fff, #f3d9ff); color: #934cc7; right: 10%; top: 85px; transform: rotate(13deg); }
.home-art-card-play { background: linear-gradient(145deg, #fff3d7, #ffb967); color: #c66b22; right: 28%; top: 190px; transform: rotate(7deg); }

.home-section { scroll-margin-top: 90px; }

.home-section-heading {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 25px;
}

.home-section-heading > div > span {
  color: #665bea;
  display: block;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.home-section-heading h2 { color: #171c2c; font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -0.035em; }
.home-section-heading p { color: #727b8e; line-height: 1.6; margin: 8px 0 0; }
.home-section-heading > a { align-items: center; border: 1px solid #dfe2ea; border-radius: 999px; color: #4e5669; display: inline-flex; font-size: 0.8rem; font-weight: 900; gap: 10px; padding: 10px 15px; white-space: nowrap; }
.home-section-heading > a:hover { border-color: #8f86eb; color: #5d53d9; }

.home-popular-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.home-popular-card {
  border: 1px solid #e3e4ec;
  border-radius: 20px;
  display: grid;
  gap: 10px;
  min-height: 224px;
  padding: 20px 18px;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-popular-card:hover { border-color: #b8b3ef; box-shadow: 0 18px 34px rgba(43, 42, 83, .1); transform: translateY(-4px); }
.home-popular-card:nth-child(1) { background: linear-gradient(160deg, #f4fff8, #effaf4); }
.home-popular-card:nth-child(2) { background: linear-gradient(160deg, #f6f1ff, #faf7ff); }
.home-popular-card:nth-child(3) { background: linear-gradient(160deg, #fff4f4, #fff9f9); }
.home-popular-card:nth-child(4) { background: linear-gradient(160deg, #fff8e9, #fffdf8); }
.home-popular-card:nth-child(5) { background: linear-gradient(160deg, #eef5ff, #f8fbff); }
.home-popular-card:nth-child(6) { background: linear-gradient(160deg, #effcff, #f8feff); }
.home-popular-icon { align-items: center; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.95); border-radius: 15px; box-shadow: 0 8px 20px rgba(55,57,103,.08); color: #6258dd; display: inline-flex; font-size: .72rem; font-weight: 950; height: 54px; justify-content: center; width: 54px; }
.home-popular-card b { color: #191f30; font-size: 0.96rem; line-height: 1.35; }
.home-popular-card small { color: #737c8d; display: -webkit-box; font-size: 0.76rem; line-height: 1.55; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.home-popular-card i { bottom: 17px; color: #32394a; font-size: 1.05rem; font-style: normal; position: absolute; right: 18px; }

.category-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .category-grid { grid-template-columns: 1fr; } }

.category-card {
  align-items: center;
  background: #fff;
  border: 1px solid #e3e5ed;
  border-radius: 24px;
  box-shadow: 0 10px 32px rgba(37, 43, 70, 0.04);
  display: grid;
  gap: 20px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 24px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}
.category-card:hover { border-color: #b8b3ef; box-shadow: 0 18px 40px rgba(43, 42, 83, 0.08); transform: translateY(-4px); }

.category-card-icon-wrap { align-items: center; border-radius: 18px; display: flex; height: 64px; justify-content: center; width: 64px; }
.category-card-icon { width: 32px; height: 32px; display: block; }
.category-card-icon svg { width: 100%; height: 100%; display: block; }

.category-card-content h3 { color: #191f30; font-size: 1.15rem; margin: 0; padding-right: 40px; }
.category-card-content p { color: #788195; font-size: 0.85rem; line-height: 1.5; margin: 6px 0 0; padding-right: 30px; }

.category-badge { background: #f5f6f9; border-radius: 999px; color: #858d9c; font-size: 0.8rem; font-weight: 800; padding: 6px 12px; position: absolute; right: 24px; top: 24px; }
.category-card-arrow { color: #b0b4c3; font-size: 1.2rem; position: absolute; right: 24px; bottom: 24px; }

.category-card-purple .category-card-icon-wrap { background: #f4efff; color: #7f56d9; }
.category-card-indigo .category-card-icon-wrap { background: #eef2ff; color: #4f46e5; }
.category-card-green .category-card-icon-wrap { background: #ebfdf3; color: #039855; }
.category-card-amber .category-card-icon-wrap { background: #fff8eb; color: #f79009; }
.category-card-blue .category-card-icon-wrap { background: #eff8ff; color: #175cd3; }
.category-card-magenta .category-card-icon-wrap { background: #fdf2fa; color: #d92d20; }

.home-catalog .tool-grid { gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-catalog .tool-card { border-color: #e7e9f0; border-radius: 14px; box-shadow: none; min-height: 138px; padding: 15px; }
.home-catalog .tool-card:hover { border-color: #aaa3ef; box-shadow: 0 12px 24px rgba(54, 53, 99, 0.08); }
.home-catalog .tool-card-icon { border-radius: 11px; height: 40px; min-width: 40px; }
.home-catalog .tool-card-body { gap: 5px; }
.home-catalog .tool-card-body h3 { font-size: 1rem; }
.home-catalog .tool-card-body span { font-size: .68rem; }
.home-catalog .tool-card p { display: -webkit-box; font-size: .78rem; line-height: 1.45; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-catalog .tool-card-action { font-size: .72rem; }
.home-search-empty { background: #fff7e8; border: 1px solid #f0dbad; border-radius: 14px; color: #8b6822; font-weight: 850; margin: 0 0 18px; padding: 14px 16px; }

.home-benefits {
  background: linear-gradient(135deg, #f8f8ff, #f3f6ff);
  border: 1px solid #e3e4f2;
  border-radius: 22px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 30px;
}

.home-benefits article { align-items: center; display: grid; gap: 13px; grid-template-columns: auto minmax(0, 1fr); }
.home-benefits article > span { align-items: center; background: #fff; border-radius: 50%; box-shadow: 0 8px 18px rgba(54, 55, 102, .08); color: #6559e7; display: inline-flex; font-size: .9rem; height: 44px; justify-content: center; width: 44px; }
.home-benefits strong { color: #1a2031; font-size: .86rem; }
.home-benefits p { color: #778093; font-size: .72rem; line-height: 1.5; margin: 4px 0 0; }

@media (max-width: 1080px) {
  .home-shell .home-hero { grid-template-columns: minmax(0, 1fr) 330px; padding: 48px 42px; }
  .home-hero-art { transform: scale(.86); transform-origin: center; }
  .home-popular-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-popular-card { min-height: 190px; }
  .home-catalog .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .home-shell { gap: 52px; }
  .home-shell .home-hero { grid-template-columns: 1fr; min-height: 0; padding: 34px 22px 24px; }
  .home-shell .home-hero h1 { font-size: clamp(2.05rem, 10vw, 3.1rem); letter-spacing: -0.065em; }
  .home-hero-description { font-size: .94rem; }
  .home-hero-art { min-height: 330px; transform: scale(.82); transform-origin: top center; margin-bottom: -55px; }
  .home-search-panel { grid-template-columns: minmax(0, 1fr); }
  .home-search-panel button { min-height: 46px; }
  .home-search-chips b { flex-basis: 100%; }
  .home-section-heading { align-items: flex-start; }
  .home-popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-popular-card { min-height: 200px; }
  .home-catalog .tool-grid { grid-template-columns: 1fr; }
  .home-category-section { padding: 16px; }
  .home-category-section > header { align-items: start; grid-template-columns: auto minmax(0, 1fr); }
  .home-category-section > header > b { display: none; }
  .home-benefits { grid-template-columns: 1fr; padding: 22px; }
}

@media (max-width: 440px) {
  .home-popular-grid { grid-template-columns: 1fr; }
  .home-popular-card { min-height: 170px; }
  .home-hero-art { margin-left: -30px; margin-right: -30px; }
}

/* Homepage design system: intentionally scoped to keep every tool page unchanged. */
.home-shell.tb-layout {
  --tb-bg: #ffffff;
  --tb-surface: #ffffff;
  --tb-subtle: #f8fafc;
  --tb-text: #111827;
  --tb-muted: #64748b;
  --tb-line: #e2e8f0;
  --tb-line-strong: #cbd5e1;
  --tb-blue: #2563eb;
  --tb-blue-hover: #1d4ed8;
  --tb-blue-soft: #eff6ff;
  --tb-radius: 12px;
  background: var(--tb-bg);
  color: var(--tb-text);
  display: grid;
  font-family: "Segoe UI", "Noto Sans KR", "Noto Sans JP", "Noto Sans Thai", sans-serif;
  gap: 72px;
  min-width: 0;
  width: 100%;
}

.tb-layout :where(h1, h2, h3, p) {
  margin-top: 0;
}

.tb-layout :where(button, input) {
  font-family: inherit;
}

.tb-layout :where(a, button, input):focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.25);
  outline-offset: 3px;
}

.tb-layout .tb-hero {
  background: var(--tb-subtle);
  border: 1px solid var(--tb-line);
  border-radius: 16px;
  margin: 0;
  overflow: hidden;
  padding: clamp(48px, 7vw, 84px) clamp(24px, 6vw, 72px);
  position: relative;
  text-align: left;
}

.tb-layout .tb-eyebrow {
  color: var(--tb-blue);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}

.tb-layout .tb-hero h1 {
  color: var(--tb-text);
  font-size: clamp(42px, 5.3vw, 68px);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1.08;
  margin: 0;
  max-width: 820px;
  word-break: keep-all;
}

.tb-layout .tb-hero h1 span,
.tb-layout .tb-hero h1 strong {
  display: block;
}

.tb-layout .tb-hero h1 strong {
  color: var(--tb-blue);
  font-weight: inherit;
}

.tb-layout .tb-hero-description {
  color: var(--tb-muted);
  font-size: 18px;
  line-height: 1.7;
  margin: 22px 0 30px;
  max-width: 700px;
  word-break: keep-all;
}

.tb-layout .tb-search-bar {
  align-items: center;
  background: var(--tb-surface);
  border: 1px solid var(--tb-line-strong);
  border-radius: var(--tb-radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  display: flex;
  gap: 12px;
  margin: 0;
  max-width: 760px;
  min-height: 64px;
  padding: 7px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.tb-layout .tb-search-bar:focus-within {
  border-color: var(--tb-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 8px 24px rgba(15, 23, 42, 0.07);
}

.tb-layout .tb-search-icon {
  color: var(--tb-muted);
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0 0 0 12px;
}

.tb-layout .tb-search-icon svg {
  height: 22px;
  width: 22px;
}

.tb-layout .tb-search-bar input {
  background: transparent;
  border: 0;
  color: var(--tb-text);
  flex: 1;
  font-size: 17px;
  min-width: 0;
  outline: 0;
  padding: 0;
}

.tb-layout .tb-search-bar input::placeholder {
  color: #94a3b8;
}

.tb-layout .tb-search-bar button {
  background: var(--tb-blue);
  border: 0;
  border-radius: 9px;
  color: #ffffff;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  min-height: 48px;
  min-width: 96px;
  padding: 0 22px;
}

.tb-layout .tb-search-bar button:hover {
  background: var(--tb-blue-hover);
}

.tb-layout .tb-search-keywords {
  align-items: center;
  color: var(--tb-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 16px;
}

.tb-layout .tb-search-keywords > span {
  font-weight: 650;
  margin-right: 2px;
}

.tb-layout .tb-search-keywords button {
  background: var(--tb-surface);
  border: 1px solid var(--tb-line);
  border-radius: 999px;
  color: var(--tb-muted);
  cursor: pointer;
  font-size: 14px;
  min-height: 34px;
  padding: 5px 11px;
  transition: border-color 160ms ease, color 160ms ease;
}

.tb-layout .tb-search-keywords button:hover {
  border-color: var(--tb-blue);
  color: var(--tb-blue);
}

.tb-layout .tb-trust-row {
  align-items: center;
  color: var(--tb-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 12px 24px;
  margin-top: 28px;
}

.tb-layout .tb-trust-row span {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.tb-layout .tb-trust-row span:not(:first-child)::before {
  background: var(--tb-line-strong);
  border-radius: 50%;
  content: "";
  height: 4px;
  margin-right: 9px;
  width: 4px;
}

.tb-layout .tb-trust-row svg {
  color: var(--tb-blue);
  height: 19px;
  width: 19px;
}

.tb-layout .tb-hero-bg-icons,
.tb-layout .tb-slider-controls,
.tb-layout .tb-sort,
.tb-layout .tb-view-toggles,
.tb-layout .tb-bookmark-banner {
  display: none;
}

.tb-layout .tb-section-header {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin: 0 0 24px;
}

.tb-layout .tb-section-header h2,
.tb-layout .tb-catalog-header h2 {
  color: var(--tb-text);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 740;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 8px;
}

.tb-layout .tb-section-header p,
.tb-layout .tb-catalog-header p {
  color: var(--tb-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.tb-layout .tb-popular {
  padding: 0;
}

.tb-layout .tb-popular-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
}

.tb-layout .tb-popular-card {
  align-items: center;
  background: var(--tb-surface);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  color: var(--tb-text);
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 130px;
  padding: 22px;
  text-align: left;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  width: 100%;
}

.tb-layout .tb-popular-card:hover,
.tb-layout .tb-tool-grid .tool-card:hover {
  border-color: var(--tb-blue);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.tb-layout .tb-popular-icon,
.tb-layout .tool-card-icon-wrap {
  align-items: center;
  background: var(--tb-blue-soft);
  border: 0;
  border-radius: 10px;
  color: var(--tb-blue);
  display: flex;
  flex: 0 0 auto;
  height: 52px;
  justify-content: center;
  margin: 0;
  width: 52px;
}

.tb-layout .tb-popular-icon svg,
.tb-layout .tool-card-icon svg {
  display: block;
  height: 25px;
  width: 25px;
}

.tb-layout .tb-popular-card h3,
.tb-layout .tool-card-body h3 {
  color: var(--tb-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 6px;
}

.tb-layout .tb-popular-card p,
.tb-layout .tool-card-body p {
  color: var(--tb-muted);
  display: -webkit-box;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tb-layout .tb-card-arrow,
.tb-layout .tool-card-arrow {
  color: var(--tb-line-strong);
  font-size: 20px;
  line-height: 1;
  margin: 0;
  transition: color 160ms ease, transform 160ms ease;
}

.tb-layout .tb-popular-card:hover .tb-card-arrow,
.tb-layout .tool-card:hover .tool-card-arrow {
  color: var(--tb-blue);
  transform: translateX(3px);
}

.tb-layout .tb-catalog {
  background: transparent;
  border-top: 1px solid var(--tb-line);
  padding: 64px 0 0;
}

.tb-layout .tb-catalog-header {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 0 28px;
  text-align: left;
}

.tb-layout .tb-tool-count {
  color: var(--tb-muted);
  flex: 0 0 auto;
  font-size: 14px;
  padding-bottom: 4px;
}

.tb-layout .tb-tool-count strong {
  color: var(--tb-blue);
  font-size: 18px;
}

.tb-layout .tb-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin: 0 0 40px;
}

.tb-layout .tb-category-pills button {
  align-items: center;
  background: var(--tb-surface);
  border: 1px solid var(--tb-line);
  border-radius: 9px;
  color: var(--tb-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  min-height: 42px;
  padding: 8px 15px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.tb-layout .tb-category-pills button:hover {
  background: var(--tb-subtle);
  border-color: var(--tb-line-strong);
  color: var(--tb-text);
}

.tb-layout .tb-category-pills button.active {
  background: var(--tb-blue);
  border-color: var(--tb-blue);
  color: #ffffff;
}

.tb-layout .tb-alltools-title {
  color: var(--tb-text);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 18px;
}

.tb-layout .tb-tool-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.tb-layout .tb-tool-grid .tool-card {
  align-items: flex-start;
  background: var(--tb-surface);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  box-shadow: none;
  color: var(--tb-text);
  display: flex;
  gap: 16px;
  min-height: 148px;
  padding: 22px;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tb-layout .tool-card-icon-wrap {
  height: 48px;
  width: 48px;
}

.tb-layout .tool-card-icon {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  display: flex;
  height: 25px;
  justify-content: center;
  min-width: 0;
  width: 25px;
}

.tb-layout .tool-card-body {
  flex: 1;
  min-width: 0;
}

.tb-layout .tool-card-body h3 {
  display: block;
}

.tb-layout .tb-search-empty {
  background: var(--tb-subtle);
  border: 1px dashed var(--tb-line-strong);
  border-radius: var(--tb-radius);
  color: var(--tb-muted);
  font-size: 16px;
  margin: 0 0 18px;
  padding: 32px 20px;
  text-align: center;
}

.tb-layout .tb-benefits {
  background: var(--tb-subtle);
  border: 1px solid var(--tb-line);
  border-radius: 16px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 30px;
}

.tb-layout .tb-benefits article {
  align-items: flex-start;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 8px 22px;
}

.tb-layout .tb-benefits article + article {
  border-left: 1px solid var(--tb-line);
}

.tb-layout .tb-benefits article > span {
  color: var(--tb-blue);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.5;
}

.tb-layout .tb-benefits strong {
  color: var(--tb-text);
  display: block;
  font-size: 16px;
  line-height: 1.45;
  margin-bottom: 5px;
}

.tb-layout .tb-benefits p {
  color: var(--tb-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 980px) {
  .home-shell.tb-layout {
    gap: 60px;
  }

  .tb-layout .tb-popular-grid,
  .tb-layout .tb-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tb-layout .tb-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tb-layout .tb-benefits article + article {
    border-left: 0;
  }

  .tb-layout .tb-benefits article:nth-child(even) {
    border-left: 1px solid var(--tb-line);
  }

  .tb-layout .tb-benefits article:nth-child(n + 3) {
    border-top: 1px solid var(--tb-line);
    margin-top: 18px;
    padding-top: 26px;
  }
}

@media (max-width: 640px) {
  .home-shell.tb-layout {
    gap: 48px;
  }

  .tb-layout .tb-hero {
    border-radius: var(--tb-radius);
    padding: 38px 20px;
  }

  .tb-layout .tb-hero h1 {
    font-size: clamp(34px, 10vw, 44px);
    letter-spacing: -0.035em;
  }

  .tb-layout .tb-hero-description {
    font-size: 17px;
    line-height: 1.65;
    margin: 18px 0 26px;
  }

  .tb-layout .tb-search-bar {
    gap: 8px;
    min-height: 60px;
  }

  .tb-layout .tb-search-icon {
    margin-left: 7px;
  }

  .tb-layout .tb-search-bar input {
    font-size: 16px;
  }

  .tb-layout .tb-search-bar button {
    min-width: 82px;
    padding: 0 14px;
  }

  .tb-layout .tb-trust-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .tb-layout .tb-trust-row span:not(:first-child)::before {
    display: none;
  }

  .tb-layout .tb-popular-grid,
  .tb-layout .tb-tool-grid,
  .tb-layout .tb-benefits {
    grid-template-columns: 1fr;
  }

  .tb-layout .tb-popular-card,
  .tb-layout .tb-tool-grid .tool-card {
    min-height: 0;
  }

  .tb-layout .tb-catalog {
    padding-top: 48px;
  }

  .tb-layout .tb-catalog-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .tb-layout .tb-category-pills {
    flex-wrap: nowrap;
    margin-left: -14px;
    margin-right: -14px;
    overflow-x: auto;
    padding: 0 14px 8px;
    scrollbar-width: none;
  }

  .tb-layout .tb-category-pills::-webkit-scrollbar {
    display: none;
  }

  .tb-layout .tb-category-pills button {
    flex: 0 0 auto;
  }

  .tb-layout .tb-benefits {
    padding: 12px 22px;
  }

  .tb-layout .tb-benefits article,
  .tb-layout .tb-benefits article:nth-child(even),
  .tb-layout .tb-benefits article:nth-child(n + 3) {
    border-left: 0;
    border-top: 1px solid var(--tb-line);
    margin: 0;
    padding: 22px 0;
  }

  .tb-layout .tb-benefits article:first-child {
    border-top: 0;
  }
}

@media (max-width: 420px) {
  .tb-layout .tb-search-icon {
    display: none;
  }

  .tb-layout .tb-search-bar input {
    padding-left: 8px;
  }
}

@media (prefers-color-scheme: dark) {
  body:has(.tb-layout) {
    --bg: #0b1120;
    --surface: #111827;
    --soft: #172033;
    --text: #f8fafc;
    --muted: #a8b3c5;
    --line: #273449;
    background: #0b1120;
    color: #f8fafc;
    color-scheme: dark;
  }

  body:has(.tb-layout) .topbar {
    background: rgba(11, 17, 32, 0.94);
    border-color: #273449;
  }

  body:has(.tb-layout) .nav-menu,
  body:has(.tb-layout) .language-picker select {
    background: #111827;
    border-color: #273449;
    color: #f8fafc;
  }

  .home-shell.tb-layout {
    --tb-bg: #0b1120;
    --tb-surface: #111827;
    --tb-subtle: #0f172a;
    --tb-text: #f8fafc;
    --tb-muted: #a8b3c5;
    --tb-line: #273449;
    --tb-line-strong: #3b4b63;
    --tb-blue: #60a5fa;
    --tb-blue-hover: #3b82f6;
    --tb-blue-soft: #172554;
  }

  .tb-layout .tb-search-bar {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }

  .tb-layout .tb-search-bar button,
  .tb-layout .tb-category-pills button.active {
    background: #2563eb;
    color: #ffffff;
  }

  .tb-layout .tb-search-bar input::placeholder {
    color: #718096;
  }

  .tb-layout .tb-popular-card:hover,
  .tb-layout .tb-tool-grid .tool-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tb-layout *,
  .tb-layout *::before,
  .tb-layout *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Homepage scale pass: larger, centered, and immediately scannable. */
body:has(.tb-layout) .topbar {
  min-height: 80px;
  padding-left: clamp(22px, 4vw, 56px);
  padding-right: clamp(22px, 4vw, 56px);
}

body:has(.tb-layout) .brand {
  font-size: 19px;
  gap: 12px;
}

body:has(.tb-layout) .brand-mark {
  border-radius: 10px;
  height: 42px;
  width: 42px;
}

body:has(.tb-layout) .topnav a,
body:has(.tb-layout) .nav-group summary {
  font-size: 16px;
  padding: 11px 13px;
}

body:has(.tb-layout) main {
  max-width: 1480px;
  padding: 42px clamp(18px, 3vw, 42px) 92px;
}

.home-shell.tb-layout {
  gap: 92px;
}

.tb-layout .tb-hero {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 570px;
  padding: 92px 150px 76px;
  text-align: center;
}

.tb-layout .tb-hero > * {
  position: relative;
  z-index: 1;
}

.tb-layout .tb-hero::before,
.tb-layout .tb-hero::after {
  align-items: center;
  background: var(--tb-blue);
  border: 8px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.2);
  color: #ffffff;
  display: flex;
  font-size: 22px;
  font-weight: 800;
  height: 76px;
  justify-content: center;
  position: absolute;
  width: 76px;
  z-index: 0;
}

.tb-layout .tb-hero::before {
  content: "QR";
  left: 7%;
  top: 26%;
  transform: rotate(-10deg);
}

.tb-layout .tb-hero::after {
  background: #0f766e;
  bottom: 24%;
  content: "64";
  right: 7%;
  transform: rotate(10deg);
}

.tb-layout .tb-eyebrow {
  color: var(--tb-muted);
  font-size: 20px;
  font-weight: 650;
  margin-bottom: 14px;
}

.tb-layout .tb-hero h1 {
  font-size: clamp(54px, 5.5vw, 76px);
  letter-spacing: -0.05em;
  line-height: 1.08;
  max-width: 1040px;
}

.tb-layout .tb-hero h1 strong {
  margin-top: 4px;
}

.tb-layout .tb-hero-description {
  font-size: 20px;
  line-height: 1.65;
  margin: 24px auto 34px;
  max-width: 820px;
}

.tb-layout .tb-search-bar {
  border-radius: 15px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
  gap: 14px;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  min-height: 76px;
  padding: 9px;
  width: 100%;
}

.tb-layout .tb-search-icon {
  margin-left: 16px;
}

.tb-layout .tb-search-icon svg {
  height: 25px;
  width: 25px;
}

.tb-layout .tb-search-bar input {
  font-size: 18px;
}

.tb-layout .tb-search-bar button {
  border-radius: 11px;
  font-size: 17px;
  min-height: 56px;
  min-width: 118px;
  padding: 0 28px;
}

.tb-layout .tb-search-keywords {
  font-size: 15px;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.tb-layout .tb-search-keywords button {
  font-size: 15px;
  min-height: 38px;
  padding: 7px 14px;
}

.tb-layout .tb-trust-row {
  font-size: 16px;
  justify-content: center;
  margin-top: 30px;
}

.tb-layout .tb-section-header {
  margin-bottom: 30px;
}

.tb-layout .tb-section-header h2,
.tb-layout .tb-catalog-header h2 {
  font-size: clamp(34px, 3.2vw, 44px);
  margin-bottom: 10px;
}

.tb-layout .tb-section-header p,
.tb-layout .tb-catalog-header p {
  font-size: 18px;
}

.tb-layout .tb-popular-grid {
  gap: 18px;
}

.tb-layout .tb-popular-card {
  gap: 20px;
  min-height: 176px;
  padding: 30px;
}

.tb-layout .tb-popular-icon {
  border-radius: 13px;
  height: 66px;
  width: 66px;
}

.tb-layout .tb-popular-icon svg {
  height: 32px;
  width: 32px;
}

.tb-layout .tb-popular-card h3,
.tb-layout .tool-card-body h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.tb-layout .tb-popular-card p,
.tb-layout .tool-card-body p {
  font-size: 16px;
  line-height: 1.65;
}

.tb-layout .tb-card-arrow,
.tb-layout .tool-card-arrow {
  font-size: 24px;
}

.tb-layout .tb-catalog {
  padding-top: 80px;
}

.tb-layout .tb-catalog-header {
  margin-bottom: 34px;
}

.tb-layout .tb-tool-count {
  font-size: 16px;
}

.tb-layout .tb-tool-count strong {
  font-size: 22px;
}

.tb-layout .tb-category-pills {
  gap: 10px;
  margin-bottom: 48px;
}

.tb-layout .tb-category-pills button {
  border-radius: 11px;
  font-size: 16px;
  min-height: 50px;
  padding: 10px 19px;
}

.tb-layout .tb-alltools-title {
  font-size: 24px;
  margin-bottom: 22px;
}

.tb-layout .tb-tool-grid {
  gap: 18px;
}

.tb-layout .tb-tool-grid .tool-card {
  gap: 20px;
  min-height: 184px;
  padding: 30px;
}

.tb-layout .tool-card-icon-wrap {
  border-radius: 13px;
  height: 60px;
  width: 60px;
}

.tb-layout .tool-card-icon,
.tb-layout .tool-card-icon svg {
  height: 30px;
  width: 30px;
}

.tb-layout .tb-benefits {
  padding: 40px 32px;
}

.tb-layout .tb-benefits article {
  gap: 17px;
  padding: 12px 28px;
}

.tb-layout .tb-benefits article > span {
  font-size: 16px;
}

.tb-layout .tb-benefits strong {
  font-size: 18px;
  margin-bottom: 7px;
}

.tb-layout .tb-benefits p {
  font-size: 16px;
}

@media (max-width: 1180px) {
  .tb-layout .tb-hero {
    padding-left: 120px;
    padding-right: 120px;
  }

  .tb-layout .tb-hero::before {
    left: 4%;
  }

  .tb-layout .tb-hero::after {
    right: 4%;
  }

  .tb-layout .tb-popular-card,
  .tb-layout .tb-tool-grid .tool-card {
    padding: 26px;
  }
}

@media (max-width: 820px) {
  body:has(.tb-layout) .topbar {
    min-height: 72px;
  }

  body:has(.tb-layout) main {
    padding-top: 28px;
  }

  .home-shell.tb-layout {
    gap: 64px;
  }

  .tb-layout .tb-hero {
    min-height: 0;
    padding: 64px 32px 56px;
  }

  .tb-layout .tb-hero::before,
  .tb-layout .tb-hero::after {
    display: none;
  }

  .tb-layout .tb-hero h1 {
    font-size: clamp(44px, 8vw, 60px);
  }

  .tb-layout .tb-popular-card,
  .tb-layout .tb-tool-grid .tool-card {
    min-height: 164px;
  }
}

@media (max-width: 640px) {
  body:has(.tb-layout) main {
    padding-left: 14px;
    padding-right: 14px;
  }

  .home-shell.tb-layout {
    gap: 52px;
  }

  .tb-layout .tb-hero {
    padding: 46px 18px 42px;
  }

  .tb-layout .tb-eyebrow {
    font-size: 17px;
  }

  .tb-layout .tb-hero h1 {
    font-size: clamp(38px, 11vw, 48px);
  }

  .tb-layout .tb-hero-description {
    font-size: 18px;
    margin: 20px auto 28px;
  }

  .tb-layout .tb-search-bar {
    min-height: 68px;
    padding: 7px;
  }

  .tb-layout .tb-search-bar button {
    min-height: 52px;
    min-width: 86px;
    padding: 0 15px;
  }

  .tb-layout .tb-search-keywords {
    justify-content: center;
  }

  .tb-layout .tb-trust-row {
    align-items: center;
    font-size: 15px;
  }

  .tb-layout .tb-section-header h2,
  .tb-layout .tb-catalog-header h2 {
    font-size: 32px;
  }

  .tb-layout .tb-section-header p,
  .tb-layout .tb-catalog-header p {
    font-size: 17px;
  }

  .tb-layout .tb-popular-card,
  .tb-layout .tb-tool-grid .tool-card {
    min-height: 0;
    padding: 24px;
  }

  .tb-layout .tb-popular-icon {
    height: 60px;
    width: 60px;
  }

  .tb-layout .tb-catalog {
    padding-top: 58px;
  }

  .tb-layout .tb-benefits {
    padding: 14px 24px;
  }
}

/* Homepage polish: roomier cards, clearer grouping, and a real brand lockup. */
body:has(.tb-layout) .topbar {
  min-height: 92px;
}

body:has(.tb-layout) .topbar .brand {
  gap: 15px;
  min-width: max-content;
}

body:has(.tb-layout) .topbar .brand-mark {
  background: var(--tb-blue);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
  height: 54px;
  width: 54px;
}

.brand-mark svg {
  display: block;
  height: 58%;
  width: 58%;
}

.brand-name {
  align-items: baseline;
  display: inline-flex;
  font-size: 27px;
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1;
}

.brand-name strong {
  color: #2563eb;
  font-weight: 820;
}

.brand-name span {
  color: #111827;
}

.tb-layout .tb-popular,
.tb-layout .tb-catalog {
  padding-left: 22px;
  padding-right: 22px;
}

.home-shell.tb-layout {
  gap: 108px;
}

.tb-layout .tb-section-header {
  margin-bottom: 38px;
}

.tb-layout .tb-popular-grid,
.tb-layout .tb-tool-grid {
  gap: 22px;
}

.tb-layout .tb-popular-card {
  border-radius: 16px;
  gap: 24px;
  min-height: 198px;
  padding: 36px;
}

.tb-layout .tb-popular-icon {
  border-radius: 15px;
  height: 72px;
  width: 72px;
}

.tb-layout .tb-popular-icon svg {
  height: 35px;
  width: 35px;
}

.tb-layout .tb-popular-card h3,
.tb-layout .tool-card-body h3 {
  font-size: 21px;
  line-height: 1.45;
  margin-bottom: 10px;
}

.tb-layout .tb-popular-card p,
.tb-layout .tool-card-body p {
  font-size: 17px;
  line-height: 1.72;
}

.tb-layout .tb-card-arrow,
.tb-layout .tool-card-arrow {
  margin-left: 8px;
}

.tb-layout .tb-catalog {
  padding-top: 98px;
}

.tb-layout .tb-catalog-header {
  margin-bottom: 42px;
}

.tb-layout .tb-category-pills {
  margin-bottom: 58px;
}

.tb-layout .tb-alltools-title {
  margin-bottom: 28px;
}

.tb-layout .tb-tool-grid .tool-card {
  border-radius: 16px;
  gap: 24px;
  min-height: 210px;
  padding: 36px;
}

.tb-layout .tool-card-icon-wrap {
  border-radius: 15px;
  height: 68px;
  width: 68px;
}

.tb-layout .tool-card-icon,
.tb-layout .tool-card-icon svg {
  height: 34px;
  width: 34px;
}

.tb-layout .tb-search-empty {
  font-size: 17px;
  padding: 42px 24px;
}

@media (prefers-color-scheme: dark) {
  .brand-name span {
    color: #f8fafc;
  }
}

@media (max-width: 1180px) {
  .tb-layout .tb-popular-card,
  .tb-layout .tb-tool-grid .tool-card {
    padding: 30px;
  }
}

@media (max-width: 840px) {
  body:has(.tb-layout) .topbar {
    min-height: 78px;
  }

  body:has(.tb-layout) .topbar .brand-mark {
    height: 48px;
    width: 48px;
  }

  .brand-name {
    font-size: 24px;
  }

  .home-shell.tb-layout {
    gap: 72px;
  }

  .tb-layout .tb-popular,
  .tb-layout .tb-catalog {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 640px) {
  body:has(.tb-layout) .topbar {
    min-height: 72px;
  }

  body:has(.tb-layout) .topbar .brand {
    gap: 11px;
  }

  body:has(.tb-layout) .topbar .brand-mark {
    border-radius: 12px;
    height: 44px;
    width: 44px;
  }

  .brand-name {
    font-size: 22px;
  }

  .home-shell.tb-layout {
    gap: 58px;
  }

  .tb-layout .tb-popular,
  .tb-layout .tb-catalog {
    padding-left: 2px;
    padding-right: 2px;
  }

  .tb-layout .tb-section-header {
    margin-bottom: 28px;
  }

  .tb-layout .tb-popular-grid,
  .tb-layout .tb-tool-grid {
    gap: 16px;
  }

  .tb-layout .tb-popular-card,
  .tb-layout .tb-tool-grid .tool-card {
    gap: 19px;
    padding: 26px 24px;
  }

  .tb-layout .tb-popular-icon,
  .tb-layout .tool-card-icon-wrap {
    height: 62px;
    width: 62px;
  }

  .tb-layout .tb-popular-card h3,
  .tb-layout .tool-card-body h3 {
    font-size: 19px;
  }

  .tb-layout .tb-popular-card p,
  .tb-layout .tool-card-body p {
    font-size: 16px;
  }

  .tb-layout .tb-catalog {
    padding-top: 66px;
  }
}

/* Tool icon pass: visual-only overrides. No interactions or routes are changed. */
body:has(.tb-layout) .topbar {
  min-height: 104px;
}

body:has(.tb-layout) .topbar .brand-mark {
  border-radius: 17px;
  height: 64px;
  width: 64px;
}

body:has(.tb-layout) .topbar .brand-mark svg {
  height: 72%;
  width: 72%;
}

body:has(.tb-layout) .brand-name {
  font-size: 31px;
}

.tb-layout :is(.tb-popular-card, .tool-card) {
  --tool-icon-color: #2563eb;
}

.tb-layout :is(.tb-popular-card, .tool-card)[href*="/qr-code-generator/"],
.tb-layout :is(.tb-popular-card, .tool-card)[href*="/base64-encoder-decoder/"],
.tb-layout :is(.tb-popular-card, .tool-card)[href*="/favicon-downloader/"] {
  --tool-icon-color: #2563eb;
}

.tb-layout :is(.tb-popular-card, .tool-card)[href*="/qr-code-scanner/"],
.tb-layout :is(.tb-popular-card, .tool-card)[href*="/wifi-qr-code-generator/"],
.tb-layout :is(.tb-popular-card, .tool-card)[href*="/rounded-corner-image-maker/"],
.tb-layout :is(.tb-popular-card, .tool-card)[href*="/bulk-image-compressor/"] {
  --tool-icon-color: #059669;
}

.tb-layout :is(.tb-popular-card, .tool-card)[href*="/image-compressor/"],
.tb-layout :is(.tb-popular-card, .tool-card)[href*="/percentage-calculator/"],
.tb-layout :is(.tb-popular-card, .tool-card)[href*="/emoji-copy-paste/"] {
  --tool-icon-color: #ea580c;
}

.tb-layout :is(.tb-popular-card, .tool-card)[href*="/youtube-thumbnail-downloader/"] {
  --tool-icon-color: #e11d48;
}

.tb-layout :is(.tb-popular-card, .tool-card)[href*="/cryptocurrency-price-tracker/"],
.tb-layout :is(.tb-popular-card, .tool-card)[href*="/payment-fee-calculator/"] {
  --tool-icon-color: #d97706;
}

.tb-layout :is(.tb-popular-card, .tool-card)[href*="/unicode-text-generator/"],
.tb-layout :is(.tb-popular-card, .tool-card)[href*="/time-zone-converter/"],
.tb-layout :is(.tb-popular-card, .tool-card)[href*="/world-holiday-calendar/"] {
  --tool-icon-color: #7c3aed;
}

.tb-layout :is(.tb-popular-card, .tool-card)[href*="/image-color-picker/"] {
  --tool-icon-color: #db2777;
}

.tb-layout :is(.tb-popular-card, .tool-card)[href*="/exif-metadata-viewer/"],
.tb-layout :is(.tb-popular-card, .tool-card)[href*="/markdown-to-html-converter/"] {
  --tool-icon-color: #475569;
}

.tb-layout .tb-popular-grid {
  gap: 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tb-layout .tb-popular-card {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: flex-start;
  min-height: 300px;
  padding: 30px 18px 26px;
  position: relative;
  text-align: center;
}

.tb-layout .tb-popular-icon,
.tb-layout .tool-card-icon-wrap {
  background: color-mix(in srgb, var(--tool-icon-color) 14%, var(--tb-surface));
  border: 1px solid color-mix(in srgb, var(--tool-icon-color) 22%, var(--tb-line));
  color: var(--tool-icon-color);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--tool-icon-color) 12%, transparent);
}

.tb-layout .tb-popular-icon {
  border-radius: 24px;
  height: 92px;
  margin: 0 auto 24px;
  width: 92px;
}

.tb-layout .tb-popular-icon svg {
  height: 48px;
  stroke-width: 1.9;
  width: 48px;
}

.tb-layout .tb-popular-card > div:nth-child(2) {
  width: 100%;
}

.tb-layout .tb-popular-card h3 {
  font-size: 18px;
  line-height: 1.45;
  margin-bottom: 9px;
}

.tb-layout .tb-popular-card p {
  font-size: 15px;
  line-height: 1.6;
  -webkit-line-clamp: 3;
}

.tb-layout .tb-popular-card .tb-card-arrow {
  display: none;
}

.tb-layout .tool-card-icon-wrap {
  border-radius: 19px;
  height: 84px;
  width: 84px;
}

.tb-layout .tool-card-icon,
.tb-layout .tool-card-icon svg {
  height: 42px;
  width: 42px;
}

@media (max-width: 1180px) {
  .tb-layout .tb-popular-grid {
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tb-layout .tb-popular-card {
    min-height: 270px;
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 720px) {
  body:has(.tb-layout) .topbar {
    min-height: 78px;
  }

  body:has(.tb-layout) .topbar .brand-mark {
    border-radius: 13px;
    height: 50px;
    width: 50px;
  }

  body:has(.tb-layout) .brand-name {
    font-size: 25px;
  }

  .tb-layout .tb-popular-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tb-layout .tb-popular-card {
    min-height: 260px;
    padding: 26px 18px 24px;
  }

  .tb-layout .tb-popular-icon {
    border-radius: 20px;
    height: 80px;
    margin-bottom: 20px;
    width: 80px;
  }

  .tb-layout .tb-popular-icon svg {
    height: 40px;
    width: 40px;
  }

  .tb-layout .tool-card-icon-wrap {
    border-radius: 16px;
    height: 70px;
    width: 70px;
  }

  .tb-layout .tool-card-icon,
  .tb-layout .tool-card-icon svg {
    height: 36px;
    width: 36px;
  }
}

@media (max-width: 420px) {
  .tb-layout .tb-popular-grid {
    grid-template-columns: 1fr;
  }

  .tb-layout .tb-popular-card {
    min-height: 240px;
  }
}

/* Central symbol scale: enlarge the artwork inside each icon tile. */
.home-seo {
  background: linear-gradient(145deg, #ffffff 0%, #f4f8ff 100%);
  border: 1px solid var(--tb-line);
  border-radius: 28px;
  margin-top: 32px;
  padding: clamp(28px, 5vw, 58px);
}

.home-seo-heading {
  max-width: 900px;
}

.home-seo-heading h2 {
  color: var(--tb-ink);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 10px 0 18px;
}

.home-seo-heading > p:not(.tb-eyebrow),
.home-seo-groups p,
.home-seo-note {
  color: var(--tb-muted);
  font-size: 16px;
  line-height: 1.8;
}

.home-seo-groups {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
}

.home-seo-groups article {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--tb-line);
  border-radius: 20px;
  padding: 24px;
}

.home-seo-groups h3 {
  color: var(--tb-ink);
  font-size: 18px;
  margin: 0 0 10px;
}

.home-seo-groups p,
.home-seo-note {
  margin: 0;
}

.home-seo-note {
  border-top: 1px solid var(--tb-line);
  margin-top: 24px;
  padding-top: 20px;
}

@media (max-width: 820px) {
  .home-seo-groups {
    grid-template-columns: 1fr;
  }
}

/* Editorial value section: spacious, factual, and easy to scan. */
.home-value {
  background: #fff;
  border: 1px solid var(--tb-line, var(--line));
  border-radius: 32px;
  display: grid;
  gap: clamp(36px, 5vw, 76px);
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  overflow: hidden;
  padding: clamp(34px, 6vw, 72px);
  position: relative;
}

.home-value::before {
  background: radial-gradient(circle, rgba(37, 99, 235, .1) 0 2px, transparent 2.5px);
  background-size: 22px 22px;
  content: "";
  height: 220px;
  opacity: .55;
  position: absolute;
  right: -50px;
  top: -50px;
  width: 260px;
}

.home-value-copy { min-width: 0; position: relative; z-index: 1; }
.home-value-copy > h2,
.home-why > h2 { color: var(--tb-ink, var(--text)); font-size: clamp(2rem, 4.2vw, 3.6rem); letter-spacing: -.05em; line-height: 1.12; margin: 14px 0 18px; }
.home-value-lead { color: var(--tb-muted, var(--muted)); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.8; margin: 0; max-width: 760px; }
.home-value-features { display: grid; gap: 22px; margin-top: 38px; }
.home-value-features article { align-items: start; display: grid; gap: 16px; grid-template-columns: 48px minmax(0, 1fr); }
.home-value-features article > span { align-items: center; background: #eaf3ff; border-radius: 14px; color: #1769d2; display: flex; height: 48px; justify-content: center; width: 48px; }
.home-value-features svg { height: 25px; width: 25px; }
.home-value-features h3 { color: var(--tb-ink, var(--text)); font-size: 1.04rem; margin: 1px 0 5px; }
.home-value-features p { color: var(--tb-muted, var(--muted)); line-height: 1.65; margin: 0; }

.home-value-art {
  align-self: center;
  aspect-ratio: 1;
  background: radial-gradient(circle at center, #e8f2ff 0 38%, transparent 39%), linear-gradient(145deg, #f7fbff, #eef5ff);
  border-radius: 44% 56% 48% 52%;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 13%;
  position: relative;
  transform: rotate(-2deg);
}

.value-tile { align-items: center; background: linear-gradient(145deg, #0877cf, #0560b0); border: 1px solid rgba(255,255,255,.5); border-radius: 24px; box-shadow: 0 18px 30px rgba(8,88,167,.18); color: #fff; display: flex; justify-content: center; transform: rotate(2deg); }
.value-tile:nth-child(2), .value-tile:nth-child(3) { transform: rotate(2deg) translateY(10px); }
.value-tile svg { height: 48%; max-height: 76px; width: 48%; }
.home-why { border-top: 1px solid var(--tb-line, var(--line)); grid-column: 1 / -1; padding-top: 54px; text-align: center; }
.home-why > h2 { font-size: clamp(1.8rem, 3vw, 2.65rem); margin-top: 0; }
.home-why > div { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 34px; }
.home-why article { padding: 12px clamp(14px, 3vw, 34px); }
.home-why article > span { color: #1670ce; font-size: .78rem; font-weight: 950; letter-spacing: .12em; }
.home-why h3 { color: var(--tb-ink, var(--text)); font-size: 1.25rem; margin: 12px 0 9px; }
.home-why p { color: var(--tb-muted, var(--muted)); line-height: 1.7; margin: 0; }

/* Every tool follows the same explanation, steps, tips, and FAQ rhythm. */
.content-guide.tool-guide {
  background: #f8fbff;
  border: 1px solid #dce7f3;
  border-radius: 32px;
  display: grid;
  gap: clamp(38px, 6vw, 72px);
  grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
  margin-top: clamp(64px, 8vw, 108px);
  overflow: hidden;
  padding: clamp(30px, 5vw, 64px);
}

.tool-guide .guide-heading { align-content: center; max-width: none; }
.tool-guide .guide-heading h2 { color: #101d2f; font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: -.05em; line-height: 1.12; margin: 7px 0 16px; }
.tool-guide .guide-heading > p:last-child { color: #52647a; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.8; }
.tool-guide .guide-visual { background: radial-gradient(circle at 18% 10%, rgba(98,180,255,.35), transparent 30%), linear-gradient(145deg, #0b3566, #0878c9); border: 0; border-radius: 28px; box-shadow: 0 24px 52px rgba(18,75,135,.2); display: grid; gap: 22px; grid-row: auto; min-height: 340px; padding: clamp(24px, 4vw, 44px); }
.guide-tool-icon { align-items: center; align-self: end; background: rgba(255,255,255,.96); border-radius: 25px; box-shadow: 0 16px 35px rgba(0,25,61,.22); color: #116dc2; display: flex; height: 112px; justify-content: center; width: 112px; }
.guide-tool-icon svg { height: 64px; width: 64px; }
.tool-guide .guide-mini-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-guide .guide-mini-preview span { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); border-radius: 13px; font-size: .87rem; padding: 14px 10px; text-align: center; }
.guide-steps-section, .guide-insight-grid, .guide-faq { grid-column: 1 / -1; }
.guide-rich-grid,
.guide-long-copy {
  grid-column: 1 / -1;
}
.guide-rich-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.guide-rich-grid article {
  background: #fff;
  border: 1px solid #dce7f3;
  border-radius: 24px;
  min-height: 0;
  padding: clamp(22px, 3.4vw, 34px);
}
.guide-rich-grid article:nth-child(1) {
  background: linear-gradient(145deg, #ffffff, #f0f7ff);
}
.guide-rich-grid article:nth-child(2) {
  background: linear-gradient(145deg, #ffffff, #f7f3ff);
}
.guide-rich-grid article:nth-child(3) {
  background: linear-gradient(145deg, #ffffff, #f2fbf7);
}
.guide-rich-grid h3 {
  color: #101d2f;
  font-size: clamp(1.2rem, 1.8vw, 1.52rem);
  letter-spacing: -.02em;
  line-height: 1.34;
  margin: 0 0 16px;
}
.guide-rich-grid p {
  color: #40546b;
  font-size: .98rem;
  line-height: 1.75;
  margin: 0;
}
.guide-rich-grid p + p {
  margin-top: 12px;
}
.guide-long-copy {
  background: #fff;
  border: 1px solid #dce7f3;
  border-radius: 26px;
  padding: clamp(24px, 4vw, 42px);
}
.guide-long-copy .guide-section-title {
  margin-bottom: 20px;
}
.guide-copy-stack {
  display: grid;
  gap: 14px;
}
.guide-copy-stack p {
  color: #24384f;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.78;
  margin: 0;
}
.guide-overview-lists {
  border-top: 1px solid #e4edf7;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
  padding-top: 24px;
}
.guide-overview-lists article {
  background: #f8fbff;
  border: 1px solid #e1edf8;
  border-radius: 18px;
  padding: 18px;
}
.guide-overview-lists h4 {
  color: #101d2f;
  font-size: .98rem;
  margin: 0 0 12px;
}
.guide-overview-lists ul {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.guide-overview-lists li {
  color: #40546b;
  display: grid;
  gap: 9px;
  grid-template-columns: 18px 1fr;
  line-height: 1.58;
}
.guide-overview-lists li::before {
  color: #126cc3;
  content: "i"; font-weight: 950;
}
.guide-tags {
  border-top: 1px solid #e4edf7;
  display: grid;
  gap: 13px;
  margin-top: 24px;
  padding-top: 22px;
}
.guide-tags strong {
  color: #101d2f;
  font-size: .95rem;
}
.guide-tag-groups { display:grid; gap:14px; }
.guide-tag-groups section { align-items:start; display:grid; gap:10px; grid-template-columns:90px minmax(0,1fr); }
.guide-tag-groups section > b { color:#526a82; font-size:.78rem; padding-top:8px; }
.guide-tag-groups section > div { display:flex; flex-wrap:wrap; gap:8px; }
.guide-tags span {
  background: #eef6ff;
  border: 1px solid #d7e8f8;
  border-radius: 999px;
  color: #285878;
  font-size: .85rem;
  font-weight: 760;
  line-height: 1.25;
  padding: 7px 11px;
}
@media (max-width: 620px) { .guide-tag-groups section { grid-template-columns:1fr; }.guide-tag-groups section > b { padding-top:0; } }
.guide-search-text {
  display: none;
}
.guide-section-title { align-items: center; display: flex; gap: 13px; margin-bottom: 22px; }
.guide-section-title > span { color: #1670ce; font-size: .78rem; font-weight: 950; letter-spacing: .1em; }
.guide-section-title h3 { color: #101d2f; font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -.025em; margin: 0; }
.guide-step-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.guide-step-grid li { background: #fff; border: 1px solid #dce7f3; border-radius: 20px; min-height: 168px; padding: 24px; }
.guide-step-grid strong { align-items: center; background: #eaf4ff; border-radius: 12px; color: #126bc1; display: flex; font-size: .82rem; height: 38px; justify-content: center; width: 38px; }
.guide-step-grid p { color: #3e526a; font-size: 1rem; font-weight: 750; line-height: 1.65; margin: 18px 0 0; }
.guide-insight-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-insight { background: #fff; border: 1px solid #dce7f3; border-radius: 24px; padding: clamp(24px, 4vw, 38px); }
.guide-insight.good-for { background: linear-gradient(145deg, #f2f8ff, #fff); }
.guide-insight.checks { background: linear-gradient(145deg, #f3fbf7, #fff); }
.guide-insight ul { display: grid; gap: 13px; list-style: none; margin: 0; padding: 0; }
.guide-insight li { align-items: start; color: #40546b; display: grid; gap: 10px; grid-template-columns: 22px 1fr; line-height: 1.65; }
.guide-insight li::before { align-items: center; background: #dceeff; border-radius: 50%; color: #0967be; content: "i"; display: flex; font-size: .7rem; font-weight: 950; height: 20px; justify-content: center; margin-top: 2px; width: 20px; }
.guide-faq { background: #fff; border: 1px solid #dce7f3; border-radius: 26px; padding: clamp(24px, 4vw, 42px); }
.faq-list details { border-top: 1px solid #dce4ee; }
.faq-list details:last-child { border-bottom: 1px solid #dce4ee; }
.faq-list summary { align-items: center; color: #172437; cursor: pointer; display: flex; font-size: 1rem; font-weight: 850; justify-content: space-between; list-style: none; min-height: 66px; padding: 15px 4px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: #126cc3; font-size: 1.35rem; transition: transform .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { color: #53667c; line-height: 1.75; margin: -2px 0 0; padding: 0 42px 20px 4px; }

/* Rounded corner studio */
.rounded-hero { align-items: center; background: radial-gradient(circle at 82% 12%, rgba(54,175,255,.28), transparent 28%), linear-gradient(140deg, #0a203f, #0b518c); border-radius: 30px; color: #fff; display: grid; gap: 34px; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); overflow: hidden; padding: clamp(34px, 6vw, 72px); }
.rounded-hero h1 { font-size: clamp(2.35rem, 5vw, 4.35rem); letter-spacing: -.055em; line-height: 1.04; margin: 11px 0 20px; }
.rounded-hero > div:first-child > p:last-of-type { color: #d7e8f8; font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.75; margin: 0; max-width: 660px; }
.rounded-hero-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.rounded-hero-badges span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #eef8ff; font-size: .83rem; font-weight: 800; padding: 9px 13px; }
.rounded-hero-art { aspect-ratio: 1; margin: 0 auto; max-width: 330px; position: relative; width: 100%; }
.rounded-hero-art span { background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(218,240,255,.9)); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 22px 40px rgba(0,19,45,.25); position: absolute; }
.rounded-hero-art span:nth-child(1) { border-radius: 22%; inset: 8% 24% 26% 10%; transform: rotate(-8deg); }
.rounded-hero-art span:nth-child(2) { background: linear-gradient(145deg, #5cd3bd, #178f84); border-radius: 40%; inset: 30% 5% 8% 34%; transform: rotate(7deg); }
.rounded-hero-art span:nth-child(3) { background: #fff; border-radius: 50%; height: 72px; right: 10%; top: 4%; width: 72px; }
.rounded-studio { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); margin-top: 26px; }
.rounded-preview-panel, .rounded-control-panel { background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 16px 42px rgba(18,40,70,.08); }
.rounded-preview-panel { overflow: hidden; }
.rounded-preview-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 78px; padding: 18px 24px; }
.rounded-preview-head > div { display: grid; gap: 4px; }
.rounded-preview-head span { color: var(--accent); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.rounded-preview-head strong { color: var(--text); font-size: 1rem; }
.rounded-preview-head small { color: var(--muted); font-weight: 750; }
.rounded-dropzone { align-items: center; background: #f8fbff; border: 2px dashed #b9cce1; border-radius: 20px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; margin: 28px; min-height: 430px; padding: 36px; text-align: center; transition: .2s ease; }
.rounded-dropzone:hover, .rounded-dropzone.is-dragging { background: #edf7ff; border-color: #1682d4; transform: translateY(-2px); }
.rounded-dropzone input { display: none; }
.rounded-drop-icon { align-items: center; background: #e5f3ff; border-radius: 24px; color: #0e71c6; display: flex; height: 94px; justify-content: center; margin-bottom: 24px; width: 94px; }
.rounded-drop-icon svg { height: 52px; width: 52px; }
.rounded-dropzone strong { color: #17283c; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.rounded-dropzone small { color: var(--muted); line-height: 1.6; margin-top: 10px; }
.rounded-canvas-stage { align-items: center; background-color: #eef2f6; background-image: linear-gradient(45deg,#dce3ea 25%,transparent 25%),linear-gradient(-45deg,#dce3ea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dce3ea 75%),linear-gradient(-45deg,transparent 75%,#dce3ea 75%); background-position: 0 0,0 10px,10px -10px,-10px 0; background-size: 20px 20px; display: flex; justify-content: center; min-height: 520px; padding: clamp(24px, 5vw, 60px); position: relative; }
.rounded-canvas-stage[hidden] { display: none; }
.rounded-canvas { box-shadow: 0 20px 50px rgba(18,35,56,.2); display: block; height: auto; max-height: 560px; max-width: 100%; width: auto; }
.rounded-preview-label { background: rgba(15,29,47,.85); border-radius: 999px; bottom: 18px; color: #fff; font-size: .76rem; font-weight: 850; padding: 8px 12px; position: absolute; right: 18px; }
.rounded-control-panel { display: grid; gap: 18px; padding: 28px; position: sticky; top: 96px; }
.rounded-control-heading { align-items: end; display: flex; justify-content: space-between; }
.rounded-control-heading > span { color: var(--text); font-size: 1.2rem; font-weight: 900; }
.rounded-control-heading strong { color: var(--accent); font-size: 1.7rem; }
.rounded-control-heading b { font-size: 2.5rem; }
.rounded-control-panel > p { color: var(--muted); line-height: 1.6; margin: -10px 0 0; }
.rounded-range { accent-color: var(--accent); cursor: pointer; height: 34px; width: 100%; }
.rounded-presets { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rounded-presets button { align-items: center; background: #f8fafc; border: 1px solid var(--line); border-radius: 15px; color: var(--text); cursor: pointer; display: grid; gap: 4px; grid-template-columns: 38px 1fr; padding: 13px; text-align: left; }
.rounded-presets button:hover, .rounded-presets button.active { background: #eef7ff; border-color: #5ba5e3; box-shadow: 0 0 0 3px rgba(40,132,207,.08); }
.rounded-presets b { font-size: .84rem; }
.rounded-presets small { color: var(--muted); grid-column: 2; }
.preset-shape { background: linear-gradient(145deg, #1481d3, #0a5fa7); display: block; grid-row: span 2; height: 34px; width: 34px; }
.preset-shape.soft { border-radius: 7px; }
.preset-shape.round { border-radius: 13px; }
.preset-shape.circle { border-radius: 50%; }
.rounded-output-info { align-items: center; background: #f3f7fb; border-radius: 13px; display: flex; justify-content: space-between; padding: 14px 15px; }
.rounded-output-info span { color: var(--muted); font-size: .83rem; }
.rounded-output-info strong { color: var(--text); font-size: .84rem; }
.rounded-refresh { min-height: 45px; }
.rounded-download { align-items: center; display: grid; min-height: 68px; padding: 13px 18px; text-align: center; }
.rounded-download small { color: rgba(255,255,255,.76); font-size: .75rem; }
.rounded-status { font-size: .78rem; text-align: center; }

@media (max-width: 900px) {
  .home-value, .content-guide.tool-guide, .rounded-hero, .rounded-studio { grid-template-columns: 1fr; }
  .home-value-art { max-width: 520px; width: 90%; }
  .home-why > div { grid-template-columns: 1fr; }
  .guide-rich-grid {
    grid-template-columns: 1fr;
  }
  .guide-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rounded-control-panel { position: static; }
}

@media (max-width: 620px) {
  .home-value, .content-guide.tool-guide { border-radius: 22px; padding: 26px 20px; }
  .home-value-art { width: 100%; }
  .guide-rich-grid, .guide-step-grid, .guide-insight-grid { grid-template-columns: 1fr; }
  .guide-overview-lists { grid-template-columns: 1fr; }
  .guide-rich-grid article,
  .guide-long-copy { border-radius: 16px; padding: 18px; }
  .guide-copy-stack p { line-height: 1.68; }
  .guide-step-grid li { min-height: 0; }
  .tool-guide .guide-visual { min-height: 280px; }
  .guide-tool-icon { height: 94px; width: 94px; }
  .guide-tool-icon svg { height: 54px; width: 54px; }
  .rounded-hero { border-radius: 22px; padding: 32px 22px; }
  .rounded-hero-art { max-width: 260px; }
  .rounded-preview-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .rounded-dropzone { margin: 16px; min-height: 340px; padding: 24px 18px; }
  .rounded-canvas-stage { min-height: 360px; padding: 34px 18px; }
  .rounded-control-panel { padding: 22px 18px; }
}

.tb-layout .tb-popular-icon {
  border-radius: 26px;
  font-size: 20px;
  font-weight: 800;
  height: 104px;
  width: 104px;
}

.tb-layout .tb-popular-icon svg {
  height: 62px;
  width: 62px;
}

.tb-layout .tb-popular-icon svg [stroke] {
  stroke-width: 2.35;
}

.tb-layout .tool-card-icon-wrap {
  border-radius: 21px;
  height: 96px;
  width: 96px;
}

.tb-layout .tool-card-icon {
  font-size: 18px;
  font-weight: 800;
  height: 58px;
  letter-spacing: 0.01em;
  width: 58px;
}

.tb-layout .tool-card-icon svg {
  height: 58px;
  width: 58px;
}

.tb-layout .tool-card-icon svg [stroke] {
  stroke-width: 2.35;
}

@media (max-width: 720px) {
  .tb-layout .tb-popular-icon {
    border-radius: 22px;
    height: 88px;
    width: 88px;
  }

  .tb-layout .tb-popular-icon svg {
    height: 52px;
    width: 52px;
  }

  .tb-layout .tool-card-icon-wrap {
    border-radius: 18px;
    height: 82px;
    width: 82px;
  }

  .tb-layout .tool-card-icon,
  .tb-layout .tool-card-icon svg {
    height: 48px;
    width: 48px;
  }
}

.footer-brand-logo{display:block;height:auto;max-width:132px;width:100%}


/* Explicit light/dark theme toggle. White is the default; user choice wins over OS settings. */
:root[data-theme="light"] {
  --bg:#f6f8fb;--surface:#fff;--soft:#eef3f8;--text:#17202a;--muted:#647386;--line:#dbe4ee;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#0b1120;--surface:#111827;--soft:#172033;--text:#f8fafc;--muted:#a8b3c5;--line:#2b394f;
  --accent:#60a5fa;--accent-dark:#3b82f6;--green:#39d39f;--red:#ff7b85;--yellow:#facc15;
  --shadow:0 18px 46px rgba(0,0,0,.34);
  color-scheme:dark;
}
html[data-theme] body{transition:background-color .2s ease,color .2s ease}
html[data-theme="light"] body{background:#f6f8fb;color:#17202a}
html[data-theme="dark"] body{background:#0b1120;color:#f8fafc}

.theme-toggle{
  align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;color:var(--text);
  cursor:pointer;display:inline-flex;flex:0 0 auto;height:42px;justify-content:center;padding:0;transition:.18s ease;width:42px
}
.theme-toggle:hover{background:var(--soft);border-color:#8aa1bd;transform:translateY(-1px)}
.theme-toggle:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:3px}
.theme-toggle svg{fill:none;height:20px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;width:20px}
.theme-toggle[data-theme="dark"]{background:#1b2940;border-color:#3b4b63;color:#f8fafc}
.footer-brand-logo{filter:brightness(0) invert(1)}
html[data-theme="dark"] .brand-logo{filter:brightness(0) invert(1)}

html[data-theme="light"] .topbar{background:rgba(255,255,255,.94)}
html[data-theme="dark"] .topbar{background:rgba(11,17,32,.94);border-color:#273449}
html[data-theme="dark"] .topnav a,
html[data-theme="dark"] .nav-group summary{color:#b6c2d3}
html[data-theme="dark"] .topnav a:hover,
html[data-theme="dark"] .nav-group summary:hover,
html[data-theme="dark"] .nav-group[open] summary{background:#172033;color:#fff}
html[data-theme="dark"] .nav-menu,
html[data-theme="dark"] .language-picker select{background:#111827;border-color:#2b394f;color:#f8fafc}
html[data-theme="dark"] .nav-menu a:hover{background:#1b2940}

html[data-theme="light"] body:has(.tb-layout){--bg:#fff;--surface:#fff;--soft:#f8fafc;--text:#111827;--muted:#64748b;--line:#e2e8f0;background:#fff;color:#111827;color-scheme:light}
html[data-theme="light"] .home-shell.tb-layout{--tb-bg:#fff;--tb-surface:#fff;--tb-subtle:#f8fafc;--tb-text:#111827;--tb-muted:#64748b;--tb-line:#e2e8f0;--tb-line-strong:#cbd5e1;--tb-blue:#2563eb;--tb-blue-hover:#1d4ed8;--tb-blue-soft:#eff6ff}
html[data-theme="dark"] body:has(.tb-layout){--bg:#0b1120;--surface:#111827;--soft:#172033;--text:#f8fafc;--muted:#a8b3c5;--line:#273449;background:#0b1120;color:#f8fafc;color-scheme:dark}
html[data-theme="dark"] .home-shell.tb-layout{--tb-bg:#0b1120;--tb-surface:#111827;--tb-subtle:#0f172a;--tb-text:#f8fafc;--tb-muted:#a8b3c5;--tb-line:#273449;--tb-line-strong:#3b4b63;--tb-blue:#60a5fa;--tb-blue-hover:#3b82f6;--tb-blue-soft:#172554}
html[data-theme="dark"] .tb-layout .tb-search-bar{box-shadow:0 8px 24px rgba(0,0,0,.24)}
html[data-theme="dark"] .tb-layout .tb-search-bar button,
html[data-theme="dark"] .tb-layout .tb-category-pills button.active{background:#2563eb;color:#fff}
html[data-theme="dark"] .tb-layout .tb-popular-card:hover,
html[data-theme="dark"] .tb-layout .tb-tool-grid .tool-card:hover{box-shadow:0 10px 28px rgba(0,0,0,.28)}

html[data-theme="dark"] :is(input,textarea,select){
  background-color:#0f172a;border-color:#3a4a61;color:#f8fafc
}
html[data-theme="dark"] :is(input,textarea)::placeholder{color:#718096}
html[data-theme="dark"] select option{background:#111827;color:#f8fafc}
html[data-theme="dark"] :where(
  .workspace,.content-guide,.home-value,.home-seo,
  [class*="-card"],[class*="-panel"],[class*="-paper"],[class*="-form"],
  [class*="-menu"],[class*="-dropzone"],[class*="-tabs"],[class*="-toolbar"]
){border-color:#2b394f}
html[data-theme="dark"] :where(
  .workspace,.content-guide,
  .compressor-shell,.compressor-panel,.result-summary,.crypto-card,.exchange-banner,
  .money-form,.batch-modal-panel,.rounded-preview-panel,.rounded-control-panel,
  .guide-step-grid li,.guide-insight,.guide-faq,.qr-bulk-progress,.qr-bulk-empty,
  .qr-bulk-result-card,.qr-bulk-top-actions button,.qr-bulk-card-actions button,
  .emoji-search-panel,.emoji-recent-wrap,.unicode-workspace,.srt-workspace,
  .extractor-card,.favicon-result-card,.country-menu,.country-menu button
){background-color:#111827!important;color:#e8eef7}
html[data-theme="dark"] :where(
  .workspace,.content-guide,.home-value,.home-seo
) :where(h1,h2,h3,h4,label,summary,strong):not(
  .base64-hero *,.calendar-hero *,.percent-hero *,.qr-reader-hero *,
  .tax-result-card *,.percent-answer *,.crypto-modal-hero *
){color:#f8fafc}
html[data-theme="dark"] :where(.workspace,.content-guide,.home-value,.home-seo) :where(p,small,span):not(
  .base64-hero *,.calendar-hero *,.percent-hero *,.tax-result-card *,.percent-answer *
){border-color:#2b394f}
html[data-theme="dark"] .nav-menu{box-shadow:0 20px 45px rgba(0,0,0,.4)}
html[data-theme="dark"] .footer-select-wrap select{background:transparent}
html[data-theme="dark"] .country-menu button:hover,
html[data-theme="dark"] .country-menu button:focus-visible{background:#1d2b42}
html[data-theme="dark"] .exchange-banner{background-image:linear-gradient(145deg,#111827,#0f172a)}
html[data-theme="dark"] .crypto-modal-panel{background:#0b1120;border-color:#2b394f}
html[data-theme="dark"] .crypto-modal-exchange{background:#111827;border-color:#2b394f}
html[data-theme="dark"] .crypto-modal-exchange :is(strong,small,b){color:#e8eef7}
html[data-theme="dark"] .chart-period{background:#172033;border-color:#2b394f}
html[data-theme="dark"] .chart-period button.active{background:#26364e;color:#fff}
html[data-theme="dark"] .privacy-badge{background:#102c26;border-color:#245548;color:#75dfbb}
html[data-theme="dark"] .home-value,
html[data-theme="dark"] .home-seo{background:#0f172a;border-color:#273449}
html[data-theme="dark"] .faq-list details{border-color:#2b394f}
html[data-theme="dark"] .footer{border-top-color:#273449}

@media(max-width:720px){
  .topbar{gap:10px}
  .theme-toggle{height:38px;margin-right:12px;width:38px}
}

html[data-theme="dark"] .home-seo-groups article{
  background:#162238;
  border-color:#304159;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}
html[data-theme="dark"] .home-seo-groups h3{color:#f8fafc}
html[data-theme="dark"] .home-seo-groups p{color:#b8c6da}
html[data-theme="dark"] .home-seo-note{border-color:#304159;color:#b8c6da}

/* Metadata viewer ??privacy-first analysis workspace */
.metadata-shell{display:grid;gap:22px;overflow:visible;padding:0}
.metadata-hero{align-items:end;background:linear-gradient(135deg,#10213f 0%,#17365f 55%,#1e4e7d 100%);border-radius:24px;color:#fff;display:flex;gap:28px;justify-content:space-between;overflow:hidden;padding:34px 38px;position:relative}
.metadata-hero::after{background:radial-gradient(circle,rgba(96,165,250,.36),transparent 68%);content:"";height:260px;position:absolute;right:-70px;top:-120px;width:260px}
.metadata-hero>div{position:relative;z-index:1}
.metadata-eyebrow{color:#93c5fd;display:block;font-size:.78rem;font-weight:850;letter-spacing:.08em;margin-bottom:11px;text-transform:uppercase}
.metadata-hero h2{color:#fff;font-size:clamp(1.75rem,3vw,2.7rem);letter-spacing:-.045em;line-height:1.12;margin:0}
.metadata-hero p{color:#dbeafe;line-height:1.65;margin:15px 0 0;max-width:620px}
.metadata-hero-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:300px}
.metadata-hero-badges span{backdrop-filter:blur(8px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#eff6ff;font-size:.78rem;font-weight:750;padding:8px 11px}
.metadata-dropzone{align-items:center;background:var(--surface);border:2px dashed #9eb1c7;border-radius:20px;cursor:pointer;display:flex;flex-direction:column;gap:8px;justify-content:center;min-height:250px;padding:34px 24px;text-align:center;transition:.2s ease}
.metadata-dropzone:hover,.metadata-dropzone:focus-within{background:#f4f8ff;border-color:#2563eb;box-shadow:0 0 0 5px rgba(37,99,235,.08);transform:translateY(-1px)}
.metadata-dropzone.has-file{min-height:112px;padding:18px}
.metadata-dropzone.has-file .metadata-upload-icon{height:42px;width:42px}
.metadata-dropzone input{height:1px;opacity:0;overflow:hidden;position:absolute;width:1px}
.metadata-upload-icon{align-items:center;background:#eaf2ff;border-radius:18px;color:#1d4ed8;display:flex;font-size:2rem;font-weight:400;height:64px;justify-content:center;margin-bottom:6px;width:64px}
.metadata-dropzone strong{color:var(--text);font-size:1.08rem}
.metadata-dropzone small{color:var(--muted);line-height:1.5}
.metadata-pick-button{background:#2563eb;border-radius:10px;color:#fff;font-size:.88rem;font-weight:800;margin-top:10px;padding:11px 18px}
.metadata-studio{align-items:start;display:grid;gap:22px;grid-template-columns:minmax(270px,330px) minmax(0,1fr)}
.metadata-studio[hidden]{display:none}
.metadata-file-panel,.metadata-results-panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 34px rgba(15,23,42,.06)}
.metadata-file-panel{display:grid;gap:16px;padding:18px;position:sticky;top:92px}
.metadata-preview{align-items:center;background:linear-gradient(135deg,#eef2f7,#e1e8f0);border-radius:14px;color:#718096;display:flex;justify-content:center;min-height:230px;overflow:hidden}
.metadata-preview img,.metadata-preview video{display:block;height:auto;max-height:330px;max-width:100%;object-fit:contain;width:100%}
.metadata-file-copy{display:grid;gap:5px;min-width:0}
.metadata-file-copy strong{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metadata-file-copy small{color:var(--muted);font-size:.8rem}
.metadata-actions{display:grid;gap:9px}
.metadata-actions :is(button,a){box-sizing:border-box;justify-content:center;text-align:center;width:100%}
.metadata-actions button:disabled{cursor:not-allowed;opacity:.48}
.metadata-reset-button{background:transparent;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:.84rem;font-weight:750;padding:8px}
.metadata-reset-button:hover{color:var(--text)}
.metadata-privacy-note{align-items:flex-start;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:12px;color:#166534;display:flex;font-size:.78rem;gap:7px;line-height:1.5;margin:0;padding:10px 11px}
.metadata-privacy-note span{font-weight:900}
.metadata-results-panel{min-width:0;padding:22px}
.metadata-results-head{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;margin-bottom:18px;padding-bottom:17px}
.metadata-results-head>div>span{color:var(--accent);font-size:.74rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.metadata-results-head h3{color:var(--text);font-size:1.3rem;margin:4px 0 0}
.metadata-status-badge{background:var(--soft);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.76rem;font-weight:850;padding:7px 10px;white-space:nowrap}
.metadata-status-badge.loading{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.metadata-status-badge.safe{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
.metadata-status-badge.warning{background:#fff7ed;border-color:#fed7aa;color:#c2410c}
.metadata-status-badge.error{background:#fff1f2;border-color:#fecdd3;color:#be123c}
.metadata-report{display:grid;gap:14px;min-width:0}
.metadata-empty,.metadata-loading{align-items:center;background:var(--soft);border:1px solid var(--line);border-radius:16px;color:var(--muted);display:flex;flex-direction:column;gap:8px;justify-content:center;min-height:220px;padding:28px;text-align:center}
.metadata-empty>span{color:#94a3b8;font-size:2rem}
.metadata-empty strong,.metadata-loading strong{color:var(--text)}
.metadata-empty small,.metadata-loading small{line-height:1.5}
.metadata-loading>span{animation:metadata-spin .8s linear infinite;border:3px solid #bfdbfe;border-radius:50%;border-top-color:#2563eb;height:28px;width:28px}
@keyframes metadata-spin{to{transform:rotate(360deg)}}
.metadata-section{background:var(--surface);border:1px solid var(--line);border-radius:16px;display:grid;gap:13px;min-width:0;padding:16px}
.metadata-section header{display:grid;gap:4px}
.metadata-section h3{color:var(--text);font-size:1rem;margin:0}
.metadata-section header span{color:var(--muted);font-size:.8rem;line-height:1.5}
.metadata-chip-grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
.metadata-chip{background:var(--soft);border:1px solid var(--line);border-radius:12px;display:grid;gap:6px;min-width:0;padding:12px}
.metadata-chip span{color:var(--muted);font-size:.71rem;font-weight:850}
.metadata-chip strong{color:var(--text);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metadata-detail-list{display:grid;gap:9px}
.metadata-detail{background:var(--soft);border:1px solid var(--line);border-radius:12px;min-width:0;overflow:hidden}
.metadata-detail.sensitive{background:#fff7ed;border-color:#fed7aa}
.metadata-detail summary{align-items:center;cursor:pointer;display:grid;gap:12px;grid-template-columns:minmax(130px,.62fr) minmax(0,1fr) auto;list-style:none;padding:12px 14px}
.metadata-detail summary::-webkit-details-marker{display:none}
.metadata-detail summary::after{color:var(--muted);content:"+";font-size:1.15rem;font-weight:600}
.metadata-detail[open] summary::after{content:"-"}
.metadata-detail summary span{display:grid;gap:3px;min-width:0}
.metadata-detail strong{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metadata-detail em{color:var(--muted);font-size:.71rem;font-style:normal;font-weight:700}
.metadata-detail summary small{color:var(--muted);font-family:"Cascadia Mono","Consolas",monospace;font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metadata-detail-body{border-top:1px solid var(--line);padding:12px}
.metadata-detail pre{background:#0f172a;border-radius:10px;color:#e2e8f0;font-family:"Cascadia Mono","Consolas",monospace;font-size:.78rem;line-height:1.6;margin:0;max-height:310px;overflow:auto;padding:13px;white-space:pre-wrap;word-break:break-word}
.metadata-detail-link{color:#2563eb;display:inline-block;font-size:.8rem;font-weight:800;margin-top:10px;text-decoration:none}
.metadata-detail-link:hover{text-decoration:underline}
html[data-theme="dark"] .metadata-dropzone:hover,html[data-theme="dark"] .metadata-dropzone:focus-within{background:#142039}
html[data-theme="dark"] .metadata-upload-icon{background:#172554;color:#93c5fd}
html[data-theme="dark"] .metadata-file-panel,html[data-theme="dark"] .metadata-results-panel,html[data-theme="dark"] .metadata-section{background:#111827;border-color:#2b394f}
html[data-theme="dark"] .metadata-preview{background:linear-gradient(135deg,#172033,#0f172a)}
html[data-theme="dark"] .metadata-privacy-note{background:#102c26;border-color:#245548;color:#75dfbb}
html[data-theme="dark"] .metadata-detail.sensitive{background:#352116;border-color:#704329}
html[data-theme="dark"] .metadata-status-badge.loading{background:#172554;border-color:#1e40af;color:#93c5fd}
html[data-theme="dark"] .metadata-status-badge.safe{background:#102c26;border-color:#245548;color:#75dfbb}
html[data-theme="dark"] .metadata-status-badge.warning{background:#352116;border-color:#704329;color:#fdba74}
html[data-theme="dark"] .metadata-status-badge.error{background:#3b1621;border-color:#7f1d3a;color:#fda4af}
@media(max-width:900px){.metadata-hero{align-items:flex-start;flex-direction:column}.metadata-hero-badges{justify-content:flex-start;max-width:none}.metadata-studio{grid-template-columns:1fr}.metadata-file-panel{position:static}}
@media(max-width:600px){.metadata-hero{border-radius:18px;padding:27px 22px}.metadata-dropzone{min-height:220px;padding:26px 18px}.metadata-results-panel{padding:16px}.metadata-detail summary{grid-template-columns:1fr auto}.metadata-detail summary small{display:none}.metadata-section{padding:13px}}

/* Global header contract ??identical geometry on home and every tool page. */
.topbar,
body:has(.tb-layout) .topbar {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  height: 72px;
  min-height: 72px;
  padding: 0 clamp(18px, 2.4vw, 30px);
}

.topbar .brand,
body:has(.tb-layout) .topbar .brand {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 100%;
  min-width: 0;
}

.topbar .brand-logo,
body:has(.tb-layout) .topbar .brand-logo {
  height: auto;
  width: 144px;
}

.topbar .topnav,
body:has(.tb-layout) .topbar .topnav {
  align-items: center;
  align-self: stretch;
  display: flex;
  height: auto;
}

.topbar .topnav a,
.topbar .nav-group summary,
body:has(.tb-layout) .topbar .topnav a,
body:has(.tb-layout) .topbar .nav-group summary {
  font-size: .92rem;
  padding: 8px 10px;
}

@media (max-width: 840px) {
  .topbar,
  body:has(.tb-layout) .topbar {
    align-items: center;
    height: 68px;
    min-height: 68px;
    padding: 0 16px;
  }

  .topbar .brand-logo,
  body:has(.tb-layout) .topbar .brand-logo {
    width: 128px;
  }

  .topbar .topnav,
  body:has(.tb-layout) .topbar .topnav {
    padding-bottom: 0;
  }
}

/* Final mobile/readability guard for the multilingual tool catalog. */
.tb-layout,
.tb-layout * {
  min-width: 0;
}

.tb-layout .tb-search-bar,
.tb-layout .tb-popular-card,
.tb-layout .tb-tool-grid .tool-card,
.home-value,
.content-guide.tool-guide,
.guide-step-grid li,
.guide-insight,
.guide-faq {
  max-width: 100%;
}

.home-value,
.tb-layout .tb-popular-icon,
.tb-layout .tool-card-icon,
.tb-layout .tool-card-icon-wrap {
  overflow: hidden;
}

.tb-layout .tb-hero h1,
.tb-layout .tb-hero-description,
.tb-layout .tb-popular-card h3,
.tb-layout .tool-card-body h3,
.tb-layout .tb-popular-card p,
.tb-layout .tool-card-body p,
.tool-guide .guide-heading h2,
.tool-guide .guide-heading p,
.guide-step-grid p,
.guide-insight li,
.faq-list summary,
.faq-list details p {
  overflow-wrap: anywhere;
  word-break: normal;
}

.tb-layout .tb-popular-card p,
.tb-layout .tool-card-body p {
  -webkit-line-clamp: 3;
}

@media (max-width: 640px) {
  body:has(.tb-layout) main {
    padding-left: 14px;
    padding-right: 14px;
  }

  .tb-layout .tb-hero {
    min-height: 0;
    padding: 34px 16px;
  }

  .tb-layout .tb-hero::before,
  .tb-layout .tb-hero::after {
    display: none;
  }

  .tb-layout .tb-hero h1 {
    font-size: clamp(2rem, 9.5vw, 2.75rem);
    letter-spacing: 0;
    line-height: 1.16;
  }

  .tb-layout .tb-hero-description {
    font-size: 1rem;
    line-height: 1.65;
  }

  .tb-layout .tb-search-bar {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding: 12px;
  }

  .tb-layout .tb-search-icon {
    display: none;
  }

  .tb-layout .tb-search-bar input {
    min-height: 46px;
    padding: 0 12px;
    text-align: left;
    width: 100%;
  }

  .tb-layout .tb-search-bar button {
    min-height: 46px;
    width: 100%;
  }

  .tb-layout .tb-search-keywords {
    justify-content: flex-start;
  }

  .tb-layout .tb-category-pills {
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
    padding: 0 0 8px;
  }

  .tb-layout .tb-category-pills button {
    flex: 1 1 auto;
    justify-content: center;
    white-space: normal;
  }

  .tb-layout .tb-popular-card,
  .tb-layout .tb-tool-grid .tool-card {
    align-items: flex-start;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 16px;
  }

  .tb-layout .tb-popular-icon,
  .tb-layout .tool-card-icon-wrap {
    border-radius: 16px;
    height: 54px;
    width: 54px;
  }

  .tb-layout .tb-popular-icon svg,
  .tb-layout .tool-card-icon,
  .tb-layout .tool-card-icon svg {
    height: 28px;
    width: 28px;
  }

  .tb-layout .tb-card-arrow,
  .tb-layout .tool-card-arrow {
    display: none;
  }

  .tb-layout .tb-popular-card h3,
  .tb-layout .tool-card-body h3 {
    font-size: 1.04rem;
    line-height: 1.35;
  }

  .tb-layout .tb-popular-card p,
  .tb-layout .tool-card-body p {
    font-size: .92rem;
    line-height: 1.55;
  }

  .content-guide.tool-guide {
    border-radius: 18px;
    gap: 28px;
    margin-top: 44px;
    padding: 22px 16px;
  }

  .tool-guide .guide-heading h2 {
    font-size: clamp(1.55rem, 8vw, 2.15rem);
    letter-spacing: 0;
  }

  .tool-guide .guide-visual {
    border-radius: 18px;
    min-height: 220px;
  }

  .guide-step-grid,
  .guide-insight-grid {
    grid-template-columns: 1fr;
  }

  .guide-step-grid li,
  .guide-insight,
  .guide-faq {
    border-radius: 16px;
    padding: 18px;
  }

  .faq-list summary {
    align-items: flex-start;
    gap: 12px;
    line-height: 1.45;
  }

  .faq-list details p {
    padding-right: 4px;
  }
}

@media (max-width: 380px) {
  .topbar .brand-logo,
  body:has(.tb-layout) .topbar .brand-logo {
    width: 112px;
  }

  body:has(.tb-layout) main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .tb-layout .tb-popular-card,
  .tb-layout .tb-tool-grid .tool-card {
    grid-template-columns: 1fr;
  }
}

/* Metadata batch drop UX */
.metadata-dropzone{background:linear-gradient(145deg,#f8fbff,#eef5ff);border:3px dashed #7da2d6;border-radius:24px;gap:10px;min-height:340px;padding:46px 28px}
.metadata-dropzone:hover,.metadata-dropzone:focus-within,.metadata-dropzone.is-dragging{background:#eaf3ff;border-color:#1769e0;box-shadow:0 0 0 8px rgba(37,99,235,.1);transform:translateY(-2px)}
.metadata-upload-icon{background:#1769e0;border-radius:22px;box-shadow:0 12px 28px rgba(23,105,224,.24);color:#fff;font-size:2.2rem;font-weight:500;height:76px;width:76px}
.metadata-drop-kicker{background:#dbeafe;border-radius:999px;color:#1d4ed8;font-size:.78rem;font-weight:900;padding:7px 11px}
.metadata-dropzone strong{font-size:clamp(1.35rem,2.5vw,2rem);letter-spacing:-.035em}
.metadata-pick-button{background:#1769e0;border-radius:12px;font-size:1rem;margin-top:12px;padding:14px 24px}
.metadata-file-queue{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.metadata-file-queue[hidden]{display:none}
.metadata-file-card{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--text);cursor:pointer;display:grid;font:inherit;gap:11px;grid-template-columns:auto minmax(0,1fr) auto;padding:14px;text-align:left;transition:.18s ease}
.metadata-file-card:hover{border-color:#7da2d6;transform:translateY(-1px)}
.metadata-file-card.active{background:#eff6ff;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.metadata-file-card-number{align-items:center;background:#e2e8f0;border-radius:10px;color:#475569;display:flex;font-size:.82rem;font-weight:900;height:36px;justify-content:center;width:36px}
.metadata-file-card>span:nth-child(2){display:grid;gap:4px;min-width:0}
.metadata-file-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metadata-file-card small{color:var(--muted)}
.metadata-file-card b{color:#2563eb;font-size:.76rem;white-space:nowrap}
html[data-theme="dark"] .metadata-file-card.active{background:#172554}
@media(max-width:600px){.metadata-dropzone{min-height:300px;padding:34px 18px}.metadata-file-queue{grid-template-columns:1fr}}

/* Metadata batch removal controls */
.metadata-batch-button{font-size:1.02rem;min-height:54px}
.metadata-batch-hint{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;color:#1e40af!important;font-size:.78rem!important;line-height:1.5;padding:10px 12px;text-align:center}
html[data-theme="dark"] .metadata-batch-hint{background:#172554;border-color:#1e40af;color:#bfdbfe!important}


/* Social real platform preview fix */
.social-device{min-height:680px;padding:22px}.social-platform-card{background:#fff;border:1px solid rgba(255,255,255,.18);border-radius:28px;color:#111827;padding:0;width:min(100%,720px)}.social-device-phone .social-platform-card{background:#05070b;border:10px solid #111827;border-radius:42px;max-width:400px;overflow:hidden}.social-device-video .social-platform-card{background:#0f172a}.social-device-banner .social-platform-card{background:#fff;max-width:780px}.social-mock-browser{align-items:center;background:#eef2f7;border-bottom:1px solid #dbe4ef;color:#64748b;display:grid;font-size:.68rem;font-weight:850;gap:6px;grid-template-columns:9px 9px 9px 1fr;padding:10px 16px}.social-mock-browser span{background:#cbd5e1;border-radius:50%;height:8px;width:8px}.social-mock-browser b{background:#fff;border:1px solid #d9e3ee;border-radius:999px;font-size:.62rem;font-weight:900;justify-self:end;padding:5px 10px}.social-device-phone .social-mock-browser{display:none}.social-card-top{margin:0;padding:14px 16px}.social-card-top>div{display:grid;gap:2px}.social-card-top b{background:#eef4fb;border-radius:999px;color:#334155;font-size:.68rem;font-weight:950;padding:7px 10px}.social-brand-mark{align-items:center;border-radius:12px!important;box-shadow:none!important;color:#fff;display:flex;font-size:.82rem;font-weight:950;height:36px!important;justify-content:center;width:36px!important}.social-stage{background:#f8fafc;grid-template-columns:minmax(0,64px) minmax(0,1fr) minmax(0,64px);padding:12px 16px 16px}.social-device-phone .social-stage,.social-device-video .social-stage{background:#05070b}.social-device-banner .social-stage{grid-template-columns:1fr;padding:16px}.social-real-post{background:#fff;border:1px solid #dce5ef;border-radius:22px;box-shadow:0 14px 38px rgba(15,23,42,.1);max-width:100%;overflow:hidden;padding:12px}.social-device-phone .social-real-post{background:#0b0f16;border-color:#1f2937;border-radius:26px;padding:10px}.social-device-video .social-real-post{background:#111827;border-color:#243044}.social-device-banner .social-real-post{width:100%}.social-post-toolbar{align-items:center;display:flex;gap:7px;margin-bottom:10px}.social-post-toolbar span{background:#dbe5ef;border-radius:999px;height:8px;width:38px}.social-device-phone .social-post-toolbar span,.social-device-video .social-post-toolbar span{background:#263244}.social-preview-frame{background:#152235;border:1px solid #cbd5e1;border-radius:14px;display:block;max-height:540px;overflow:hidden;position:relative}.social-device-phone .social-preview-frame{border-color:#1f2937;border-radius:20px}.social-preview-frame img{display:block!important;height:100%;inset:0;object-fit:cover;opacity:1;position:absolute;transform-origin:center;width:100%;z-index:2}.social-preview-frame::before{z-index:0}.social-preview-frame.has-image{background:#0f172a}.social-preview-frame.has-image .social-preview-frame-label{display:block}.social-preview-frame-label{display:none;z-index:5}.social-safe-zone{z-index:4}.social-empty-preview{position:relative;z-index:1}.social-post-footer{display:grid;gap:8px;padding:11px 2px 2px}.social-post-actions{display:flex;gap:7px}.social-post-actions span{background:#dbe5ef;border-radius:999px;height:10px;width:42px}.social-device-phone .social-post-actions span,.social-device-video .social-post-actions span{background:#273244}.social-post-footer p{color:#334155;font-size:.74rem;font-weight:850;margin:0}.social-device-phone .social-post-footer p,.social-device-video .social-post-footer p{color:#dbeafe}.social-post-footer small{color:#64748b;font-size:.68rem;font-weight:950;justify-self:end}.social-phone-ui{display:none}.social-device-phone .social-phone-ui{align-items:center;display:flex;gap:22px;justify-content:center;padding:10px 0 15px}.social-device-phone .social-phone-ui span{background:#e5e7eb;border-radius:999px;height:4px;width:32px}.social-device-phone .social-phone-ui span:nth-child(2),.social-device-phone .social-phone-ui span:nth-child(3){height:8px;width:8px}.social-device-phone .social-cut-note{display:none}.social-device-banner .social-post-footer{display:none}.social-device-banner .social-post-toolbar{display:none}.social-safe-banner .social-safe-zone{inset:30% 18%}.social-cut-note{background:rgba(15,23,42,.06);color:#64748b}.social-device-video .social-cut-note,.social-device-phone .social-cut-note{background:rgba(255,255,255,.08);color:#cbd5e1}@media(max-width:1120px){.social-device{min-height:590px}.social-stage{grid-template-columns:1fr}.social-cut-note{display:none}}@media(max-width:540px){.social-device{min-height:460px;padding:10px}.social-platform-card{border-radius:20px}.social-stage{padding:10px}.social-card-top{padding:12px}.social-mock-browser{padding:8px 10px}.social-mock-browser b{max-width:140px;overflow:hidden;text-overflow:ellipsis}.social-real-post{border-radius:16px;padding:8px}}

.social-preview-frame img{display:none!important}.social-preview-frame.has-image img{display:block!important}

.random-address-hero{background:radial-gradient(circle at 85% 20%,rgba(32,211,153,.28),transparent 34%),linear-gradient(135deg,#071429,#123d35);color:#fff;align-items:center;justify-content:space-between}.random-address-hero .eyebrow{color:#69f0c5}.random-address-hero h1{color:#fff}.random-address-hero p{color:#d6f7ee}.random-address-shell{display:grid;grid-template-columns:280px minmax(0,1fr) 290px;gap:18px;margin-top:24px}.random-address-panel,.random-address-card,.random-address-batch{background:#fff;border:1px solid #d7e5f3;border-radius:22px;box-shadow:0 18px 45px rgba(15,35,65,.08);padding:18px}.random-address-countries{display:grid;gap:10px;max-height:560px;overflow:auto;margin-top:12px;padding-right:4px}.random-address-country{display:flex;align-items:center;gap:12px;width:100%;border:1px solid #d9e7f5;border-radius:16px;background:#f8fbff;padding:12px;text-align:left;cursor:pointer}.random-address-country.active{border-color:#1f74e8;background:#eef6ff;box-shadow:0 0 0 3px rgba(31,116,232,.12)}.random-address-country img,.random-address-flag img,.random-address-batch-list img{width:34px;height:34px;border-radius:999px;object-fit:cover;box-shadow:0 0 0 1px rgba(15,35,65,.1)}.random-address-country strong,.random-address-country small{display:block}.random-address-country small{color:#607086}.random-address-card{background:linear-gradient(145deg,#0b1628,#163a4b);color:#fff;min-height:540px}.random-address-card-head,.random-address-flag{display:flex;align-items:center;gap:12px;justify-content:space-between}.random-address-flag{justify-content:flex-start;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:18px;padding:14px;margin:18px 0}.random-address-flag span{margin-left:auto;color:#9ee8d1}.random-address-big{font-size:clamp(32px,5vw,64px);line-height:1;font-weight:900;letter-spacing:-.05em;margin:22px 0}.random-address-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.random-address-grid>div{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);border-radius:18px;padding:16px}.random-address-grid span{display:block;color:#7fe4c6;font-weight:800;font-size:12px;text-transform:uppercase;margin-bottom:8px}.random-address-grid strong{display:block;font-size:18px;word-break:break-word}.random-address-grid p{color:#c4d6e8;margin:6px 0 0}.random-address-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.random-address-notice{color:#b8c8d8;font-size:13px;margin-top:20px}.random-address-batch-list{display:grid;gap:10px;margin:16px 0}.random-address-batch-list div{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;border:1px solid #dce9f7;border-radius:16px;padding:10px;background:#f8fbff}.random-address-batch-list small{grid-column:2;color:#607086}.btn.full{width:100%}@media(max-width:980px){.random-address-shell{grid-template-columns:1fr}.random-address-grid{grid-template-columns:1fr}.random-address-card{min-height:auto}}

.random-address-hero-v2{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;min-height:300px;padding:42px;background:linear-gradient(135deg,#07101f 0%,#102f2f 52%,#0f513f 100%);box-shadow:0 26px 80px rgba(9,28,48,.18)}
.random-address-hero-v2:before{content:"";position:absolute;inset:auto -80px -120px auto;width:360px;height:360px;border-radius:999px;background:radial-gradient(circle,rgba(104,255,203,.28),transparent 68%)}
.random-address-hero-copy{position:relative;z-index:1}.random-address-hero-copy h1{max-width:720px;font-size:clamp(42px,7vw,86px);line-height:.94;letter-spacing:-.07em}.random-address-hero-copy p{max-width:720px;font-size:18px}.random-address-hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.random-address-hero-badges span{border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.1);padding:9px 13px;font-weight:900;color:#d9fff3}
.random-address-hero-card{position:relative;z-index:1;align-self:center;border:1px solid rgba(255,255,255,.2);border-radius:28px;background:rgba(255,255,255,.12);backdrop-filter:blur(18px);padding:22px;color:#fff;box-shadow:0 22px 65px rgba(0,0,0,.24)}.random-address-hero-card .hero-card-top{display:block;color:#88f6d4;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.random-address-hero-card strong{display:block;margin:14px 0 8px;font-size:32px}.random-address-hero-card small{display:block;color:#d6e9f5;line-height:1.7;margin-bottom:18px}
.random-address-app{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;margin-top:24px}.random-address-country-dock,.random-address-workbench{border:1px solid #d8e7f4;border-radius:28px;background:#fff;box-shadow:0 22px 55px rgba(15,35,65,.08);padding:20px}.random-address-country-dock{position:sticky;top:18px;align-self:start}.random-address-search{height:48px;margin-top:12px;border-radius:16px}.random-address-countries-v2{display:grid;grid-template-columns:1fr;gap:9px;max-height:640px;margin-top:14px;overflow:auto;padding-right:6px}.random-address-countries-v2 .random-address-country{position:relative;border-radius:18px;background:#f7fbff;padding:12px 12px 12px 14px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.random-address-countries-v2 .random-address-country:hover{transform:translateY(-1px);border-color:#8fc2ff}.random-address-countries-v2 .random-address-country.active{background:linear-gradient(135deg,#edf6ff,#e9fff7);border-color:#1473ff;box-shadow:0 10px 28px rgba(20,115,255,.16)}.random-address-countries-v2 .random-address-country img{width:42px;height:42px}.random-address-countries-v2 .random-address-country strong{font-size:15px}.random-address-countries-v2 .random-address-country small{font-size:12px}
.random-address-workbench{background:linear-gradient(180deg,#f8fbff 0%,#fff 42%)}.random-address-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.random-address-toolbar span{display:block;color:#617084;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.random-address-toolbar strong{display:block;font-size:28px;letter-spacing:-.04em}.random-address-toolbar-actions{display:flex;gap:10px;flex-wrap:wrap}
.address-label-card{position:relative;overflow:hidden;border-radius:32px;background:#0b1424;color:#fff;padding:26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 70px rgba(8,18,34,.22)}.address-label-card:before{content:"";position:absolute;right:-90px;top:-130px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(47,214,163,.33),transparent 68%)}.address-label-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:16px}.address-label-header div{display:flex;align-items:center;gap:10px}.address-label-header img{width:44px;height:44px;border-radius:999px;object-fit:cover}.address-label-header span{font-weight:900}.address-label-header strong{color:#8cf0d0}.address-label-name{position:relative;z-index:1;margin:28px 0 14px;font-size:clamp(38px,6vw,76px);font-weight:950;line-height:.92;letter-spacing:-.07em}.address-label-main{position:relative;z-index:1;margin-bottom:22px;color:#d7e8f4;font-size:20px;line-height:1.45}.address-label-main p{margin:0}
.address-copy-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.address-copy-tile{appearance:none;text-align:left;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(255,255,255,.08);color:#fff;padding:16px;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease}.address-copy-tile:hover{transform:translateY(-2px);background:rgba(255,255,255,.13);border-color:rgba(140,240,208,.72)}.address-copy-tile span{display:block;color:#8cf0d0;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.address-copy-tile strong{display:block;margin-top:8px;font-size:19px;word-break:break-word}.address-copy-tile small{display:block;margin-top:5px;color:#b7c9d8}.random-address-notice-v2{margin:14px 0 0;color:#65748a}
.random-address-batch-v2{margin-top:20px;border:1px solid #d9e7f4;border-radius:26px;background:#fff;padding:18px}.random-address-batch-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.random-address-batch-head span{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:12px;background:#eaf4ff;color:#126ee8;font-weight:950}.random-address-batch-head h2{margin:8px 0 3px;font-size:24px;letter-spacing:-.04em}.random-address-batch-head p{margin:0;color:#607086}.random-address-batch-list-v2{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0}.random-address-batch-list-v2 div{display:grid;grid-template-columns:28px 34px minmax(0,1fr);gap:8px;align-items:center;border:1px solid #dce9f7;border-radius:18px;background:#f8fbff;padding:11px}.random-address-batch-list-v2 b{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:999px;background:#eaf4ff;color:#126ee8;font-size:12px}.random-address-batch-list-v2 span{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.random-address-batch-list-v2 small{grid-column:3;color:#607086;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.random-address-hero-v2,.random-address-app{grid-template-columns:1fr}.random-address-country-dock{position:static}.random-address-countries-v2{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.random-address-batch-list-v2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.random-address-hero-v2{padding:28px}.random-address-toolbar,.random-address-batch-head{align-items:stretch;flex-direction:column}.address-copy-grid,.random-address-countries-v2,.random-address-batch-list-v2{grid-template-columns:1fr}.address-label-card{padding:20px}.random-address-toolbar strong{font-size:22px}}

.random-person-hero{background:radial-gradient(circle at 82% 18%,rgba(255,214,102,.2),transparent 26%),linear-gradient(135deg,#07101f 0%,#132940 46%,#174d3b 100%)}
.random-person-demo{display:grid;gap:8px}.demo-avatar{width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:24px;background:#fff;color:#102033;font-size:42px;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.random-person-toolbar .btn{border-radius:999px;padding:12px 18px;font-weight:950}.random-soft-btn{background:#eef6ff;border-color:#cfe2f8;color:#0d4f9d}.random-main-copy{box-shadow:0 16px 30px rgba(18,110,232,.2)}
.random-person-card{position:relative;overflow:hidden;border-radius:34px;background:linear-gradient(145deg,#071421,#102c3e 58%,#123f34);color:#fff;padding:26px;box-shadow:0 28px 80px rgba(7,20,33,.24)}
.random-person-card:before{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:999px;background:radial-gradient(circle,rgba(92,255,203,.28),transparent 68%)}
.random-person-top{position:relative;z-index:1;display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:16px;align-items:center}.random-avatar{width:92px;height:92px;display:flex;align-items:center;justify-content:center;border-radius:30px;background:#fff;color:#102033;font-size:54px;box-shadow:0 22px 54px rgba(0,0,0,.28)}.random-person-id span{display:block;color:#8cf0d0;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.12em}.random-person-id strong{display:block;margin-top:5px;font-size:clamp(38px,5vw,70px);line-height:.92;letter-spacing:-.07em}.random-person-id small{display:block;margin-top:8px;color:#c6d9e8}.random-country-pill{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.1);padding:10px 13px}.random-country-pill img{width:34px;height:34px;border-radius:999px}.random-country-pill b{white-space:nowrap;color:#e8fff7}
.random-home-map{position:relative;z-index:1;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;margin:24px 0;border:1px solid rgba(255,255,255,.15);border-radius:26px;background:rgba(255,255,255,.08);padding:18px}.random-home-pin{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:22px;background:#8cf0d0;color:#071421;font-size:42px;font-weight:950}.random-home-map span{display:block;color:#8cf0d0;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.1em}.random-home-map strong{display:block;margin-top:5px;font-size:27px;letter-spacing:-.04em}.random-home-map p{margin:4px 0 0;color:#c7d9e8}.random-home-map em{font-style:normal;font-size:36px;font-weight:950;color:#fff}
.random-profile-fields{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:12px}.profile-copy-row{appearance:none;display:block;width:100%;text-align:left;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(255,255,255,.08);color:#fff;padding:16px 18px;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}.profile-copy-row:hover{transform:translateY(-2px);background:rgba(255,255,255,.14);border-color:#8cf0d0}.profile-copy-row.copied{background:rgba(140,240,208,.2);border-color:#8cf0d0}.profile-copy-row.is-wide{grid-row:span 3}.profile-copy-row span{display:block;color:#8cf0d0;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.profile-copy-row strong{display:block;margin-top:9px;font-size:20px;line-height:1.45;word-break:break-word}.profile-copy-row small{display:block;margin-top:7px;color:#b9cada}
.random-person-batch .random-address-batch-list-v2 div{grid-template-columns:34px 34px minmax(0,1fr)}.random-person-batch .random-address-batch-list-v2 b{font-size:20px;background:#fff}.random-person-batch .random-address-batch-list-v2 small{grid-column:3}
@media(max-width:900px){.random-person-top,.random-home-map,.random-profile-fields{grid-template-columns:1fr}.random-country-pill{justify-content:center}.profile-copy-row.is-wide{grid-row:auto}.random-home-map em{font-size:28px}}

.random-address-clean-hero{display:block;min-height:0;padding:44px 48px;background:linear-gradient(135deg,#f8faf7,#eef5ef);color:#172033;border:1px solid #e0e5dc;box-shadow:none}.random-address-clean-hero h1{color:#111827;font-size:clamp(34px,5vw,58px);letter-spacing:-.05em}.random-address-clean-hero p{color:#596574;max-width:760px}.random-address-clean-hero .eyebrow{color:#df554d}.random-address-clean-hero .random-address-hero-badges span{background:#fff;border-color:#f0c7c3;color:#df554d}
.random-address-form-app{grid-template-columns:320px minmax(0,1fr);align-items:start}.random-address-country-clean,.random-address-form-workbench{border-radius:18px;box-shadow:none;border-color:#e0e5dc}.random-address-country-clean{position:static}.random-address-form-workbench{padding:0;background:#fff}.random-address-form-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid #e5e7eb}.random-address-form-head span{display:block;color:#6b7280;font-size:13px}.random-address-form-head strong{display:block;margin-top:4px;font-size:28px;letter-spacing:-.04em;color:#111827}.random-address-form-actions{display:flex;gap:12px;flex-wrap:wrap}.random-address-form-actions .btn{border-radius:999px;padding:12px 20px}
.address-form-card{padding:0;background:#fff}.address-form-title{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px 12px}.address-form-title div{display:flex;align-items:center;gap:10px;color:#6b7280}.address-form-title img{width:34px;height:34px;border-radius:999px}.address-form-title strong{font-size:28px;color:#111827;letter-spacing:-.04em}.address-form-columns{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e5e7eb}.address-form-columns article{padding:24px}.address-form-columns article+article{border-left:1px solid #e5e7eb}.address-form-columns h3{margin:0 0 14px;font-size:20px;color:#111827;letter-spacing:-.03em}
.address-form-row{appearance:none;display:grid;grid-template-columns:170px minmax(0,1fr) 24px;gap:14px;align-items:center;width:100%;min-height:54px;border:0;border-bottom:1px solid #eceff3;background:#fff;color:#111827;text-align:left;cursor:pointer;padding:0}.address-form-row:hover{background:#fafafa}.address-form-row.copied{background:#fff7f6}.address-form-row span{color:#667085;font-size:15px}.address-form-row strong{font-size:16px;font-weight:700;line-height:1.35;word-break:break-word}.address-form-row i{font-style:normal;color:#64748b;font-size:18px;text-align:center}
.random-address-saved-clean{margin:24px;border-radius:18px;box-shadow:none}.random-address-saved-clean .random-address-batch-list-v2{grid-template-columns:repeat(5,minmax(0,1fr))}.random-address-saved-clean .random-address-batch-list-v2 div{box-shadow:none;background:#fff}.random-address-notice-v2{padding:0 24px;color:#df554d}
@media(max-width:980px){.random-address-form-app,.address-form-columns{grid-template-columns:1fr}.address-form-columns article+article{border-left:0;border-top:1px solid #e5e7eb}.address-form-head,.address-form-title{align-items:flex-start;flex-direction:column}.random-address-saved-clean .random-address-batch-list-v2{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.random-address-clean-hero{padding:30px 22px}.address-form-row{grid-template-columns:1fr 24px;gap:6px;padding:12px 0}.address-form-row span{grid-column:1 / -1}.random-address-saved-clean .random-address-batch-list-v2{grid-template-columns:1fr}}

.resume-address-hero{display:block;min-height:0;padding:44px 50px;background:linear-gradient(135deg,#f9faf7,#f0f2ec);border:1px solid #e3e4dc;box-shadow:none;color:#171717}.resume-address-hero h1{color:#101828;font-size:clamp(36px,5vw,62px);letter-spacing:-.055em}.resume-address-hero p{max-width:760px;color:#5f6875}.resume-address-hero .eyebrow{color:#df564e}.resume-address-hero .random-address-hero-badges span{background:#fff;border-color:#efc7c2;color:#d84f47}
.resume-address-shell{display:grid;gap:20px;margin-top:24px}.resume-country-bar{display:grid;grid-template-columns:190px 260px minmax(0,1fr);gap:14px;align-items:start;border:1px solid #e1e5dd;border-radius:22px;background:#fff;padding:18px;box-shadow:0 12px 34px rgba(15,23,42,.05)}.resume-country-bar>div:first-child span{display:block;color:#df564e;font-weight:950}.resume-country-bar>div:first-child strong{display:block;font-size:24px;letter-spacing:-.04em}.resume-country-bar>div:first-child small{color:#667085}.resume-country-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:154px;overflow:auto;margin:0;padding:0}.resume-country-chip{display:flex;align-items:center;gap:9px;min-height:54px;border:1px solid #e2e8f0;border-radius:15px;background:#fbfcfd;padding:8px;text-align:left;cursor:pointer}.resume-country-chip.active{border-color:#df564e;background:#fff7f6;box-shadow:0 0 0 3px rgba(223,86,78,.12)}.resume-country-chip img{width:30px;height:30px;border-radius:999px}.resume-country-chip strong{display:block;font-size:13px;color:#111827}.resume-country-chip small{display:block;font-size:11px;color:#667085}
.resume-address-workbench{border:1px solid #e1e5dd;border-radius:24px;background:#fff;overflow:hidden;box-shadow:0 14px 44px rgba(15,23,42,.06)}.resume-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid #e5e7eb}.resume-actions span{display:block;color:#667085;font-size:13px}.resume-actions strong{display:block;margin-top:4px;font-size:26px;color:#101828}.resume-actions>div:last-child{display:flex;gap:10px;flex-wrap:wrap}.resume-actions .btn{border-radius:999px;padding:12px 20px;font-weight:900}
.resume-card{display:grid;grid-template-columns:310px minmax(0,1fr);min-height:620px}.resume-profile-panel{border-right:1px solid #e5e7eb;background:linear-gradient(180deg,#fbfbf8,#f4f1e9);padding:28px;display:flex;flex-direction:column;align-items:center;text-align:center}.resume-photo{width:190px;height:238px;object-fit:cover;border-radius:26px;border:8px solid #fff;box-shadow:0 20px 45px rgba(15,23,42,.12)}.resume-name span{display:block;margin-top:22px;color:#df564e;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.1em}.resume-name strong{display:block;margin-top:8px;font-size:36px;line-height:1;letter-spacing:-.06em;color:#101828}.resume-name small{display:block;margin-top:10px;color:#667085}.resume-country-badge{display:flex;align-items:center;gap:10px;margin-top:22px;border:1px solid #e2e8f0;border-radius:999px;background:#fff;padding:9px 13px}.resume-country-badge img{width:30px;height:30px;border-radius:999px}
.resume-form-panel{padding:26px}.resume-form-columns{display:grid;grid-template-columns:1fr 1fr;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden}.resume-form-columns.single{grid-template-columns:1fr}.resume-form-columns article{background:#fff;padding:22px}.resume-form-columns article+article{border-left:1px solid #e5e7eb}.resume-form-columns h3{margin:0 0 12px;color:#101828;font-size:20px;letter-spacing:-.03em}.resume-form-row{appearance:none;display:grid;grid-template-columns:145px minmax(0,1fr) 24px;gap:12px;align-items:center;width:100%;min-height:52px;border:0;border-bottom:1px solid #edf0f3;background:#fff;text-align:left;cursor:pointer;padding:0;color:#101828}.resume-form-row:last-child{border-bottom:0}.resume-form-row:hover{background:#fbfbfa}.resume-form-row.copied{background:#fff4f2}.resume-form-row span{color:#667085;font-size:14px}.resume-form-row strong{font-size:15px;line-height:1.35;word-break:break-word}.resume-copy-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid #dbe3ec;border-radius:9px;background:#f8fafc;color:#475569;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}.resume-copy-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.resume-form-row:hover .resume-copy-icon,.resume-form-row:focus-visible .resume-copy-icon{background:#eaf2ff;border-color:#bdd3f5;color:#1265cf;transform:translateY(-1px)}
.resume-map-panel{display:grid;grid-template-columns:1fr;margin-top:20px;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;background:#fff}.resume-map-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:22px 24px;border-bottom:1px solid #e5e7eb;background:#fbfcfe}.resume-map-panel h3{margin:0 0 7px;font-size:20px;color:#101828}.resume-map-panel p{max-width:680px;margin:0;color:#667085;line-height:1.55}.resume-map-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:210px;border-radius:12px;background:#df564e;color:#fff;text-decoration:none;font-weight:900;padding:13px 18px;box-shadow:0 8px 18px rgba(223,86,78,.2)}.resume-map-link b{font-size:18px;line-height:1}.resume-map-panel iframe{display:block;width:100%;height:340px;border:0;background:#eef2f7}.resume-safety-note{margin:0;padding:18px 24px;border-top:1px solid #e5e7eb;color:#b42318;background:#fff7f6;font-weight:800}
@media(max-width:1100px){.resume-country-bar{grid-template-columns:1fr}.resume-country-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.resume-card{grid-template-columns:1fr}.resume-profile-panel{border-right:0;border-bottom:1px solid #e5e7eb}.resume-form-columns,.resume-map-panel{grid-template-columns:1fr}.resume-form-columns article+article{border-left:0;border-top:1px solid #e5e7eb}}
@media(max-width:640px){.resume-map-head{grid-template-columns:1fr;gap:16px}.resume-map-link{width:100%;min-width:0}.resume-map-panel iframe{height:280px}.resume-address-hero{padding:30px 22px}.resume-country-list{grid-template-columns:1fr}.resume-actions{align-items:stretch;flex-direction:column}.resume-actions>div:last-child{flex-direction:column}.resume-form-panel{padding:16px}.resume-form-row{grid-template-columns:1fr 24px;gap:5px;padding:11px 0}.resume-form-row span{grid-column:1 / -1}.resume-photo{width:160px;height:200px}}


.subprice-hero{margin:34px auto 16px;max-width:1180px;border-radius:34px;padding:54px;background:radial-gradient(circle at 82% 18%,rgba(45,212,191,.34),transparent 32%),linear-gradient(135deg,#07111f,#10243d 55%,#173f3a);color:#fff;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;overflow:hidden}.subprice-hero h1{font-size:clamp(42px,6vw,82px);line-height:.95;letter-spacing:-.06em;margin:10px 0 18px}.subprice-hero p:not(.eyebrow){max-width:760px;color:#dce8f8;font-size:1.08rem}.subprice-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.subprice-badges span{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.1);padding:10px 14px;border-radius:999px;font-weight:800}.subprice-hero-stack{display:grid;grid-template-columns:repeat(2,96px);gap:14px;transform:rotate(-5deg)}.subprice-hero-stack strong{height:96px;border-radius:28px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);box-shadow:0 24px 70px rgba(0,0,0,.24);font-size:1.55rem}.subprice-shell{max-width:1180px;margin:0 auto 70px;background:#f8fafc;border:1px solid #dbe6f2;border-radius:30px;padding:24px;box-shadow:0 24px 80px rgba(15,23,42,.08)}.subprice-controls{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:18px}.subprice-controls label,.subprice-controls>div{display:grid;gap:8px;color:#52627a;font-weight:800}.subprice-controls select{min-width:260px;border:1px solid #cdd9e8;border-radius:18px;padding:14px 16px;background:#fff;font-weight:900;color:#0f172a}.subprice-toggle{display:flex;background:#e8eef6;border:1px solid #d4dfec;border-radius:18px;padding:5px}.subprice-toggle button,.subprice-tabs button{border:0;background:transparent;border-radius:14px;padding:11px 16px;font-weight:900;color:#53657d;cursor:pointer}.subprice-toggle button.active,.subprice-tabs button.active{background:#0f172a;color:#fff;box-shadow:0 10px 24px rgba(15,23,42,.18)}.subprice-tabs{display:flex;gap:10px;overflow:auto;padding:6px 0 18px}.subprice-tabs button{background:#fff;border:1px solid #dbe6f2;white-space:nowrap}.subprice-section-title{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:10px 0 18px}.subprice-section-title span{color:#2563eb;font-weight:1000;text-transform:uppercase;font-size:.8rem;letter-spacing:.08em}.subprice-section-title h2{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.05em;margin:4px 0 0}.subprice-section-title b{background:#fff;border:1px solid #dbe6f2;border-radius:999px;padding:12px 16px}.subprice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.subprice-card{background:#fff;border:1px solid #dbe6f2;border-radius:26px;padding:20px;display:grid;gap:10px;min-height:285px;box-shadow:0 20px 60px rgba(15,23,42,.07)}.subprice-card-top{display:flex;justify-content:space-between;align-items:start}.subprice-logo,.subprice-mini{background:linear-gradient(135deg,var(--brand),#0f172a);color:#fff;display:grid;place-items:center;font-weight:1000;box-shadow:0 16px 34px color-mix(in srgb,var(--brand),transparent 65%)}.subprice-logo{width:74px;height:74px;border-radius:23px;font-size:1.15rem}.subprice-mini{width:38px;height:38px;border-radius:13px;font-size:.72rem}.subprice-card em{font-style:normal;text-transform:uppercase;font-size:.72rem;font-weight:1000;color:#2563eb;background:#eff6ff;border-radius:999px;padding:7px 10px}.subprice-card h3{font-size:1.65rem;margin:4px 0 -4px;letter-spacing:-.04em}.subprice-card p{font-weight:850;color:#53657d;margin:0}.subprice-price{font-size:clamp(24px,3vw,38px);letter-spacing:-.05em;color:#0f172a}.subprice-price small{font-size:.85rem;color:#64748b;letter-spacing:0}.subprice-usd{font-weight:900;color:#0f766e}.subprice-meter{height:9px;background:#e8eef6;border-radius:999px;overflow:hidden}.subprice-meter i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#2563eb);border-radius:inherit}.subprice-card small{color:#64748b;line-height:1.45}.subprice-card a,.subprice-table a{color:#0f172a;font-weight:900;text-decoration:none}.subprice-table-wrap{margin-top:22px;background:#fff;border:1px solid #dbe6f2;border-radius:26px;padding:20px;overflow:auto}.subprice-table-wrap h2{margin:0 0 14px;letter-spacing:-.04em}.subprice-table{width:100%;border-collapse:collapse;min-width:760px}.subprice-table th{text-align:left;color:#64748b;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}.subprice-table th,.subprice-table td{padding:14px;border-bottom:1px solid #e5edf5}.subprice-table td:first-child{display:flex;align-items:center;gap:10px}.subprice-note{margin:18px 0 0;padding:16px 18px;border-radius:20px;background:#fff7ed;color:#9a3412;font-weight:850;line-height:1.55}@media(max-width:860px){.subprice-hero{grid-template-columns:1fr;padding:34px 24px;border-radius:26px}.subprice-hero-stack{grid-template-columns:repeat(4,1fr);transform:none}.subprice-hero-stack strong{height:64px;border-radius:18px}.subprice-controls{display:grid;align-items:stretch}.subprice-controls select{min-width:0;width:100%}.subprice-grid{grid-template-columns:1fr}.subprice-section-title{align-items:start;display:grid}.subprice-shell{padding:16px;border-radius:24px}}

.subprice-logo,
.subprice-mini {
  background: #ffffff;
  border: 1px solid #dbe6f2;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  position: relative;
}
.subprice-logo img,
.subprice-mini img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  z-index: 1;
}
.subprice-logo b,
.subprice-mini b {
  color: #0f172a;
  display: none;
  font-size: 0.75rem;
  font-weight: 1000;
}
.subprice-logo img[data-hidden="true"] + b,
.subprice-mini img[data-hidden="true"] + b {
  display: block;
}
.subprice-logo img[hidden] + b,
.subprice-mini img[hidden] + b {
  display: block;
}

.subprice-plan-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 38px;
}
.subprice-plan-tabs button {
  background: #f8fafc;
  border: 1px solid #dbe6f2;
  border-radius: 999px;
  color: #475569;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  min-height: 32px;
  padding: 8px 11px;
}
.subprice-plan-tabs button.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
}

.morse-hero{max-width:1180px;margin:34px auto 16px;border-radius:36px;padding:48px;background:radial-gradient(circle at 78% 16%,rgba(255,210,77,.38),transparent 30%),radial-gradient(circle at 18% 92%,rgba(51,195,240,.22),transparent 34%),linear-gradient(135deg,#090b10,#162033 58%,#342711);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:center;overflow:hidden}.morse-hero h1{font-size:clamp(40px,6vw,78px);line-height:.92;letter-spacing:-.065em;margin:10px 0 18px}.morse-hero p:not(.eyebrow){max-width:720px;color:#e6eef8;font-size:1.08rem;line-height:1.7}.morse-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.morse-preset{border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-weight:950;padding:12px 16px}.morse-preset.emergency{background:#ffd84d;color:#111827;border-color:#ffd84d;box-shadow:0 14px 36px rgba(255,216,77,.24)}.morse-beacon-preview{min-height:300px;border:1px solid rgba(255,255,255,.17);border-radius:34px;background:rgba(0,0,0,.24);display:grid;place-items:center;text-align:center;position:relative;box-shadow:inset 0 0 60px rgba(255,255,255,.04);padding:24px}.morse-beacon-preview span{width:138px;height:138px;border-radius:999px;background:#fff;box-shadow:0 0 38px rgba(255,255,255,.34);transition:.08s}.morse-beacon-preview span.signal-on{transform:scale(1.05)}.morse-beacon-preview b{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.04em;line-height:1;word-break:break-word}.morse-beacon-preview small{color:#ffd84d;font-weight:950;letter-spacing:.08em;word-break:break-word}.morse-shell{max-width:1180px;margin:0 auto 72px;border:1px solid #dbe6f2;border-radius:30px;background:#f8fafc;padding:24px;box-shadow:0 24px 80px rgba(15,23,42,.08)}.morse-warning{border-radius:20px;background:#fff7ed;color:#9a3412;font-weight:900;line-height:1.55;padding:15px 18px;margin-bottom:16px}.morse-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.morse-mode button{border:1px solid #dbe6f2;border-radius:18px;background:#fff;color:#44546a;cursor:pointer;font-weight:950;padding:14px}.morse-mode button.active{background:#0f172a;color:#fff;border-color:#0f172a;box-shadow:0 12px 30px rgba(15,23,42,.18)}.morse-workspace{display:grid;grid-template-columns:1fr 1fr;gap:16px}.morse-panel{border:1px solid #dbe6f2;border-radius:26px;background:#fff;padding:18px;box-shadow:0 16px 42px rgba(15,23,42,.06)}.morse-panel.result{background:linear-gradient(180deg,#fff,#f9fbff)}.morse-panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}.morse-panel-head label{font-size:1.05rem;font-weight:1000;color:#0f172a}.morse-panel-head span{color:#64748b;font-size:.82rem;font-weight:850}.morse-panel textarea{width:100%;min-height:280px;border:0;border-radius:20px;background:#f1f5f9;color:#0f172a;font-size:1.22rem;font-weight:800;line-height:1.75;padding:18px;resize:vertical;outline:none}.morse-panel textarea:focus{box-shadow:0 0 0 4px rgba(245,158,11,.18);background:#fff}.morse-mini-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}.morse-mini-actions button,.morse-fullscreen,.morse-stop{border:1px solid #dbe6f2;border-radius:14px;background:#fff;color:#334155;cursor:pointer;font-weight:900;padding:11px 14px}.morse-controls{display:grid;grid-template-columns:1.4fr .75fr .75fr auto;gap:12px;align-items:end;margin:16px 0}.morse-controls label{display:grid;gap:8px;border:1px solid #dbe6f2;border-radius:18px;background:#fff;padding:12px 14px;color:#475569;font-weight:900}.morse-controls input[type=range]{width:100%;accent-color:#f59e0b}.morse-controls input[type=color]{width:100%;height:42px;border:0;border-radius:12px;background:#e2e8f0;padding:3px}.morse-check{display:flex!important;align-items:center;gap:9px;min-height:68px}.morse-check input{width:20px;height:20px;accent-color:#f59e0b}.morse-sendbar{position:sticky;bottom:12px;z-index:5;display:grid;grid-template-columns:1.4fr auto auto minmax(120px,.45fr);gap:10px;align-items:center;border:1px solid rgba(15,23,42,.08);border-radius:24px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);padding:12px;box-shadow:0 18px 52px rgba(15,23,42,.16)}.morse-start{border:0;border-radius:18px;background:linear-gradient(135deg,#facc15,#f97316);color:#111827;cursor:pointer;font-size:1.06rem;font-weight:1000;padding:17px 20px;box-shadow:0 16px 35px rgba(249,115,22,.25)}.morse-start:disabled,.morse-stop:disabled{opacity:.48;cursor:not-allowed}.morse-stop{background:#111827;color:#fff;border-color:#111827}.morse-sendbar span{color:#475569;font-weight:950;text-align:center}.morse-flash-stage{position:fixed;inset:0;z-index:2000;background:#000;color:#fff;display:none;place-items:center;text-align:center;overflow:hidden}.morse-flash-stage.active{display:grid}.morse-stage-light{width:min(72vw,520px);height:min(72vw,520px);border-radius:999px;transition:background 40ms linear,box-shadow 40ms linear,transform 80ms linear}.morse-flash-stage.is-on .morse-stage-light{transform:scale(1.04)}.morse-flash-stage strong{position:absolute;bottom:104px;font-size:clamp(46px,13vw,138px);letter-spacing:-.06em;line-height:.92;text-shadow:0 8px 28px rgba(0,0,0,.45);max-width:92vw;word-break:break-word}.morse-flash-stage span{position:absolute;bottom:42px;max-width:94vw;color:rgba(255,255,255,.84);font-size:clamp(16px,4vw,34px);font-weight:900;letter-spacing:.08em;word-break:break-word}.morse-flash-stage button{position:absolute;right:18px;top:18px;width:54px;height:54px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:32px;line-height:1}
@media(max-width:880px){.morse-hero{grid-template-columns:1fr;padding:32px 22px;border-radius:26px}.morse-beacon-preview{min-height:250px}.morse-workspace,.morse-controls,.morse-sendbar{grid-template-columns:1fr}.morse-panel textarea{min-height:230px;font-size:1.18rem}.morse-sendbar{bottom:8px}.morse-start,.morse-stop,.morse-fullscreen{width:100%;min-height:58px}.morse-mode{grid-template-columns:1fr}.morse-shell{padding:16px;border-radius:24px}.morse-hero-actions button{flex:1;min-width:110px}.morse-controls label{min-height:auto}.morse-check{min-height:0}}

.morse-hero-card{min-height:260px;border:1px solid rgba(255,255,255,.18);border-radius:34px;background:rgba(0,0,0,.24);display:grid;place-items:center;text-align:center;padding:26px;box-shadow:inset 0 0 70px rgba(255,255,255,.05)}.morse-hero-card b{font-size:clamp(3rem,7vw,6rem);letter-spacing:-.07em}.morse-hero-card span{color:#ffd84d;font-size:1.18rem;font-weight:1000;letter-spacing:.1em;word-break:break-word}.morse-hero-card small{color:#dbeafe;font-weight:900}.morse-signal-pad{margin:16px 0;border-radius:30px;min-height:360px;background:#000;color:#fff;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;border:1px solid rgba(15,23,42,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 55px rgba(15,23,42,.16)}.morse-pad-light{width:min(54vw,330px);height:min(54vw,330px);border-radius:999px;background:transparent;transition:background 40ms linear,box-shadow 40ms linear,transform 80ms linear}.morse-pad-light.signal-on{transform:scale(1.04)}.morse-signal-pad strong{position:absolute;bottom:74px;max-width:92%;font-size:clamp(42px,11vw,118px);line-height:.9;letter-spacing:-.06em;text-shadow:0 10px 34px rgba(0,0,0,.55);word-break:break-word}.morse-signal-pad span{position:absolute;bottom:26px;max-width:94%;color:rgba(255,255,255,.82);font-size:clamp(15px,3.5vw,28px);font-weight:950;letter-spacing:.08em;word-break:break-word}.morse-signal-pad.is-on strong{color:#fff}.morse-panel textarea#morseCodeInput{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;letter-spacing:.04em}
@media(max-width:880px){.morse-hero-card{min-height:180px;border-radius:24px}.morse-signal-pad{min-height:300px;border-radius:24px}.morse-pad-light{width:min(70vw,280px);height:min(70vw,280px)}.morse-signal-pad strong{bottom:66px}.morse-signal-pad span{bottom:22px}.morse-panel textarea#morseCodeInput{font-size:1.28rem;line-height:1.9}}
@media(max-width:880px){.morse-hero{padding:20px;margin:14px auto 8px}.morse-hero h1{font-size:clamp(32px,10vw,46px);margin:6px 0 10px}.morse-hero p:not(.eyebrow){display:none}.morse-hero-card{display:none}.morse-hero-actions{margin-top:14px}.morse-shell{margin-bottom:44px}.morse-warning{font-size:.9rem;padding:12px 14px}.morse-signal-pad{margin:0 0 14px}}

.morse-workspace.decode .code-panel{order:1}.morse-workspace.decode .text-panel{order:2}.morse-workspace.encode .text-panel{order:1}.morse-workspace.encode .code-panel{order:2}.morse-workspace{align-items:stretch}.morse-panel{display:flex;flex-direction:column;min-height:460px}.morse-panel textarea{flex:1;min-height:330px}.morse-text-preview{display:none;margin:0 0 16px;border:1px solid #dbe6f2;border-radius:24px;background:#0b1220;color:#fff;padding:18px 20px;box-shadow:0 18px 46px rgba(15,23,42,.14)}.morse-text-preview.active{display:block}.morse-text-preview span{display:block;color:#93c5fd;font-weight:950;font-size:.86rem;margin-bottom:8px}.morse-text-preview strong{display:block;font-size:clamp(30px,6vw,64px);line-height:1.05;letter-spacing:-.04em;word-break:break-word}.morse-sendbar{grid-template-columns:1.35fr auto minmax(120px,.45fr)}.morse-start.is-playing{background:linear-gradient(135deg,#111827,#991b1b);color:#fff;box-shadow:0 16px 35px rgba(153,27,27,.24)}.morse-fullscreen{background:#000;color:#fff;border-color:#000}.morse-flash-stage{background:#000}
@media(max-width:880px){.morse-panel{min-height:auto}.morse-panel textarea{min-height:260px}.morse-workspace.decode .code-panel,.morse-workspace.decode .text-panel,.morse-workspace.encode .text-panel,.morse-workspace.encode .code-panel{order:initial}.morse-workspace.decode{display:flex;flex-direction:column}.morse-workspace.decode .code-panel{order:1}.morse-workspace.decode .text-panel{order:2}.morse-workspace.encode{display:flex;flex-direction:column}.morse-workspace.encode .text-panel{order:1}.morse-workspace.encode .code-panel{order:2}.morse-text-preview{padding:16px;border-radius:20px}.morse-sendbar{grid-template-columns:1fr}.morse-fullscreen{min-height:58px}}

.morse-signal-pad{background:#000;transition:background 36ms linear,box-shadow 36ms linear,transform 80ms linear}.morse-signal-pad.is-on{box-shadow:inset 0 0 0 9999px rgba(255,255,255,.02),0 0 42px rgba(255,255,255,.38),0 20px 70px rgba(15,23,42,.24);transform:translateY(-1px)}.morse-current-word{margin:0 0 16px;border:1px solid #dbe6f2;border-radius:24px;background:linear-gradient(180deg,#fff,#eef6ff);padding:18px;text-align:center;box-shadow:0 14px 38px rgba(15,23,42,.08)}.morse-current-word span{display:block;color:#2563eb;font-size:.86rem;font-weight:1000;letter-spacing:.08em;margin-bottom:8px}.morse-current-word strong{display:block;color:#0f172a;font-size:clamp(32px,7vw,78px);line-height:1;letter-spacing:-.055em;word-break:break-word}.morse-fullscreen{font-size:1.05rem;font-weight:1000;padding:17px 20px;box-shadow:0 16px 35px rgba(15,23,42,.18)}.morse-flash-stage{transition:background 36ms linear}
@media(max-width:880px){.morse-signal-pad{min-height:340px}.morse-current-word{padding:16px;border-radius:20px}.morse-current-word strong{font-size:clamp(36px,13vw,70px)}.morse-fullscreen{min-height:64px;font-size:1.1rem}}

.morse-pad-fullscreen{position:absolute;right:18px;bottom:18px;z-index:3;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.12);color:#fff;box-shadow:0 16px 34px rgba(0,0,0,.28)}
.morse-stage-controls{position:absolute;left:50%;bottom:28px;z-index:4;display:flex;gap:12px;transform:translateX(-50%)}
.morse-flash-stage .morse-stage-controls button{position:static;width:auto;height:58px;border-radius:999px;font-size:1.08rem;font-weight:1000;line-height:1;padding:0 24px;backdrop-filter:blur(12px)}
.morse-flash-stage .morse-stage-toggle{min-width:156px;background:rgba(255,255,255,.92);color:#050505;border-color:rgba(255,255,255,.75)}
.morse-flash-stage .morse-stage-toggle.is-playing{background:rgba(153,27,27,.92);color:#fff;border-color:rgba(255,255,255,.28)}
.morse-flash-stage .morse-stage-close{min-width:58px;background:rgba(0,0,0,.42);color:#fff}
.morse-flash-stage strong{bottom:118px}.morse-flash-stage span{bottom:88px}
@media(max-width:880px){.morse-pad-fullscreen{right:12px;bottom:12px;width:auto;min-height:46px;padding:12px 14px}.morse-stage-controls{bottom:18px;width:calc(100% - 28px);justify-content:center}.morse-flash-stage .morse-stage-controls button{height:54px;padding:0 18px}.morse-flash-stage .morse-stage-toggle{flex:1;min-width:0}.morse-flash-stage .morse-stage-close{width:54px;min-width:54px}.morse-flash-stage strong{bottom:108px}.morse-flash-stage span{bottom:78px}}

.morse-sendbar{grid-template-columns:minmax(0,1fr);padding:10px;border-radius:22px}
.morse-sendbar span{display:none}
.morse-start{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px}
.morse-start::before{content:"";width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid currentColor}
.morse-start.is-playing::before{width:14px;height:16px;border:0;background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64% 100%)}
.morse-pad-fullscreen{display:grid;place-items:center;width:54px;height:54px;min-height:0;padding:0;border-radius:16px;background:rgba(255,255,255,.14);font-size:0}
.fullscreen-icon{display:block;width:24px;height:24px;background:linear-gradient(currentColor,currentColor) 0 0/10px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 0/2px 10px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/10px 2px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/2px 10px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/10px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/2px 10px no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/10px 2px no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/2px 10px no-repeat}
.morse-stage-controls{bottom:26px;gap:10px}
.morse-flash-stage .morse-stage-controls button{display:grid;place-items:center;width:64px;height:64px;min-width:0;padding:0;border-radius:18px}
.morse-flash-stage .morse-stage-toggle{background:rgba(255,255,255,.94);color:#050505}
.morse-flash-stage .morse-stage-toggle.is-playing{background:rgba(255,255,255,.94);color:#050505}
.play-icon{width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:18px solid currentColor;transform:translateX(2px)}
.morse-stage-toggle.is-playing .play-icon{width:18px;height:22px;border:0;background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64% 100%);transform:none}
.close-icon{position:relative;display:block;width:24px;height:24px}
.close-icon::before,.close-icon::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:2px;background:currentColor;border-radius:999px}
.close-icon::before{transform:translate(-50%,-50%) rotate(45deg)}
.close-icon::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media(max-width:880px){.morse-pad-fullscreen{right:12px;bottom:12px;width:50px;min-height:0;height:50px;padding:0}.morse-stage-controls{width:auto;bottom:18px}.morse-flash-stage .morse-stage-controls button{width:58px;height:58px;padding:0}.morse-flash-stage .morse-stage-toggle{flex:initial}}

.morse-signal-pad .morse-pad-fullscreen{position:absolute;right:16px;bottom:16px;top:auto;left:auto;display:grid;place-items:center;width:52px;height:52px;min-height:0;padding:0;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.34);box-shadow:none;line-height:1}
.morse-flash-stage .morse-stage-controls{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;transform:none;pointer-events:none}
.morse-flash-stage .morse-stage-toggle{pointer-events:auto;display:grid;place-items:center;width:86px;height:86px;min-width:0;padding:0;border-radius:24px;background:rgba(255,255,255,.94);color:#050505;border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 60px rgba(0,0,0,.36)}
.morse-flash-stage .morse-stage-toggle.is-playing{background:rgba(255,255,255,.94);color:#050505}
.morse-flash-stage .morse-stage-close{pointer-events:auto;position:absolute;right:24px;top:24px;display:grid;place-items:center;width:54px;height:54px;min-width:0;padding:0;border-radius:16px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:none}
@media(max-width:880px){.morse-signal-pad .morse-pad-fullscreen{right:12px;bottom:12px;width:48px;height:48px}.morse-flash-stage .morse-stage-toggle{width:78px;height:78px}.morse-flash-stage .morse-stage-close{right:14px;top:14px;width:50px;height:50px}}

.morse-flash-stage .morse-stage-controls .morse-stage-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;min-width:0;padding:0}
.morse-flash-stage .morse-stage-controls .morse-stage-close{position:absolute;right:24px;top:24px;left:auto;bottom:auto;width:54px;height:54px;min-width:0;padding:0}
@media(max-width:880px){.morse-flash-stage .morse-stage-controls .morse-stage-toggle{width:78px;height:78px}.morse-flash-stage .morse-stage-controls .morse-stage-close{right:14px;top:14px;width:50px;height:50px}}

.morse-icon{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.morse-pad-fullscreen .morse-icon{width:25px;height:25px}
.morse-stage-toggle .pause-svg{display:none}
.morse-stage-toggle.is-playing .play-svg{display:none}
.morse-stage-toggle.is-playing .pause-svg{display:block}
.morse-flash-stage .morse-stage-controls{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;transform:none}
.morse-flash-stage .morse-stage-controls .morse-stage-toggle,.morse-flash-stage .morse-stage-controls .morse-stage-close{position:absolute;top:18px;display:grid;place-items:center;width:52px;height:52px;min-width:0;padding:0;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.24);box-shadow:none;pointer-events:auto;backdrop-filter:blur(10px);transform:none}
.morse-flash-stage .morse-stage-controls .morse-stage-toggle{right:78px;left:auto}
.morse-flash-stage .morse-stage-controls .morse-stage-close{right:18px;left:auto;bottom:auto}
.morse-flash-stage .morse-stage-controls .morse-stage-toggle.is-playing{background:rgba(255,255,255,.16);color:#fff}
.morse-flash-stage .morse-stage-controls button span,.morse-flash-stage .fullscreen-icon,.morse-flash-stage .play-icon,.morse-flash-stage .close-icon{display:none!important}
@media(max-width:880px){.morse-flash-stage .morse-stage-controls .morse-stage-toggle,.morse-flash-stage .morse-stage-controls .morse-stage-close{top:12px;width:48px;height:48px}.morse-flash-stage .morse-stage-controls .morse-stage-toggle{right:66px}.morse-flash-stage .morse-stage-controls .morse-stage-close{right:12px}}

.morse-flash-stage .morse-stage-controls .morse-stage-toggle,.morse-flash-stage .morse-stage-controls .morse-stage-close{top:22px;width:64px;height:64px;border-radius:18px;background:rgba(3,7,18,.9);color:#fff;border:2px solid rgba(255,255,255,.72);box-shadow:0 0 0 2px rgba(0,0,0,.42),0 16px 42px rgba(0,0,0,.55);backdrop-filter:blur(8px)}
.morse-flash-stage .morse-stage-controls .morse-stage-toggle{right:100px}
.morse-flash-stage .morse-stage-controls .morse-stage-close{right:22px}
.morse-flash-stage .morse-stage-controls .morse-stage-toggle.is-playing{background:rgba(3,7,18,.9);color:#fff;border-color:rgba(255,255,255,.72)}
.morse-flash-stage .morse-stage-controls .morse-icon{width:31px;height:31px;stroke-width:2.6;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9))}
@media(max-width:880px){.morse-flash-stage .morse-stage-controls .morse-stage-toggle,.morse-flash-stage .morse-stage-controls .morse-stage-close{top:14px;width:58px;height:58px;border-radius:16px}.morse-flash-stage .morse-stage-controls .morse-stage-toggle{right:82px}.morse-flash-stage .morse-stage-controls .morse-stage-close{right:14px}.morse-flash-stage .morse-stage-controls .morse-icon{width:28px;height:28px}}

.converter-hero{max-width:1180px;margin:34px auto 18px;border-radius:38px;padding:46px;background:radial-gradient(circle at 15% 18%,rgba(20,184,166,.34),transparent 30%),radial-gradient(circle at 82% 8%,rgba(251,191,36,.28),transparent 28%),linear-gradient(135deg,#07111f,#0f2d3b 58%,#183b2f);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:34px;align-items:center;overflow:hidden}.converter-hero h1{font-size:clamp(38px,6vw,74px);line-height:.94;letter-spacing:-.065em;margin:10px 0 18px}.converter-hero p:not(.eyebrow){max-width:760px;color:#d8f5ef;font-size:1.08rem;line-height:1.7}.converter-hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.converter-hero-badges span{border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.1);padding:10px 14px;font-weight:1000;text-transform:uppercase;letter-spacing:.04em}.converter-orbit{min-height:300px;border:1px solid rgba(255,255,255,.16);border-radius:34px;background:rgba(0,0,0,.22);position:relative;display:grid;place-items:center;box-shadow:inset 0 0 80px rgba(255,255,255,.06)}.converter-orbit strong{width:132px;height:132px;border-radius:34px;background:linear-gradient(135deg,#eafff9,#7dd3fc);color:#082f49;display:grid;place-items:center;font-size:2rem;font-weight:1000;box-shadow:0 26px 60px rgba(14,165,233,.26)}.converter-orbit b{position:absolute;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.13);padding:12px 16px;font-size:.94rem}.converter-orbit b:nth-child(1){left:28px;top:38px}.converter-orbit b:nth-child(2){right:34px;top:58px}.converter-orbit b:nth-child(3){left:46px;bottom:54px}.converter-orbit b:nth-child(5){right:32px;bottom:48px}.converter-orbit b:nth-child(6){top:22px;left:50%;transform:translateX(-50%)}.converter-shell{max-width:1180px;margin:0 auto 42px;display:grid;grid-template-columns:minmax(0,1.25fr) 330px 300px;gap:16px;align-items:start}.converter-main,.converter-panel,.converter-format-card{border:1px solid #dbe7ee;border-radius:28px;background:rgba(255,255,255,.92);box-shadow:0 24px 70px rgba(15,23,42,.10);padding:18px}.converter-dropzone{min-height:280px;border:2px dashed #9fc8d8;border-radius:26px;background:linear-gradient(180deg,#f8fdff,#eef9f5);display:grid;place-items:center;text-align:center;gap:10px;cursor:pointer;padding:28px;transition:.18s ease}.converter-dropzone.dragging{transform:translateY(-2px);border-color:#14b8a6;background:#ecfdf5;box-shadow:0 18px 45px rgba(20,184,166,.18)}.converter-dropzone input{display:none}.converter-drop-icon{width:72px;height:72px;border-radius:24px;background:#062f34;color:#a7f3d0;display:grid;place-items:center}.converter-drop-icon svg{width:40px;height:40px}.converter-dropzone strong{font-size:1.35rem;color:#102033}.converter-dropzone small{color:#517083;font-weight:850}.converter-dropzone em{border-radius:999px;background:#102033;color:#fff;font-style:normal;font-weight:1000;padding:12px 18px}.converter-status{margin:14px 0;border-radius:22px;padding:16px 18px;display:grid;gap:4px;border:1px solid #dbe7ee;background:#f8fafc}.converter-status span,.converter-output-head span,.converter-format-card>div span,.converter-preview-grid article>span{color:#64748b;font-size:.82rem;font-weight:1000;text-transform:uppercase;letter-spacing:.08em}.converter-status strong{font-size:1.5rem;color:#0f172a}.converter-status small{font-weight:900}.converter-status.fast{border-color:#86efac;background:#f0fdf4}.converter-status.limited{border-color:#fde68a;background:#fffbeb}.converter-status.heavy{border-color:#fdba74;background:#fff7ed}.converter-status.blocked{border-color:#fecaca;background:#fef2f2}.converter-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.converter-preview-grid article{border:1px solid #e2e8f0;border-radius:24px;background:#f8fafc;padding:12px;min-height:250px;display:grid;grid-template-rows:auto 1fr;gap:10px}.converter-preview-empty,.converter-preview-live{border-radius:18px;background:#eaf1f5;color:#425466;display:grid;place-items:center;text-align:center;min-height:198px;overflow:hidden;font-weight:900;padding:16px}.converter-preview-empty b{display:block;font-size:1.18rem;color:#0f172a}.converter-preview-empty small,.converter-preview-empty em{display:block;color:#64748b;font-style:normal;margin-top:6px}.converter-preview-empty.busy{background:linear-gradient(135deg,#ecfeff,#fef3c7);animation:converterPulse 1.1s ease-in-out infinite alternate}.converter-preview-empty.error{background:#fef2f2;color:#991b1b}.converter-preview-live{position:relative;padding:0;background:#0f172a}.converter-preview-live img{width:100%;height:100%;max-height:260px;object-fit:contain}.converter-preview-live span{position:absolute;left:10px;right:10px;bottom:10px;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;padding:8px 11px;font-size:.78rem}.converter-output-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.converter-output-head small{font-weight:950;color:#0f766e}.converter-targets{display:grid;gap:10px}.converter-targets button{border:1px solid #dbe7ee;border-radius:18px;background:#f8fafc;color:#0f172a;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;padding:15px 16px}.converter-targets button.active{border-color:#14b8a6;background:#ecfdf5;box-shadow:0 12px 32px rgba(20,184,166,.14)}.converter-targets b{font-size:1.12rem}.converter-targets small{color:#64748b;font-weight:850}.converter-quality,.converter-guard{margin-top:14px;border:1px solid #dbe7ee;border-radius:18px;background:#fff;display:grid;gap:10px;padding:14px}.converter-quality span{font-weight:950;color:#334155}.converter-quality input{width:100%;accent-color:#14b8a6}.converter-guard{grid-template-columns:auto 1fr;align-items:start}.converter-guard input{width:21px;height:21px;accent-color:#14b8a6;margin-top:2px}.converter-guard b,.converter-guard small{display:block}.converter-guard small{color:#64748b;line-height:1.5}.converter-limits{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.converter-limits span{border-radius:18px;background:#0f172a;color:#fff;padding:14px}.converter-limits b,.converter-limits em{display:block}.converter-limits b{font-size:.78rem;color:#9fb3c8;text-transform:uppercase}.converter-limits em{font-style:normal;font-size:1.2rem;font-weight:1000;margin-top:5px}.converter-convert,.converter-download,.converter-reset{width:100%;border:0;border-radius:18px;min-height:56px;font-size:1rem;font-weight:1000;display:grid;place-items:center;text-decoration:none;cursor:pointer}.converter-convert{background:linear-gradient(135deg,#14b8a6,#22c55e);color:#04120e;box-shadow:0 18px 44px rgba(20,184,166,.22)}.converter-convert:disabled{opacity:.48;cursor:not-allowed}.converter-download{margin-top:10px;background:#0f172a;color:#fff}.converter-download.disabled{opacity:.42;pointer-events:none}.converter-reset{margin-top:10px;background:#edf4f7;color:#334155}.converter-format-card>div{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:12px}.converter-format-card strong{font-size:1.5rem;color:#0f172a}.converter-format-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:690px;overflow:auto}.converter-format{border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc;display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 12px}.converter-format span b,.converter-format span small{display:block}.converter-format span b{color:#0f172a}.converter-format span small{color:#64748b;font-size:.78rem;font-weight:850}.converter-format em{font-style:normal;border-radius:999px;background:#e2e8f0;color:#475569;font-size:.75rem;font-weight:950;padding:6px 9px;white-space:nowrap}.converter-format.fast.active{border-color:#22c55e;background:#ecfdf5}.converter-format.limited.active{border-color:#f59e0b;background:#fffbeb}.converter-format.heavy.active{border-color:#f97316;background:#fff7ed}.converter-format.active em{background:#16a34a;color:#fff}@keyframes converterPulse{from{filter:saturate(1)}to{filter:saturate(1.25);transform:translateY(-1px)}}@media(max-width:1080px){.converter-shell{grid-template-columns:1fr 330px}.converter-format-card{grid-column:1/-1}.converter-format-card ul{grid-template-columns:repeat(3,1fr);max-height:none}}@media(max-width:880px){.converter-hero{grid-template-columns:1fr;margin:14px auto 10px;padding:24px 20px;border-radius:26px}.converter-hero h1{font-size:clamp(34px,10vw,52px)}.converter-orbit{display:none}.converter-shell{grid-template-columns:1fr;gap:12px}.converter-main,.converter-panel,.converter-format-card{border-radius:22px;padding:14px}.converter-preview-grid{grid-template-columns:1fr}.converter-dropzone{min-height:230px}.converter-format-card ul{grid-template-columns:1fr 1fr}.converter-targets button{padding:14px}.converter-limits{grid-template-columns:1fr 1fr}}@media(max-width:520px){.converter-format-card ul{grid-template-columns:1fr}.converter-limits{grid-template-columns:1fr}.converter-hero-badges span{flex:1;text-align:center}.converter-preview-grid article{min-height:210px}}

/* Calendar country picker visibility fix */
.calendar-hero{overflow:visible}
.calendar-now,.calendar-country-select,.country-combobox{position:relative;z-index:30}
.country-menu{border-radius:18px;box-shadow:0 28px 70px rgba(4,18,34,.38);gap:6px;max-height:min(404px,calc(100vh - 150px));padding:10px;z-index:2000}
.country-menu button{min-height:58px;padding:10px 12px}
.country-menu button>span{font-size:.86rem}
.country-menu button>small{font-size:.68rem}
.country-menu button>i img{height:24px;max-width:32px}
@media(max-width:700px){.country-menu{max-height:min(430px,70vh)}.country-menu button{min-height:60px}}

/* Image converter UX cleanup */
.converter-hero{grid-template-columns:1fr!important;padding:42px 44px!important;background:radial-gradient(circle at 10% 10%,rgba(34,197,94,.22),transparent 28%),radial-gradient(circle at 86% 20%,rgba(14,165,233,.24),transparent 32%),linear-gradient(135deg,#07131f,#10312f 62%,#172b43)!important}
.converter-hero p:not(.eyebrow){max-width:840px!important}
.converter-hero-badges,.converter-orbit{display:none!important}
.converter-hero-steps{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.converter-hero-steps span{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.12);padding:10px 14px;font-weight:950;color:#f8fafc;backdrop-filter:blur(10px)}
.converter-hero-steps b{display:grid;place-items:center;width:25px;height:25px;border-radius:999px;background:#f8fafc;color:#0f2d3b;font-size:.84rem}
.converter-shell{grid-template-columns:minmax(0,1fr) 360px!important;gap:18px!important}
.converter-main{grid-row:1 / span 2}
.converter-panel{grid-column:2}
.converter-format-card{grid-column:2}
.converter-format-card>div{display:grid!important;gap:6px!important;align-items:start!important;justify-content:stretch!important}
.converter-format-card>div small{color:#64748b;font-weight:850;line-height:1.45}
.converter-format-card ul{grid-template-columns:1fr!important;max-height:430px!important;overflow:auto!important;padding-right:4px!important}
.converter-format{min-height:58px}
.converter-format.active{box-shadow:0 12px 28px rgba(34,197,94,.18)}
.converter-format.active span b{color:#14532d}
.converter-format.active em{background:#16a34a!important;color:#fff!important}
@media(max-width:980px){.converter-shell{grid-template-columns:1fr!important}.converter-main,.converter-panel,.converter-format-card{grid-column:1!important;grid-row:auto!important}.converter-format-card ul{max-height:360px!important}}
@media(max-width:620px){.converter-hero{padding:28px 20px!important}.converter-hero-steps{display:grid;grid-template-columns:1fr}.converter-hero-steps span{justify-content:flex-start}.converter-format-card ul{max-height:330px!important}}
.converter-hero h1{font-size:clamp(40px,5.2vw,66px)!important;line-height:1.03!important;word-break:keep-all;overflow-wrap:normal}
.converter-main{grid-column:1!important;grid-row:1!important}
.converter-panel{grid-column:2!important;grid-row:1!important}
.converter-format-card{grid-column:1 / -1!important;grid-row:2!important}
.converter-result-only{grid-template-columns:1fr!important}
.converter-result-panel{min-height:320px!important}
.converter-input-preview[hidden]{display:none!important}
.converter-drop-limits{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:2px}
.converter-drop-limits b{border-radius:999px;background:#dff7ef;color:#0f5132;font-size:.82rem;font-weight:1000;padding:8px 11px}
.converter-status strong{font-size:clamp(1.35rem,3vw,2rem)!important;word-break:keep-all}
.converter-status small{color:#475569;line-height:1.65}
.converter-format-card{padding:22px!important}
.converter-format-card>div{grid-template-columns:1fr!important;margin-bottom:16px!important}
.converter-format-card ul{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))!important;max-height:none!important;overflow:visible!important;gap:10px!important;padding-right:0!important}
.converter-format{min-height:66px!important;border-radius:18px!important;padding:13px 14px!important}
.converter-format.active{border-color:#16a34a!important;background:linear-gradient(180deg,#ecfdf5,#dcfce7)!important;box-shadow:0 16px 34px rgba(22,163,74,.18)!important}
.converter-format.active::after{content:"";border-radius:999px;background:#16a34a;color:#fff;font-size:.72rem;font-weight:1000;padding:6px 8px}
.converter-format.active em{display:none}
.converter-convert{font-size:1.12rem!important;min-height:62px!important}
.converter-download{min-height:62px!important;background:linear-gradient(135deg,#0f172a,#1e3a8a)!important}
.converter-download:not(.disabled){box-shadow:0 18px 42px rgba(30,58,138,.22)}
@media(max-width:980px){.converter-main,.converter-panel,.converter-format-card{grid-column:1!important;grid-row:auto!important}.converter-format-card ul{grid-template-columns:repeat(auto-fit,minmax(124px,1fr))!important;max-height:none!important}}
@media(max-width:560px){.converter-format-card ul{grid-template-columns:1fr 1fr!important}.converter-drop-limits{display:grid;grid-template-columns:1fr 1fr;width:100%}.converter-drop-limits b{text-align:center}}

/* Image converter uploaded-file workflow */
.converter-format.active::after{content:"";border-radius:999px;background:#16a34a;color:#fff;font-size:.72rem;font-weight:1000;padding:6px 8px}
.converter-dropzone.has-file{min-height:148px!important;grid-template-columns:auto minmax(0,1fr) auto!important;place-items:stretch!important;align-items:center!important;text-align:left!important;border-style:solid!important;background:linear-gradient(135deg,#ffffff,#f0fdf4)!important}
.converter-file-icon{display:grid;place-items:center;width:70px;height:70px;border-radius:22px;background:#0f312c;color:#bbf7d0;box-shadow:0 14px 36px rgba(15,49,44,.16)}
.converter-file-icon svg{width:38px;height:38px}
.converter-file-copy{display:grid;gap:9px;min-width:0}
.converter-file-copy strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#0f172a;font-size:clamp(1.15rem,2.4vw,1.65rem);letter-spacing:-.03em}
.converter-file-copy small{display:flex;flex-wrap:wrap;gap:8px;color:#64748b;font-weight:950}
.converter-file-copy small b,.converter-file-copy small i,.converter-file-copy small em{border-radius:999px;padding:7px 10px;font-style:normal;line-height:1;background:#e2e8f0;color:#334155}
.converter-file-copy small b{background:#dcfce7;color:#166534}
.converter-file-action{justify-self:end;border-radius:999px;background:#0f172a;color:#fff;font-weight:1000;padding:11px 14px;white-space:nowrap}
.converter-file-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:6px 0 2px}
.converter-file-facts span{display:grid!important;gap:5px;border:1px solid #dbe7ee;border-radius:16px;background:#fff;padding:11px 12px;min-width:0;text-transform:none!important;letter-spacing:0!important}
.converter-file-facts b{color:#64748b;font-size:.76rem;font-weight:1000}
.converter-file-facts em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#0f172a;font-style:normal;font-size:.96rem;font-weight:1000}
.converter-status{overflow:hidden}
@media(max-width:720px){.converter-dropzone.has-file{grid-template-columns:auto minmax(0,1fr)!important}.converter-file-action{grid-column:1/-1;justify-self:stretch;text-align:center}.converter-file-facts{grid-template-columns:1fr}.converter-file-copy strong{white-space:normal}}

/* Image converter final flow cleanup */
.converter-flow{grid-column:1/-1;display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:center;gap:8px;border:1px solid #dbe7ee;border-radius:26px;background:rgba(255,255,255,.92);box-shadow:0 18px 54px rgba(15,23,42,.08);padding:14px}
.converter-flow span{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:18px;background:#f1f5f9;color:#64748b;min-height:54px;font-weight:1000}
.converter-flow span b{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#dbe7ee;color:#334155}
.converter-flow span em{font-style:normal;white-space:nowrap}
.converter-flow i{height:3px;border-radius:999px;background:#cbd5e1;position:relative}
.converter-flow i::after{content:"";position:absolute;right:-1px;top:50%;width:9px;height:9px;border-top:3px solid #cbd5e1;border-right:3px solid #cbd5e1;transform:translateY(-50%) rotate(45deg)}
.converter-flow span:first-child,.converter-flow.has-file span:nth-of-type(2),.converter-flow.converting span:nth-of-type(3),.converter-flow.done span:nth-of-type(3){background:#ecfdf5;color:#14532d}
.converter-flow span:first-child b,.converter-flow.has-file span:nth-of-type(2) b,.converter-flow.converting span:nth-of-type(3) b,.converter-flow.done span:nth-of-type(3) b{background:#16a34a;color:#fff}
.converter-flow.has-file i:first-of-type,.converter-flow.converting i,.converter-flow.done i{background:#16a34a}
.converter-flow.has-file i:first-of-type::after,.converter-flow.converting i::after,.converter-flow.done i::after{border-color:#16a34a}
.converter-format em{display:none!important}
.converter-format{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important}
.converter-format.active::after{content:""!important;white-space:nowrap!important;word-break:keep-all!important;min-width:max-content!important;line-height:1!important}
.converter-file-copy small em{display:none!important}
.converter-file-facts + small:empty{display:none!important}
@media(max-width:720px){.converter-flow{grid-template-columns:1fr;gap:8px}.converter-flow i{display:none}.converter-flow span{justify-content:flex-start;padding:0 14px}}

/* Image converter three-card conversion lane */
.converter-shell{grid-template-columns:minmax(0,1fr) 320px minmax(0,1fr)!important;align-items:stretch!important}
.converter-flow{grid-column:1/-1!important;grid-row:1!important}
.converter-main{grid-column:1!important;grid-row:2!important;display:grid;gap:14px;align-content:start}
.converter-panel{grid-column:2!important;grid-row:2!important;display:grid;align-content:start}
.converter-result-card{grid-column:3!important;grid-row:2!important;border:1px solid #dbe7ee;border-radius:28px;background:rgba(255,255,255,.92);box-shadow:0 24px 70px rgba(15,23,42,.10);padding:18px;display:grid;grid-template-rows:1fr auto auto;gap:10px}
.converter-format-card{grid-column:1/-1!important;grid-row:3!important}
.converter-result-card .converter-preview-grid{height:100%}
.converter-result-card .converter-result-panel{min-height:100%!important}
.converter-result-card .converter-preview-empty,.converter-result-card .converter-preview-live{min-height:360px}
.converter-dropzone.has-file{min-height:170px!important}
.converter-status{margin:0!important}
.converter-panel .converter-convert{margin-top:14px}
.converter-result-card .converter-download{margin-top:0!important}
.converter-result-card .converter-reset{margin-top:0!important}
@media(max-width:1120px){.converter-shell{grid-template-columns:1fr!important}.converter-flow,.converter-main,.converter-panel,.converter-result-card,.converter-format-card{grid-column:1!important;grid-row:auto!important}.converter-result-card .converter-preview-empty,.converter-result-card .converter-preview-live{min-height:260px}}

/* Compact output-format picker */
.converter-output-head small,.converter-targets button small{display:none!important}
.converter-targets{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
.converter-targets button{justify-content:center!important;text-align:center!important;min-height:54px!important;padding:12px 8px!important}

/* Image converter card-contained steps */
.converter-shell{grid-template-columns:minmax(0,1.08fr) minmax(300px,.88fr) minmax(0,1.08fr)!important;align-items:start!important}
.converter-flow{display:none!important}
.converter-main,.converter-panel,.converter-result-card{grid-row:1!important;align-self:start!important}
.converter-main{grid-column:1!important;gap:12px!important}
.converter-panel{grid-column:2!important}
.converter-result-card{grid-column:3!important;grid-template-rows:auto auto auto auto!important}
.converter-format-card{grid-row:2!important}
.converter-card-heading{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:#0f172a;font-size:1.02rem;font-weight:1000}
.converter-card-heading b{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:#16a34a;color:#fff;font-size:.9rem;box-shadow:0 8px 20px rgba(22,163,74,.2)}
.converter-card-heading span{letter-spacing:-.02em}
.converter-dropzone.has-file{min-height:0!important;padding:20px!important}
.converter-file-copy strong{overflow:visible!important;text-overflow:clip!important;white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;line-height:1.12!important;max-width:100%!important}
.converter-file-action{align-self:center!important}
.converter-status{padding:16px!important}
.converter-file-facts{grid-template-columns:minmax(105px,.8fr) minmax(105px,.8fr) minmax(180px,1.5fr)!important}
.converter-file-facts em{overflow:visible!important;text-overflow:clip!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.35!important}
.converter-output-head{margin-bottom:10px!important}
.converter-quality,.converter-guard{margin-top:12px!important}
.converter-panel .converter-convert{margin-top:12px!important}
.converter-result-card .converter-preview-grid{height:auto!important}
.converter-result-card .converter-result-panel{min-height:0!important}
.converter-result-card .converter-preview-empty,.converter-result-card .converter-preview-live{min-height:300px!important}
.converter-convert,.converter-download{min-height:58px!important;background:linear-gradient(135deg,#0f9f79,#22c55e)!important;color:#fff!important;box-shadow:0 14px 34px rgba(16,185,129,.22)!important}
.converter-convert:disabled,.converter-download.disabled{box-shadow:none!important}
.converter-reset{min-height:52px!important;background:#edf4f2!important;color:#155e4d!important}
@media(max-width:1120px){.converter-shell{grid-template-columns:1fr!important}.converter-main,.converter-panel,.converter-result-card,.converter-format-card{grid-column:1!important;grid-row:auto!important}.converter-result-card .converter-preview-empty,.converter-result-card .converter-preview-live{min-height:260px!important}}
@media(max-width:720px){.converter-dropzone.has-file{grid-template-columns:70px minmax(0,1fr)!important;align-items:center!important;padding:18px!important}.converter-file-copy{align-self:center!important}.converter-file-copy strong{font-size:clamp(1.35rem,6vw,1.75rem)!important;line-height:1.08!important}.converter-file-action{grid-column:1/-1!important;justify-self:stretch!important;text-align:center!important;margin-top:2px!important}.converter-file-facts{grid-template-columns:1fr!important}}

/* Image converter final polish v185 */
.converter-dropzone.has-file{grid-template-columns:70px minmax(0,1fr)!important;align-items:center!important;gap:14px!important;padding:18px!important}
.converter-file-icon{grid-column:1!important;grid-row:1!important;width:70px!important;height:70px!important;align-self:center!important}
.converter-file-copy{grid-column:2!important;grid-row:1!important;min-width:0!important;align-self:center!important}
.converter-file-copy strong{display:block!important;max-width:100%!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;line-height:1.12!important;font-size:clamp(1.28rem,2.25vw,1.72rem)!important;letter-spacing:-.045em!important}
.converter-file-copy small{gap:8px!important;margin-top:2px!important}
.converter-file-action{grid-column:1/-1!important;grid-row:2!important;justify-self:stretch!important;text-align:center!important;border-radius:16px!important;margin-top:2px!important}
.converter-file-facts{grid-template-columns:minmax(92px,.58fr) minmax(0,1.42fr)!important;gap:10px!important}
.converter-file-facts span{min-height:70px!important;align-content:start!important;overflow:hidden!important}
.converter-file-facts em{display:block!important;max-width:100%!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.28!important;font-size:.92rem!important}
.converter-output-head small,.converter-targets button small,.converter-format span small,.converter-format em{display:none!important}
.converter-targets{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
.converter-targets button{position:relative!important;justify-content:center!important;text-align:center!important;min-height:54px!important;padding:12px 8px!important;border-radius:16px!important;overflow:hidden!important}
.converter-targets button b,.converter-format b{display:block!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#0f172a!important;font-weight:1000!important}
.converter-targets button.active{border-color:#14b8a6!important;background:#ecfdf5!important;box-shadow:0 12px 28px rgba(20,184,166,.16)!important}
.converter-targets button.active::after{content:""!important;position:absolute!important;right:10px!important;top:10px!important;width:9px!important;height:9px!important;border-radius:999px!important;background:#16a34a!important;box-shadow:0 0 0 4px rgba(22,163,74,.12)!important}
.converter-format-card ul{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))!important;gap:10px!important}
.converter-format{position:relative!important;display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;min-height:66px!important;padding:13px 16px!important;overflow:hidden!important}
.converter-format span{min-width:0!important}
.converter-format.active{border-color:#16a34a!important;background:linear-gradient(180deg,#ecfdf5,#f7fffb)!important;box-shadow:0 12px 28px rgba(22,163,74,.14)!important}
.converter-format.active::after{content:""!important;display:block!important;width:11px!important;height:11px!important;border-radius:999px!important;background:#16a34a!important;box-shadow:0 0 0 5px rgba(22,163,74,.12)!important;min-width:11px!important;padding:0!important}
.converter-preview-empty.busy{position:relative!important;display:grid!important;place-items:center!important;gap:10px!important;background:radial-gradient(circle at 50% 42%,rgba(20,184,166,.16),transparent 32%),linear-gradient(135deg,#ecfeff,#f8fafc)!important;color:#0f172a!important;animation:none!important}
.converter-preview-empty.busy::before,.converter-busy-ring{content:"";display:block;width:46px;height:46px;border-radius:999px;border:5px solid rgba(20,184,166,.16);border-top-color:#14b8a6;border-right-color:#22c55e;animation:converterSpin .85s linear infinite;box-shadow:0 10px 24px rgba(20,184,166,.18)}
.converter-preview-empty.busy:has(.converter-busy-ring)::before{display:none!important}
.converter-preview-empty.busy b{font-size:1.15rem!important;color:#0f172a!important}
.converter-preview-empty.busy small{max-width:90%!important;text-align:center!important;color:#475569!important;line-height:1.45!important}
.converter-preview-live.preview-proxy span{background:rgba(15,23,42,.88)!important;white-space:normal!important;line-height:1.35!important;border-radius:14px!important}
@keyframes converterSpin{to{transform:rotate(360deg)}}
@media(max-width:720px){.converter-dropzone.has-file{grid-template-columns:64px minmax(0,1fr)!important}.converter-file-icon{width:64px!important;height:64px!important}.converter-file-facts{grid-template-columns:1fr!important}.converter-targets{grid-template-columns:repeat(2,minmax(0,1fr))!important}.converter-format-card ul{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* MP4 to MP3 converter */
.mp4-audio-hero{max-width:1180px;margin:34px auto 18px;border-radius:38px;padding:46px;background:radial-gradient(circle at 18% 16%,rgba(34,197,94,.32),transparent 32%),radial-gradient(circle at 82% 18%,rgba(56,189,248,.25),transparent 30%),linear-gradient(135deg,#08111f,#10243c 56%,#0d332b);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:center;overflow:hidden}.mp4-audio-hero h1{font-size:clamp(38px,6vw,72px);line-height:.94;letter-spacing:-.065em;margin:10px 0 18px}.mp4-audio-hero p:not(.eyebrow){max-width:760px;color:#dceeff;font-size:1.08rem;line-height:1.7}.mp4-audio-badge{min-height:220px;border:1px solid rgba(255,255,255,.16);border-radius:32px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;gap:16px;box-shadow:inset 0 0 70px rgba(255,255,255,.06)}.mp4-audio-badge b{display:grid;place-items:center;width:92px;height:92px;border-radius:28px;background:#eafff6;color:#0f312c;font-size:1.35rem;font-weight:1000}.mp4-audio-badge span{width:64px;height:4px;border-radius:999px;background:#22c55e;position:relative}.mp4-audio-badge span:after{content:"";position:absolute;right:-2px;top:50%;width:12px;height:12px;border-top:4px solid #22c55e;border-right:4px solid #22c55e;transform:translateY(-50%) rotate(45deg)}.mp4-audio-shell{max-width:1180px;margin:0 auto 42px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.78fr) minmax(0,1fr);gap:16px;align-items:start}.mp4-audio-card{border:1px solid #dbe7ee;border-radius:28px;background:rgba(255,255,255,.94);box-shadow:0 24px 70px rgba(15,23,42,.1);padding:18px;display:grid;gap:14px}.mp4-audio-card h2{display:flex;align-items:center;gap:10px;color:#0f172a;font-size:1.05rem;font-weight:1000;margin:0}.mp4-audio-card h2 span{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:#16a34a;color:#fff;font-size:.9rem}.mp4-audio-dropzone{min-height:280px;border:2px dashed #9fc8d8;border-radius:26px;background:linear-gradient(180deg,#f8fdff,#eef9f5);display:grid;place-items:center;text-align:center;gap:10px;cursor:pointer;padding:28px;transition:.18s ease}.mp4-audio-dropzone.dragging{transform:translateY(-2px);border-color:#14b8a6;background:#ecfdf5;box-shadow:0 18px 45px rgba(20,184,166,.18)}.mp4-audio-dropzone input{display:none}.mp4-audio-icon,.mp4-audio-file-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:24px;background:#0f312c;color:#bbf7d0;box-shadow:0 14px 36px rgba(15,49,44,.16)}.mp4-audio-icon svg,.mp4-audio-file-icon svg{width:42px;height:42px}.mp4-audio-dropzone strong{font-size:clamp(1.25rem,2.4vw,1.7rem);color:#102033;line-height:1.12}.mp4-audio-dropzone small{color:#517083;font-weight:850;line-height:1.5}.mp4-audio-dropzone em,.mp4-audio-dropzone.has-file>em{border-radius:999px;background:#102033;color:#fff;font-style:normal;font-weight:1000;padding:12px 18px}.mp4-audio-dropzone.has-file{min-height:170px;grid-template-columns:76px minmax(0,1fr);text-align:left;place-items:stretch;align-items:center;border-style:solid;background:linear-gradient(135deg,#fff,#f0fdf4)}.mp4-audio-dropzone.has-file>em{grid-column:1/-1;text-align:center;border-radius:16px}.mp4-audio-file-copy{display:grid;gap:8px;min-width:0}.mp4-audio-file-copy b{font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.12;overflow-wrap:anywhere;color:#0f172a}.mp4-audio-file-copy small{justify-self:start;border-radius:999px;background:#e2e8f0;color:#334155;padding:7px 10px}.mp4-audio-info{border:1px solid #dbe7ee;border-radius:20px;background:#f8fafc;padding:16px;display:grid;gap:12px;overflow:hidden}.mp4-audio-info.ready{border-color:#86efac;background:#f0fdf4}.mp4-audio-info strong{font-size:1.1rem;color:#0f172a}.mp4-audio-info small{color:#64748b;font-weight:850}.mp4-audio-info div{display:grid;grid-template-columns:.65fr .65fr 1.4fr;gap:10px}.mp4-audio-info span{border:1px solid #dbe7ee;border-radius:16px;background:#fff;padding:11px 12px;display:grid;gap:5px;min-width:0}.mp4-audio-info b{color:#64748b;font-size:.76rem}.mp4-audio-info em{font-style:normal;font-weight:1000;color:#0f172a;overflow-wrap:anywhere}.mp4-audio-bitrates{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mp4-audio-bitrates button{border:1px solid #dbe7ee;border-radius:18px;background:#f8fafc;cursor:pointer;padding:14px;text-align:left;color:#0f172a}.mp4-audio-bitrates button.active{border-color:#14b8a6;background:#ecfdf5;box-shadow:0 12px 28px rgba(20,184,166,.14)}.mp4-audio-bitrates b,.mp4-audio-bitrates span{display:block}.mp4-audio-bitrates b{font-size:1.08rem}.mp4-audio-bitrates span{color:#64748b;font-weight:850;margin-top:4px}.mp4-audio-control-card p{border:1px solid #dbe7ee;border-radius:18px;background:#fff;padding:14px;color:#475569;line-height:1.55;font-weight:850;margin:0}.mp4-audio-convert,.mp4-audio-download,.mp4-audio-reset{border:0;border-radius:18px;min-height:58px;display:grid;place-items:center;text-decoration:none;font-weight:1000;cursor:pointer}.mp4-audio-convert,.mp4-audio-download{background:linear-gradient(135deg,#0f9f79,#22c55e);color:#fff;box-shadow:0 14px 34px rgba(16,185,129,.22)}.mp4-audio-convert:disabled,.mp4-audio-download.disabled{background:#cbd5e1;color:#64748b;box-shadow:none;pointer-events:none}.mp4-audio-reset{background:#edf4f2;color:#155e4d}.mp4-audio-result{border-radius:22px;background:#0f172a;color:#fff;min-height:300px;padding:20px;display:grid;place-items:center;text-align:center;gap:10px;align-content:center;overflow:hidden}.mp4-audio-result.empty{background:#eaf1f5;color:#425466}.mp4-audio-result.empty strong{color:#0f172a}.mp4-audio-result.done{background:linear-gradient(135deg,#ecfdf5,#f8fafc);color:#0f172a;border:1px solid #bbf7d0}.mp4-audio-result.error{background:#fef2f2;color:#991b1b}.mp4-audio-result audio{width:min(100%,420px)}.mp4-audio-result small{color:inherit;opacity:.75;font-weight:850;line-height:1.45}.mp4-audio-spinner{display:block;width:48px;height:48px;border-radius:999px;border:5px solid rgba(20,184,166,.16);border-top-color:#14b8a6;border-right-color:#22c55e;animation:converterSpin .85s linear infinite;box-shadow:0 10px 24px rgba(20,184,166,.18)}@media(max-width:1120px){.mp4-audio-hero,.mp4-audio-shell{grid-template-columns:1fr}.mp4-audio-badge{min-height:160px}.mp4-audio-result{min-height:240px}}@media(max-width:720px){.mp4-audio-hero{border-radius:28px;padding:30px 22px}.mp4-audio-card{border-radius:22px}.mp4-audio-dropzone.has-file{grid-template-columns:64px minmax(0,1fr)}.mp4-audio-file-icon{width:64px;height:64px}.mp4-audio-info div,.mp4-audio-bitrates{grid-template-columns:1fr}.mp4-audio-badge b{width:76px;height:76px}.mp4-audio-badge span{width:42px}}