/*
 * LinkNest Design System
 * Modern, sleek aesthetic with smooth animations
 */

/* ===== CSS Variables ===== */
:root {
  /* Colors - Refined palette */
  --color-primary: #56738c;
  --color-primary-dark: #3f4d5c;
  --color-primary-subtle: rgba(86, 115, 140, 0.12);
  --color-success: #10b981;
  --color-success-subtle: rgba(16, 185, 129, 0.12);
  --color-danger: #ef4444;
  --color-danger-dark: #dc2626;
  --color-danger-subtle: rgba(239, 68, 68, 0.12);
  --color-warning: #f59e0b;

  /* The landing page was written against a cool slate/blue scale in literal hexes
     rather than the app's warm grays. Tokenised so the dark scheme has one place to
     override, and near-duplicates (three almost identical pale blues, two pale
     neutrals) collapsed into one token each. The --accent-* pair is the readable
     text weight of success/danger; --color-success and --color-danger are tuned to
     carry a white label as a fill and are too heavy for type. */
  --ink-strong: #0f172a;
  --ink: #334155;
  --ink-soft: #475569;
  --surface-muted: #f8fafc;
  --surface-info: #eff6ff;
  --border-info: #bfdbfe;
  --accent-info: #1d4ed8;
  --accent-info-strong: #1e3a8a;
  --accent-success: #059669;
  --accent-danger: #b91c1c;

  /* Deliberately dark in both schemes: the two landing bands that invert against
     the page. Everything inside them is "color: white", which only stays legible
     if the band itself never flips with the gray ramp. */
  --surface-inverted: #18181b;

  /* Grays - Warmer, more refined */
  --color-gray-50: #fafafa;
  --color-gray-100: #f4f4f5;
  --color-gray-200: #e4e4e7;
  --color-gray-300: #d4d4d8;
  --color-gray-400: #a1a1aa;
  --color-gray-500: #71717a;
  --color-gray-600: #52525b;
  --color-gray-700: #3f3f46;
  --color-gray-800: #27272a;
  --color-gray-900: #18181b;
  --color-surface: #ffffff;
  --color-border-soft: #e4e4e7;

  /* Modern backgrounds */
  --bg-primary: #fafafa;
  --bg-card: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.7);
  --bg-glass-hover: rgba(255, 255, 255, 0.85);
  /* The glass navbar's own edge, and the near-invisible border that gives cards
     definition without a visible line. Both are tinted from the page, not fixed. */
  --border-glass: rgba(255, 255, 255, 0.5);
  --border-hairline: rgba(0, 0, 0, 0.04);
  /* Transparent in light: the mark's darkest blue already reads on a pale page. */
  --logo-plate: transparent;

  /* The one brand fill, for every filled button, avatar and accent. Flat by
     design: a two-stop ramp across a pill read as a smudge rather than a colour,
     so there are no gradients left anywhere in this stylesheet. */
  --fill-primary: #56738c;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;

  /* Border radius - More refined */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* Shadows - More sophisticated */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 40px rgba(86, 115, 140, 0.15);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.03);

  /* Typography */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Animation timing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal: 30;
  --z-tooltip: 40;
}

/* Dark scheme. Follows the OS only: a toggle needs JS, a storage read and a
   guard against the flash of wrong theme, none of which buys anything over the
   setting the user already made once.

   It is short because the gray ramp inverts. --color-gray-50 stays "the faintest
   fill" and --color-gray-900 stays "the strongest text", so the several hundred
   existing declarations that name them keep meaning what they meant. Only tokens
   that encode a *light* surface rather than a position on the ramp need values
   here, plus the two bands pinned dark in :root, which are already correct. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Makes form controls, scrollbars and the caret follow suit. */
    color-scheme: dark;

    /* Lifted: #56738c on a near-black page is 3.8:1, under the 4.5:1 floor for
       the links and labels that use it as a text colour. */
    --color-primary: #7d9bb5;
    --color-primary-subtle: rgba(125, 155, 181, 0.16);

    /* success, danger and warning are unchanged. They are used both as text on
       the page and as a fill under white labels, and the light-scheme values are
       the ones that satisfy both. */

    --ink-strong: #f4f4f5;
    --ink: #c7ccd4;
    --ink-soft: #a2a9b4;
    --surface-muted: #1c1c20;
    --surface-info: #17212f;
    --border-info: #2c405c;
    --accent-info: #93b4ee;
    --accent-info-strong: #c3d6f6;
    --accent-success: #34d399;
    --accent-danger: #f87171;

    --color-gray-50: #202024;
    --color-gray-100: #26262b;
    --color-gray-200: #33333a;
    --color-gray-300: #45454e;
    --color-gray-400: #71717a;
    --color-gray-500: #8e8e99;
    --color-gray-600: #a9a9b3;
    --color-gray-700: #c6c6cd;
    --color-gray-800: #e2e2e6;
    --color-gray-900: #f7f7f8;
    --color-surface: #17171a;
    --color-border-soft: #33333a;

    --bg-primary: #101013;
    --bg-card: #17171a;
    --bg-glass: rgba(23, 23, 26, 0.72);
    --bg-glass-hover: rgba(30, 30, 34, 0.88);
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-hairline: rgba(255, 255, 255, 0.06);
    --logo-plate: #e8eaee;

    /* Kept dark, not lifted with --color-primary: every button and avatar filled
       with this puts white text on it. 7.2:1 against white. */
    --fill-primary: #44596b;

    /* A black shadow on a near-black page does nothing, so these are opaque
       enough to still read as depth. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 40px rgba(125, 155, 181, 0.22);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* Webfonts are linked from layout.html. Importing them here would delay the
   fetch until this file has been parsed, and is silently dropped unless it
   precedes every ruleset above. */

/* ===== Base Styles ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-gray-900);
  background: var(--bg-primary);
  min-height: 100vh;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Selection styling */
::selection {
  background: var(--color-primary-subtle);
  color: var(--color-primary-dark);
}

/* ===== Container ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container-sm {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container-md {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ===== Navbar ===== */
.navbar {
  background: var(--bg-glass);
  border-bottom: 1px solid var(--border-glass);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-8);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.navbar-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-900);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.navbar-brand:hover {
  color: var(--color-gray-900);
  transform: translateY(-1px);
}

.navbar-brand-mark {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-md);
  padding: 3px;
  display: grid;
  place-items: center;
  background: var(--logo-plate);
  box-shadow: none;
}

.brand-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.navbar-brand-text {
  letter-spacing: -0.03em;
}

.navbar-links {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Scoped with :not(.btn) so buttons in the navbar keep the button system's own
   look. ".navbar-links a" outranks ".btn" on specificity, so without this the
   nav flattened Sign in and Register into the same pill. */
.navbar-links a:not(.btn) {
  color: var(--color-gray-600);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all var(--duration-normal) var(--ease-out-expo);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-full);
  position: relative;
}

.navbar-links a:not(.btn)::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--fill-primary);
  transition: all var(--duration-normal) var(--ease-out-expo);
  transform: translateX(-50%);
  border-radius: var(--radius-full);
}

.navbar-links a:not(.btn):hover {
  background: var(--color-primary-subtle);
}

.navbar-links a:not(.btn):hover::after {
  width: calc(100% - 2rem);
}

/* ===== Flash Messages ===== */
.flash-container {
  max-width: 1200px;
  margin: 0 auto var(--space-6);
  padding: 0 var(--space-4);
}

.flash {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  border: 1px solid;
  font-weight: 500;
  animation: slideIn var(--duration-normal) var(--ease-out-expo);
}

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

.flash.notice {
  background: var(--color-success-subtle);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--accent-success);
}

.flash.alert {
  background: var(--color-danger-subtle);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--accent-danger);
}

/* ===== Typography ===== */
h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-4);
  color: var(--color-gray-900);
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-4);
  color: var(--color-gray-900);
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-3);
  color: var(--color-gray-900);
  letter-spacing: -0.01em;
}

h4 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--space-3);
  color: var(--color-gray-700);
}

p {
  margin-bottom: var(--space-4);
  color: var(--color-gray-600);
  line-height: 1.7;
}

/* ===== Cards ===== */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-hairline);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* ===== Forms ===== */
.form-container {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-hairline);
  padding: var(--space-8);
  max-width: 440px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--fill-primary);
}

.form-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.form-header h1 {
  margin-bottom: var(--space-2);
  letter-spacing: -0.03em;
}

.form-header p {
  color: var(--color-gray-500);
  margin-bottom: 0;
}

.form-group {
  margin-bottom: var(--space-5);
}

label {
  display: block;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="file"],
textarea,
select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-family: var(--font-sans);
  background: var(--color-gray-50);
  transition: all var(--duration-normal) var(--ease-out-expo);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
input[type="file"]:hover,
textarea:hover,
select:hover {
  border-color: var(--color-gray-300);
  background: var(--bg-card);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-subtle);
  background: var(--bg-card);
}

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

.form-hint {
  font-size: 0.85rem;
  color: var(--color-gray-500);
  margin-top: var(--space-2);
}

.error-messages {
  background: var(--color-danger-subtle);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.error-messages h3 {
  color: var(--accent-danger);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.error-messages ul {
  list-style: none;
  margin: 0;
}

.error-messages li {
  color: var(--accent-danger);
  font-size: 0.875rem;
  margin-bottom: var(--space-1);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out-expo);
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Neutral shadow, not a tinted one: a wide brand-coloured halo bleeds into the
   page and makes a flat pill look like it fades out, which is the whole reason
   the gradient went. */
.btn-primary {
  background: var(--fill-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--color-gray-700);
  border: 1.5px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--color-danger);
  color: white;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-danger-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}

.btn-sm {
  padding: 0.625rem 1rem;
  font-size: 0.85rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
  display: block;
}

/* Action rows invert their buttons on hover. This was the same two declarations
   copy-pasted into five rules, each marked !important - which was never needed,
   since a descendant selector plus :hover already outranks .btn-primary. */
.home-auth-actions .btn:hover:not(:disabled),
.landing-hero-actions .btn:hover:not(:disabled),
.landing-cta-copy .btn:hover:not(:disabled) {
  background: var(--color-surface);
  color: var(--color-gray-900);
}

/* Focus styles for accessibility */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-subtle), 0 4px 14px rgba(86, 115, 140, 0.35);
}

/* ===== Auth Pages ===== */
.auth-shell {
  padding-top: 2.4rem;
  padding-bottom: 4rem;
}

.auth-footer {
  text-align: center;
  margin-bottom: 0;
}

.auth-footer-muted {
  margin-top: 0.6rem;
  color: var(--color-gray-600);
}

/* ===== Profile Card ===== */
.profile-card {
  display: flex;
  gap: var(--space-6);
  align-items: start;
  animation: fadeInUp var(--duration-slow) var(--ease-out-expo);
}

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

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-xl);
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: var(--space-1);
  letter-spacing: -0.02em;
}

.profile-username {
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  font-weight: 500;
}

.profile-bio {
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

/* ===== Public Link Cards ===== */
.public-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.public-link-card {
  background: var(--bg-card);
  border: 1.5px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  text-align: center;
  transition: all var(--duration-normal) var(--ease-out-expo);
  text-decoration: none;
  display: block;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.public-link-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fill-primary);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out-expo);
}

.public-link-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.public-link-card:hover::before {
  opacity: 1;
}

.public-link-card span,
.public-link-card .public-link-title {
  position: relative;
  z-index: 1;
}

.public-link-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
  transition: color var(--duration-normal) var(--ease-out-expo);
}

.public-link-card:hover .public-link-title {
  color: white;
}

/* ===== Analytics Cards ===== */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.analytics-card {
  background: var(--bg-card);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  text-align: center;
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.analytics-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.analytics-value {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.analytics-label {
  font-size: 0.8rem;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.analytics-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.analytics-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-gray-100);
  font-weight: 600;
  color: var(--color-gray-700);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.analytics-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-600);
}

.analytics-table tr:last-child td {
  border-bottom: none;
}

.analytics-table tr:hover td {
  background: var(--color-gray-50);
}

/* ===== Empty States ===== */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-4);
  animation: fadeIn var(--duration-slow) var(--ease-out-expo);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.empty-state-icon {
  font-size: 3rem;
  color: var(--color-gray-200);
  margin-bottom: var(--space-4);
}

.empty-state h3 {
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}

.empty-state p {
  color: var(--color-gray-500);
  margin-bottom: var(--space-6);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Dashboard Editor ===== */
.dashboard-editor {
  min-height: calc(100vh - 80px);
  background: var(--bg-primary);
  padding-bottom: var(--space-12);
}

.dashboard-workspace-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-top: 1px solid var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-100);
  background: var(--bg-glass);
  position: sticky;
  top: 60px;
  z-index: var(--z-sticky);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.workspace-tab {
  border: none;
  background: transparent;
  color: var(--color-gray-500);
  font-size: 0.95rem;
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out-expo);
  position: relative;
}

.workspace-tab:hover {
  color: var(--color-gray-700);
  background: var(--color-gray-100);
}

.workspace-tab.is-active {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.dashboard-editor-shell {
  padding-top: var(--space-8);
}

.workspace-panel {
  max-width: 560px;
  margin: 0 auto;
}

.dashboard-profile-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.dashboard-profile-avatar {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-xl);
  margin: 0 auto var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  background: var(--color-gray-100);
}

.dashboard-profile-name {
  margin: 0 0 var(--space-2);
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.dashboard-profile-url {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-primary);
}

.dashboard-card {
  background: var(--bg-card);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.dashboard-card:hover {
  box-shadow: var(--shadow-md);
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.dashboard-card-header h2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.dashboard-muted {
  color: var(--color-gray-400);
}

.dashboard-status {
  margin: var(--space-4) 0 0;
  color: var(--accent-success);
  font-weight: 600;
  font-size: 0.95rem;
}

.dashboard-alias {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

.dashboard-icon-action {
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-gray-400);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.dashboard-icon-action:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.dashboard-links-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.dashboard-links-header h2 {
  margin: 0;
  font-size: 1.75rem;
}

.dashboard-links-list {
  display: grid;
  gap: var(--space-3);
}

.dashboard-link-card {
  background: var(--bg-card);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.dashboard-link-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-gray-200);
}

.dashboard-link-content {
  min-width: 0;
}

.dashboard-link-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.badge-private {
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-link-title {
  margin: 0 0 var(--space-1);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-gray-900);
}

.dashboard-link-url {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-gray-500);
  word-break: break-word;
}

.dashboard-link-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dashboard-link-clicks {
  color: var(--color-gray-500);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Reorder is two buttons rather than drag-and-drop: it works with a keyboard and
   on touch, where HTML5 drag events are unreliable. Each is its own form, hence
   the flex row to sit them together. */
.link-move-group {
  display: flex;
  gap: var(--space-1);
}

.link-move {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--color-gray-600);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.link-move:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.link-move:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.link-move:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* flex-basis puts the editor on its own row under the title and the reorder
   controls, instead of squeezing in beside them. */
.link-edit {
  grid-column: 1 / -1;
}

/* Styled as a control rather than left as bare text: a bottom-left "Edit" that
   looks like a stray label doesn't read as something you can press. */
.link-edit > summary {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  color: var(--color-gray-600);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.link-edit > summary::marker,
.link-edit > summary::-webkit-details-marker {
  content: '';
  display: none;
}

.link-edit > summary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.link-edit > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.link-edit[open] > summary {
  margin-bottom: var(--space-4);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.link-edit-form {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-gray-100);
}

.link-delete-form {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gray-100);
}

.dashboard-card.empty h3 {
  margin-bottom: var(--space-2);
}

.dashboard-card.empty p {
  margin: 0;
}

/* ===== Landing Page ===== */
.home-auth {
  padding: var(--space-16) 0;
  background: var(--bg-card);
}

.home-auth-inner {
  text-align: center;
  animation: fadeInUp var(--duration-slow) var(--ease-out-expo);
}

.home-auth-kicker {
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}

.home-auth-copy {
  max-width: 560px;
  margin: 0 auto var(--space-8);
  font-size: 1.1rem;
  color: var(--color-gray-600);
  line-height: 1.7;
}

.home-auth-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.landing-hero {
  background: var(--color-gray-50);
  padding: var(--space-16) 0 var(--space-12);
  position: relative;
  overflow: hidden;
}

.landing-hero-inner {
  text-align: center;
  position: relative;
  z-index: 1;
  animation: fadeInUp var(--duration-slow) var(--ease-out-expo);
}

.landing-mark {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-xl);
  margin: 0 auto var(--space-6);
  display: grid;
  place-items: center;
  background: var(--logo-plate);
  box-shadow: none;
}

.landing-logo-image {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

.landing-hero-inner h1 {
  margin-bottom: var(--space-5);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.landing-hero-inner p {
  margin: 0 auto var(--space-8);
  max-width: 600px;
  color: var(--color-gray-600);
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  line-height: 1.6;
}

.landing-kicker {
  margin-bottom: var(--space-4);
  color: var(--accent-success);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
}

.landing-pill-row {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 auto var(--space-8);
}

.landing-pill-row span {
  border: 1px solid rgba(86, 115, 140, 0.2);
  background: rgba(86, 115, 140, 0.08);
  color: var(--accent-info-strong);
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.landing-hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.landing-feature-band {
  padding: var(--space-16) 0;
  background: var(--surface-inverted);
  color: white;
  position: relative;
  overflow: hidden;
}

.landing-network-strip {
  background: var(--surface-inverted);
  padding: var(--space-10) 0;
  position: relative;
}

.landing-network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  position: relative;
  z-index: 1;
}

.network-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.network-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(86, 115, 140, 0.3);
  transform: translateY(-4px);
}

.network-card h3 {
  color: white;
  margin-bottom: var(--space-2);
  font-size: 1.25rem;
}

.network-card p {
  color: var(--color-gray-400);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.landing-feature-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.landing-phone-mock {
  background: var(--surface-muted);
  border-radius: 30px;
  padding: var(--space-6);
  color: var(--ink-strong);
  box-shadow: 0 20px 40px rgba(17, 24, 39, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.landing-phone-brand {
  text-align: center;
  margin-bottom: var(--space-4);
}

.landing-phone-logo {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-3);
  background: var(--logo-plate);
  display: grid;
  place-items: center;
  box-shadow: none;
}

.phone-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.phone-title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
  color: var(--ink-strong);
}

.phone-subtitle {
  margin: 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.phone-section-title {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.landing-phone-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-phone-list li {
  padding: var(--space-3);
  border: 1px solid var(--color-gray-200);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  font-weight: 500;
  color: var(--ink);
}

.phone-nfc-chip {
  margin: var(--space-4) auto 0;
  width: fit-content;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-info);
  background: var(--surface-info);
  color: var(--accent-info-strong);
  font-weight: 700;
  font-size: 0.85rem;
}

.landing-feature-copy h2 {
  color: white;
  margin-bottom: var(--space-5);
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.landing-feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.landing-feature-list article {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.landing-feature-list h3 {
  color: white;
  margin-bottom: var(--space-1);
  font-size: 2rem;
  line-height: 1.15;
  display: flex;
  gap: var(--space-2);
  /* baseline, not center: center puts the bullet in the gutter between the two
     lines of a heading that wraps. */
  align-items: baseline;
}

.landing-feature-list h3 span {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  top: -1px;
}

.landing-feature-list p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.15rem;
  line-height: 1.45;
  max-width: 700px;
}

.landing-cta-slice {
  background: var(--surface-muted);
  padding: var(--space-16) 0;
}

.landing-nfc-band {
  background: var(--surface-info);
  padding: var(--space-14) 0;
}

.landing-nfc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
  align-items: center;
}

.nfc-steps {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ink-strong);
  font-size: 1.06rem;
  line-height: 1.7;
}

.nfc-tag-card {
  border-radius: 18px;
  border: 1px solid var(--border-info);
  /* Card surface, not the band's own --surface-info: the two were only told
     apart by the old gradient, and now the card has to lift off it. */
  background: var(--bg-card);
  box-shadow: 0 14px 30px rgba(30, 64, 175, 0.12);
  padding: var(--space-6);
  text-align: center;
}

.nfc-tag-card p {
  margin: 0 0 var(--space-2);
  color: var(--accent-info);
  font-weight: 700;
}

.nfc-tag-card strong {
  color: var(--ink-strong);
  font-size: 1.05rem;
}

.landing-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-10);
  align-items: center;
}

.landing-cta-copy h2 {
  margin-bottom: var(--space-4);
  font-size: clamp(1.85rem, 2.8vw, 3rem);
  line-height: 1.12;
}

.landing-cta-copy p {
  max-width: 680px;
  margin-bottom: var(--space-6);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-gray-700);
}

.landing-card-stack {
  position: relative;
  min-height: 300px;
}

.profile-card-back {
  position: absolute;
  right: 0;
  top: 16px;
  width: 78%;
  height: 260px;
  border-radius: 22px;
  background: var(--fill-primary);
  box-shadow: 0 14px 24px rgba(63, 77, 92, 0.25);
}

.profile-card-front {
  position: absolute;
  left: 0;
  top: 0;
  width: 78%;
  background: var(--bg-card);
  border: 1px solid var(--border-info);
  border-radius: 22px;
  padding: var(--space-5);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.15);
}

.card-avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: var(--fill-primary);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.card-name {
  margin: 0 0 var(--space-1);
  font-size: 1.2rem;
  color: var(--ink-strong);
  font-weight: 700;
}

.card-role {
  margin: 0 0 var(--space-4);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.card-mini-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.card-mini-actions span {
  border-radius: 999px;
  border: 1px solid var(--border-info);
  padding: var(--space-1) var(--space-3);
  color: var(--accent-info-strong);
  font-weight: 600;
  font-size: 0.85rem;
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
  .navbar-container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .navbar-brand {
    justify-content: center;
  }

  .navbar-links {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* A profile page's nav is a brand and one Share pill, which fit side by side
     even at 320px. Stacking them the way the app nav has to would push the
     person's card down behind two rows of our chrome. */
  .navbar-profile .navbar-container {
    flex-direction: row;
    align-items: center;
  }

  .profile-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  

  

  

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

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .form-container {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }

  .dashboard-workspace-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dashboard-workspace-tabs::-webkit-scrollbar {
    display: none;
  }

  .workspace-tab {
    font-size: 0.9rem;
    padding: var(--space-2) var(--space-3);
    flex-shrink: 0;
  }

  .dashboard-editor-shell {
    padding-top: var(--space-6);
  }

  .dashboard-profile-name {
    font-size: 1.75rem;
  }

  .dashboard-profile-url {
    font-size: 1rem;
  }

  .dashboard-card-header h2,
  .dashboard-links-header h2 {
    font-size: 1.25rem;
  }

  

  .dashboard-alias {
    font-size: 1.375rem;
  }

  /* One column: the click count and the reorder arrows get their own row under
     the title rather than squeezing a wrapping URL into ~140px. */
  .dashboard-link-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .dashboard-link-actions {
    justify-self: end;
  }

  .dashboard-link-title,
  .dashboard-link-url {
    font-size: 1rem;
  }

  

  .landing-hero {
    padding-top: var(--space-12);
    padding-bottom: var(--space-10);
  }

  .landing-feature-grid,
  .landing-cta-grid,
  .landing-nfc-grid,
  .landing-network-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .landing-feature-list {
    grid-template-columns: 1fr;
  }

  .landing-phone-mock {
    max-width: 320px;
    margin: 0 auto;
  }

  .landing-feature-list h3 {
    font-size: 1.25rem;
  }

  .landing-feature-list p {
    font-size: 1rem;
  }

  .landing-card-stack {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
  }

  .landing-network-strip {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .landing-pill-row {
    margin-bottom: var(--space-5);
  }

  .nfc-steps {
    font-size: 1rem;
  }

  .profile-card-front,
  .profile-card-back {
    width: 86%;
  }

  /* Smooth scrolling for mobile */
  html {
    scroll-behavior: smooth;
  }

  /* Touch-friendly button tap highlights */
  .btn,
  .navbar-links a,
  .workspace-tab {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Additional touch improvements */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .card:hover,
  .dashboard-link-card:hover,
  .network-card:hover {
    transform: none;
  }

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

/* ===== Link Styles ===== */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease-out-expo);
}

/* :not(.btn) because a:hover outranks .btn-primary's own "color: white" on
   specificity, so every link-shaped button's label went dark-on-dark the moment
   you pointed at it. A button carries its own colours in both states. */
a:not(.btn):hover {
  color: var(--color-primary-dark);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Override form button styles */
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Focus visible for all interactive elements */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===== Public Profile ===== */
.public-profile {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}

.public-profile .public-links-list,
.public-profile-empty {
  margin-top: var(--space-8);
}

.profile-section-heading {
  margin-bottom: var(--space-2);
}

.profile-bio.is-empty {
  color: var(--color-gray-400);
  font-style: italic;
}

/* The avatar fill is set inline from the user's profile_color, so it does not
   follow the scheme. Its initials have to be a fixed light rather than the page
   surface: --bg-card turned them near-black on a mid-slate avatar in dark. */
.profile-avatar-colored,
.dashboard-profile-avatar {
  color: white;
}

.public-link-host {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  transition: color var(--duration-normal) var(--ease-out-expo);
}

.public-link-card:hover .public-link-host {
  color: rgba(255, 255, 255, 0.75);
}

.public-profile-footer {
  text-align: center;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-gray-200);
}

.public-profile-footer p {
  color: var(--color-gray-500);
  font-size: 0.875rem;
}

/* The signup pill that replaces the "Powered by" line for a signed-out visitor.
   .btn-lg's padding at the pill radius, but not .btn-lg itself, whose font size
   wraps a long slug onto two lines at 320px. */
.profile-join-cta {
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-full);
}

.share-button svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Confirmation for the clipboard fallback. Same colours as .flash so the two
   read as one system, but fixed to the viewport: the share button is up in the
   navbar and the visitor may have scrolled anywhere down the page. */
.share-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: var(--z-tooltip);
  max-width: calc(100vw - 2 * var(--space-4));
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  box-shadow: var(--shadow-lg);
  color: var(--accent-success);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, var(--space-3));
  transition: opacity var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-expo);
  pointer-events: none;
}

.share-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ===== Error Page ===== */
.error-page {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.error-page-status {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-gray-400);
  margin-bottom: var(--space-2);
}

.error-page-title {
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}

.error-page-message {
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
}

.error-page-actions {
  display: flex;
  justify-content: center;
}