/* ==========================================================================
   HydroBot — Precision Design System & Interactive FX
   ========================================================================== */

/* Hydro, the app's own default skin (HydroBot/src/styles.css): near-black
   water, mint accent, sea-grey ink. The site used to be pure black with a
   white accent — the zinc product before the water one. */
:root {
  --bg: #050807;
  --fg: #f4f8f6;
  --fg-muted: #a9b8b2;
  --line: #243029;
  --raised: #141b19;
  --window: #0b0f0e;
  --chat-bg: #070a09;
  --accent: #34d399;
  --accent-light: #7ee7bb;
  --accent-ink: #04140d;
  --sea: #67e8f9;
  --bot-glow: rgba(52, 211, 153, 0.2);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Decorative light beams and the window's outer glow are deliberately wider
   than the content box. Clip them at the page edge instead of letting them
   widen the document on a phone (which produced a phantom horizontal scroll). */
main {
  overflow-x: clip;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Browser Surfaces Theming (Text selection & Scrollbars)
   -------------------------------------------------------------------------- */
::selection {
  background: rgba(52, 211, 153, 0.26);
  color: #f4f8f6;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #2a3330;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3b4a44;
}

/* --------------------------------------------------------------------------
   Background Ambient Living Canvas & Light Rays
   -------------------------------------------------------------------------- */
#ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

.ambient-dot-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1100px;
  background-image: radial-gradient(rgba(126, 231, 187, 0.13) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, black 40%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-light-beam {
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 520px;
  background: radial-gradient(ellipse at 50% 0%, rgba(52, 211, 153, 0.18) 0%, rgba(103, 232, 249, 0.06) 46%, transparent 80%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 1;
  animation: beamPulse 8s ease-in-out infinite alternate;
}

@keyframes beamPulse {
  0% { opacity: 0.6; transform: translateX(-50%) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

/* --------------------------------------------------------------------------
   Dynamic Desktop Window Ambient Glow
   -------------------------------------------------------------------------- */
.window-ambient-glow {
  position: absolute;
  inset: -50px -60px;
  background: radial-gradient(circle at 50% 30%, var(--bot-glow, rgba(52, 211, 153, 0.2)) 0%, transparent 68%);
  filter: blur(65px);
  pointer-events: none;
  z-index: 0;
  transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
  opacity: 0.95;
  animation: glowBreathe 7s ease-in-out infinite alternate;
}

@keyframes glowBreathe {
  0% { transform: scale(0.96); opacity: 0.8; }
  100% { transform: scale(1.04); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Mascot Shelf & Slower 3D Float Animation
   -------------------------------------------------------------------------- */
.mascots-header-shelf {
  position: relative;
  perspective: 900px;
  z-index: 10;
}

.mascot-avatar-btn {
  position: relative;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.mascot-avatar-btn.active-shelf-mascot::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 16px;
  height: 2px;
  background: var(--fg);
  border-radius: 999px;
  animation: pulseIndicator 3s infinite ease-in-out;
}

@keyframes pulseIndicator {
  0%, 100% { opacity: 0.5; transform: scaleX(0.8); }
  50% { opacity: 1; transform: scaleX(1.3); }
}

.mascot-puddle {
  position: absolute;
  bottom: 2px;
  width: 38px;
  height: 10px;
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0.35;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.mascot-avatar-btn:hover .mascot-puddle {
  opacity: 0.9;
}

.mascot-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--raised);
  color: var(--fg);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
  z-index: 30;
}

.mascot-avatar-btn:hover .mascot-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Slower, observable aquatic float (6.5s) */
.mascot-img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.7));
  animation: floatBob 6.5s ease-in-out infinite;
  transition: filter 0.3s ease;
  will-change: transform;
}

.mascot-avatar-btn:nth-child(1) .mascot-img { animation-delay: 0s; }
.mascot-avatar-btn:nth-child(2) .mascot-img { animation-delay: 1.1s; }
.mascot-avatar-btn:nth-child(3) .mascot-img { animation-delay: 2.2s; }
.mascot-avatar-btn:nth-child(4) .mascot-img { animation-delay: 3.3s; }
.mascot-avatar-btn:nth-child(5) .mascot-img { animation-delay: 4.4s; }
.mascot-avatar-btn:nth-child(6) .mascot-img { animation-delay: 5.5s; }

@keyframes floatBob {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-8px) rotate(1.4deg);
  }
  66% {
    transform: translateY(-4px) rotate(-1.4deg);
  }
}

.mascot-avatar-btn:hover .mascot-img {
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.85));
}

/* --------------------------------------------------------------------------
   Product Updates Marquee Ticker
   -------------------------------------------------------------------------- */
.agent-ticker-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 680px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(11, 11, 14, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px 16px;
  font-size: 11.5px;
  color: var(--fg-muted);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  user-select: none;
}

.agent-ticker-wrap:hover .agent-ticker-track {
  animation-play-state: paused;
}

.agent-ticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  color: var(--accent-light);
  flex-shrink: 0;
  padding-right: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.agent-ticker-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.2); }
}

.ticker-scroll-container {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 14px, black calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14px, black calc(100% - 14px), transparent 100%);
}

.agent-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: marqueeCycle 35s linear infinite;
  will-change: transform;
}

.agent-ticker-group {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.ticker-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.28);
  color: var(--accent-light);
  font-size: 9.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin-right: 4px;
}

@keyframes marqueeCycle {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Interactive Simulation App Window
   -------------------------------------------------------------------------- */
/* The window wears the app's own skin. Every value below is a Hydro token
   from HydroBot/src/styles.css ([data-skin="hydro"]), declared here so the
   mock cannot drift away from the app, and the sizes are the app's own
   utilities (h-12 chrome row, 32px controls, 16px-radius bubbles, 15px
   transcript, 12.5px search). */
/* Between the phone layout and the 1024-wide two-column one the window is
   about 720px wide, and the app's 20rem sidebar plus the chat's own ~540px
   minimum is more than that: the chat column kept its intrinsic width and was
   clipped off the right edge with no way to reach it. Give the sidebar 16rem
   there, and let the chat column shrink into what is left — its header wraps,
   its composer shrinks, and the transcript scrolls on its own. */
@media (min-width: 768px) and (max-width: 1023px) {
  .desktop-app-window > .grid {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
}

.desktop-app-window {
  --app: #070a09;
  --panel: #0b0f0e;
  --raised: #1c2422;
  --card: #141b19;
  --inset: #0a0f0d;
  --control: #1c2422;
  --hairline: rgba(42, 51, 48, 0.55);
  --ink: #f4f8f6;
  --ink-2: #a9b8b2;
  --accent: #34d399;
  --success: #3ddc97;
  --warning: #f5b544;
  --danger: #ff6b7a;
  --bubble-user: #24322c;

  background: var(--app);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.07), 0 30px 80px -18px rgba(0, 0, 0, 0.95), 0 0 100px -22px var(--bot-glow);
  transition: box-shadow 0.6s ease;
  /* the window's own 1px frame comes from .spotlight-card */
}

.app-sidebar {
  background: var(--panel);
  /* the app's own divider: hairline at 40%. Tailwind's preflight would
     otherwise paint this border-currentColor grey. */
  border-color: var(--hairline);
}

.app-main {
  background: var(--app);
}

/* Window chrome: 48px row, 12px traffic lights, 32px icon buttons */
.app-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.app-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--ink-2);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-icon-btn:hover {
  background: var(--raised);
  color: var(--ink);
}

/* Search: rounded-md, hairline, inset at 40%, 12.5px ink */
.app-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: rgba(10, 15, 13, 0.55);
  color: var(--ink-2);
}

/* The team above its bots. Its delete action appears on hover, as in the app. */
.app-group-header {
  align-items: center;
  gap: 6px;
  padding: 4px 4px 8px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.app-group-title {
  padding: 2px 4px;
  border-radius: 6px;
}

.app-group-header:hover .app-group-title {
  background: rgba(38, 48, 41, 0.5);
}

.app-group-action {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.app-group-header:hover .app-group-action {
  opacity: 1;
}

/* A bot row: role line, name + time, preview + unread dot, presence on the
   avatar. Selected rows are raised at 70%, hovered ones at 40%. */
.bot-row-btn {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  padding: 8px 36px 8px 24px;
}

.bot-row-btn:hover {
  background: rgba(38, 48, 41, 0.45);
}

.bot-row-btn.active {
  background: rgba(38, 48, 41, 0.75);
}

@media (max-width: 767px) {
  .bot-row-btn {
    padding: 6px 8px;
  }
}

.app-bot-title {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

.app-bot-name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.app-bot-time {
  color: var(--ink-2);
  font-size: 12px;
}

.app-bot-preview {
  color: var(--ink-2);
  font-size: 11px;
}

.app-dot-presence {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--panel);
  border-radius: 999px;
}

.app-unread-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

/* The tools rail */
.app-nav-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 14px;
  transition: background-color 0.15s ease;
}

.app-nav-item svg {
  flex: none;
  color: var(--ink-2);
}

.app-nav-item:hover {
  background: rgba(38, 48, 41, 0.5);
}

.app-avatar-initials {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--raised);
  color: var(--ink-2);
  font-size: 10.6px;
  font-weight: 500;
}

/* Chat head: 40px avatar button, 15px name, pill chip, 32px icon buttons */
.app-head-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  transition: background-color 0.15s ease, color 0.15s ease;
}

button.app-head-icon {
  cursor: pointer;
}

.app-head-icon:hover {
  background: var(--raised);
  color: var(--ink);
}

.app-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(38, 48, 41, 0.55);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
}

/* Transcript: the app's 16px-radius bubbles, 15px text, no per-message avatar */
.app-transcript {
  padding: 4px 20px 0;
}

.bubble {
  width: fit-content;
  max-width: min(42rem, 78%);
  padding: 10px 16px;
  border-radius: 16px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.625;
  animation: fadeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bubble-bot {
  background: var(--card);
}

.bubble-user {
  margin-left: auto;
  background: var(--bubble-user);
}

.chat-row {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.chat-row.right {
  align-items: flex-end;
}

/* A tool call: the app's own tool-activity row */
.app-tool-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 13px;
  animation: fadeSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-tool-chip .chip-state {
  display: inline-flex;
  flex: none;
  width: 13px;
}

.app-tool-chip.completed .chip-state {
  color: var(--success);
}

.app-tool-chip .chip-name {
  flex: none;
  color: var(--ink);
}

.app-tool-chip .chip-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-tool-chip .chip-chevron {
  flex: none;
  color: var(--ink-2);
  opacity: 0.6;
}

.step-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.6px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinStep 0.9s linear infinite;
}

@keyframes spinStep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 15px;
  margin-left: 2px;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: blinkCursor 0.9s infinite;
}

/* The composer: rounded-3xl on composer grey, 32px round buttons */
.app-composer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 24px;
  background: var(--control);
}

.app-composer-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--ink-2);
}

.app-composer-chip {
  flex: none;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 13px;
}

.app-composer-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 24px;
  outline: none;
}

.app-composer-input::placeholder {
  color: var(--ink-2);
}

.app-send-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink, #04140d);
  cursor: pointer;
  transition: filter 0.15s ease;
}

.app-send-btn:hover {
  filter: brightness(1.1);
}

/* The engine strip along the window's foot. It scrolls sideways when the
   providers do not fit, as the app's own strip does, but the scrollbar is
   hidden and the right edge fades so a narrow window reads as scrollable
   rather than cut. */
.app-plan-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-top: 1px solid var(--hairline);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 11px;
  overflow: hidden;
}

.app-plan-bar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(to right, transparent, var(--panel));
  pointer-events: none;
}

.app-plan-bar > div {
  scrollbar-width: none;
}

.app-plan-bar > div::-webkit-scrollbar {
  display: none;
}

/* Below the desktop layout the sidebar turns into a bot strip above the chat.
   Each row is a compact chip there rather than a full-width row, so the strip
   reads as a list of bots instead of one full-width tab. */
@media (max-width: 767px) {
  .bot-row-btn {
    width: auto;
    padding: 6px 10px;
  }

  /* A phone shows the tail of the conversation, so the line where the
     transcript is scrolled reads as a fade rather than a chopped chip. */
  .app-transcript {
    mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
  }
}

/* The window's outer scroll areas: scroll by wheel, never show a native bar in
   the mock. The bot list holds six rows at the desktop height, so nothing is
   cut; at smaller heights it still scrolls. */
#bot-sidebar-list,
.app-transcript {
  scrollbar-width: none;
}

#bot-sidebar-list::-webkit-scrollbar,
.app-transcript::-webkit-scrollbar {
  display: none;
}

.app-plan-provider {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.app-plan-name {
  max-width: 9rem;
  overflow: hidden;
  color: var(--ink);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-plan-value {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.app-plan-meter {
  display: block;
  flex: none;
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: var(--inset);
  overflow: hidden;
}

.app-plan-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--success);
}

@keyframes blinkCursor {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

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

/* --------------------------------------------------------------------------
   Voice Call Overlay Mode (Slower, relaxing wave cadence)
   -------------------------------------------------------------------------- */
.voice-call-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  text-align: center;
  animation: fadeSlideUp 0.4s ease;
}

.voice-call-avatar-wrap {
  position: relative;
  margin-bottom: 22px;
}

.voice-call-wave-ring {
  position: absolute;
  inset: -12px;
  border: 1.5px solid var(--bot-glow, #34d399);
  border-radius: 50%;
  animation: waveRing 3.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.voice-call-wave-ring:nth-child(2) {
  inset: -24px;
  animation-delay: 1.2s;
}

@keyframes waveRing {
  0% { transform: scale(0.85); opacity: 0.85; }
  100% { transform: scale(1.4); opacity: 0; }
}

.voice-waveform-canvas {
  width: 260px;
  height: 52px;
  margin: 18px 0;
}

/* Call controls: raised pill and the app's danger fill for hanging up */
.app-call-btn {
  padding: 6px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--raised);
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-call-btn:hover {
  background: var(--raised);
}

.app-call-btn.muted {
  color: var(--danger);
}

.app-call-btn.danger {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--danger-ink, #20060a);
}

.app-call-btn.danger:hover {
  background: #ff6f7e;
}

/* --------------------------------------------------------------------------
   Bot Computer / Terminal Overlay Mode
   -------------------------------------------------------------------------- */
/* The bot's computer, in the app's own surfaces: app ground, panel header,
   hairline rules, 11.5px secondary ink. */
.terminal-overlay {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--app);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 14px 16px;
  color: var(--ink-2);
  overflow: hidden;
  animation: fadeSlideUp 0.3s ease;
}

.terminal-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 10px;
  color: var(--ink-2);
  font-size: 11.5px;
}

.terminal-input {
  color: var(--ink);
}

.terminal-input::placeholder {
  color: var(--ink-2);
}

.terminal-log-output {
  flex: 1;
  overflow-y: auto;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

.terminal-prompt-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   Translucent Glass Spotlight Cards
   -------------------------------------------------------------------------- */
.spotlight-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 27, 25, 0.62) 0%, rgba(9, 14, 13, 0.86) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(126, 231, 187, 0.1);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.7);
}

.spotlight-card:hover {
  border-color: rgba(52, 211, 153, 0.32);
  transform: translateY(-3px);
  box-shadow: 0 20px 46px -16px rgba(0, 0, 0, 0.75), 0 0 40px -18px rgba(52, 211, 153, 0.35);
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(460px circle at var(--mouse-x, -200px) var(--mouse-y, -200px), rgba(126, 231, 187, 0.22), transparent 45%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.spotlight-card:hover::before {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Droplet Ripple Particle Effect (Slower, gentle expansion)
   -------------------------------------------------------------------------- */
.droplet-ripple {
  position: fixed;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  border: 1.5px solid var(--ripple-color, rgba(52, 211, 153, 0.55));
  background: radial-gradient(circle, var(--ripple-color, rgba(52, 211, 153, 0.18)) 0%, transparent 70%);
  pointer-events: none;
  animation: rippleWave 1.1s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
  z-index: 9999;
}

@keyframes rippleWave {
  to {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Interactive Name Chip Presets (Feature 1)
   -------------------------------------------------------------------------- */
.role-chip {
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--fg-muted);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.role-chip:hover {
  color: var(--fg);
  border-color: #3b4a44;
}

.role-chip.active {
  background: rgba(52, 211, 153, 0.14);
  border-color: var(--accent);
  color: #7ee7bb;
}

/* Code Highlights in Chat */
code {
  font-family: var(--font-mono);
  background: rgba(126, 231, 187, 0.09);
  padding: 0.15em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   The 2.1.0 surface — release band, tide rules, update strip
   --------------------------------------------------------------------------
   The app opens on the Tide Line splash: paper, a scan line, bubbles. The
   site keeps the app's Hydro water palette but borrows that line as its own
   quiet signature — one thin rule with a mint segment crossing it, never a
   progress bar, because the page is not loading anything. */
.release-band {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 7px 16px;
  border-bottom: 1px solid rgba(52, 211, 153, 0.16);
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.12), rgba(103, 232, 249, 0.07) 55%, rgba(52, 211, 153, 0.12));
  color: #c6d7d1;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.release-band strong {
  color: #7ee7bb;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.release-band a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(126, 231, 187, 0.5);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.release-band a:hover {
  color: #7ee7bb;
  text-decoration-color: #7ee7bb;
}

.tide-rule {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}

.tide-rule::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, #34d399, #67e8f9, transparent);
  animation: tideSweep 6.5s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
}

@keyframes tideSweep {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(320%); }
}

/* Four chips of four different lengths, left to wrap on their own, made ragged
 * rows: the longer labels took a second line while the shorter ones did not.
 * Two even columns read as a set above a phone, one per line on one, and the
 * column cap keeps them under the hero copy rather than the page's width. */
.update-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 620px;
  margin-inline: auto;
}

.update-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(126, 231, 187, 0.16);
  border-radius: 999px;
  background: rgba(20, 27, 25, 0.62);
  color: #c6d7d1;
  font-size: 12px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.update-chip b {
  color: #7ee7bb;
  font-weight: 600;
}

.update-chip svg {
  flex: none;
  color: #34d399;
}

/* The header is sticky and carries the release band, so it is ~97px tall on a
   desktop and ~157px when the band wraps on a phone. A plain "Download" or
   "Simulation" jump put the target at y=0, under all of it: the download
   buttons and the top of the demo window were hidden behind the header.
   Scroll these two targets clear of it. */
#download,
#demo {
  scroll-margin-top: 7rem;
}

@media (max-width: 767px) {
  #download,
  #demo {
    scroll-margin-top: 11rem;
  }
}

/* The platform menu is 20rem wide by design, which is wider than the phone the
   hero button sits on: at 320px it ran 26px past the right edge and hung below
   the fold. Cap it to the viewport, centre it under the button, and let the
   list scroll instead of running off the screen. */
#platform-menu {
  width: min(20rem, calc(100vw - 2.5rem));
}

@media (max-width: 639px) {
  #platform-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-height: min(22rem, calc(100dvh - 6rem));
    overflow-y: auto;
  }
}

.update-chip:hover {
  border-color: rgba(52, 211, 153, 0.42);
  background: rgba(28, 36, 34, 0.8);
  color: var(--fg);
}

@media (max-width: 639px) {
  .update-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7ee7bb;
}

.eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, #34d399, transparent);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .mascot-img, .voice-call-wave-ring, .agent-ticker-track, .agent-ticker-text, .window-ambient-glow, .hero-light-beam, .tide-rule::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .bubble {
    max-width: 92%;
  }

  .app-transcript {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   Language Switcher Component
   ========================================================================== */
.lang-switch-wrap {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: rgba(28, 28, 31, 0.45);
  backdrop-filter: blur(8px);
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.lang-switch-wrap:hover {
  border-color: #3f3f46;
  background: rgba(28, 28, 31, 0.8);
}

.lang-btn {
  color: var(--fg-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.15s ease;
}

.lang-btn:hover {
  color: var(--fg);
}

.lang-btn.active {
  color: #000000;
  background: #f4f4f5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.lang-divider {
  color: #3f3f46;
  user-select: none;
  font-size: 11px;
}

.mobile-lang-btn {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-lang-btn:hover {
  color: var(--fg);
  border-color: #3f3f46;
}

.mobile-lang-btn.active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  font-weight: 600;
}

/* Anchored guides on the documents page. The header is sticky, so a section
   opened by id needs to stop clear of it instead of under it. */
#approval-levels,
#linux-local-control {
  scroll-margin-top: 88px;
}

/* --------------------------------------------------------------------------
   Account page
   -------------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}

.account-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(52, 211, 153, 0.1), transparent 70%),
    var(--bg);
}

.account-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Keep the header's edges on the same column as the 1120px account body. */
  padding-block: 0.8rem;
  padding-inline: max(clamp(1rem, 4vw, 2rem), calc((100vw - 1120px) / 2 + 2rem));
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 7, 0.84);
  backdrop-filter: blur(12px);
}

.account-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.account-brand img {
  border-radius: 7px;
}

.account-header-nav {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  color: var(--fg-muted);
  font-size: 0.8rem;
}

.account-header-nav a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.account-header-nav a:hover {
  color: var(--fg);
}

.account-main {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1rem, 4vw, 2rem) 5rem;
}

.account-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(52, 211, 153, 0.32);
  border-radius: 12px;
  background: rgba(52, 211, 153, 0.07);
  color: var(--fg);
  font-size: 0.83rem;
}

.account-notice[data-tone="error"] {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.06);
}

.account-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-top: clamp(0.5rem, 4vw, 2.5rem);
}

.account-auth-intro {
  max-width: 34rem;
  padding-top: 0.5rem;
}

.account-eyebrow {
  color: var(--accent-light);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-auth-intro h1,
.account-summary h1 {
  margin: 0.65rem 0 0;
  color: var(--fg);
  font-size: clamp(2.05rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-wrap: balance;
}

.account-lede {
  margin-top: 1.1rem;
  color: var(--fg-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.account-points {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 1.6rem 0;
  padding: 0;
  list-style: none;
  color: var(--fg-muted);
  font-size: 0.88rem;
}

.account-points li {
  position: relative;
  padding-left: 1.4rem;
}

.account-points li::before {
  position: absolute;
  top: 0.42rem;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.12);
  content: "";
}

.account-fineprint {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 0.76rem;
  line-height: 1.6;
}

.account-card {
  padding: clamp(1.2rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--window);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 1.25rem;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.account-tab {
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.account-tab:hover {
  color: var(--fg);
}

.account-tab.is-active {
  background: var(--raised);
  color: var(--fg);
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.account-form h2 {
  color: var(--fg);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--fg-muted);
  font-size: 0.77rem;
  font-weight: 500;
}

.account-field em {
  font-style: normal;
  opacity: 0.65;
}

.account-field input {
  width: 100%;
  height: 2.65rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-field input:focus {
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12);
}

.account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.account-button:hover:not(:disabled) {
  opacity: 0.9;
}

.account-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.account-button.secondary {
  border-color: var(--line);
  background: transparent;
  color: var(--fg);
}

.account-button.secondary:hover:not(:disabled) {
  border-color: rgba(169, 184, 178, 0.5);
  background: var(--raised);
}

.account-link {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-light);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-hint {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.77rem;
  line-height: 1.6;
}

.account-form-error {
  margin: 0;
  color: #fca5a5;
  font-size: 0.79rem;
  line-height: 1.5;
}

.account-takeover {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.account-takeover h2 {
  color: var(--fg);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.account-takeover .account-hint {
  margin-top: 0.5rem;
}

.account-recovery {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.account-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.account-summary h1 {
  margin-top: 0.35rem;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
}

.account-muted {
  color: var(--fg-muted);
}

#account-email {
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.account-summary-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
  padding-bottom: 0.25rem;
}

.account-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raised);
  color: var(--fg-muted);
  font-size: 0.69rem;
  font-weight: 500;
  text-transform: capitalize;
}

.account-chip[data-status="active"],
.account-chip[data-status="trialing"],
.account-chip[data-status="paid"] {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
  color: var(--accent-light);
}

.account-chip[data-status="past_due"],
.account-chip[data-status="failed"] {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.07);
  color: #fcd34d;
}

.account-chip[data-status="canceled"],
.account-chip[data-status="expired"] {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.06);
  color: #fca5a5;
}

.account-layout {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.account-menu {
  position: sticky;
  top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.account-menu button {
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.account-menu button:hover {
  color: var(--fg);
}

.account-menu button.is-active {
  background: var(--raised);
  color: var(--fg);
}

.account-panel {
  min-height: 20rem;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(11, 15, 14, 0.72);
}

.account-panel h2 {
  margin-bottom: 1.2rem;
  color: var(--fg);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 0.75rem;
}

.account-tile {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--bg);
}

.account-tile > span {
  color: var(--fg-muted);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-tile strong {
  color: var(--fg);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.account-tile small {
  color: var(--fg-muted);
  font-size: 0.73rem;
}

.account-h3 {
  margin: 1.55rem 0 0.75rem;
  color: var(--fg);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.account-usage {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.account-usage-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.account-usage-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--fg);
  font-size: 0.8rem;
}

.account-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--raised);
}

.account-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--sea));
}

.account-empty {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.84rem;
  line-height: 1.6;
}

.account-loading {
  color: var(--fg-muted);
  font-size: 0.84rem;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0;
}

.account-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0.75rem;
}

.account-plan {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--bg);
}

.account-plan.is-current {
  border-color: rgba(52, 211, 153, 0.4);
}

.account-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.account-plan h4 {
  color: var(--fg);
  font-size: 0.98rem;
  font-weight: 600;
}

.account-plan-price {
  margin: 0;
  color: var(--fg);
  font-size: 0.82rem;
}

.account-plan .account-button {
  width: 100%;
  margin-top: 0.35rem;
}

.account-inline-link {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-table {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.account-payment-row {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) 120px 95px;
  gap: 0.9rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 0.78rem;
}

.account-payment-row:first-child {
  border-top: 0;
}

.account-table-head {
  background: var(--raised);
  color: var(--fg-muted);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.account-payment-row > span {
  min-width: 0;
}

.account-payment-row strong,
.account-payment-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-payment-row strong {
  color: var(--fg);
  font-weight: 500;
}

.account-payment-row small {
  margin-top: 0.12rem;
  font-size: 0.7rem;
}

.account-amount {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.account-device {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  margin-bottom: 0.65rem;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.account-device-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.account-device-head strong {
  color: var(--fg);
  font-size: 0.88rem;
  font-weight: 600;
}

.account-device .account-button {
  margin-top: 0.4rem;
}

.account-form.compact {
  margin-top: 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.account-form.compact:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.account-danger {
  margin-top: 1.5rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--line);
}

.account-toast {
  position: fixed;
  bottom: 1.4rem;
  left: 50%;
  z-index: 80;
  max-width: min(92vw, 480px);
  padding: 0.7rem 1rem;
  transform: translateX(-50%);
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 12px;
  background: #0c1a14;
  color: var(--fg);
  font-size: 0.83rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.account-toast[data-tone="error"] {
  border-color: rgba(248, 113, 113, 0.45);
  background: #1c0f0f;
}

@media (max-width: 820px) {
  .account-auth {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

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

  .account-menu {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0.3rem;
  }

  .account-menu button {
    white-space: nowrap;
  }

  .account-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .account-summary-meta {
    justify-content: flex-start;
  }

  .account-payment-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.9rem;
  }

  .account-table-head {
    display: none;
  }

  .account-amount {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .account-payment-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .account-header-nav a:first-child {
    display: none;
  }
}