/* Letras Diferentes — previous indigo/purple theme
   Canvas: slate | Accents: indigo + purple/pink
   Type: Outfit (display) + Plus Jakarta Sans (UI)
*/
:root {
  --ink: #0f172a;
  --ink-soft: #1e293b;
  --canvas: #f8fafc;
  --canvas-2: #f1f5f9;
  --surface: #ffffff;
  --line: #e2e8f0;
  --muted: #64748b;
  --text: #0f172a;
  --indigo: #4f46e5;
  --indigo-deep: #4338ca;
  --purple: #7c3aed;
  --pink: #ec4899;
  --indigo-soft: #eef2ff;
  --pink-soft: #fdf2f8;
  --shadow: 0 12px 40px rgba(15, 23, 42, .08);
  --shadow-card: 0 8px 28px rgba(15, 23, 42, .07);
  --radius: 16px;
  --radius-sm: 12px;
  --font-ui: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-display: "Outfit", "Plus Jakarta Sans", sans-serif;
  --wrap: 1120px;
  --sticky-h: 72px;
  --space-section: 2.25rem;
  --space-block: 1rem;
  --text-body: .95rem;
  --text-small: .82rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(79, 70, 229, .12), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(236, 72, 153, .10), transparent 50%),
    linear-gradient(180deg, #f7fafc 0%, var(--canvas) 40%, var(--canvas-2) 100%);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pink); }
button, input, textarea { font: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff;
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
  overflow-x: visible;
}

/* —— Buttons —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 0; border-radius: 999px; padding: .7rem 1.15rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  color: #fff; box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
}
.btn-primary:hover { color: #fff; }
.btn-ghost {
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
}
.btn-ghost.is-on {
  border-color: var(--indigo); background: var(--indigo-soft); color: var(--indigo-deep);
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { color: #fff; background: var(--ink-soft); }
.icon-btn {
  width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; color: var(--text);
}
.icon-btn:hover { border-color: var(--indigo); color: var(--indigo-deep); }
.linkish {
  background: none; border: 0; color: var(--indigo-deep); font-weight: 600; cursor: pointer; padding: 0;
}

/* —— Tool hero —— */
.tool-hero { padding: 1.25rem 0 .85rem; }
.tool-hero-head { text-align: center; max-width: 34rem; margin: 0 auto 1rem; }
.brand-kicker {
  display: inline-flex; margin: 0 0 .45rem; padding: .28rem .7rem; border-radius: 999px;
  background: var(--indigo-soft); color: var(--indigo-deep); border: 1px solid #c7d2fe;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.tool-hero-head h1 {
  font-family: var(--font-display); font-size: clamp(1.85rem, 4.5vw, 2.6rem); line-height: 1.08;
  letter-spacing: -.03em; margin: 0 0 .4rem; color: var(--ink);
}
.tool-hero-head .hero-sub { margin: 0; color: var(--muted); font-size: clamp(.9rem, 2vw, 1rem); }

#sticky-sentinel { height: 1px; width: 100%; pointer-events: none; }
.sticky-dock {
  position: sticky; top: 0; z-index: 50;
  margin: 0 0 .85rem;
}
.sticky-dock.is-stuck .tool-panel {
  box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
  border-color: #c7d2fe;
}
body.has-stuck-dock { /* spacer handled by sticky itself */ }

.tool-panel {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: .75rem .8rem .7rem;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .05);
  transition: box-shadow .2s ease, border-color .2s ease;
}
@media (min-width: 640px) {
  .tool-panel { padding: .85rem 1rem .8rem; }
}

.input-block { margin-bottom: .65rem; }
.input-row { position: relative; }
#text-input {
  width: 100%;
  border: 2px solid #1e293b;
  border-radius: 12px;
  padding: .7rem 2.6rem .7rem 2.4rem;
  font-size: .95rem;
  font-weight: 500;
  background: #fff;
  color: var(--text);
  outline: none;
  min-height: 2.75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#text-input:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.input-pencil {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: #94a3b8; pointer-events: none; display: inline-flex;
}
#clear-btn {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
}

.tabs {
  display: flex; flex-wrap: nowrap; gap: .4rem; align-items: center;
  overflow-x: auto; padding-bottom: .15rem; margin: 0; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: .4rem .75rem; font-size: .76rem; font-weight: 700; cursor: pointer; white-space: nowrap; min-height: 2.1rem;
  color: var(--ink); transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tabs button:hover { border-color: var(--indigo); color: var(--indigo-deep); background: var(--indigo-soft); }
.tabs button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.style-list { display: flex; flex-direction: column; gap: .5rem; }
.style-row {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: .55rem 5.6rem .55rem .7rem;
  min-height: 3.35rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.style-row:hover { border-color: #94a3b8; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
.style-row.is-fav-row { border-color: #f9a8d4; }
.style-row.is-copied { border-color: var(--indigo); background: #f8faff; }
.style-row-text {
  margin: 0; border: 0; background: transparent; cursor: pointer;
  font-size: clamp(.98rem, 2.4vw, 1.15rem); font-weight: 700; color: var(--ink);
  line-height: 1.35; word-break: break-word; text-align: center; width: 100%;
  padding: .35rem .2rem; font-family: inherit;
  display: block;
}
.style-row-text:hover { color: var(--indigo-deep); }
.style-row-actions {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: .15rem;
}
.row-btn {
  width: 2.05rem; height: 2.05rem; border-radius: 999px; border: 1px solid transparent; background: transparent;
  color: #94a3b8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.row-btn:hover { color: var(--indigo-deep); background: var(--indigo-soft); border-color: #c7d2fe; }
.row-btn.fav-btn.is-fav { color: #e11d48; }
.row-btn.copy-btn.is-on,
.style-row.is-copied .copy-btn { color: #059669; }

@media (max-width: 520px) {
  .style-row {
    padding: .55rem 5.2rem .55rem .5rem;
    min-height: 3.1rem;
  }
  .style-row-text { font-size: 1rem; padding: .25rem .1rem; }
  .row-btn { width: 1.85rem; height: 1.85rem; }
  .style-row-actions { right: .25rem; gap: .05rem; }
  #text-input {
    padding: .62rem 2.4rem .62rem 2.2rem;
    font-size: .9rem;
    min-height: 2.55rem;
  }
  .tool-panel { padding: .65rem .65rem .6rem; border-radius: 14px; }
}

.load-more-wrap { text-align: center; margin: 1rem 0 .2rem; }
.load-more-wrap .btn { min-width: 11rem; }
.empty-state {
  text-align: center; padding: 2rem 1rem; border: 1px dashed var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.badge {
  display: inline-flex; align-items: center; font-size: .62rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; background: var(--pink-soft); color: var(--pink); border-radius: 999px; padding: .12rem .42rem;
}

/* legacy bottom sticky removed visually */
.sticky-bar { display: none !important; }

/* —— Article content —— */
.article-flow { padding: 1.75rem 0 3.5rem; }
.content-section { margin: 0 0 var(--space-section); }
.closing-note {
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 1.75rem 0 0;
  margin-top: .25rem;
}
.closing-note h2 { color: var(--ink); }
.closing-note p {
  color: var(--muted);
  max-width: 42rem;
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.65;
}
.content-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.4vw, 1.7rem);
  margin: 0 0 .65rem; letter-spacing: -.015em; color: var(--ink); line-height: 1.2;
}
.content-section h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--ink);
}
.section-intro { margin: 0 0 var(--space-block); color: var(--muted); font-size: var(--text-body); line-height: 1.65; }
.intro-block h2 { margin-bottom: .85rem; }
.intro-block p { color: var(--muted); margin: 0 0 .85rem; font-size: var(--text-body); line-height: 1.65; }

.steps { display: grid; gap: .65rem; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem 1rem;
}
.step-num {
  width: 2rem; height: 2rem; border-radius: 8px;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem;
  background: linear-gradient(135deg, var(--indigo), var(--indigo-deep)); color: #fff;
}
.step h3 { margin: 0 0 .25rem; font-size: 1rem; }
.step p { margin: 0; font-size: var(--text-small); color: var(--muted); line-height: 1.55; }

.about-grid, .popular-grid, .types-grid, .pillars, .problems, .tips-grid {
  display: grid; gap: 1.15rem;
  padding: 18px;
  margin: -18px;
}
.platform-grid { display: flex; flex-direction: column; gap: 1.15rem; }
@media (min-width: 700px) {
  .about-grid, .popular-grid, .types-grid, .tips-grid, .pillars, .problems {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 980px) {
  .popular-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.35rem 1.2rem 1.25rem;
  box-shadow: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.popular-grid .card,
.types-grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}
.popular-grid .card > .example,
.types-grid .card > .example,
.popular-grid .card > .sample-row,
.types-grid .card > .sample-row {
  margin-top: auto;
}
.card:hover {
  z-index: 3;
  border-color: #c7d2fe;
  box-shadow:
    0 0 0 1px rgba(79, 70, 229, .12),
    0 0 14px rgba(79, 70, 229, .14);
}
.panel-dark .card {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  color: #e8eef4;
}
.panel-dark .card:hover {
  z-index: 3;
  background: rgba(255,255,255,.1);
  border-color: rgba(165, 180, 252, .35);
  box-shadow:
    0 0 0 1px rgba(165, 180, 252, .14),
    0 0 14px rgba(99, 102, 241, .2);
}
.panel-dark .card h3 { color: #fff; }
.panel-dark .card p { color: #c5d0dc; }
.card-icon {
  width: auto; height: auto; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .75rem;
  background: transparent; color: var(--indigo);
  box-shadow: none;
  transition: transform .28s ease;
}
.card-icon svg {
  width: 2rem; height: 2rem; display: block;
  stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .12));
}
.card:hover .card-icon {
  transform: none;
  box-shadow: none;
}
/* 4 accent icon colors only — no background tiles (competitor style) */
.card-icon.tone-a,
.card-icon.tone-spark,
.card-icon.tone-box,
.card-icon.tone-mono,
.card-icon.tone-pin,
.card-icon.tone-caps { background: transparent; color: #f59e0b; }

.card-icon.tone-b,
.card-icon.tone-copy,
.card-icon.tone-gem,
.card-icon.tone-moon,
.card-icon.tone-bold,
.card-icon.tone-math,
.card-icon.tone-ig { background: transparent; color: #4f46e5; }

.card-icon.tone-c,
.card-icon.tone-bubble,
.card-icon.tone-wa,
.card-icon.tone-small,
.card-icon.tone-script,
.card-icon.tone-italic { background: transparent; color: #0d9488; }

.card-icon.tone-d,
.card-icon.tone-cute,
.card-icon.tone-pen,
.card-icon.tone-gothic,
.card-icon.tone-game,
.card-icon.tone-fire,
.card-icon.tone-ff,
.card-icon.tone-fancy { background: transparent; color: #e11d48; }
.panel-dark .card-icon {
  box-shadow: none;
  filter: none;
}
.panel-dark .card-icon svg {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.card h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-family: var(--font-display); letter-spacing: -.02em; }
.card p { margin: 0; font-size: var(--text-small); color: var(--muted); line-height: 1.6; }

.example {
  margin-top: .85rem; display: flex; gap: .5rem; align-items: center;
  background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .6rem;
}
.panel-dark .example { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.08); }
.example code {
  flex: 1; font-family: inherit; font-size: .95rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--ink);
}
.panel-dark .example code { color: #fff; }
.example button, .sample-row button {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: .4rem .8rem; font-size: .75rem; font-weight: 800; cursor: pointer; color: var(--indigo-deep);
  min-height: 2.1rem; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.example button:hover, .sample-row button:hover {
  background: var(--indigo); color: #fff; border-color: var(--indigo);
}
.panel-dark .example button { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.sample-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.noscript-box {
  margin: .75rem 0; padding: 1rem 1.1rem; border: 1px dashed #c7d2fe; border-radius: var(--radius-sm);
  background: var(--indigo-soft); color: var(--ink-soft); font-size: var(--text-small);
}
.noscript-box p { margin: 0 0 .45rem; }
.noscript-box p:last-child { margin: 0; color: var(--muted); }

.platform-card {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1.15rem;
  overflow: hidden;
}
.platform-copy { min-width: 0; }
.platform-visual {
  display: flex; justify-content: center; align-items: center;
  perspective: 800px;
}
.platform-visual img {
  width: min(100%, 280px);
  border-radius: 22px;
  filter: drop-shadow(0 22px 36px rgba(15, 23, 42, .22));
  transition: transform .4s ease, filter .4s ease;
}
.platform-card:hover .platform-visual img {
  transform: translateY(-10px) rotate(-2.5deg);
  filter: drop-shadow(0 28px 42px rgba(79, 70, 229, .28));
}
.platform-card.is-flip:hover .platform-visual img {
  transform: translateY(-10px) rotate(2.5deg);
}
@media (min-width: 700px) {
  .platform-card {
    grid-template-columns: 1.08fr .92fr;
    gap: 1.6rem 2rem;
    padding: 1.5rem 1.5rem 1.4rem;
  }
  .platform-card.is-flip .platform-copy { order: 2; }
  .platform-card.is-flip .platform-visual { order: 1; }
  .platform-visual img { width: min(100%, 300px); }
}
.platform-extra { margin-top: 0; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .card, .card-icon, .platform-visual img {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

.unicode-list { display: grid; gap: .75rem; }
.unicode-list article {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
}
.unicode-list p { margin: 0; }

.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .9rem 1.05rem; margin-bottom: .55rem; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq details[open] { border-color: #c7d2fe; box-shadow: 0 6px 18px rgba(79, 70, 229, .06); }
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--ink);
  font-family: var(--font-display); font-size: 1rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: .65rem 0 0; color: var(--muted); font-size: var(--text-body); line-height: 1.6; }

/* —— Social simulator (real-device phone + app screens) —— */
.social-sim { padding: 0; background: transparent; border: 0; box-shadow: none; }
.social-sim-head { margin: 0 0 1rem; max-width: 40rem; }
.social-sim-eyebrow {
  display: inline-flex; margin: 0 0 .55rem; padding: .28rem .7rem; border-radius: 999px;
  background: var(--indigo-soft); border: 1px solid #c7d2fe;
  color: var(--indigo-deep); font-size: .72rem; font-weight: 800;
}
.social-sim h2 { color: var(--ink); margin: 0 0 .45rem; }
.social-sim-head > p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.social-tabs {
  display: flex; gap: .4rem; justify-content: center; flex-wrap: nowrap; overflow-x: auto;
  margin: 0 0 1.25rem; padding-bottom: .2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.social-tabs::-webkit-scrollbar { display: none; }
.social-tab {
  flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: .5rem .95rem; font-size: .78rem; font-weight: 700; cursor: pointer;
  min-height: 2.4rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.social-tab.is-active { color: #fff; }
.social-tab.is-active.is-ig {
  background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af, #515bd4); border-color: transparent;
  box-shadow: 0 8px 18px rgba(221, 42, 123, .22);
}
.social-tab.is-active.is-fb { background: #1877f2; border-color: transparent; box-shadow: 0 8px 18px rgba(24, 119, 242, .22); }
.social-tab.is-active.is-wa { background: #25d366; color: #053d22; border-color: transparent; box-shadow: 0 8px 18px rgba(37, 211, 102, .22); }
.social-tab.is-active.is-ff { background: #ff9f1a; color: #1a0b00; border-color: transparent; box-shadow: 0 8px 18px rgba(255, 159, 26, .22); }

.phone-wrap {
  display: flex; justify-content: center; width: 100%;
  padding: .35rem 12px 1rem;
}
.phone-chassis {
  width: min(100%, 340px);
  height: min(82vh, 720px);
  background: linear-gradient(160deg, #d7d7de 0%, #6a6a72 12%, #2c2c30 40%, #0c0c0e 100%);
  border-radius: 48px;
  padding: 12px;
  border: 1px solid #8e8e96;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.22),
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 -4px 10px rgba(0,0,0,.5),
    0 28px 56px rgba(15, 23, 42, .32);
}
@media (min-width: 700px) {
  .phone-chassis {
    width: min(100%, 360px);
    height: min(84vh, 760px);
    border-radius: 52px;
    padding: 13px;
  }
}
.phone-btn {
  position: absolute; background: linear-gradient(90deg, #7a7a82, #4a4a50); z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-silent { left: -3px; top: 100px; width: 3px; height: 22px; border-radius: 2px 0 0 2px; }
.btn-vol-up { left: -3px; top: 140px; width: 3px; height: 36px; border-radius: 2px 0 0 2px; }
.btn-vol-down { left: -3px; top: 184px; width: 3px; height: 36px; border-radius: 2px 0 0 2px; }
.btn-power { right: -3px; top: 168px; width: 3px; height: 64px; border-radius: 0 2px 2px 0; }
.phone-island {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 108px; height: 28px; background: #000; border-radius: 18px;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
}
.phone-lens {
  width: 10px; height: 10px; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #3b82f6, #0f172a 60%);
  box-shadow: 0 0 0 2px #111;
}
.phone-screen {
  background: #000; border-radius: 38px; overflow: hidden; min-height: 0; flex: 1;
  color: #0f172a; padding-top: 1.7rem; display: flex; flex-direction: column; position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: .15rem 1.15rem .2rem; font-size: .68rem; font-weight: 700; color: #0f172a; background: #fff;
  flex: 0 0 auto; z-index: 2;
}
.phone-status-right { display: inline-flex; align-items: center; gap: .28rem; }
.phone-status-right i { display: block; background: #0f172a; }
.phone-status-right .sig {
  width: 13px; height: 10px;
  background:
    linear-gradient(#0f172a,#0f172a) 0 100%/2px 30%,
    linear-gradient(#0f172a,#0f172a) 3.5px 100%/2px 50%,
    linear-gradient(#0f172a,#0f172a) 7px 100%/2px 70%,
    linear-gradient(#0f172a,#0f172a) 10.5px 100%/2px 100%;
  background-repeat: no-repeat;
}
.phone-status-right .wifi {
  width: 12px; height: 10px; border: 2px solid #0f172a; border-top: 0; border-radius: 0 0 12px 12px;
  background: transparent; transform: rotate(180deg) translateY(-1px);
}
.phone-status-right .bat {
  width: 18px; height: 9px; border: 1.5px solid #0f172a; border-radius: 2px; background: transparent; position: relative;
}
.phone-status-right .bat::after {
  content: ""; position: absolute; right: -3px; top: 2px; width: 2px; height: 4px; background: #0f172a; border-radius: 0 1px 1px 0;
}
.phone-status-right .bat b {
  display: block; position: absolute; inset: 1.5px; width: 70%; background: #0f172a; border-radius: 1px;
}
.phone-app-area { flex: 1; display: flex; flex-direction: column; background: #fff; min-height: 0; overflow: hidden; }
.phone-homebar {
  width: 6.2rem; height: 4px; background: #cbd5e1; border-radius: 999px;
  margin: .25rem auto .45rem; flex: 0 0 auto; position: relative; z-index: 3;
}
.wa-panel ~ .phone-homebar,
.phone-screen:has(.wa-panel.is-active) .phone-homebar,
.phone-screen:has(.ff-panel.is-active) .phone-homebar { background: rgba(255,255,255,.35); }

.sim-panel { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.sim-panel.is-active { display: flex; }
.sim-panel[hidden] { display: none !important; }

/* Instagram */
.ig-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .75rem; border-bottom: 1px solid #efefef; flex: 0 0 auto; background: #fff;
}
.ig-back { font-size: 1.35rem; line-height: 1; color: #0f172a; width: 1.2rem; }
.ig-user { display: flex; align-items: center; gap: .28rem; font-size: .92rem; }
.ig-user strong { font-weight: 800; color: #0f172a; }
.ig-user em {
  width: 14px; height: 14px; border-radius: 999px; background: #3897f0; color: #fff;
  font-style: normal; font-size: .55rem; display: grid; place-items: center; font-weight: 900;
}
.ig-icons { display: flex; gap: .85rem; color: #0f172a; font-size: 1.05rem; font-weight: 700; }
.ig-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .85rem .85rem 0; }
.ig-profile-row { display: flex; align-items: center; gap: .9rem; margin-bottom: .85rem; }
.ig-ring {
  width: 5.35rem; height: 5.35rem; border-radius: 999px; padding: 2.5px; flex: 0 0 auto;
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
}
.ig-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 999px; border: 2.5px solid #fff; display: block;
}
.ig-stats { display: flex; flex: 1; justify-content: space-around; text-align: center; }
.ig-stats b { display: block; font-size: .92rem; color: #0f172a; font-weight: 800; }
.ig-stats span { font-size: .62rem; color: #737373; }
.ig-identity { margin-bottom: .75rem; }
.ig-displayname { margin: 0; font-weight: 800; font-size: .82rem; color: #0f172a; }
.ig-category { margin: .1rem 0 .35rem; font-size: .72rem; color: #737373; }
.ig-bio-line {
  margin: 0 0 .3rem; font-size: .8rem; line-height: 1.4; color: #0f172a; font-weight: 600;
  word-break: break-word;
}
.ig-bio-extra { margin: 0; font-size: .74rem; color: #0f172a; line-height: 1.45; }
.ig-link { display: inline-block; margin-top: .3rem; color: #00376b; font-size: .74rem; font-weight: 700; text-decoration: none; }
.ig-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; margin: .15rem 0 .9rem; }
.ig-actions button {
  border: 0; background: #efefef; border-radius: .55rem; padding: .48rem .4rem;
  font-size: .72rem; font-weight: 700; color: #0f172a; cursor: default;
}
.ig-actions .ig-more { width: 2rem; padding: 0; }
.ig-highlights {
  display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .55rem; margin-bottom: .35rem;
  scrollbar-width: none;
}
.ig-highlights::-webkit-scrollbar { display: none; }
.hl { flex: 0 0 auto; text-align: center; width: 4rem; }
.hl-ring {
  width: 3.5rem; height: 3.5rem; border-radius: 999px; display: grid; place-items: center;
  border: 1.5px solid #dbdbdb; margin: 0 auto .28rem; overflow: hidden; background: #fafafa;
  font-size: 1.1rem; color: #0f172a;
}
.hl-ring img { width: 100%; height: 100%; object-fit: cover; }
.hl-ring.add { border-style: dashed; color: #0f172a; font-weight: 700; }
.hl-ring.tone-a { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.hl-ring.tone-b { background: linear-gradient(135deg, #fbcfe8, #ec4899); }
.hl-ring.tone-c { background: linear-gradient(135deg, #c7d2fe, #6366f1); }
.hl span:last-child { font-size: .62rem; color: #0f172a; }
.ig-feed-tabs {
  display: flex; border-top: 1px solid #efefef; color: #8e8e8e; margin: 0 -.85rem;
}
.ig-feed-tabs span { flex: 1; text-align: center; padding: .55rem 0; font-size: .95rem; }
.ig-feed-tabs .on { color: #0f172a; border-bottom: 1.5px solid #0f172a; }
.ig-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -.85rem;
}
.ig-grid > div { aspect-ratio: 1; }
.ig-grid .g1 { background: linear-gradient(145deg, #fecdd3, #fb7185); }
.ig-grid .g2 { background: linear-gradient(145deg, #c7d2fe, #818cf8); }
.ig-grid .g3 { background: linear-gradient(145deg, #fde68a, #f59e0b); }
.ig-grid .g4 { background: linear-gradient(145deg, #bbf7d0, #34d399); }
.ig-grid .g5 { background: linear-gradient(145deg, #e9d5ff, #a855f7); }
.ig-grid .g6 { background: linear-gradient(145deg, #bae6fd, #0ea5e9); }
.ig-tabbar {
  display: flex; justify-content: space-around; align-items: center;
  border-top: 1px solid #efefef; padding: .4rem 0 .15rem; background: #fff; flex: 0 0 auto;
  font-size: 1.15rem; color: #0f172a;
}
.ig-tabbar .create {
  width: 1.55rem; height: 1.55rem; border: 1.5px solid #0f172a; border-radius: .4rem;
  display: grid; place-items: center; font-size: .95rem; font-weight: 700;
}
.ig-tabbar .me img {
  width: 1.45rem; height: 1.45rem; border-radius: 999px; object-fit: cover; display: block;
  box-shadow: 0 0 0 1.5px #0f172a;
}

/* Facebook */
.fb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .85rem; background: #fff; border-bottom: 1px solid #e4e6eb; flex: 0 0 auto;
}
.fb-top strong {
  font-family: var(--font-display); font-size: 1.35rem; color: #1877f2; letter-spacing: -.03em;
}
.fb-top-icons { display: flex; gap: .45rem; }
.fb-top-icons i {
  width: 2rem; height: 2rem; border-radius: 999px; background: #e4e6eb; display: block; position: relative;
}
.fb-top-icons i:first-child::before { content: "⌕"; position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; }
.fb-top-icons i:last-child::before { content: "💬"; position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: .85rem; }
.fb-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #f0f2f5; }
.fb-cover {
  height: 8.5rem; position: relative;
  background:
    linear-gradient(120deg, rgba(24,119,242,.35), rgba(99,102,241,.45)),
    linear-gradient(160deg, #1e3a8a, #312e81 55%, #0f172a);
}
.fb-avatar-wrap { position: absolute; left: 50%; bottom: -2.6rem; transform: translateX(-50%); }
.fb-avatar {
  width: 5.5rem; height: 5.5rem; border-radius: 999px; border: 4px solid #fff; background: #e2e8f0;
  overflow: hidden; box-shadow: 0 6px 16px rgba(15, 23, 42, .2);
}
.fb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-cam {
  position: absolute; right: 2px; bottom: 4px; width: 1.45rem; height: 1.45rem; border-radius: 999px;
  background: #e4e6eb; border: 1px solid #fff; display: grid; place-items: center; font-size: .65rem;
}
.fb-pad { padding: 3.1rem .9rem 1rem; text-align: center; background: #fff; }
.fb-displayname { margin: 0; font-size: 1.2rem; font-weight: 800; color: #050505; }
.fb-friends { margin: .2rem 0 .55rem; font-size: .74rem; color: #65676b; }
.fb-friends span { color: #65676b; }
.fb-about {
  margin: 0 0 .85rem; font-size: .86rem; font-weight: 700; color: #050505;
  line-height: 1.4; word-break: break-word;
}
.fb-actions { display: flex; gap: .35rem; margin-bottom: .85rem; }
.fb-actions button {
  border: 0; background: #e4e6eb; border-radius: .45rem; padding: .55rem .4rem;
  font-size: .7rem; font-weight: 700; color: #050505; cursor: default; flex: 1;
}
.fb-actions .primary { background: #1877f2; color: #fff; flex: 1.2; }
.fb-actions .more { flex: 0 0 2.2rem; }
.fb-pills {
  display: flex; gap: .15rem; border-top: 1px solid #e4e6eb; margin: 0 -.9rem; padding: 0 .4rem;
}
.fb-pills span {
  flex: 1; text-align: center; padding: .7rem .2rem; font-size: .72rem; font-weight: 700; color: #65676b;
}
.fb-pills .on { color: #1877f2; box-shadow: inset 0 -3px 0 #1877f2; }
.fb-intro {
  list-style: none; margin: .75rem 0 0; padding: .75rem 0 0; border-top: 1px solid #e4e6eb; text-align: left;
}
.fb-intro li {
  display: flex; gap: .55rem; align-items: flex-start; font-size: .74rem; color: #050505; margin: 0 0 .55rem;
}
.fb-intro i { font-style: normal; width: 1.1rem; text-align: center; }
.fb-intro b { font-weight: 700; }

/* WhatsApp */
.wa-panel { background: #0b141a !important; color: #e9edef; }
.phone-screen:has(.wa-panel.is-active) .phone-status {
  background: #1f2c34; color: #e9edef;
}
.phone-screen:has(.wa-panel.is-active) .phone-status-right .sig,
.phone-screen:has(.wa-panel.is-active) .phone-status-right .bat,
.phone-screen:has(.wa-panel.is-active) .phone-status-right .bat::after,
.phone-screen:has(.wa-panel.is-active) .phone-status-right .bat b {
  background: #e9edef;
  border-color: #e9edef;
}
.phone-screen:has(.wa-panel.is-active) .phone-status-right .wifi { border-color: #e9edef; }
.phone-screen:has(.wa-panel.is-active) .phone-status-right .sig {
  background:
    linear-gradient(#e9edef,#e9edef) 0 100%/2px 30%,
    linear-gradient(#e9edef,#e9edef) 3.5px 100%/2px 50%,
    linear-gradient(#e9edef,#e9edef) 7px 100%/2px 70%,
    linear-gradient(#e9edef,#e9edef) 10.5px 100%/2px 100%;
  background-repeat: no-repeat;
}
.wa-header {
  background: #1f2c34; padding: .45rem .65rem .5rem; display: flex; justify-content: space-between; align-items: center;
  flex: 0 0 auto;
}
.wa-peer { display: flex; gap: .45rem; align-items: center; min-width: 0; }
.wa-back { font-size: 1.35rem; color: #00a884; width: 1rem; line-height: 1; }
.wa-avatar {
  width: 2.25rem; height: 2.25rem; border-radius: 999px; overflow: hidden; background: #025144; flex: 0 0 auto;
}
.wa-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-peer strong { display: block; font-size: .82rem; color: #e9edef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-peer span { font-size: .62rem; color: #8696a0; font-weight: 500; }
.wa-tools { display: flex; gap: .7rem; align-items: center; }
.wa-tools span {
  width: 1.05rem; height: 1.05rem; display: block; position: relative;
}
.wa-tools span:nth-child(1)::before { content: "📹"; font-size: .85rem; }
.wa-tools span:nth-child(2)::before { content: "📞"; font-size: .85rem; }
.wa-tools span:nth-child(3)::before { content: "⋮"; color: #e9edef; font-size: 1rem; font-weight: 700; }
.wa-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: .75rem .7rem 1rem; display: flex; flex-direction: column; gap: .45rem;
  background-color: #0b141a;
  background-image:
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(7, 94, 84, .12), transparent 40%);
  background-size: 14px 14px, auto;
}
.wa-day {
  align-self: center; background: #182229; color: #8696a0; font-size: .58rem; font-weight: 700;
  letter-spacing: .06em; padding: .28rem .55rem; border-radius: .45rem; margin-bottom: .25rem;
}
.wa-msg {
  max-width: 82%; padding: .45rem .55rem .28rem; border-radius: .55rem; font-size: .78rem; line-height: 1.35;
  position: relative;
}
.wa-msg.in {
  background: #202c33; align-self: flex-start; border-top-left-radius: .15rem; color: #e9edef;
}
.wa-msg.out {
  background: #005c4b; align-self: flex-end; border-top-right-radius: .15rem; color: #e9edef;
}
.wa-fancy { margin: 0 .1rem .15rem 0; font-weight: 700; color: #fff; word-break: break-word; font-size: .86rem; }
.wa-time { display: block; text-align: right; font-size: .58rem; color: rgba(233,237,239,.7); margin-top: .15rem; }
.wa-time b { color: #53bdeb; font-weight: 700; }
.wa-composer {
  display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem .55rem; background: #1f2c34; flex: 0 0 auto;
}
.wa-emoji { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; color: #8696a0; font-size: 1.2rem; }
.wa-field {
  flex: 1; background: #2a3942; color: #8696a0; border-radius: 1.4rem; padding: .55rem .85rem; font-size: .78rem;
}
.wa-cam, .wa-mic {
  width: 2.2rem; height: 2.2rem; border-radius: 999px; display: grid; place-items: center; color: #8696a0;
}
.wa-cam::before { content: "📎"; font-size: .95rem; }
.wa-mic {
  background: #00a884; color: #fff;
}
.wa-mic::before { content: "🎤"; font-size: .85rem; }

/* Free Fire */
.ff-panel {
  background: linear-gradient(180deg, #1a0a00 0%, #0a1628 42%, #020617 100%) !important;
  color: #fde68a; padding: 0; gap: 0;
}
.phone-screen:has(.ff-panel.is-active) .phone-status {
  background: #120800; color: #fde68a;
}
.phone-screen:has(.ff-panel.is-active) .phone-status-right .sig,
.phone-screen:has(.ff-panel.is-active) .phone-status-right .bat,
.phone-screen:has(.ff-panel.is-active) .phone-status-right .bat::after,
.phone-screen:has(.ff-panel.is-active) .phone-status-right .bat b { background: #fde68a; border-color: #fde68a; }
.phone-screen:has(.ff-panel.is-active) .phone-status-right .wifi { border-color: #fde68a; }
.phone-screen:has(.ff-panel.is-active) .phone-status-right .sig {
  background:
    linear-gradient(#fde68a,#fde68a) 0 100%/2px 30%,
    linear-gradient(#fde68a,#fde68a) 3.5px 100%/2px 50%,
    linear-gradient(#fde68a,#fde68a) 7px 100%/2px 70%,
    linear-gradient(#fde68a,#fde68a) 10.5px 100%/2px 100%;
  background-repeat: no-repeat;
}
.ff-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .85rem; background: rgba(0,0,0,.35); border-bottom: 1px solid rgba(251,191,36,.25);
  flex: 0 0 auto;
}
.ff-top strong { font-size: .78rem; letter-spacing: .14em; color: #fbbf24; }
.ff-back, .ff-gear { color: #fbbf24; font-size: 1.1rem; }
.ff-hero {
  position: relative; text-align: center; padding: 1rem .9rem 1.1rem; margin: .75rem .75rem 0;
  border-radius: 1rem; overflow: hidden;
  background: linear-gradient(160deg, rgba(245,158,11,.18), rgba(2,6,23,.92));
  border: 1px solid rgba(251,191,36,.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.35);
}
.ff-banner {
  position: absolute; inset: 0 0 45% 0;
  background:
    linear-gradient(90deg, transparent, rgba(251,191,36,.15), transparent),
    linear-gradient(180deg, #7c2d12, transparent);
  opacity: .85; pointer-events: none;
}
.ff-avatar-frame {
  position: relative; width: 4.75rem; height: 4.75rem; margin: .35rem auto .65rem;
  border-radius: 1rem; padding: 3px;
  background: linear-gradient(145deg, #fbbf24, #b45309, #f59e0b);
  box-shadow: 0 8px 18px rgba(245,158,11,.35);
}
.ff-avatar-frame img {
  width: 100%; height: 100%; object-fit: cover; border-radius: .8rem; display: block; background: #111;
}
.ff-lvl {
  position: absolute; right: -.35rem; bottom: -.35rem;
  min-width: 1.6rem; height: 1.6rem; padding: 0 .28rem; border-radius: .4rem;
  background: #f59e0b; color: #111; font-size: .68rem; font-weight: 900;
  display: grid; place-items: center; border: 2px solid #111;
}
.ff-nick {
  position: relative; margin: .2rem 0 .35rem; font-weight: 900; font-size: 1.05rem; color: #fff;
  word-break: break-word; text-shadow: 0 2px 8px rgba(245,158,11,.45); line-height: 1.25;
}
.ff-id { position: relative; font-size: .65rem; color: rgba(253,230,138,.7); margin-bottom: .55rem; }
.ff-rank {
  position: relative; display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-weight: 900; padding: .28rem .65rem; border-radius: 999px;
  background: rgba(245,158,11,.16); border: 1px solid rgba(251,191,36,.45); color: #fcd34d;
}
.ff-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem;
  margin: .85rem .75rem 0; padding: 0;
}
.ff-stats > div {
  background: rgba(15,23,42,.75); border: 1px solid rgba(251,191,36,.22); border-radius: .65rem;
  padding: .55rem .35rem; text-align: center;
}
.ff-stats span { display: block; font-size: .55rem; letter-spacing: .08em; color: #94a3b8; margin-bottom: .2rem; }
.ff-stats b { color: #fcd34d; font-size: .85rem; }
.ff-guild {
  display: flex; align-items: center; gap: .65rem; margin: .85rem .75rem 1rem;
  padding: .7rem .8rem; border-radius: .75rem;
  background: rgba(2,6,23,.7); border: 1px solid rgba(251,191,36,.28);
}
.ff-guild-ico { font-size: 1.25rem; }
.ff-guild strong { display: block; color: #fde68a; font-size: .82rem; }
.ff-guild em { font-style: normal; font-size: .65rem; color: #94a3b8; }

.sim-external-actions {
  display: flex; justify-content: center; margin: .15rem 0 0; padding: 0 1rem;
}
.sim-copy {
  width: min(100%, 360px); border: 0; cursor: pointer; font-weight: 800; font-size: .82rem;
  padding: .85rem 1.1rem; color: #fff; border-radius: .95rem;
  background: linear-gradient(90deg, #db2777, #7c3aed);
  box-shadow: 0 10px 22px rgba(124, 58, 237, .25);
}
.sim-copy[hidden] { display: none !important; }
.sim-copy.fb { background: #1877f2; box-shadow: 0 10px 22px rgba(24, 119, 242, .25); }
.sim-copy.wa { background: #25d366; color: #053d22; box-shadow: 0 10px 22px rgba(37, 211, 102, .25); }
.sim-copy.ff {
  background: linear-gradient(90deg, #f59e0b, #fbbf24); color: #1a0b00;
  text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 10px 22px rgba(245, 158, 11, .25);
}

.social-sim-cta { text-align: center; margin: 1rem 0 0; }
.btn-sim-cta {
  display: inline-flex; align-items: center; gap: .45rem; padding: .65rem 1.1rem; border-radius: 999px;
  background: var(--indigo-soft); border: 1px solid #c7d2fe; color: var(--indigo-deep);
  font-weight: 800; font-size: .82rem; text-decoration: none;
}
.btn-sim-cta:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }

@media (max-width: 520px) {
  .phone-chassis {
    width: min(100%, 318px);
    height: min(78vh, 680px);
  }
  .ig-grid .g4, .ig-grid .g5, .ig-grid .g6 { display: none; }
}

/* —— Preview modal —— */

.preview-modal {
  position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .8);
  backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.preview-modal[hidden] { display: none !important; }
.preview-modal-card {
  background: #fff; border-radius: 1.5rem; width: min(100%, 920px); max-height: 92vh;
  overflow: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem;
  box-shadow: 0 30px 60px rgba(0,0,0,.35); position: relative; border: 1px solid #e2e8f0;
}
.preview-modal-side { order: 2; }
.preview-modal-meta { order: 1; }
@media (min-width: 860px) {
  .preview-modal-card {
    display: grid; grid-template-columns: 1fr 1fr; align-items: start; padding: 1.75rem;
  }
  .preview-modal-side { order: 0; }
  .preview-modal-meta { order: 0; }
}
.preview-modal-close {
  position: absolute; top: .85rem; right: .85rem; width: 2.4rem; height: 2.4rem;
  border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; z-index: 2;
}
.preview-modal-meta .badge-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .55rem; }
.preview-modal-meta .badge-row .badge { background: #e0e7ff; color: #4338ca; }
.preview-modal-meta .cat { font-size: .75rem; color: #64748b; font-weight: 700; }
.preview-modal-meta h3 { margin: 0 0 .4rem; font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 1.85rem); }
.preview-modal-meta > p { margin: 0 0 1.1rem; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.modal-tab-label {
  display: block; font-size: .72rem; font-weight: 800; color: #64748b;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .45rem;
}
.modal-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .35rem; }
.modal-tab {
  border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: .85rem;
  padding: .55rem .8rem; font-size: .75rem; font-weight: 800; cursor: pointer;
}
.modal-tab.is-active.is-ig {
  background: linear-gradient(90deg, #ec4899, #4f46e5); color: #fff; border-color: transparent;
  box-shadow: 0 8px 16px rgba(79, 70, 229, .22);
}
.modal-tab.is-active.is-wa { background: #059669; color: #fff; border-color: transparent; }
.modal-tab.is-active.is-fb { background: #2563eb; color: #fff; border-color: transparent; }
.modal-tab.is-active.is-ff { background: #f59e0b; color: #0f172a; border-color: transparent; }
.preview-modal-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1.15rem;
  padding-top: 1.15rem; border-top: 1px solid #f1f5f9;
}
.preview-modal-actions .btn-block { grid-column: 1 / -1; }
#modal-fav.is-fav {
  background: #fffbeb; color: #b45309; border-color: #fde68a;
}
.modal-phone .phone-chassis {
  width: min(100%, 300px);
  height: min(72vh, 640px);
  margin-inline: auto;
}
.modal-phone .phone-screen { min-height: 0; }
.modal-app-area .sim-panel { min-height: 0; }
.modal-phone .ig-grid,
.modal-phone .ig-highlights { display: none; }
.modal-phone .ff-panel { padding-bottom: .75rem; }

/* —— Toast / float —— */
.toast {
  position: fixed; right: 1rem; bottom: calc(1rem + var(--sticky-h)); z-index: 70;
  background: var(--ink); color: #fff; border-radius: 12px; padding: .85rem 1rem;
  max-width: min(92vw, 320px); box-shadow: var(--shadow);
}
.toast strong { display: block; font-size: .85rem; margin-bottom: .2rem; }
.toast span {
  display: block; font-size: .75rem; color: #cbd5e1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.to-top {
  position: fixed; right: 1rem; bottom: calc(1rem + var(--sticky-h)); z-index: 55;
  width: 2.6rem; height: 2.6rem; border-radius: 999px; border: 0;
  background: var(--ink); color: #fff; cursor: pointer; box-shadow: var(--shadow);
}
body:not(.has-sticky-bar) .toast,
body:not(.has-sticky-bar) .to-top { bottom: 1rem; }

@media (max-width: 640px) {
  .tools-row { flex-direction: column; align-items: stretch; }
  .tool-actions { justify-content: stretch; }
  .tool-actions .btn { flex: 1; }
  .preview-text.size-lg { font-size: 1.2rem; }
}

  
/* WP Custom HTML isolation */
.ld-wp-home{max-width:100%;width:100%;margin:0 auto;overflow-x:clip;box-sizing:border-box;-webkit-text-size-adjust:100%}
.ld-wp-home *,.ld-wp-home *::before,.ld-wp-home *::after{box-sizing:border-box}
.ld-wp-home img,.ld-wp-home svg,.ld-wp-home video{max-width:100%;height:auto}
.ld-wp-home .wrap{max-width:min(1120px,100%);margin-inline:auto;padding-inline:12px}
html:has(.ld-wp-home),body:has(.ld-wp-home){overflow-x:clip}