/* ===============================================================
   PostForMe — Client UI
   Bright palette (matching localhost:8086) + CallMaster animations
   Prefix: app-* (no clash with cm-*).
   =============================================================== */

:root {
  /* Surfaces (bright, 8086 palette) */
  --bg-base:        #f8fafc;
  --bg-surface:     #ffffff;
  --bg-elevated:    #ffffff;
  --bg-hover:       #f1f5f9;
  --bg-input:       #ffffff;

  /* Borders */
  --border:         #e2e8f0;
  --border-soft:    #f1f5f9;
  --border-strong:  #cbd5e1;

  /* Text */
  --text:           #0f172a;
  --text-strong:    #020617;
  --text-muted:     #475569;
  --text-subtle:    #64748b;
  --text-faint:     #94a3b8;

  /* Brand: violet/fuchsia (8086 palette) */
  --brand:          #8b5cf6;        /* violet-500 */
  --brand-bright:   #a78bfa;
  --brand-deep:     #6d28d9;        /* violet-700 */
  --brand-soft:     rgba(139, 92, 246, 0.10);
  --brand-glow:     rgba(139, 92, 246, 0.25);

  --indigo:         #6366f1;
  --indigo-deep:    #4f46e5;
  --fuchsia:        #d946ef;
  --pink:           #ec4899;

  /* States */
  --success:        #10b981;
  --success-soft:   rgba(16, 185, 129, 0.10);
  --danger:         #dc2626;
  --danger-2:       hsl(0, 75%, 55%);
  --danger-soft:    rgba(220, 38, 38, 0.10);
  --warning:        #f59e0b;
  --warning-soft:   rgba(245, 158, 11, 0.10);

  /* Easings */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-strong:  cubic-bezier(0.23, 1, 0.32, 1);
  --ease-press:       cubic-bezier(0.2, 0, 0, 1);
  --ease-md:          cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.5) inset;
  --shadow-2: 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-3: 0 24px 64px -16px rgba(110, 40, 180, 0.18), 0 8px 24px rgba(15, 23, 42, 0.08);
  --glow-brand: 0 8px 24px var(--brand-glow);

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;
}

* { font-family: 'Heebo', system-ui, -apple-system, sans-serif; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input::placeholder, textarea::placeholder { font-family: 'Heebo', sans-serif; }
[dir="ltr"] { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace; }

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

.t-meta { font-size: 12px; color: var(--text-subtle); }
.t-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* =============== Form inputs — premium, typographically refined =============== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
textarea,
select {
  transition: border-color 0.2s var(--ease-md), box-shadow 0.2s var(--ease-md), background-color 0.2s var(--ease-md);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: -0.005em;
  line-height: 1.5;
}
input[type="text"]:not(.font-mono),
input[type="email"]:not(.font-mono),
input[type="password"]:not(.font-mono),
input[type="number"]:not(.font-mono),
input[type="search"]:not(.font-mono),
input[type="url"]:not(.font-mono),
textarea:not(.font-mono),
select {
  font-family: 'Heebo', system-ui, sans-serif;
}
input::placeholder, textarea::placeholder {
  color: #9ca3af;
  font-weight: 400;
}
/* Premium label treatment for forms */
section label.block,
section label[class*="block"] {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  margin-bottom: 8px;
}
/* Required marker — stronger visual cue than a plain * */
section label .text-red-500 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.6875rem;
  font-weight: 700;
  margin-inline-start: 4px;
  border: 1px solid #fecaca;
}
/* "אופציונלי" text in labels — subtler */
section label span:not(.text-red-500):not([class*="bg-"]) {
  font-weight: 400;
  color: var(--text-faint);
  font-size: 0.75rem;
}
input[type="text"]:hover:not(:focus):not(:disabled),
input[type="email"]:hover:not(:focus):not(:disabled),
input[type="password"]:hover:not(:focus):not(:disabled),
input[type="number"]:hover:not(:focus):not(:disabled),
input[type="search"]:hover:not(:focus):not(:disabled),
input[type="url"]:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled) {
  border-color: var(--border-strong);
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
input[type="search"]:focus-visible,
input[type="url"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="date"]:focus-visible,
input[type="time"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

/* Card polish — soft elevation that responds to hover */
.card-soft {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: border-color 0.2s var(--ease-md), box-shadow 0.2s var(--ease-md), transform 0.2s var(--ease-md);
}
.card-soft:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-subtle);
}
.empty-state .empty-illust {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #f5f3ff, #fdf4ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  border: 1px solid #ede9fe;
}
.empty-state .empty-illust svg {
  width: 32px;
  height: 32px;
}
.empty-state h3 {
  color: var(--text-strong);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 6px;
}
.empty-state p {
  font-size: 0.9375rem;
  color: var(--text);                 /* near-black */
  max-width: 380px;
  margin: 0 auto 16px;
  line-height: 1.55;
  font-weight: 500;
}
.empty-state .empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(to left, var(--brand), var(--fuchsia));
  color: #fff;
  padding: 8px 18px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 0.875rem;
  transition: transform 0.18s var(--ease-md), box-shadow 0.18s var(--ease-md);
  border: 0;
  cursor: pointer;
}
.empty-state .empty-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(139, 92, 246, 0.35);
}

/* Quick-tips strip — tiny inline guidance for forms */
.tips-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(to left, #f5f3ff, #fdf4ff);
  border: 1px solid #ede9fe;
  border-radius: var(--r-md);
  color: var(--brand-deep);
  font-size: 0.8125rem;
}
.tips-strip strong { color: var(--brand-deep); font-weight: 700; }

/* Section header — premium, hierarchy-driven */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.section-head h2 {
  font-size: 1.875rem;       /* 30px (was 24) */
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-head h2::before {
  content: "";
  display: block;
  width: 4px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--fuchsia) 100%);
  flex-shrink: 0;
}
.section-head .section-sub {
  font-size: 0.9375rem;       /* 15px */
  color: var(--text);                 /* near-black */
  line-height: 1.55;
  max-width: 64ch;
  font-weight: 500;
}

/* Subsection (h3 inside a card) — softer hierarchy than section-head */
.subsection-title {
  font-size: 1.25rem;          /* 20px */
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.subsection-sub {
  font-size: 0.875rem;
  color: var(--text);                /* near-black */
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

/* =============== Post Result Card — premium content + actions =============== */

.post-content-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.post-content-label {
  font-size: 0.875rem;          /* 14px (was 12px) */
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.post-content-label--pink { color: #be185d; }
.post-content-label--blue { color: #1d4ed8; }

.post-content-text {
  font-size: 1rem;              /* 16px (was 14px) */
  color: var(--text-strong);    /* true near-black */
  line-height: 1.7;
  white-space: pre-wrap;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #fafafa 0%, #f8fafc 100%);
  border-top: 1px solid var(--border);
}

.post-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1.5px solid;
  background: #ffffff;
  cursor: pointer;
  transition: background 0.18s var(--ease-md), border-color 0.18s var(--ease-md), color 0.18s var(--ease-md), transform 0.18s var(--ease-md), box-shadow 0.18s var(--ease-md);
  letter-spacing: -0.005em;
  white-space: nowrap;
  height: 38px;
}
.post-action-btn svg { flex-shrink: 0; opacity: 0.85; }
.post-action-btn:hover { transform: translateY(-1px); }
.post-action-btn:active { transform: translateY(0); }

.post-action-btn--ghost {
  background: #ffffff;
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.post-action-btn--ghost:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.post-action-btn--copy {
  flex: 1;
  min-width: 140px;
  background: #ffffff;
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.post-action-btn--copy:hover {
  background: #f5f3ff;
  border-color: var(--brand);
  color: var(--brand-deep);
}

.post-action-btn--edit {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
.post-action-btn--edit:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #78350f;
}

.post-action-btn--rated-good {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}
.post-action-btn--rated-good:hover {
  background: #d1fae5;
  border-color: #34d399;
}
.post-action-btn--rated-bad {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.post-action-btn--rated-bad:hover {
  background: #fee2e2;
  border-color: #f87171;
}

.post-action-btn--publish {
  background: linear-gradient(to left, #2563eb, #4f46e5);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 4px 10px rgba(37, 99, 235, 0.28);
}
.post-action-btn--publish:hover {
  filter: brightness(1.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 8px 18px rgba(37, 99, 235, 0.4);
}

/* =============== Method section — premium writing-style picker =============== */

.method-section {
  background: linear-gradient(180deg, #fbfafc 0%, #ffffff 100%);
  border: 2px solid rgba(139, 92, 246, 0.7);
  border-radius: 14px;
  padding: 20px 22px;
}

.method-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.method-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.method-card {
  position: relative;
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 2px solid var(--border-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.22s var(--ease-md), background 0.22s var(--ease-md), box-shadow 0.22s var(--ease-md), transform 0.22s var(--ease-md);
  min-width: 0;
  user-select: none;
}
.method-card:hover {
  border-color: #a78bfa;
  background: linear-gradient(135deg, #ffffff 0%, #f8f5ff 100%);
  transform: translateY(-1px);
}
.method-card:has(input:checked) {
  border-color: var(--brand);
  background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 18px -4px rgba(139, 92, 246, 0.22);
}

/* Hide native radio but keep accessible */
.method-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Custom radio dot */
.method-card-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  flex-shrink: 0;
  background: #fff;
  transition: border-color 0.18s var(--ease-md);
  position: relative;
}
.method-card:has(input:checked) .method-card-radio {
  border-color: var(--brand);
}
.method-card:has(input:checked) .method-card-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #fff inset;
}

.method-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f5f3ff, #fdf4ff);
  border: 1px solid #ede9fe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-deep);
  flex-shrink: 0;
  transition: all 0.22s var(--ease-md);
}
.method-card-icon svg { width: 18px; height: 18px; }
.method-card:has(input:checked) .method-card-icon {
  background: linear-gradient(135deg, var(--brand), var(--fuchsia));
  border-color: var(--brand);
  color: #fff;
}

.method-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.method-card-title,
.method-card .method-card-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: #000 !important;             /* pure black, force-override */
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.method-card-desc,
.method-card .method-card-desc {
  font-size: 0.9375rem;
  color: #000 !important;             /* pure black, force-override */
  line-height: 1.5;
  font-weight: 600;
}

.method-card-tag,
.method-card .method-card-tag {
  color: #000 !important;             /* pure black on amber bg */
}

.method-card-tag {
  font-size: 0.6875rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
  color: var(--text-strong);          /* true black */
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  border: 1px solid #fbbf24;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 3px rgba(180, 83, 9, 0.18);
}

/* =============== Premium Form (.form-pro) — field-group pattern =============== */

.form-pro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field-group {
  background: var(--bg-surface);
  border: 2px solid rgba(139, 92, 246, 0.7);    /* brand violet @ 70% */
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color 0.22s var(--ease-md), background 0.22s var(--ease-md), box-shadow 0.22s var(--ease-md);
}
.field-group:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 14px -4px rgba(139, 92, 246, 0.20);
}
.field-group:focus-within {
  border-color: var(--brand);
  background: linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18), 0 6px 24px -8px rgba(139, 92, 246, 0.18);
}

.field-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.field-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f5f3ff 0%, #fdf4ff 100%);
  border: 1px solid #ede9fe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-deep);
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.field-icon svg { width: 18px; height: 18px; }

.field-text {
  flex: 1;
  min-width: 0;
}
.field-label {
  display: block;
  font-size: 1.25rem;          /* 20px (was 15px) */
  font-weight: 800;
  color: #000;
  line-height: 1.25;
  margin: 0 0 4px 0;
  letter-spacing: -0.022em;
}
.field-hint {
  font-size: 0.875rem;
  color: var(--text);                 /* near-black */
  margin: 0;
  line-height: 1.5;
  font-weight: 500;
}

.field-pill {
  margin-top: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
}
.field-pill--required {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.field-pill--optional {
  background: var(--bg-base);
  color: var(--text-faint);
  border: 1px solid var(--border);
}

.field-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

/* Premium input — replaces the slate Tailwind look */
.input-pro {
  flex: 1;
  min-width: 200px;
  height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0 14px;
  border-radius: 10px !important;
  border: 1.5px solid var(--border-strong) !important;   /* darker border for contrast */
  background: #ffffff;
  color: var(--text-strong);
  transition: border-color 0.18s var(--ease-md), box-shadow 0.18s var(--ease-md), background 0.18s var(--ease-md) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  appearance: none;
}
.input-pro::placeholder {
  color: #9ca3af;
  font-weight: 400;
}
.input-pro:hover:not(:focus):not(:disabled) {
  border-color: #94a3b8 !important;        /* slate-400 — clearly visible */
}
.input-pro:focus, .input-pro:focus-visible {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  background: #fefcff;
}
textarea.input-pro {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.55;
  width: 100%;
  box-sizing: border-box;
  display: block;
}
select.input-pro {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  padding-inline-start: 36px;
  cursor: pointer;
}
.flex-grow-2 { flex-grow: 2; }

/* Soft action button (used for "save audience") */
.btn-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1.5px solid;
  cursor: pointer;
  transition: background 0.18s var(--ease-md), border-color 0.18s var(--ease-md), transform 0.18s var(--ease-md);
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-soft svg { flex-shrink: 0; }
.btn-soft:hover { transform: translateY(-1px); }
.btn-soft:active { transform: translateY(0); }
.btn-soft--save {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.btn-soft--save:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}

/* Optional fields — collapsible card */
.optional-section {
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  overflow: hidden;
  transition: border-color 0.22s var(--ease-md), background 0.22s var(--ease-md);
}
.optional-section[open] {
  background: #fff;
  border-style: solid;
  border-color: var(--border-soft);
}
.optional-toggle {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-strong);            /* near-black */
  transition: background 0.18s var(--ease-md), color 0.18s var(--ease-md);
}
.optional-toggle::-webkit-details-marker { display: none; }
.optional-toggle::marker { display: none; content: ""; }
.optional-toggle .optional-toggle-ic {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.4s var(--ease-md), opacity 0.18s var(--ease-md);
}
.optional-section[open] .optional-toggle .optional-toggle-ic {
  transform: rotate(60deg);
  opacity: 1;
}
.optional-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-strong);
}
.optional-count {
  margin-inline-start: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);                  /* near-black */
  background: var(--bg-base);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
}
.optional-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 14px 18px;
  border-top: 1px dashed var(--border);
}
.optional-fields .field-group {
  background: #fff;
  border: 2px solid rgba(139, 92, 246, 0.7);
  padding: 16px 18px;
}
.optional-fields .field-group:hover {
  border-color: var(--brand);
}
.optional-fields .field-group:focus-within {
  background: linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18), 0 6px 24px -8px rgba(139, 92, 246, 0.18);
}

/* Form footer — model + generate button */
.form-footer {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 18px 18px 4px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
}
.form-footer-model {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-footer-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -0.005em;
}
.form-footer .ui-btn { flex-shrink: 0; }

/* =============== Post tile — refined history card =============== */

.post-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color 0.2s var(--ease-md), box-shadow 0.2s var(--ease-md), transform 0.2s var(--ease-md);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.post-tile:hover {
  border-color: #d8b4fe;
  box-shadow: 0 12px 32px -12px rgba(139, 92, 246, 0.18), 0 2px 6px rgba(15, 23, 42, 0.04);
  transform: translateY(-1px);
}
.post-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.post-tile-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(to left, #f5f3ff, #fdf4ff);
  color: var(--brand-deep);
  border: 1px solid #ede9fe;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.post-tile-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);              /* darker — reads clearly */
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.post-tile-title {
  font-size: 1.0625rem;          /* 17px */
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 4px 0 2px;
}
.post-tile-hook {
  font-size: 0.9375rem;
  color: var(--text);                  /* near-black */
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
}
.post-tile-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.rate-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background 0.18s var(--ease-md), border-color 0.18s var(--ease-md), color 0.18s var(--ease-md), transform 0.18s var(--ease-md);
}
.rate-pill svg { flex-shrink: 0; opacity: 0.8; }
.rate-pill:hover { transform: translateY(-1px); }
.rate-pill--unrated {
  background: var(--bg-base);
  border-color: var(--border);
  color: var(--text-muted);
}
.rate-pill--unrated:hover {
  background: #fff;
  border-color: #d8b4fe;
  color: var(--brand-deep);
}
.rate-pill--good {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.rate-pill--good:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}
.rate-pill--bad {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.rate-pill--bad:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
.rate-pill-icon {
  font-size: 0.75rem;
  line-height: 1;
}

.post-tile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.post-tile-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s var(--ease-md), border-color 0.18s var(--ease-md), color 0.18s var(--ease-md), transform 0.18s var(--ease-md);
  letter-spacing: -0.005em;
}
.post-tile-btn svg { flex-shrink: 0; }
.post-tile-btn--ghost {
  background: transparent;
  color: var(--text);                   /* near-black for clarity */
  border-color: var(--border-strong);
}
.post-tile-btn--ghost:hover {
  background: var(--bg-hover);
  color: var(--text-strong);
  border-color: #94a3b8;
}
.post-tile-btn--primary {
  background: linear-gradient(to left, var(--brand), var(--fuchsia));
  color: #fff;
  margin-inline-start: auto;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 4px 10px rgba(139, 92, 246, 0.25);
}
.post-tile-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 8px 18px rgba(139, 92, 246, 0.4);
  filter: brightness(1.05);
}
.post-tile-btn--primary:active {
  transform: translateY(0);
}
.post-tile-btn--danger {
  background: transparent;
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.35);
}
.post-tile-btn--danger:hover {
  background: #fef2f2;
  color: #991b1b;
  border-color: #dc2626;
}
.post-tile-btn--danger:active {
  background: #fee2e2;
}

/* Numbered flow steps — visual onboarding strip */
.flow-steps {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 16px 0;
  padding: 20px 24px;
  background: linear-gradient(to left, #f8f5ff, #fdf4ff);
  border: 1.5px solid #ede9fe;
  border-radius: var(--r-lg);
}
.flow-steps li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background 0.2s var(--ease-md), transform 0.2s var(--ease-md);
}
.flow-steps li:hover {
  background: rgba(139, 92, 246, 0.08);
  transform: translateY(-1px);
}
.flow-steps li:active {
  transform: translateY(0);
}
.flow-steps li:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.30);
}
.flow-steps li:not(:last-child)::after {
  content: "";
  flex: 0 0 24px;
  height: 1.5px;
  background: linear-gradient(to left, var(--brand) 0%, transparent 100%);
  opacity: 0.45;
  margin: 0 6px;
}
.flow-steps .flow-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--fuchsia));
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
  letter-spacing: -0.01em;
}
.flow-steps .flow-text {
  font-size: 1rem;
  color: var(--brand-deep);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
@media (max-width: 640px) {
  .flow-steps li:not(:last-child)::after { display: none; }
  .flow-steps li { flex: 1 1 45%; }
}

/* =============== TABS — refined nav =============== */

.tab-btn {
  background: transparent;
  color: var(--text-muted);
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 0.875rem;
  transition: background 0.18s var(--ease-md), color 0.18s var(--ease-md), transform 0.18s var(--ease-md);
  cursor: pointer;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
}
.tab-btn .tab-ic {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.18s var(--ease-md);
}
.tab-btn:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--text-strong);
}
.tab-btn:hover:not(.active) .tab-ic { opacity: 1; }
.tab-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}
.tab-btn.active {
  background: linear-gradient(to left, #ede9fe, #fae8ff);
  color: var(--brand-deep);
  font-weight: 600;
}
.tab-btn.active .tab-ic { opacity: 1; }
.tab-btn.tab-primary { font-weight: 600; }
.tab-btn.tab-primary.active {
  background: linear-gradient(to left, #ddd6fe, #f5d0fe);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 12px rgba(139, 92, 246, 0.18);
}
.tab-btn.tab-admin {
  color: #92400e;
}
.tab-btn.tab-admin:hover:not(.active) {
  background: #fef3c7;
  color: #78350f;
}
.tab-btn.tab-admin.active {
  background: linear-gradient(to left, #fef3c7, #fed7aa);
  color: #b45309;
}

.tab-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 6px;
  align-self: center;
}

/* =============== TOAST — premium notification =============== */
#toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  min-width: 280px;
  max-width: 440px;
  padding: 14px 18px 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    0 16px 40px -10px rgba(15, 23, 42, 0.20),
    0 6px 14px -4px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.32s var(--ease-out-expo),
              transform 0.32s var(--ease-out-expo);
  pointer-events: none;
  overflow: hidden;
  font-family: 'Heebo', system-ui, sans-serif;
}
#toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Side accent bar (set per type) */
#toast::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--toast-accent, #10b981);
  border-radius: 14px 0 0 14px;
}

.toast-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--toast-accent-grad, linear-gradient(135deg, #10b981, #34d399));
  box-shadow: 0 4px 12px -2px var(--toast-accent-shadow, rgba(16, 185, 129, 0.4)),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.toast-icon svg { display: block; }

.toast-content {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}
.toast-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  line-height: 1.4;
  word-wrap: break-word;
}
.toast-sub {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.4;
  font-weight: 500;
}

/* Click affordance — chevron + cursor */
.toast-arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  align-self: center;
  transition: background 0.18s var(--ease-md), transform 0.22s var(--ease-md), color 0.18s var(--ease-md);
}
[dir="rtl"] .toast-arrow svg { transform: scaleX(-1); }

#toast.is-clickable {
  cursor: pointer;
  pointer-events: auto;
}
#toast.is-clickable:hover {
  transform: translateY(-2px) scale(1);
  box-shadow:
    0 22px 50px -12px rgba(15, 23, 42, 0.26),
    0 8px 18px -4px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(15, 23, 42, 0.05);
}
#toast.is-clickable:hover .toast-arrow {
  background: var(--toast-accent-shadow, rgba(16, 185, 129, 0.18));
  color: var(--toast-accent, #10b981);
  transform: translateX(-2px);
}
[dir="rtl"] #toast.is-clickable:hover .toast-arrow {
  transform: translateX(2px);
}
#toast.is-clickable:active {
  transform: translateY(0) scale(0.99);
}

/* Progress bar */
.toast-progress {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--toast-accent, #10b981);
  transform-origin: inset-inline-start;
  opacity: 0.55;
}
#toast.show .toast-progress {
  animation: toast-progress 3s linear forwards;
}
@keyframes toast-progress {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
[dir="rtl"] .toast-progress { transform-origin: right; }

/* Type variants — set CSS vars */
#toast.toast-success {
  --toast-accent: #10b981;
  --toast-accent-grad: linear-gradient(135deg, #059669, #34d399);
  --toast-accent-shadow: rgba(16, 185, 129, 0.4);
}
#toast.toast-error {
  --toast-accent: #ef4444;
  --toast-accent-grad: linear-gradient(135deg, #dc2626, #f87171);
  --toast-accent-shadow: rgba(239, 68, 68, 0.4);
}
#toast.toast-warning {
  --toast-accent: #f59e0b;
  --toast-accent-grad: linear-gradient(135deg, #d97706, #fbbf24);
  --toast-accent-shadow: rgba(245, 158, 11, 0.4);
}
#toast.toast-info {
  --toast-accent: #6366f1;
  --toast-accent-grad: linear-gradient(135deg, #4f46e5, #8b5cf6);
  --toast-accent-shadow: rgba(99, 102, 241, 0.4);
}

/* =============== Button micro-lift — for primary gradient buttons =============== */
.btn-lift {
  transition: transform 0.18s var(--ease-md), box-shadow 0.18s var(--ease-md), filter 0.18s var(--ease-md);
}
.btn-lift:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.btn-lift:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* =============== Skeleton loader — for async content =============== */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
  display: block;
}
.skeleton-text { height: 0.875rem; margin-bottom: 8px; }
.skeleton-title { height: 1.25rem; margin-bottom: 12px; width: 60%; }
.skeleton-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 12px; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============== Anchor & button focus consistency =============== */
button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.30);
}
.tab-btn:focus-visible {
  /* keep tab focus simpler — already styled above */
}

.copy-btn:active { transform: scale(0.97); }

/* =============== AUTH / LOGIN SCREEN (bright) =============== */

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #faf5ff 0%, #fef2f2 50%, #fff7ed 100%);
}

.auth-orb {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.18) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  animation: orbDrift 18s ease-in-out infinite;
  z-index: 0;
}
.auth-orb.orb-1 { top: -200px; right: -200px; }
.auth-orb.orb-2 {
  bottom: -200px; left: -200px;
  background: radial-gradient(circle at center, rgba(236, 72, 153, 0.18) 0%, transparent 60%);
  animation-delay: -9s;
}
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-30px, 40px) scale(0.95); }
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-3);
  animation: authCardIn 700ms var(--ease-out-expo) both;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: linear-gradient(to left, #8b5cf6, #ec4899, #f59e0b);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.auth-mark {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 50%, #ec4899 100%);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  animation: authMarkFloat 5s ease-in-out infinite;
}
.auth-mark svg { transform: rotate(-25deg); transition: transform 0.4s var(--ease-md, cubic-bezier(0.16,1,0.3,1)); }
.auth-mark:hover svg { transform: rotate(-25deg) translate(2px, -2px); }
.auth-mark-ring {
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  background: conic-gradient(from 0deg, transparent 0deg, #8b5cf6 90deg, #ec4899 180deg, transparent 270deg);
  opacity: 0.55;
  filter: blur(4px);
  animation: authRingSpin 6s linear infinite;
  z-index: -1;
}
@keyframes authMarkFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes authRingSpin {
  to { transform: rotate(360deg); }
}

.auth-wordmark {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.035em;
  background: linear-gradient(120deg, #6d28d9 0%, #d946ef 50%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Heebo', system-ui, sans-serif;
  line-height: 1;
}

.auth-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
}
.auth-sub {
  font-size: 13px;
  color: #64748b;
  margin: 8px 0 18px;
  line-height: 1.55;
}

.auth-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 26px;
}
.auth-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #faf5ff, #fdf2f8);
  border: 1px solid rgba(139, 92, 246, 0.18);
  font-size: 11.5px;
  font-weight: 600;
  color: #4c1d95;
}
.auth-trust-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
  animation: trustPulse 2.4s ease-in-out infinite;
}
.auth-trust-dot--blue   { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18); animation-delay: 0.4s; }
.auth-trust-dot--pink   { background: #ec4899; box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.18); animation-delay: 0.8s; }
@keyframes trustPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.75; }
}

/* Third orb adds depth without overwhelming */
.auth-orb.orb-3 {
  width: 380px; height: 380px;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.10) 0%, transparent 60%);
  animation-delay: -4s;
  pointer-events: none;
}

/* =============== FORM FIELDS (bright) =============== */

.field { margin-bottom: 14px; }
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 7px;
}
.field-input {
  width: 100%;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
  outline: none;
  transition: border-color 140ms var(--ease-press), box-shadow 140ms;
}
.field-input::placeholder { color: #94a3b8; }
.field-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

.error-banner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
  padding: 10px 13px;
  font-size: 13px;
  color: #b91c1c;
  font-weight: 500;
  margin: 6px 0 4px;
  animation: shakeIn 380ms var(--ease-out-expo);
}
@keyframes shakeIn {
  0%   { transform: translateX(-6px); opacity: 0; }
  25%  { transform: translateX(4px); }
  50%  { transform: translateX(-2px); }
  100% { transform: translateX(0); opacity: 1; }
}

/* =============== APP-LOGIN-BTN (CallMaster pattern, premium 4-state) =============== */

.app-login-btn {
  --primary: #fafafa;
  --neutral-1: hsl(266, 85%, 58%);   /* violet for bright theme */
  --neutral-2: hsl(266, 50%, 22%);
  --radius: 14px;
  cursor: pointer;
  border-radius: var(--radius);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border: none;
  box-shadow:
    0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.2),
    0 4px 5px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  width: 100%;
  min-width: 200px;
  padding: 20px;
  height: 60px;
  font-family: "Heebo", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: transparent;
  margin-top: 14px;
}
.app-login-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
              0 15px 30px rgba(0, 0, 0, 0.3);
}
.app-login-btn:active { transform: scale(1); }
.app-login-btn:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 2.5px solid transparent;
  background:
    linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
    linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.45)) border-box;
  z-index: 0;
  transition: all 0.4s ease;
}
.app-login-btn:hover::after {
  transform: scale(1.05, 1.1);
  box-shadow: inset 0 -1px 3px 0 rgba(255, 255, 255, 1);
}
.app-login-btn::before {
  content: "";
  inset: 7px 6px 6px 6px;
  position: absolute;
  background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
  border-radius: 30px;
  filter: blur(0.5px);
  z-index: 2;
}
.app-login-btn .state {
  padding-left: 29px;
  z-index: 2;
  display: flex;
  position: relative;
}
.app-login-btn .state p {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.app-login-btn .state .icon {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  margin: auto;
  transform: scale(1.25);
  transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.app-login-btn .state .icon svg { overflow: visible; }
.app-login-btn .state--checking,
.app-login-btn .state--sent,
.app-login-btn .state--failed { display: none; }

.app-login-btn .outline {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  inset: -2px -3.5px;
}
.app-login-btn .outline::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 180deg, transparent 60%, white 80%, transparent 100%);
  animation: app-spin 2s linear infinite;
  animation-play-state: paused;
}
@keyframes app-spin { to { transform: rotate(360deg); } }
.app-login-btn:hover .outline { opacity: 1; }
.app-login-btn:hover .outline::before { animation-play-state: running; }

.app-login-btn .state p span {
  display: block;
  opacity: 0;
  animation: app-slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}
.app-login-btn:hover .state--default p span {
  opacity: 1;
  animation: app-wave 0.5s ease forwards calc(var(--i) * 0.02s);
}
@keyframes app-wave {
  30%  { opacity: 1; transform: translateY(4px); }
  50%  { opacity: 1; transform: translateY(-3px); color: var(--primary); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes app-slideDown {
  0%   { opacity: 0; transform: translateY(-20px) translateX(5px) rotate(-90deg); color: var(--primary); filter: blur(5px); }
  30%  { opacity: 1; transform: translateY(4px) translateX(0) rotate(0); filter: blur(0); }
  50%  { opacity: 1; transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(0) translateX(0) rotate(0); }
}
@keyframes app-disappear {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateX(5px) translateY(20px); color: var(--primary); filter: blur(5px); }
}

.app-login-btn .state--default .icon svg { animation: app-land 0.6s ease forwards; }
.app-login-btn:hover .state--default .icon { transform: rotate(45deg) scale(1.25); }
@keyframes app-land {
  0%   { transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2); opacity: 0; filter: blur(3px); }
  100% { transform: translateX(0) translateY(0) rotate(0); opacity: 1; filter: blur(0); }
}
@keyframes app-takeOff {
  0%   { opacity: 1; }
  60%  { opacity: 1; transform: translateX(70px) rotate(45deg) scale(2); }
  100% { opacity: 0; transform: translateX(160px) rotate(45deg) scale(0); }
}
.app-login-btn .state--default .icon::before {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  width: 0;
  left: -5px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
}
@keyframes app-contrail {
  0%   { width: 0;   opacity: 1; }
  8%   { width: 15px; }
  60%  { opacity: 0.7; width: 80px; }
  100% { opacity: 0;  width: 160px; }
}

/* CHECKING */
.app-login-btn.is-checking .state--default { position: absolute; }
.app-login-btn.is-checking .state--default p span {
  opacity: 1;
  animation: app-disappear 0.6s ease forwards calc(var(--i) * 0.03s);
}
.app-login-btn.is-checking .state--default svg { animation: app-takeOff 0.8s linear forwards; }
.app-login-btn.is-checking .state--default .icon { transform: rotate(0) scale(1.25); }
.app-login-btn.is-checking .state--default .icon::before { animation: app-contrail 0.8s linear forwards; }
.app-login-btn.is-checking .state--checking { display: flex; }
.app-login-btn.is-checking .state--checking span {
  opacity: 0;
  animation: app-slideDown 0.7s ease forwards calc(var(--i) * 0.12s);
}
.app-login-btn.is-checking .state--checking .icon svg {
  animation: app-spinner 0.9s linear infinite;
  transform-origin: center center;
}
@keyframes app-spinner { to { transform: rotate(360deg); } }

/* SENT */
.app-login-btn.is-sent .state--default { position: absolute; }
.app-login-btn.is-sent .state--default p span {
  opacity: 1;
  animation: app-disappear 0.6s ease forwards calc(var(--i) * 0.03s);
}
.app-login-btn.is-sent .state--default svg { animation: app-takeOff 0.8s linear forwards; }
.app-login-btn.is-sent .state--default .icon { transform: rotate(0) scale(1.25); }
.app-login-btn.is-sent .state--default .icon::before { animation: app-contrail 0.8s linear forwards; }
.app-login-btn.is-sent .state--sent { display: flex; }
.app-login-btn.is-sent .state--sent svg { transform: scale(1.25); margin-right: 8px; }
.app-login-btn.is-sent .state--sent span {
  opacity: 0;
  animation: app-slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}
.app-login-btn.is-sent .state--sent .icon svg {
  opacity: 0;
  animation: app-appear 1.2s ease forwards 0.6s;
}
@keyframes app-appear {
  0%   { opacity: 0; transform: scale(4) rotate(-40deg); color: var(--primary); filter: blur(4px); }
  30%  { opacity: 1; transform: scale(0.6); filter: blur(1px); }
  50%  { opacity: 1; transform: scale(1.2); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* FAILED */
.app-login-btn.is-failed {
  --neutral-1: hsl(0, 75%, 55%);
  --neutral-2: hsl(0, 50%, 22%);
}
.app-login-btn.is-failed .state--default { position: absolute; }
.app-login-btn.is-failed .state--default p span {
  opacity: 1;
  animation: app-disappear 0.6s ease forwards calc(var(--i) * 0.03s);
}
.app-login-btn.is-failed .state--default svg { animation: app-takeOff 0.8s linear forwards; }
.app-login-btn.is-failed .state--failed { display: flex; }
.app-login-btn.is-failed .state--failed span {
  opacity: 0;
  animation: app-slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}
.app-login-btn.is-failed .state--failed .icon svg {
  opacity: 0;
  animation: app-shake 1.0s ease forwards 0.6s;
}
@keyframes app-shake {
  0%   { opacity: 0; transform: scale(4) rotate(-40deg); color: var(--primary); filter: blur(4px); }
  30%  { opacity: 1; transform: scale(1.4) rotate(-8deg); filter: blur(1px); }
  45%  { transform: scale(1.2) rotate(8deg); filter: blur(0); }
  60%  { transform: scale(1.15) rotate(-6deg); }
  75%  { transform: scale(1.1) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.app-login-btn:disabled { cursor: default; }

/* =============== APP-TRASH-ICON (animated trash) =============== */

.app-trash-icon {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 18px;
  height: 16px;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
  color: currentColor;
}
.app-trash-icon svg { pointer-events: none; }
.app-trash-paper {
  position: absolute;
  top: -10px;
  fill: currentColor;
  transition: top 0.35s ease 0.05s;
}
.app-trash-lid {
  transform-origin: right center;
  transition: transform 0.4s ease;
  margin-bottom: 1px;
}
.app-trash-body { display: block; }
.app-trash-icon:hover .app-trash-paper,
*:has(> .app-trash-icon):hover .app-trash-paper {
  top: 3px;
  animation: app-trash-spin 1.2s ease;
}
.app-trash-icon:hover .app-trash-lid,
*:has(> .app-trash-icon):hover .app-trash-lid {
  transform: rotate(90deg);
}
@keyframes app-trash-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =============== Neon Action Button (.ui-btn) =============== */

.ui-btn {
  cursor: pointer;
  border-radius: 6px;
  color: rgb(100, 116, 139);
  border-style: solid;
  background-color: transparent;
  border-color: rgb(148, 163, 184);
  width: 200px;
  height: 44px;
  transition: 0.2s ease;
  border-width: 1.5px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ui-btn:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(59, 100, 220);
  border-color: rgb(59, 100, 220);
  box-shadow: 0 0 0 3px rgba(59, 100, 220, 0.15),
    0 6px 18px rgba(59, 100, 220, 0.35);
  font-size: 16px;
  width: 210px;
  height: 48px;
  letter-spacing: 1.5px;
}
.ui-btn:active {
  width: 198px;
  height: 43px;
  letter-spacing: 0.5px;
  box-shadow: 0 0 0 2px rgba(59, 100, 220, 0.2);
}
.ui-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-btn:disabled:hover {
  color: rgb(100, 116, 139);
  background-color: transparent;
  border-color: rgb(148, 163, 184);
  box-shadow: none;
  width: 200px;
  height: 44px;
  font-size: 15px;
  letter-spacing: 1px;
}

/* =============== Typewriter loader =============== */

.typewriter {
  --blue: #5cbbff;
  --blue-dark: #162d72;
  --key: #fff;
  --paper: #eef0fd;
  --text: #00000049;
  --tool: #ffbb00;
  --duration: 3s;
  position: relative;
  -webkit-animation: bounce05 var(--duration) linear infinite;
  animation: bounce05 var(--duration) linear infinite;
}

.typewriter .slide {
  width: 92px;
  height: 20px;
  border-radius: 3px;
  margin-left: 14px;
  transform: translateX(14px);
  background: linear-gradient(var(--blue), var(--blue-dark));
  -webkit-animation: slide05 var(--duration) ease infinite;
  animation: slide05 var(--duration) ease infinite;
}

.typewriter .slide:before,
.typewriter .slide:after,
.typewriter .slide i:before {
  content: "";
  position: absolute;
  background: var(--tool);
}

.typewriter .slide:before {
  width: 2px;
  height: 8px;
  top: 6px;
  left: 100%;
}

.typewriter .slide:after {
  left: 94px;
  top: 3px;
  height: 14px;
  width: 6px;
  border-radius: 3px;
}

.typewriter .slide i {
  display: block;
  position: absolute;
  right: 100%;
  width: 6px;
  height: 4px;
  top: 4px;
  background: var(--tool);
}

.typewriter .slide i:before {
  right: 100%;
  top: -2px;
  width: 4px;
  border-radius: 2px;
  height: 14px;
}

.typewriter .paper {
  position: absolute;
  left: 24px;
  top: -26px;
  width: 40px;
  height: 46px;
  border-radius: 5px;
  background: var(--paper);
  transform: translateY(46px);
  -webkit-animation: paper05 var(--duration) linear infinite;
  animation: paper05 var(--duration) linear infinite;
}

.typewriter .paper:before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 7px;
  border-radius: 2px;
  height: 4px;
  transform: scaleY(0.8);
  background: var(--text);
  box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
}

.typewriter .keyboard {
  width: 120px;
  height: 56px;
  margin-top: -10px;
  z-index: 1;
  position: relative;
}

.typewriter .keyboard:before,
.typewriter .keyboard:after {
  content: "";
  position: absolute;
}

.typewriter .keyboard:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  transform: perspective(10px) rotateX(2deg);
  transform-origin: 50% 100%;
}

.typewriter .keyboard:after {
  left: 2px;
  top: 25px;
  width: 11px;
  height: 4px;
  border-radius: 2px;
  box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
    60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
    22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
    60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  -webkit-animation: keyboard05 var(--duration) linear infinite;
  animation: keyboard05 var(--duration) linear infinite;
}

@keyframes bounce05 {
  85%, 92%, 100% { transform: translateY(0); }
  89% { transform: translateY(-4px); }
  95% { transform: translateY(2px); }
}

@keyframes slide05 {
  5% { transform: translateX(14px); }
  15%, 30% { transform: translateX(6px); }
  40%, 55% { transform: translateX(0); }
  65%, 70% { transform: translateX(-4px); }
  80%, 89% { transform: translateX(-12px); }
  100% { transform: translateX(14px); }
}

@keyframes paper05 {
  5% { transform: translateY(46px); }
  20%, 30% { transform: translateY(34px); }
  40%, 55% { transform: translateY(22px); }
  65%, 70% { transform: translateY(10px); }
  80%, 85% { transform: translateY(0); }
  92%, 100% { transform: translateY(46px); }
}

@keyframes keyboard05 {
  5%, 12%, 21%, 30%, 39%, 48%, 57%, 66%, 75%, 84% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  9% {
    box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  18% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  27% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  36% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key),
      60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
  }
  45% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  54% {
    box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  63% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
  }
  72% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
  81% {
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key),
      60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key),
      22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key),
      60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
  }
}

/* =============== Printing-press loader (.press) =============== */

.press * {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.press {
  background: #b4b4b4;
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  font-size: 16px;
  color: #17181c;
  font-family: serif;
  line-height: 1.5;
  border-radius: 12px;
}
.press-container { display: block; }
.press .sheet { overflow: hidden; }
.press .sheet,
.press .sheet:before,
.press .roll {
  position: absolute;
}
.press .sheet,
.press .roll {
  top: 50%;
  left: 50%;
}
.press .sheet {
  width: 4em;
  height: 6em;
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg);
}
.press .sheet:before {
  animation: print 0.5s ease-in-out infinite;
  background:
    linear-gradient(#0000 5.2em, currentColor 5.2em 5.3em, #0000 5.3em 5.5em)
      0.4em 0 / 3.2em 6em,
    linear-gradient(#0000 5.5em, currentColor 5.5em 5.7em, #0000 5.7em) 0.6em 0 /
      2.8em 6em,
    linear-gradient(
        90deg,
        #e3e4e8 0.4em,
        #0000 0.4em 1.9em,
        #e3e4e8 1.9em 2.1em,
        #0000 2.1em 3.6em,
        #e3e4e8 3.6em
      )
      0 0 / 4em 6em,
    repeating-linear-gradient(
        #e3e4e8 0 0.4em,
        #0000 0.4em 5em,
        #e3e4e8 5em 6em,
        #0000 6em
      )
      0 0 / 4em 6em,
    linear-gradient(#0000 3.4em, currentColor 3.4em) 100% 0 / 50% 6em,
    repeating-linear-gradient(currentColor 0 0.2em, #e3e4e8 0.2em 0.4em) 0 0 /
      4em 6em;
  background-repeat: repeat-y;
  color: #17181c;
  content: "";
  display: block;
  top: -6em;
  left: 0;
  width: 100%;
  height: calc(100% + 6em);
}
.press .sheet:nth-child(1):before,
.press .sheet:nth-child(5):before { color: #c7cad1; }
.press .sheet:nth-child(n + 7):nth-child(-n + 9) { height: 0.4em; }
.press .sheet:nth-child(1) {
  height: 42em;
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(-17.4em, 9.4em) rotateX(-90deg);
}
.press .sheet:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(-2.5em, -2.5em);
}
.press .sheet:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(-0.5em, -0.7em) rotateX(-75deg);
}
.press .sheet:nth-child(7) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(1.7em, -1.85em) rotateX(-15deg);
}
.press .sheet:nth-child(7):before { background-position-y: 5.2em; }
.press .sheet:nth-child(8) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(1.7em, -1.5em) rotateX(15deg);
}
.press .sheet:nth-child(8):before { background-position-y: 4.8em; }
.press .sheet:nth-child(9) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(1.6em, -1.05em) rotateX(45deg);
}
.press .sheet:nth-child(9):before { background-position-y: 4.4em; }
.press .sheet:nth-child(10):before,
.press .sheet:nth-child(11):before { background-position-y: 4em; }
.press .sheet:nth-child(10) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(-0.5em, 1.95em) rotateX(75deg);
}
.press .sheet:nth-child(11) {
  height: 29em;
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(-2.5em, 19.25em);
}
.press .roll {
  background-color: #2e3138;
  background-image: radial-gradient(
    1em 2em at 0.5em 50%,
    #17181c 49%,
    #17181c00 50%
  );
  border-radius: 0.5em 0.5em 0.5em 0.5em / 1em 1em 1em 1em;
  width: 8em;
  height: 2em;
}
.press .roll:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(-3em, -4.5em) skewX(-22.5deg);
}
.press .roll:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(-2em, -0.5em) skewX(-22.5deg);
}
.press .roll:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(1em, -1em) skewX(-22.5deg);
}
.press .roll:nth-child(12) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg)
    translate(-2em, 4.45em) skewX(-22.5deg);
}
@keyframes print {
  from { transform: translateY(0); }
  to   { transform: translateY(6em); }
}

/* =============== Publish-button (.pb-button) — exact original codepen layout =============== */

.pb-button {
  cursor: pointer;
  border: none;
  background: transparent;
  transition: scale 1s;
  padding: 0;
}
.pb-button:hover {
  scale: 1.05;
}
.pb-main-border {
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(180deg, #e8e8e8, #d2d2d2);
  box-shadow: 0px 20px 25px #0002, 0px 3px 4px #0004;
}
.pb-main {
  border-radius: 21px;
  width: 260px;
  height: 90px;
  background: linear-gradient(180deg, #1111, #0007);
  padding: 4px;
}
.pb-inner-box {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fff, #eaeaea);
  border-radius: 16px;
  box-shadow: 0px 2px 3px #0008;
  padding-block: 6px;
  padding-inline: 6px;
  position: relative;
}
.pb-inner-dent {
  border-radius: 35px;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #eaeaea 0%, #fff 70%);
  filter: blur(1.5px);
}
.pb-text-container {
  position: absolute;
  top: 0px;
  left: 0px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 120px;
  outline: none;
}
.pb-text {
  font-size: 24px;
  font-weight: 600;
}
.pb-text-container:focus > .pb-arrow {
  transform: rotate(-45deg) translateX(130px) translateY(95px);
  transition: transform 1s;
}
.pb-send {
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  top: 0px;
  left: 57px;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}
.pb-text-container:focus {
  transform: translateY(-450px);
  transition: transform 1.5s 1s ease-in;
}
.pb-inner-box:focus-within > .pb-send {
  opacity: 0;
  transition: opacity 1s 1s;
}
.pb-sent {
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  top: 0px;
  left: 57px;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
}
.pb-inner-box:focus-within > .pb-sent {
  opacity: 1;
  transform: translateX(20px);
  transition: opacity 1s 1s, transform 1s 1s;
}
.pb-tick {
  position: absolute;
  top: 0px;
  right: 0px;
  align-items: center;
  height: 100%;
  display: flex;
  opacity: 0;
}
.pb-inner-box:focus-within > .pb-tick {
  opacity: 1;
  transform: translateX(-40px);
  transition: opacity 1s 1.3s, transform 1s 1s;
}
.pb-button:focus-within {
  animation: pb-recoil 0.4s 0.9s;
}
@keyframes pb-recoil {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}
.pb-planebody {
  position: absolute;
  top: 22px;
  right: 30px;
  align-items: center;
  height: 100%;
  display: flex;
  opacity: 0;
}
.pb-text-container:focus-within > .pb-planebody {
  opacity: 1;
  transition: opacity 1s 0.5s;
}

/* =============== Add-group button — animated letter reveal =============== */

.add-group-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  position: relative;
  padding: 0 20px;
  font-size: 18px;
  text-transform: uppercase;
  border: 0;
  box-shadow: hsl(210deg 87% 36%) 0px 7px 0px 0px;
  background-color: hsl(210deg 100% 44%);
  border-radius: 12px;
  overflow: hidden;
  transition: 31ms cubic-bezier(.5, .7, .4, 1);
  cursor: pointer;
  min-width: 160px;
  text-decoration: none;        /* for <a> usage */
}
.add-group-btn:before {
  content: attr(alt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  font-size: 15px;
  font-weight: bold;
  color: white;
  letter-spacing: 4px;
  opacity: 1;
}
.add-group-btn:active {
  box-shadow: none;
  transform: translateY(7px);
  transition: 35ms cubic-bezier(.5, .7, .4, 1);
}
.add-group-btn:hover:before {
  transition: all 0s;
  transform: translateY(100%);
  opacity: 0;
}
.add-group-btn i {
  color: white;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 4px;
  font-style: normal;
  transition: all 2s ease;
  transform: translateY(-20px);
  opacity: 0;
}
.add-group-btn:hover i {
  transition: all 0.2s ease;
  transform: translateY(0px);
  opacity: 1;
}
.add-group-btn:hover i:nth-child(1)  { transition-delay: 0.045s; }
.add-group-btn:hover i:nth-child(2)  { transition-delay: calc(0.045s * 3); }
.add-group-btn:hover i:nth-child(3)  { transition-delay: calc(0.045s * 4); }
.add-group-btn:hover i:nth-child(4)  { transition-delay: calc(0.045s * 5); }
.add-group-btn:hover i:nth-child(6)  { transition-delay: calc(0.045s * 6); }
.add-group-btn:hover i:nth-child(7)  { transition-delay: calc(0.045s * 7); }
.add-group-btn:hover i:nth-child(8)  { transition-delay: calc(0.045s * 8); }
.add-group-btn:hover i:nth-child(9)  { transition-delay: calc(0.045s * 9); }
.add-group-btn:hover i:nth-child(10) { transition-delay: calc(0.045s * 10); }

/* =============== Feature flag toggle (admin users table) =============== */

.switch {
  font-size: 14px;
  position: relative;
  display: inline-block;
  width: 1.2em;
  height: 3.3em;
}
.switch .chk {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 5px;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 0.5em;
  width: 2.4em;
  border-radius: 5px;
  left: -0.6em;
  top: 0.2em;
  background-color: white;
  box-shadow: 0 6px 7px rgba(0, 0, 0, 0.3);
  transition: 0.4s;
}
.switch .slider:before,
.switch .slider:after {
  content: "";
  display: block;
}
.switch .slider:after {
  background:
    linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 0) 0 50% / 50% 100%,
    repeating-linear-gradient(90deg, rgb(255, 255, 255) 0, rgb(255, 255, 255), rgb(255, 255, 255) 20%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 40%) 0 50% / 50% 100%,
    radial-gradient(circle at 50% 50%, rgb(255, 255, 255) 25%, transparent 26%);
  background-repeat: no-repeat;
  border: 0.25em solid transparent;
  border-left: 0.4em solid #ffffff;
  border-right: 0 solid transparent;
  transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;
  transform: translateX(-22.5%) rotate(90deg);
  transform-origin: 25% 50%;
  position: relative;
  top: 0.5em;
  left: 0.55em;
  width: 2em;
  height: 1em;
  box-sizing: border-box;
}
.switch .chk:checked + .slider {
  background-color: limegreen;
}
.switch .chk:focus + .slider {
  box-shadow: 0 0 1px limegreen;
}
.switch .chk:checked + .slider:before {
  transform: translateY(2.3em);
}
.switch .chk:checked + .slider:after {
  transform: rotateZ(90deg) rotateY(180deg) translateY(0.45em) translateX(-1.4em);
}

/* =============== Login terms acceptance =============== */

.login-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fafaff 0%, #ffffff 100%);
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease-md), background 0.18s var(--ease-md);
}
.login-terms:hover { border-color: #a78bfa; }
.login-terms.checked {
  border-color: var(--brand);
  background: linear-gradient(180deg, #f5f3ff 0%, #fdf4ff 100%);
}
.login-terms-chk {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--brand);
  cursor: pointer;
  flex-shrink: 0;
}
.login-terms-label {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-strong);
  font-weight: 500;
  line-height: 1.5;
}
.login-terms-link {
  display: inline;
  margin-inline-start: 4px;
  color: var(--brand-deep);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.login-terms-link:hover { text-decoration: underline; }

/* Login button disabled state when terms not accepted */
.app-login-btn[disabled],
.app-login-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.3);
}

/* =============== Install steps — agent download walkthrough =============== */

.install-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.install-steps > li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--text-strong);
  line-height: 1.55;
  font-weight: 500;
}
.install-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
  margin-top: 1px;
}
.install-substep {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.install-arrow {
  color: var(--brand);
  font-weight: 800;
  font-size: 1rem;
  transform: scaleX(-1);
}
.install-note {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  background: #f8fafc;
  border-inline-start: 3px solid #cbd5e1;
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
}

/* Keyboard / button-like inline tag */
.kbd {
  display: inline-flex;
  align-items: center;
  font-family: 'Heebo', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 2px 8px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-bottom-width: 2.5px;
  border-radius: 6px;
  color: var(--text-strong);
  margin: 0 2px;
  white-space: nowrap;
  vertical-align: 1px;
}
.kbd-mono {
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
  font-size: 0.75rem;
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}
.kbd-danger {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.kbd-success {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

/* =============== Software tab — dedicated install/download page =============== */

.software-hero {
  position: relative;
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 30%, #c026d3 100%);
  border-radius: 24px;
  padding: 32px 36px;
  margin-bottom: 22px;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 20px 50px -12px rgba(124, 58, 237, 0.45),
              0 6px 16px -4px rgba(124, 58, 237, 0.2);
}
.software-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.software-hero-glow-1 {
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  background: rgba(255, 255, 255, 0.18);
}
.software-hero-glow-2 {
  bottom: -60px;
  left: -60px;
  width: 220px;
  height: 220px;
  background: rgba(236, 72, 153, 0.4);
}
.software-hero-content {
  position: relative;
  z-index: 1;
}
.software-hero-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.software-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}
.software-hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 2px;
}
.software-hero-title {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
@media (min-width: 768px) {
  .software-hero-title { font-size: 2.25rem; }
}
.software-hero-sub {
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.95;
  font-weight: 500;
  max-width: 64ch;
  margin-bottom: 22px;
}
.software-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.software-hero-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* Benefit cards */
.benefit-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  transition: border-color 0.2s var(--ease-md), box-shadow 0.2s var(--ease-md), transform 0.2s var(--ease-md);
}
.benefit-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}
.benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.benefit-icon-violet {
  background: linear-gradient(135deg, #ede9fe, #fae8ff);
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}
.benefit-icon-emerald {
  background: linear-gradient(135deg, #d1fae5, #ecfccb);
  color: #059669;
  border: 1px solid #a7f3d0;
}
.benefit-icon-amber {
  background: linear-gradient(135deg, #fef3c7, #fed7aa);
  color: #d97706;
  border: 1px solid #fde68a;
}
.benefit-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.012em;
  margin-bottom: 6px;
}
.benefit-card p {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.55;
  font-weight: 500;
  margin: 0;
}

/* System requirement cards */
.req-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.18s var(--ease-md), background 0.18s var(--ease-md);
}
.req-card:hover { border-color: var(--border-strong); }
.req-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.req-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.req-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}

/* FAQ — accordion items */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease-md), box-shadow 0.2s var(--ease-md);
}
.faq-item[open] {
  border-color: #c4b5fd;
  box-shadow: 0 4px 12px -4px rgba(139, 92, 246, 0.18);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  transition: background 0.18s var(--ease-md);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ""; }
.faq-item summary::after {
  content: "+";
  margin-inline-start: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1.125rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-md), background 0.18s var(--ease-md), color 0.18s var(--ease-md);
  line-height: 1;
}
.faq-item[open] summary::after {
  content: "−";
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
  border-color: transparent;
  transform: rotate(180deg);
}
.faq-item summary:hover {
  background: var(--bg-hover);
}
.faq-body {
  padding: 0 18px 18px 50px;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.65;
  font-weight: 500;
}
.faq-body code {
  background: var(--bg-base);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8125rem;
  border: 1px solid var(--border);
}

/* =============== Download button — sliding circles reveal =============== */

.btn-download {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.6em 2em;
  border: mediumspringgreen solid 0.15em;
  border-radius: 0.25em;
  color: mediumspringgreen;
  font-family: 'Heebo', system-ui, sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 300ms, color 300ms;
  user-select: none;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.btn-download p {
  z-index: 1;
  position: relative;
  margin: 0;
  line-height: 1;
}
.btn-download:hover {
  color: #212121;
}
.btn-download:active {
  border-color: teal;
}
.btn-download::after,
.btn-download::before {
  content: "";
  position: absolute;
  width: 9em;
  aspect-ratio: 1;
  background: mediumspringgreen;
  opacity: 0.5;
  border-radius: 50%;
  transition: transform 500ms, background 300ms;
}
.btn-download::before {
  left: 0;
  transform: translateX(-8em);
}
.btn-download::after {
  right: 0;
  transform: translateX(8em);
}
.btn-download:hover::before {
  transform: translateX(-1em);
}
.btn-download:hover::after {
  transform: translateX(1em);
}
.btn-download:active::before,
.btn-download:active::after {
  background: teal;
}

/* =============== Step pulse — highlights target on flow-step click =============== */

.flow-step-pulse {
  position: relative;
  z-index: 1;
  animation: flow-step-pulse 1.6s var(--ease-out-expo) 2;
}
@keyframes flow-step-pulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(139, 92, 246, 0.55),
      0 0 0 0 rgba(217, 70, 239, 0.35);
    outline: 2px solid rgba(139, 92, 246, 0);
    outline-offset: 0;
  }
  35% {
    box-shadow:
      0 0 0 6px rgba(139, 92, 246, 0.32),
      0 0 30px 12px rgba(217, 70, 239, 0.18);
    outline: 2px solid rgba(139, 92, 246, 0.6);
    outline-offset: 4px;
  }
  100% {
    box-shadow:
      0 0 0 14px rgba(139, 92, 246, 0),
      0 0 36px 16px rgba(217, 70, 239, 0);
    outline: 2px solid rgba(139, 92, 246, 0);
    outline-offset: 8px;
  }
}

/* =============== Manual post — image drop area & thumbnails =============== */

.manual-drop-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  background: linear-gradient(180deg, #fafaf9 0%, #ffffff 100%);
  border: 2px dashed rgba(139, 92, 246, 0.5);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-md), background 0.2s var(--ease-md), transform 0.2s var(--ease-md);
  text-align: center;
}
.manual-drop-area:hover {
  border-color: var(--brand);
  background: linear-gradient(180deg, #fdfaff 0%, #ffffff 100%);
}
.manual-drop-area.is-dragover {
  border-color: var(--brand);
  background: #f5f3ff;
  transform: scale(1.01);
}
.manual-drop-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f5f3ff, #fdf4ff);
  border: 1px solid #ede9fe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-deep);
  margin-bottom: 4px;
}
.manual-drop-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.manual-drop-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 500;
}

.manual-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.manual-image-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #a7f3d0;
  background: #ecfdf5;
}
.manual-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.manual-image-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #fecaca;
  color: #dc2626;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transition: background 0.18s, transform 0.18s;
  opacity: 0;
}
.manual-image-thumb:hover .manual-image-remove { opacity: 1; }
.manual-image-remove:hover { background: #fef2f2; transform: scale(1.05); }
.manual-image-index {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

/* =============== Accessibility widget (תקן 5568) =============== */

#a11yToggle {
  position: fixed;
  bottom: 18px;
  inset-inline-start: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px -4px rgba(37, 99, 235, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
  z-index: 9998;
  transition: transform 0.22s var(--ease-md), box-shadow 0.22s var(--ease-md);
}
#a11yToggle:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#a11yToggle:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}
#a11yToggle:active { transform: translateY(0) scale(1); }

#a11yPanel {
  position: fixed;
  bottom: 86px;
  inset-inline-start: 18px;
  width: min(380px, calc(100vw - 36px));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid #1d4ed8;
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.28),
              0 8px 18px -4px rgba(15, 23, 42, 0.10);
  z-index: 9999;
  font-family: 'Heebo', system-ui, sans-serif;
}
#a11yPanel[hidden] { display: none !important; }

.a11y-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.a11y-header h3 {
  font-size: 1.125rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.018em;
  margin: 0;
}
#a11yClose {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  color: #475569;
  line-height: 1;
  transition: background 0.18s;
}
#a11yClose:hover { background: #f1f5f9; }

.a11y-intro {
  font-size: 0.8125rem;
  color: #475569;
  margin: 0 0 14px 0;
  line-height: 1.5;
}

.a11y-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.a11y-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
  font-family: inherit;
  color: #1e293b;
  min-height: 70px;
}
.a11y-opt:hover {
  background: #fff;
  border-color: #1d4ed8;
  transform: translateY(-1px);
}
.a11y-opt[aria-pressed="true"] {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(29, 78, 216, 0.35);
}
.a11y-opt-icon {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}
.a11y-opt-text {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
}

.a11y-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
#a11yReset {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #991b1b;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s;
  font-family: inherit;
}
#a11yReset:hover { background: #fee2e2; }
.a11y-footer a {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
}
.a11y-footer a:hover { text-decoration: underline; }

/* ===== Accessibility states applied to <html> ===== */
html.a11y-text-large       { font-size: 110%; }
html.a11y-text-xl          { font-size: 125%; }
html.a11y-contrast-high body * {
  color: #000 !important;
  background-color: #fff !important;
  border-color: #000 !important;
}
html.a11y-contrast-high body a,
html.a11y-contrast-high body a *  { color: #0000ee !important; text-decoration: underline !important; }
html.a11y-contrast-high body button,
html.a11y-contrast-high body input,
html.a11y-contrast-high body textarea,
html.a11y-contrast-high body select { border: 2px solid #000 !important; }

html.a11y-invert            { filter: invert(1) hue-rotate(180deg); }
html.a11y-invert img,
html.a11y-invert video,
html.a11y-invert iframe,
html.a11y-invert svg use,
html.a11y-invert [style*="background-image"] { filter: invert(1) hue-rotate(180deg); }

html.a11y-grayscale         { filter: grayscale(100%); }
html.a11y-grayscale.a11y-invert { filter: grayscale(100%) invert(1) hue-rotate(180deg); }

html.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 3px; }

html.a11y-focus-strong *:focus,
html.a11y-focus-strong *:focus-visible {
  outline: 3px solid #f59e0b !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.25) !important;
}

html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

html.a11y-cursor-large,
html.a11y-cursor-large * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 2 L2 22 L8 18 L12 28 L16 26 L12 16 L20 16 Z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 2 2, auto !important;
}

html.a11y-readable-font,
html.a11y-readable-font * {
  font-family: 'Heebo', 'Open Sans Hebrew', Arial, sans-serif !important;
  letter-spacing: 0.02em !important;
  line-height: 1.7 !important;
}

/* =============== Cookie consent banner =============== */

#cookieBanner {
  position: fixed;
  bottom: 18px;
  inset-inline-end: 18px;
  width: min(420px, calc(100vw - 36px));
  background: #ffffff;
  border: 1.5px solid #0f172a;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 38px -8px rgba(15, 23, 42, 0.30),
              0 6px 14px -2px rgba(15, 23, 42, 0.10);
  z-index: 9997;
  font-family: 'Heebo', system-ui, sans-serif;
}
#cookieBanner[hidden] { display: none !important; }
.cookie-icon {
  font-size: 1.5rem;
  display: inline-block;
}
.cookie-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cookie-text strong {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.012em;
}
.cookie-text span {
  font-size: 0.8125rem;
  color: #334155;
  line-height: 1.5;
  font-weight: 500;
}
.cookie-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.cookie-link {
  font-size: 0.8125rem;
  color: #6d28d9;
  font-weight: 700;
  text-decoration: none;
}
.cookie-link:hover { text-decoration: underline; }
#cookieAccept {
  background: linear-gradient(to left, #6d28d9, #c026d3);
  color: #fff;
  border: 0;
  padding: 9px 22px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px -2px rgba(109, 40, 217, 0.4);
  transition: transform 0.18s, box-shadow 0.18s;
}
#cookieAccept:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -2px rgba(109, 40, 217, 0.55);
}

@media (max-width: 480px) {
  #a11yToggle { width: 50px; height: 50px; bottom: 14px; inset-inline-start: 14px; }
  #a11yPanel { bottom: 74px; inset-inline-start: 14px; padding: 14px 16px; }
  .a11y-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .a11y-opt { min-height: 64px; padding: 10px 6px; }
  #cookieBanner { inset-inline-end: 14px; bottom: 14px; padding: 12px 14px; }
}

/* =============== Manual-post AI enhancer button =============== */

.enhance-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px -4px rgba(139, 92, 246, 0.45);
  transition: transform 0.2s var(--ease-md), box-shadow 0.2s var(--ease-md);
  overflow: hidden;
}
.enhance-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-100%) skewX(-20deg);
  transition: transform 0.6s var(--ease-md);
  pointer-events: none;
}
.enhance-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(139, 92, 246, 0.55);
}
.enhance-btn:hover:not(:disabled)::before {
  transform: translateX(100%) skewX(-20deg);
}
.enhance-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.enhance-btn-icon { font-size: 18px; line-height: 1; }
.enhance-btn-hint { max-width: 360px; line-height: 1.5; }

#enhanceModal.flex { display: flex; }
#enhanceModal pre {
  font-family: 'Heebo', system-ui, sans-serif;
  line-height: 1.7;
  max-height: 60vh;
}

/* =============== Shredder delete button =============== */
/* Two surfaces:
 *   1. .btn-delete on post-tiles  — red trash button with rocking icon (no
 *      shredding paper here; user only sees the icon animation on hover).
 *   2. .shred-wrapper on confirm modal's OK button — full shredder animation
 *      plays AFTER the user clicks "אישור". Modal stays open until done.
 *
 * The shred-document + shred-strips siblings are hidden by default and only
 * become visible when the wrapper has .is-shredder. The animation itself
 * triggers on .is-shredding (added by JS, removed when modal closes). */

.btn-delete {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  user-select: none;
  border: none;
  border-radius: 10px;
  padding: 0.5rem 1.4rem 0.5rem 1rem;
  background-color: rgb(255, 0, 0);
  background-image: radial-gradient(circle at 50% -50%, #fff, 10%, #0000);
  font-family: 'Heebo', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.9em;
  color: #fff;
  cursor: pointer;
  box-shadow:
    0px 1px 1px rgba(3, 7, 18, 0.16),
    0px 3px 4px rgba(3, 7, 18, 0.14),
    0px 7px 9px rgba(3, 7, 18, 0.11),
    0px 12px 16px rgba(3, 7, 18, 0.09),
    0px 19px 26px rgba(3, 7, 18, 0.07),
    0px 27px 37px rgba(3, 7, 18, 0.05),
    0px 37px 50px rgba(3, 7, 18, 0.02);
  transition: box-shadow 0.3s ease, transform 0.15s ease;
}

.btn-delete::after,
.btn-delete::before {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  left: 0px;
  width: 10px;
  aspect-ratio: 1 / 2;
  border-radius: 35%;
  background-color: inherit;
  opacity: 1;
  transition: left 0.3s ease, right 0.3s ease, opacity 0.3s ease;
}
.btn-delete::after { left: auto; right: 0px; }

.btn-delete .btn-svg {
  width: 20px; height: 20px;
  fill: #fff9;
  stroke: #fff0;
  transition: transform 0.3s ease;
}

.btn-delete:hover {
  box-shadow:
    0px 3px 4px rgba(3, 7, 18, 0.13),
    0px 14px 17px rgba(3, 7, 18, 0.11),
    0px 31px 38px rgba(3, 7, 18, 0.09),
    0px 55px 67px rgba(3, 7, 18, 0.07),
    0px 86px 105px rgba(3, 7, 18, 0.06),
    0px 124px 151px rgba(3, 7, 18, 0.04),
    0px 169px 206px rgba(3, 7, 18, 0.02);
  transform: scale(1.07);
}
.btn-delete:hover .btn-svg { transform: rotate(-8deg) scale(1.6); }
.btn-delete:hover::after  { opacity: 1; right: -4px; }
.btn-delete:hover::before { opacity: 1; left: -4px; }
.btn-delete:active::after  { right: 0px; }
.btn-delete:active::before { left: 0px; }

/* ===== Confirm-modal OK button — default look (NOT shredder) ===== */
.confirm-ok-btn {
  width: 100%;
  background: #dc2626;
  color: #fff;
  font-weight: 600;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.confirm-ok-btn:hover { background: #b91c1c; }

.shred-wrapper {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

/* Hide shredder elements by default — opt-in via .is-shredder on wrapper */
.shred-wrapper .shred-document,
.shred-wrapper .shred-strips {
  display: none;
}

/* === Shredder mode armed: rebrand the OK button to btn-delete look === */
.shred-wrapper.is-shredder .confirm-ok-btn {
  /* match .btn-delete look, but keep width: 100% so it fills flex-1 */
  width: 100%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: rgb(255, 0, 0);
  background-image: radial-gradient(circle at 50% -50%, #fff, 10%, #0000);
  border-radius: 10px;
  padding: 0.625rem 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow:
    0px 1px 1px rgba(3, 7, 18, 0.16),
    0px 3px 4px rgba(3, 7, 18, 0.14),
    0px 7px 9px rgba(3, 7, 18, 0.11),
    0px 12px 16px rgba(3, 7, 18, 0.09),
    0px 19px 26px rgba(3, 7, 18, 0.07);
  transition: box-shadow 0.3s ease, transform 0.15s ease;
}
.shred-wrapper.is-shredder .confirm-ok-btn .btn-svg {
  width: 20px; height: 20px;
  fill: #fff9;
  transition: transform 0.3s ease;
}
.shred-wrapper.is-shredder .confirm-ok-btn:hover {
  transform: scale(1.04);
  box-shadow:
    0px 3px 4px rgba(3, 7, 18, 0.13),
    0px 14px 17px rgba(3, 7, 18, 0.11),
    0px 31px 38px rgba(3, 7, 18, 0.09),
    0px 55px 67px rgba(3, 7, 18, 0.07);
}
.shred-wrapper.is-shredder .confirm-ok-btn:hover .btn-svg {
  transform: rotate(-8deg) scale(1.5);
}

.shred-wrapper.is-shredder .shred-document,
.shred-wrapper.is-shredder .shred-strips {
  display: block;
}

/* Hover preview: paper peeks up above the button — visual cue for what clicking does */
.shred-wrapper.is-shredder .confirm-ok-btn:hover ~ .shred-document {
  transform: translate(-50%, -30%) scale(1);
  opacity: 1;
}

/* During shredding: animation runs and ends with the paper fully shredded */
.shred-wrapper.is-shredder.is-shredding .shred-document {
  animation: shredFeed 1.5s forwards;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.shred-wrapper.is-shredder.is-shredding .shred-strips {
  animation: shredStrips 1.5s cubic-bezier(1, 0.6, 0.6, 1) reverse;
}

/* Document + strips positioned ABOVE the OK button. Black borders / strokes
 * because both elements are white-on-white and otherwise invisible. */
.shred-wrapper .shred-document {
  position: absolute;
  z-index: -1;
  top: -180%;
  left: 50%;
  width: 78%;
  height: 160px;
  background-color: #fff;
  border: 2px solid #0f172a;          /* visible black frame */
  border-radius: 2px;
  transform: translate(-50%, 0%) scale(0);
  transition: transform 0.3s ease, opacity 1s ease;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.18));
  opacity: 0;
  pointer-events: none;
}
/* Strips emerge BELOW the button (the "shredder slot") and fall downward */
.shred-wrapper .shred-strips {
  position: absolute;
  z-index: -1;
  top: 100%;                          /* anchored to bottom of button */
  left: 50%;
  transform: translate(-50%, 0%);
  width: 78%;
  height: 160px;
  stroke: #0f172a;                    /* black so visible on white modal */
  fill: none;
  stroke-width: 0;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
  pointer-events: none;
}

@keyframes shredFeed {
  0%   { clip-path: inset(0% 0% 0% 0%); }
  100% { clip-path: inset(100% 0% 0% 0%); }
}
@keyframes shredStrips {
  0%   { stroke-width: 9; opacity: 0; clip-path: inset(0% 0% 0% 0%); }
  30%  { opacity: 1; }
  100% { stroke-width: 9; clip-path: inset(0% 0% 100% 0%); }
}

/* =============== Forced password change rules =============== */

.pw-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 500;
  transition: color 0.18s var(--ease-md);
}
.pw-rule .pw-rule-mark {
  display: inline-flex;
  width: 14px;
  flex-shrink: 0;
  font-weight: 700;
}
.pw-rule .pw-rule-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pw-rule.is-met {
  color: #059669;
  font-weight: 600;
}
.pw-rule code {
  background: var(--bg-base);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  border: 1px solid var(--border);
  color: var(--text-strong);
}

/* =============== Misc =============== */

.hidden { display: none !important; }