@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .animate-fade-in  { @apply transition-opacity duration-200 opacity-0; }
  .animate-fade-in.show { @apply opacity-100; }
  .animate-fade-out { @apply transition-opacity duration-200; }

  /* более мягкий «breathing» эффект */
  .animate-breathe {
    animation: breathe 1.8s ease-in-out infinite;
  }
  @keyframes breathe {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
  }
}

@layer base {
  html { @apply antialiased; }
  body { @apply bg-slate-50 text-slate-800; }
}

/* ===== Компоненты для форм ===== */
@layer components {
  .auth-wrapper { @apply min-h-[calc(100vh-56px)] flex items-center justify-center px-4; } /* центрируем */
  .auth-card    { @apply w-full max-w-md bg-white/90 backdrop-blur border border-slate-200 rounded-2xl shadow-sm p-6 sm:p-8; } /* фон + бордер + скругления */

  .title-xl     { @apply text-2xl font-semibold; }
  .hint         { @apply text-xs text-slate-500; }

  .label        { @apply block text-sm font-medium text-slate-700 mb-1; } /* лейбл СВЕРХУ поля */
  .input        { @apply block w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm placeholder:text-slate-400 shadow-sm focus:outline-none focus:border-slate-400 focus:ring-2 focus:ring-slate-900/10; } /* тонкий серый бордер */
  .input-error  { @apply border-rose-300 focus:border-rose-400 focus:ring-rose-100; }
  .error-text   { @apply mt-1 text-xs text-rose-600; }

  .btn          { @apply inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium transition; }
  .btn-primary  { @apply bg-slate-900 text-white hover:bg-slate-800; }
  .btn-ghost    { @apply text-slate-600 hover:text-slate-900; }
  .btn-block    { @apply w-full; }
}

/* (опционально) убираем жёлтый autofill у Chrome */
@layer base {
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: #0f172a; /* slate-900 */
  }
}
:root {
  --ca-bg: #f6f7f9;
  --ca-card: #ffffff;
  --ca-text: #1f2937;
  --ca-muted: #6b7280;
  --ca-border: #e5e7eb;
  --ca-soft-border: #eef0f3;
  --ca-primary: #2563eb;
  --ca-primary-hover: #1d4ed8;
  --ca-success: #16a34a;
  --ca-warning: #f59e0b;
  --ca-danger: #dc2626;
  --ca-radius: 18px;
  --ca-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.ca-page {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 0 40px;
  color: var(--ca-text);
}

.ca-header {
  margin-bottom: 26px;
}

.ca-eyebrow {
  margin: 0 0 8px;
  color: var(--ca-muted);
  font-size: 14px;
}

.ca-header h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ca-text);
}

.ca-header p {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--ca-muted);
  font-size: 16px;
}

.ca-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: start;
}

.ca-card {
  background: var(--ca-card);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius);
  box-shadow: var(--ca-shadow);
}

.ca-card__body {
  padding: 24px;
}

.ca-card h2,
.ca-history h2 {
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ca-text);
}

.ca-muted {
  margin: 0;
  color: var(--ca-muted);
  font-size: 14px;
}

.ca-form {
  margin-top: 20px;
}

.ca-upload-box {
  display: block;
  width: 100%;
  border: 1.5px dashed #cbd5e1;
  border-radius: 16px;
  padding: 26px;
  text-align: center;
  background: #fbfcfe;
  cursor: pointer;
}

.ca-upload-box__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eff6ff;
  color: var(--ca-primary);
  font-size: 24px;
}

.ca-upload-box strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  color: var(--ca-text);
}

.ca-upload-box span:last-child {
  display: block;
  color: var(--ca-muted);
  font-size: 13px;
}

.ca-file-input {
  display: none;
}

.ca-file-meta {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--ca-soft-border);
  background: #fafafa;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ca-muted);
  font-size: 14px;
}

.ca-actions,
.ca-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ca-btn {
  border: 0;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: 0.18s ease;
}

.ca-btn--primary {
  background: var(--ca-primary);
  color: #fff;
}

.ca-btn--primary:hover {
  background: var(--ca-primary-hover);
  color: #fff;
}

.ca-btn--secondary {
  background: #f3f4f6;
  color: var(--ca-text);
  border: 1px solid var(--ca-border);
}

.ca-btn--secondary:hover {
  background: #e5e7eb;
  color: var(--ca-text);
}

.ca-btn--ghost {
  background: transparent;
  color: var(--ca-primary);
  padding-left: 0;
  padding-right: 0;
}

.ca-live-status {
  margin-top: 22px;
}

.ca-progress__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--ca-muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.ca-progress__bar {
  height: 9px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.ca-progress__value {
  height: 100%;
  border-radius: inherit;
  background: var(--ca-primary);
  transition: width 0.25s ease;
}

.ca-status-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.ca-status-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--ca-soft-border);
  border-radius: 14px;
  background: #fff;
}

.ca-status-dot {
  width: 11px;
  height: 11px;
  margin-top: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  flex: 0 0 auto;
}

.ca-status-item.is-done .ca-status-dot {
  background: var(--ca-success);
}

.ca-status-item.is-current .ca-status-dot {
  background: var(--ca-warning);
  box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.14);
}

.ca-status-item strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--ca-text);
}

.ca-status-item span:last-child {
  color: var(--ca-muted);
  font-size: 13px;
}

.ca-result-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.ca-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.ca-badge--success {
  background: #ecfdf5;
  color: #166534;
}

.ca-badge--process {
  background: #eff6ff;
  color: #1d4ed8;
}

.ca-badge--danger {
  background: #fef2f2;
  color: #991b1b;
}

.ca-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.ca-metric {
  border: 1px solid var(--ca-soft-border);
  border-radius: 14px;
  padding: 14px;
  background: #fafafa;
}

.ca-metric span {
  display: block;
  color: var(--ca-muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.ca-metric strong {
  display: block;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ca-text);
}

.ca-report-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ca-border);
  border-radius: 14px;
}

.ca-report-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: #fff;
}

.ca-report-table th,
.ca-report-table td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ca-soft-border);
  font-size: 14px;
  vertical-align: top;
}

.ca-report-table th {
  color: #374151;
  background: #f9fafb;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ca-report-table tr:last-child td {
  border-bottom: 0;
}

.ca-score {
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 9px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
  font-size: 13px;
}

.ca-transcript {
  margin-top: 18px;
  border: 1px solid var(--ca-border);
  border-radius: 14px;
  background: #fafafa;
  overflow: hidden;
}

.ca-transcript summary {
  cursor: pointer;
  padding: 15px 16px;
  font-weight: 700;
  list-style: none;
  color: var(--ca-text);
}

.ca-transcript summary::-webkit-details-marker {
  display: none;
}

.ca-transcript__body {
  border-top: 1px solid var(--ca-soft-border);
  padding: 16px;
  color: #374151;
  font-size: 14px;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
}

.ca-transcript__body p {
  margin: 0 0 12px;
}

.ca-empty-state,
.ca-empty-mini,
.ca-error-box {
  padding: 32px 20px;
  text-align: center;
  color: var(--ca-muted);
  border: 1px solid var(--ca-soft-border);
  border-radius: 16px;
  background: #fafafa;
}

.ca-empty-mini {
  margin-top: 22px;
  padding: 18px;
  font-size: 14px;
}

.ca-empty-state strong,
.ca-error-box strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ca-text);
}

.ca-error-box {
  text-align: left;
  background: #fef2f2;
  color: #991b1b;
}

.ca-flash {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  border: 1px solid var(--ca-border);
  background: #fff;
}

.ca-flash--notice {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.ca-flash--alert {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.ca-history {
  margin-top: 22px;
}

.ca-history__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ca-link {
  color: var(--ca-primary);
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
}

.ca-history-list {
  display: grid;
  gap: 8px;
}

.ca-history-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--ca-border);
  border-radius: 14px;
  background: #fff;
  color: var(--ca-text);
  text-decoration: none;
}

.ca-history-item strong {
  color: var(--ca-primary);
  font-size: 13px;
}

.ca-history-item em {
  color: var(--ca-muted);
  font-size: 13px;
  font-style: normal;
}

@media (max-width: 880px) {
  .ca-layout {
    grid-template-columns: 1fr;
  }

  .ca-header h1 {
    font-size: 28px;
  }
}

@media (max-width: 560px) {
  .ca-page {
    padding-top: 6px;
  }

  .ca-card__body {
    padding: 18px;
  }

  .ca-summary-grid {
    grid-template-columns: 1fr;
  }

  .ca-result-header {
    display: block;
  }

  .ca-badge {
    margin-top: 12px;
  }

  .ca-actions,
  .ca-downloads {
    flex-direction: column;
  }

  .ca-btn {
    width: 100%;
  }

  .ca-history-item {
    grid-template-columns: 1fr;
  }
}

.ca-header--compact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.ca-user-summary {
  min-width: 230px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--ca-border);
  border-radius: 16px;
  background: #fff;
  color: var(--ca-muted);
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.ca-user-summary strong {
  color: var(--ca-text);
}

.ca-form.is-disabled {
  opacity: 0.58;
  pointer-events: none;
}

.ca-btn:disabled,
.ca-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.ca-limit-box {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  font-size: 14px;
}

.ca-limit-box strong {
  display: block;
  margin-bottom: 4px;
}

.ca-limit-box p {
  margin: 0;
}

.ca-show-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ca-side-list {
  position: sticky;
  top: 16px;
}

.ca-history-list--compact .ca-history-item {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 11px 12px;
}

.ca-history-item.is-active {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.ca-show-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ca-text);
}

.ca-report-table-wrapper--spaced,
.ca-empty-state--spaced {
  margin-top: 18px;
}

.ca-transcript__body--full {
  max-height: none;
}

.ca-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.ca-pagination__meta {
  color: var(--ca-muted);
  font-size: 14px;
  text-align: center;
}

.ca-auth-page {
  min-height: calc(100vh - 80px);
  display: grid;
  place-items: center;
  padding: 28px 16px;
}

.ca-auth-card {
  width: 100%;
  max-width: 460px;
  padding: 28px;
  border: 1px solid var(--ca-border);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--ca-shadow);
}

.ca-auth-head {
  margin-bottom: 22px;
}

.ca-auth-head h1 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--ca-text);
}

.ca-auth-head p:last-child {
  margin: 10px 0 0;
  color: var(--ca-muted);
  font-size: 14px;
}

.ca-auth-form {
  display: grid;
  gap: 16px;
}

.ca-field {
  display: grid;
  gap: 7px;
}

.ca-field label {
  color: var(--ca-text);
  font-weight: 700;
  font-size: 14px;
}

.ca-field input[type="email"],
.ca-field input[type="password"] {
  width: 100%;
  border: 1px solid var(--ca-border);
  border-radius: 12px;
  padding: 12px 13px;
  color: var(--ca-text);
  background: #fff;
  font-size: 15px;
  outline: none;
}

.ca-field input:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.ca-field small {
  color: var(--ca-muted);
  font-size: 12px;
}

.ca-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ca-muted);
  font-size: 14px;
}

.ca-auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

@media (max-width: 880px) {
  .ca-header--compact,
  .ca-auth-actions,
  .ca-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .ca-user-summary {
    width: 100%;
  }

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

  .ca-side-list {
    position: static;
  }
}

@media (max-width: 560px) {
  .ca-auth-card {
    padding: 20px;
    border-radius: 18px;
  }

  .ca-auth-head h1,
  .ca-show-title {
    font-size: 26px;
  }
}
/* Login pages: user /login and admin /admin/login */

.login-page,
.auth-wrap {
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
  padding: 48px 16px 56px;
}

.login-card,
.auth-card {
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 26px;
  padding: 30px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.login-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.login-product {
  color: #111827;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.login-product-caption {
  margin-top: 2px;
  color: #6b7280;
  font-size: 13px;
}

.login-heading,
.auth-card .header {
  margin-bottom: 22px;
}

.login-heading h1,
.auth-card .header h2 {
  margin: 0;
  color: #111827;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.login-heading p,
.auth-card .sub {
  margin: 10px 0 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.55;
}

.login-form,
.auth-card form {
  display: grid;
  gap: 16px;
}

.login-field,
.auth-card .row {
  display: grid;
  gap: 8px;
  margin: 0;
}

.login-field label,
.auth-card .row label {
  color: #374151;
  font-size: 14px;
  font-weight: 700;
}

.login-card .login-field input[type="email"],
.login-card .login-field input[type="password"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  font-size: 15px;
  outline: none;
  box-shadow: none;
}

.login-card .login-field input[type="email"]::placeholder,
.login-card .login-field input[type="password"]::placeholder,
.auth-card input[type="email"]::placeholder,
.auth-card input[type="password"]::placeholder {
  color: #9ca3af;
}

.login-card .login-field input[type="email"]:focus,
.login-card .login-field input[type="password"]:focus,
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.login-options,
.auth-card .actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 2px;
}

.login-remember,
.auth-card .hint {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 500 !important;
}

.login-remember input[type="checkbox"],
.auth-card input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

.login-link,
.login-switch a,
.auth-card .btn.ghost {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
}

.login-link:hover,
.login-switch a:hover,
.auth-card .btn.ghost:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.login-submit,
.auth-card input[type="submit"],
.auth-card .btn.primary {
  width: 100%;
  height: 52px;
  margin-top: 4px;
  border: 0;
  border-radius: 15px;
  background: #2563eb;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.login-submit:hover,
.auth-card input[type="submit"]:hover,
.auth-card .btn.primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.26);
}

.login-demo-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f9fafb;
  color: #6b7280;
  font-size: 13px;
}

.login-demo-note strong {
  color: #111827;
  font-size: 13px;
}

.login-switch {
  margin-top: 18px;
  text-align: center;
}

@media (max-width: 640px) {
  .login-page,
  .auth-wrap {
    min-height: calc(100vh - 128px);
    padding: 22px 12px 32px;
    place-items: start center;
  }

  .login-card,
  .auth-card {
    padding: 22px;
    border-radius: 22px;
  }

  .login-brand {
    margin-bottom: 22px;
  }

  .login-heading h1,
  .auth-card .header h2 {
    font-size: 26px;
  }

  .login-options,
  .auth-card .actions {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .login-demo-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}
.tinymce_70_vh {
    height: 70vh;
}

.tinymce_90_vh {
    height: 90vh;
}
/* Общий текст формы логина */
.trestle .login .card,
.trestle .login .card * {
  color: #111 !important;
}

/* Поля ввода */
.trestle .login .card .form-control {
  background: #fff !important;
  color: #111 !important;
  border-color: #d1d5db !important; /* gray-300 */
}

/* Плейсхолдер */
.trestle .login .card .form-control::placeholder {
  color: #6b7280 !important; /* gray-500 */
}

/* Кнопка */
.trestle .login .card .btn-primary {
  background: #111 !important;
  border-color: #111 !important;
}
.trestle .login .card .btn-primary:hover {
  background: #222 !important;
  border-color: #222 !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


 /* ---- NAV ---- */
.nav-glass{
  position: sticky; top: 0; z-index: 1000;
  background: color-mix(in oklab, var(--card) 78%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner{
  max-width: 1120px; margin: 0 auto;
  height: 56px; padding: 0 16px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
}
.brand{
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--text); text-decoration: none;
}
.brand-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: conic-gradient(var(--accent), var(--accent-2));
  box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 65%, transparent);
}

.nav-left{ display:flex; align-items:center; gap:12px }
.nav-burger{
  display:none; width:40px; height:36px; border:1px solid var(--border);
  border-radius: 10px; background: #0b1220; color: var(--text);
}
.nav-burger span{ display:block; height:2px; background: var(--text); margin:5px 10px }

.nav-links{
  display:flex; align-items:center; gap: 12px;
}
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 12px; border-radius: 10px;
  color: var(--text); text-decoration: none; border: 1px solid transparent;
}
.nav-link:hover{ background: rgba(255,255,255,.03); border-color: var(--border) }
.nav-link.active{
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 25%, transparent),
                                      color-mix(in oklab, var(--accent-2) 22%, transparent));
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
}

.nav-right{ display:flex; align-items:center; gap: 10px }
.nav-user{ display:flex; align-items:center; gap:8px; color: var(--muted); font-size: 13px }
.avatar{
  width: 26px; height: 26px; display:grid; place-items:center;
  border-radius: 8px; background:#0b1220; border:1px solid var(--border);
  font-weight: 700; color: var(--text);
}
.badge{
  font-size: 12px; padding: 4px 8px; border-radius: 999px;
  border:1px solid var(--border); color: var(--muted); background: #0b1220;
}
.badge.infinity{
  background: linear-gradient(90deg, rgba(96,165,250,.18), rgba(34,211,238,.16));
  border-color: rgba(96,165,250,.35); color: var(--text);
}
.btn-primary{
  padding: 10px 14px; border-radius: 12px; font-weight: 700;
  border:1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  background: linear-gradient(90deg, rgba(96,165,250,.25), rgba(34,211,238,.22));
  color: var(--text); text-decoration: none;
}
.btn-primary:hover{ transform: translateY(-1px) }
.btn-exit{
  padding: 8px 12px; 
  border-radius: 10px; 
  font-weight: 600;
  border:1px solid var(--border); 
  background: rgba(255,255,255,.03); 
  color: var(--text);
}
.btn-exit:hover{ background:#ef4444; }

/* Админ-дропдаун на details/summary */
.dropdown{ position: relative }
.dropdown > summary{
  list-style: none; cursor: pointer;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid transparent; color: var(--text);
}
.dropdown > summary:hover{ background: rgba(255,255,255,.03); border-color: var(--border) }
.dropdown[open] > summary{ background: rgba(255,255,255,.04); border-color: var(--border) }
.dropdown-menu{
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 220px; padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.dropdown-item{
  display:block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text);
}
.dropdown-item:hover{ background: rgba(255,255,255,.04) }

/* Мобилка */
@media (max-width: 900px){
  .nav-inner{ grid-template-columns: 1fr auto; height: 56px }
  .nav-burger{ display:block }
  .nav-links{
    position: fixed; left: 12px; right: 12px; top: 64px;
    display: none; flex-direction: column; gap: 8px; padding: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    border:1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); backdrop-filter: blur(6px);
  }
  .nav-links.open{ display:flex }
  .nav-right .email{ display:none }
}


.section-wrap{ max-width:1200px; margin:24px auto; padding:0 20px; display:grid; gap:22px }
.hero .header h1{ font-size:22px; color: white; }
.feature-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
}
@media (max-width:980px){ .feature-grid{ grid-template-columns:1fr } }

.icon-wrap{
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:14px; background:linear-gradient(180deg, rgba(96,165,250,.18), rgba(34,211,238,.14));
  border:1px solid rgba(96,165,250,.35);
  margin-bottom:6px;
}
.icon-wrap svg{ width:28px; height:28px; color: var(--text); opacity:.9 }

.feature-title{ margin:0; font-weight:700 }

.contact-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:22px;
}
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr } }

/* форма: используем твои базовые поля, расширим типы */
input[type="text"], input[type="email"], input[type="tel"], textarea{
  width:100%; padding:12px 14px; background:#0b1220; color:var(--text);
  border:1px solid var(--border); border-radius:12px; outline:none; transition:.2s border,.2s box-shadow;
}
input[type="email"]:focus, input[type="tel"]:focus{ border-color:var(--accent); box-shadow:0 0 0 6px var(--ring) }

.contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.contact-list li{ display:flex; align-items:flex-start; gap:10px }
.contact-list svg{ width:20px; height:20px; color: var(--muted) }
.contact-list a{ color: var(--text); text-decoration: underline }


.auth-wrap{
  min-height: calc(100vh - 72px);
  display: grid; place-items: center;
  padding: 24px 16px;
}
.auth-card{
  width: 100%;
  max-width: 480px;
}
.auth-card .panel{ padding-top: 18px }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
.drop {
  width: 100%;
  padding: 12px 14px;
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  transition: .2s border, .2s box-shadow;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
.drop:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--ring);
}

.hairline > :not([hidden]) ~ :not([hidden]) { border-top-width: .5px; }

.record-ui {
  display: flex; flex-direction: column; gap: .6rem;
  background: #10131a; border: 1px solid #2a2f3a; border-radius: 12px;
  padding: .6rem .8rem; color: #bcd;
}
.record-ui.hidden { display: none; }
.record-ui.recording .wave { width: 100%; height: 80px; background: #0b0e14; border-radius: 8px; }
.record-ui .hint, .record-ui .meta { font-size: .85rem; color: #9fb3c8; }
.record-ui .actions { display: flex; gap: .5rem; justify-content: flex-end; }

.btn.primary  { background: #3b82f6; color:#fff; padding:.45rem .7rem; border-radius:8px; }
.btn.secondary{ background: #374151; color:#fff; padding:.45rem .7rem; border-radius:8px; }
.btn.danger   { background: #ef4444; color:#fff; padding:.45rem .7rem; border-radius:8px; }
.btn.mic.recording { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,64,64,.35)} 70%{box-shadow:0 0 0 12px rgba(255,64,64,0)} 100%{box-shadow:0 0 0 0 rgba(255,64,64,0)} }