@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 */
  }
}
/* app/assets/stylesheets/gandalf.css */
/* Стили чата «Гендальф», изолированные внутри .gandalf-chat, чтобы не трогать остальное приложение */

/* Цветовая тема и переменные — объявлены на корневом контейнере,
   чтобы не загрязнять :root всего приложения */
.gandalf-chat {
  /* Тема (легко перенастроить под свой бренд) */
  --bg: #0f1115;             /* фон приложения */
  --panel: #151821;          /* панели/карточки */
  --panel-elev: #1b2030;     /* приподнятые элементы */
  --text: #e6e8ef;           /* основной текст */
  --muted: #a5adc6;          /* вторичный текст */
  --accent: #7c5cff;         /* акцент/кнопки */
  --accent-2: #00d4ff;       /* второй акцент (для градиента) */
  --border: #262b3b;         /* границы/разделители */
  --user: #2a2f42;           /* пузырь пользователя */
  --assistant: #1b2337;      /* пузырь ассистента */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  /* Базовая типографика и фон только внутри чата */
  height: 100%;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(124,92,255,.15), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(0,212,255,.12), transparent 60%),
    var(--bg);
  color: var(--text);
  line-height: 1.45;
}

/* Универсальные базовые правила внутри контейнера */
.gandalf-chat *, .gandalf-chat *::before, .gandalf-chat *::after {
  box-sizing: border-box;
}

/* Сетка приложения */
.gandalf-chat .app {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  height: 100vh;
}

/* Sidebar */
.gandalf-chat .sidebar {
  grid-area: sidebar;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(124,92,255,.07), rgba(0,0,0,0) 30%), var(--panel);
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 12px;
}
.gandalf-chat .brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--panel-elev);
  box-shadow: var(--shadow);
}
.gandalf-chat .brand .logo {
  width:28px;
  height:28px;
  border-radius:8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.gandalf-chat .brand .title {
  font-weight: 700;
  letter-spacing: .2px;
}

.gandalf-chat .models,
.gandalf-chat .history {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.gandalf-chat .section-head {
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.gandalf-chat .model-item {
  padding: 10px 12px;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap:8px;
}
.gandalf-chat .model-item:hover {
  background: rgba(124,92,255,.08);
}
.gandalf-chat .model-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(124,92,255,.5);
}
.gandalf-chat .history-list {
  max-height: 40vh;
  overflow: auto;
}
.gandalf-chat .history-item {
  padding: 10px 12px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  cursor: pointer;
}
.gandalf-chat .history-item:hover {
  background: rgba(255,255,255,.02);
  color: var(--text);
}

/* Header */
.gandalf-chat .header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(13, 16, 22, .6);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.gandalf-chat .header .chat-title {
  font-weight: 600;
}
.gandalf-chat .header .actions {
  display: flex;
  gap: 8px;
}
.gandalf-chat .btn {
  background: var(--panel-elev);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}
.gandalf-chat .btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  color: #0b0d14;
  font-weight: 700;
}

/* Main / Chat */
.gandalf-chat .main {
  grid-area: main;
  display: grid;
  grid-template-rows: 1fr auto;
  max-height: 80vh;
}
.gandalf-chat .messages {
  overflow: auto;
  padding: 18px;
  display:flex;
  flex-direction: column;
  gap: 14px;
  height: 70vh;
  max-height: 70vh;
}

/* Чуть уникализируем анимацию, чтобы не конфликтовала с глобальными */
@keyframes gandalfFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

.gandalf-chat .msg {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: flex-start;
  animation: gandalfFadeIn .25s ease;
}
.gandalf-chat .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #20263a;
  display:grid;
  place-items:center;
  font-weight:700;
  color:#9fb0ff;
  border:1px solid var(--border);
}
.gandalf-chat .bubble {
  background: var(--assistant);
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: 14px 14px 14px 6px;
  box-shadow: var(--shadow);
  white-space: pre-wrap;
}
.gandalf-chat .msg.user .bubble {
  background: var(--user);
  border-radius: 14px 14px 6px 14px;
}
.gandalf-chat .msg .meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

/* Composer */
.gandalf-chat .composer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(27,35,55,.6), rgba(21,24,33,.95));
  padding: 12px 16px;
  display: grid;
  gap: 10px;
}
.gandalf-chat .input-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow);
}
.gandalf-chat textarea {
  width: 100%;
  max-height: 36vh;
  min-height: 44px;
  resize: none;
  outline: none;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  line-height: 1.4;
  padding: 8px 10px;
}
.gandalf-chat .controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
}
.gandalf-chat .send {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 600;
}
.gandalf-chat .kbd {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--muted);
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius:6px;
}

/* Scrollbar (WebKit) — только внутри блока чата */
.gandalf-chat .messages::-webkit-scrollbar,
.gandalf-chat .history-list::-webkit-scrollbar {
  width: 10px;
}
.gandalf-chat .messages::-webkit-scrollbar-thumb,
.gandalf-chat .history-list::-webkit-scrollbar-thumb {
  background: #2a3147;
  border-radius: 8px;
}

/* Mobile */
@media (max-width: 980px) {
  .gandalf-chat .app {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr auto;
    grid-template-areas:
      "header"
      "main"
      "sidebar";
  }
  .gandalf-chat .sidebar {
    order: 3;
    grid-area: sidebar;
    margin-top: 100px;
  }
}

.msg.assistant.preloader {
  display: flex;
  gap: 6px;
  padding: 10px;
  align-items: center;
}

.msg.assistant.preloader .dot {
  width: 10px;
  height: 10px;
  background: red;       /* 🔴 делаем красные точки */
  border-radius: 50%;
  animation: blink 1.4s infinite both;
}

.msg.assistant.preloader .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.msg.assistant.preloader .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes blink {
  0%, 80%, 100% { opacity: 0 }
  40% { opacity: 1 }
}

.error-message {
  background: #ffdddd;
  color: #900;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 6px;
  transition: opacity 0.5s ease;
}

.error-message.fade-out {
  opacity: 0;
}
.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;
}
:root{
  --bg:#0d1117; --card:#0f172a; --muted:#94a3b8; --text:#e5e7eb;
  --accent:#60a5fa; --accent-2:#22d3ee; --ok:#34d399; --warn:#f59e0b; --err:#ef4444;
  --border:rgba(148,163,184,.25); --ring:rgba(96,165,250,.35);
  --radius:14px; --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%,rgba(34,211,238,.12),transparent 40%),
    radial-gradient(900px 700px at 110% 20%,rgba(96,165,250,.10),transparent 45%),
    var(--bg);
  color:var(--text);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Apple Color Emoji","Segoe UI Emoji";
}
.container{max-width:1200px;margin:32px auto;padding:0 20px;display:grid;grid-template-columns:1.2fr .55fr;gap:22px}
@media (max-width:980px){.container{grid-template-columns:1fr}.progress{order:-1}}

.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));
      border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter: blur(6px);}
.header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px}
.header .dot{width:10px;height:10px;border-radius:50%;
             background:conic-gradient(var(--accent), var(--accent-2)); box-shadow:0 0 18px rgba(96,165,250,.65)}
.header h1{font-size:18px;margin:0}
.sub{color:var(--muted);font-size:13px}

.panel{padding:22px}
.row{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
label{font-weight:600}
.hint{color:var(--muted);font-size:12px}
input[type="text"], 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;
}
textarea{min-height:140px;resize:vertical}
input:focus, textarea:focus, .drop:focus{border-color:var(--accent); box-shadow:0 0 0 6px var(--ring)}
.error{color:var(--err); font-size:12px; display:none}
.error.show{display:block}

.actions{display:flex;justify-content:space-between;gap:10px;margin-top:8px}
.btn{
  padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:#0b1220; color:var(--text);
  cursor:pointer; transition:.2s transform,.2s background,.2s border; font-weight:600; letter-spacing:.2px;
}
.btn:hover{transform:translateY(-1px)}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.btn.primary{background:linear-gradient(90deg, rgba(96,165,250,.25), rgba(34,211,238,.22)); border-color:rgba(96,165,250,.35)}
.btn.ghost{background:transparent}
.btn.success{background:linear-gradient(90deg, rgba(52,211,153,.2), rgba(34,197,94,.18)); border-color:rgba(52,211,153,.35)}
.btn.warn{background:linear-gradient(90deg, rgba(245,158,11,.2), rgba(251,191,36,.18)); border-color:rgba(245,158,11,.35)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--muted)}
.pill .dot{width:8px;height:8px;border-radius:50%}
.pill.ok .dot{background:var(--ok)} .pill.warn .dot{background:var(--warn)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;background:#0b1220;border:1px solid var(--border);padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:.3s}
.toast.show{opacity:1}

/* progress */
.progress .panel{padding:16px 16px 6px}
.progress h2{font-size:15px;margin:2px 0 12px 0}
.step{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px;border:1px solid transparent}
.step.current{background:rgba(96,165,250,.08);border-color:rgba(96,165,250,.35)}
.step .num{flex:0 0 26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#0b1220;border:1px solid var(--border);color:var(--muted);font-weight:700}
.step.done .num{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.35);color:#d1fae5}
.step .meta{display:flex;flex-direction:column}
.step .title{font-weight:700}
.step .desc{font-size:12px;color:var(--muted)}
.divider{height:1px;background:var(--border);margin:10px 0}

.result{background:linear-gradient(180deg,rgba(16,185,129,.08),rgba(34,197,94,.05));
        border:1px solid rgba(16,185,129,.25); border-radius:12px; padding:16px}
.kbd{font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas; background:#0b1220; border:1px solid var(--border);
     border-radius:6px; padding:2px 6px}
template{display:none}


.wizard-busy-overlay{
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.18); backdrop-filter: blur(2px);
  z-index: 9999;
}
.wizard-busy-box{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 12px;
  background: var(--card, #fff); color: var(--fg, #111);
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  font-size: 14px; font-weight: 500;
  color: white;
}
.wizard-spinner{
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: wizard-spin .8s linear infinite;
}
@keyframes wizard-spin { to { transform: rotate(360deg) } }
/*
 * 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)} }