/* Direction: ViralTag — fresh creative studio: deep teal chrome, warm cream paper, fresh green actions, mint and peach accents */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fbf6ec;
  --surface: #fffdf9;
  --surface-2: #f4ecdc;
  --border: #e6dcc6;
  --border-strong: #b1b2a9;
  --ink: #12353a;
  --muted: #55706f;
  --accent: #23864f;
  --accent-hover: #1e7243;
  --accent-ink: #ffffff;
  --accent-text: #1a6b3e;
  --accent-strong: #1d7143;
  --accent-soft: #d6f2e5;
  --accent-border: #9ac4a5;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfe8d7;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e2d1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f3dcd3;
  --danger-strong: #b91c1c;
  --chart-1: #23864f;
  --chart-2: #2296ab;
  --chart-3: #4652a3;
  --chart-4: #b566a6;
  --chart-5: #923621;
  --chart-6: #a1871f;

  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-card: 20px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --shadow-card: 0 1px 2px rgb(18 53 58 / 0.05), 0 8px 24px rgb(18 53 58 / 0.06);
  --x-teal: #0b4547;
  --x-teal-2: #14605f;
  --x-mint: #bfeadb;
  --x-peach: #f9b98f;
  --x-peach-soft: #fde5d2;
  --x-peach-ink: #4a2410;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #05130b;
  --surface: #1e2b23;
  --surface-2: #121f17;
  --border: #28342d;
  --border-strong: #505a54;
  --ink: #fbf6ec;
  --muted: #999b92;
  --accent: #23864f;
  --accent-hover: #449869;
  --accent-ink: #ffffff;
  --accent-text: #54a176;
  --accent-strong: #54a176;
  --accent-soft: #0c2c1a;
  --accent-border: #13472a;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #092b16;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2c210b;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2d150f;
  --danger-strong: #d16969;
  --chart-1: #23864f;
  --chart-2: #119db5;
  --chart-3: #6978cd;
  --chart-4: #b566a6;
  --chart-5: #c16049;
  --chart-6: #a1871f;
}

/* ViralTag — teal chrome, mint + peach accents */
.vt-side {
  background: linear-gradient(180deg, var(--x-teal) 0%, var(--x-teal-2) 140%);
  color: var(--x-on-photo);
}
.vt-logo-mark {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  background: var(--x-mint);
  color: var(--x-teal);
}
.vt-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.85rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--x-on-photo) 82%, transparent);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.vt-link:hover { background: color-mix(in srgb, var(--x-on-photo) 10%, transparent); color: var(--x-on-photo); }
.vt-link:focus-visible, .vt-bn:focus-visible { outline: 2px solid var(--x-mint); outline-offset: 2px; }
.vt-link.active { background: var(--x-mint); color: var(--x-teal); }
.vt-tip { background: color-mix(in srgb, var(--x-on-photo) 10%, transparent); color: var(--x-on-photo); border: 1px solid color-mix(in srgb, var(--x-on-photo) 14%, transparent); }
.vt-bottom { background: var(--x-teal); color: var(--x-on-photo); padding-bottom: env(safe-area-inset-bottom); }
.vt-bn { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.6rem 0.25rem; font-size: 0.7rem; font-weight: 500; color: color-mix(in srgb, var(--x-on-photo) 75%, transparent); }
.vt-bn.active { color: var(--x-mint); }
.vt-avatar { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--x-peach); color: var(--x-peach-ink); font-size: 0.75rem; font-weight: 700; }
.vt-spark { display: inline-grid; place-items: center; flex: none; width: 2.9rem; height: 2.9rem; border-radius: 1rem; background: var(--x-peach-soft); color: var(--x-peach-ink); }

/* Pickers */
.vt-pick {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.6rem 0.8rem; border-radius: 0.9rem; font-size: 0.9rem; font-weight: 500;
  background: var(--surface); border: 1.5px solid var(--border); transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.vt-pick-style { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.2rem; height: 100%; }
label:hover > .vt-pick { border-color: var(--accent); }
label:active > .vt-pick { transform: scale(0.98); }
input:checked + .vt-pick { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input:focus-visible + .vt-pick { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hashtag chips */
.tag-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.8rem; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--x-mint) 40%, var(--surface)); border: 1px solid color-mix(in srgb, var(--x-mint) 80%, var(--border));
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.tag-chip[data-group="trending"] { background: color-mix(in srgb, var(--x-peach) 28%, var(--surface)); border-color: color-mix(in srgb, var(--x-peach) 70%, var(--border)); }
.tag-chip[data-group="related"] { background: var(--surface-2); border-color: var(--border); }
.tag-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgb(0 0 0 / 0.08); }
.tag-chip:active { transform: scale(0.97); }
.tag-chip:focus-visible, .vt-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tag-chip.copied { background: var(--accent); color: var(--x-on-photo); border-color: var(--accent); }

.vt-filter {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: background 0.15s;
}
.vt-filter:hover { background: var(--surface-2); }
.vt-filter.active { background: var(--x-teal); color: var(--x-on-photo); border-color: var(--x-teal); }
[data-vt-section][hidden] { display: none; }
.vt-dot { width: 0.8rem; height: 0.8rem; border-radius: 999px; background: var(--x-mint); }
.vt-dot[data-group="trending"] { background: var(--x-peach); }
.vt-dot[data-group="related"] { background: var(--border); }
.vt-demo { display: inline-block; flex: none; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--x-peach-soft); color: var(--x-peach-ink); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; }

/* Auth illustration */
.vt-hero { background: linear-gradient(160deg, var(--x-teal) 0%, var(--x-teal-2) 100%); min-height: 100vh; }
.vt-hero::before { content: ""; position: absolute; right: -8rem; top: -6rem; width: 28rem; height: 28rem; border-radius: 999px; background: var(--x-peach); opacity: 0.22; }
.vt-hero::after { content: ""; position: absolute; left: -6rem; bottom: -9rem; width: 24rem; height: 24rem; border-radius: 999px; background: var(--x-mint); opacity: 0.14; }
.vt-hero > * { position: relative; z-index: 1; }
.vt-check { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--x-mint); color: var(--x-teal); }
.vt-illus { position: absolute !important; right: 2.5rem; bottom: 3rem; width: 17rem; height: 15rem; }
.vt-laptop { position: absolute; inset: 1rem 0 0 1rem; display: grid; place-items: center; border-radius: 1.4rem; background: var(--x-peach); color: var(--x-peach-ink); transform: rotate(-4deg); box-shadow: 0 20px 40px rgb(0 0 0 / 0.25); }
.vt-float { position: absolute; padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--x-on-photo); color: var(--x-teal); font-weight: 700; font-size: 0.9rem; box-shadow: 0 8px 20px rgb(0 0 0 / 0.2); animation: vt-bob 4s ease-in-out infinite; }
.vt-float.f1 { top: 0; right: 0; }
.vt-float.f2 { bottom: 2rem; left: -2rem; animation-delay: -1.3s; }
.vt-float.f3 { bottom: -0.5rem; right: 1rem; animation-delay: -2.6s; }
@keyframes vt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
html.reduced-motion .vt-float { animation: none; }
@media (min-width: 1024px) and (max-height: 760px) { .vt-illus { display: none; } }

/* Analytics charts */
.vt-donut { position: relative; flex: none; width: 9.5rem; height: 9.5rem; }
.vt-donut circle { transition: stroke-dasharray 0.6s ease; }
.vt-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.vt-swatch { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 999px; }
.vt-track { height: 0.75rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vt-bar { height: 100%; border-radius: 999px; transform-origin: left center; animation: vt-grow 0.7s ease-out both; }
.vt-cols { display: flex; align-items: stretch; justify-content: space-around; gap: 0.75rem; height: 12rem; }
.vt-col { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.35rem; min-width: 0; text-align: center; }
.vt-colbar { width: 100%; max-width: 3.5rem; border-radius: 0.7rem 0.7rem 0.3rem 0.3rem; transform-origin: bottom center; animation: vt-rise 0.7s ease-out both; }
@keyframes vt-grow { from { transform: scaleX(0.2); } to { transform: scaleX(1); } }
@keyframes vt-rise { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
html.reduced-motion .vt-bar, html.reduced-motion .vt-colbar { animation: none; }