/* Инсталлятор «Маяк в ночи» — премиальный тёмный мастер установки кабинета Евы.
   Самостоятельный визуальный слой (не трогает светлый DaisyUI-кабинет). */

@import "/static/css/fonts.css";

:root {
  --inst-bg: #05070d;
  --inst-blue: #2f73d8;        /* осветлённый #1856A7 под тёмный фон */
  --inst-blue-deep: #1856A7;
  --inst-beacon: #ff8a4c;      /* тёплый луч маяка (из accent #D95E2A) */
  --inst-cyan: #4fc4e0;
  --inst-ink: #eef2f8;
  --inst-muted: #9aa6bd;
  --inst-faint: #5c6a84;
  --inst-line: rgba(255,255,255,.09);
  --inst-glass: rgba(255,255,255,.035);
}

.inst {
  position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(1100px 700px at 18% -10%, rgba(47,115,216,.20), transparent 60%),
    radial-gradient(900px 600px at 105% 115%, rgba(255,138,76,.14), transparent 55%),
    linear-gradient(160deg, #070a12 0%, #05070d 50%, #04060b 100%);
  color: var(--inst-ink);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  display: grid; place-items: center; padding: 40px 20px;
}
.inst::after { /* тонкая зернистость для глубины */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Светящиеся орбы */
.inst-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6; pointer-events: none; }
.inst-orb.b1 { width: 460px; height: 460px; left: -120px; top: -140px;
  background: radial-gradient(circle, rgba(47,115,216,.55), transparent 70%); animation: float1 16s ease-in-out infinite; }
.inst-orb.b2 { width: 380px; height: 380px; right: -110px; bottom: -120px;
  background: radial-gradient(circle, rgba(255,138,76,.40), transparent 70%); animation: float2 19s ease-in-out infinite; }
.inst-orb.b3 { width: 300px; height: 300px; right: 22%; top: -90px;
  background: radial-gradient(circle, rgba(79,196,224,.30), transparent 70%); animation: float1 22s ease-in-out infinite reverse; }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-36px,-26px)} }

/* Бренд-шапка */
.inst-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.inst-beacon-dot { position: relative; width: 12px; height: 12px; border-radius: 50%;
  background: var(--inst-beacon); box-shadow: 0 0 0 4px rgba(255,138,76,.12), 0 0 22px 4px rgba(255,138,76,.65); }
.inst-beacon-dot::after { content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid rgba(255,138,76,.35); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0%{transform:scale(.7);opacity:.9} 100%{transform:scale(1.9);opacity:0} }
.inst-brand-title { font-family:'Unbounded',sans-serif; font-weight:600; font-size:19px; letter-spacing:.2px; }
.inst-brand-sub { color: var(--inst-muted); font-size: 13px; }

/* Карта-стекло */
.inst-shell {
  position: relative; z-index: 2; width: 100%; max-width: 940px;
  display: grid; grid-template-columns: 270px 1fr;
  background: var(--inst-glass);
  border: 1px solid var(--inst-line); border-radius: 22px;
  backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden; animation: rise .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise { from{opacity:0; transform:translateY(18px) scale(.99)} to{opacity:1; transform:none} }

/* Левый степпер */
.inst-steps { padding: 30px 24px; border-right: 1px solid var(--inst-line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12)); }
.inst-step { position: relative; display: flex; align-items: center; gap: 13px; padding: 12px 0; }
.inst-step + .inst-step::before { content:""; position:absolute; left:16px; top:-22px; height:24px; width:2px;
  background: linear-gradient(var(--inst-line), var(--inst-line)); }
.inst-step.done + .inst-step::before, .inst-step.active::before { background: linear-gradient(var(--inst-blue), transparent); }
.inst-badge { flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-weight:600; font-size:14px; color:var(--inst-muted);
  background: rgba(255,255,255,.04); border:1px solid var(--inst-line); transition:.3s; }
.inst-step.done .inst-badge { color:#fff; background: rgba(47,115,216,.22); border-color: rgba(47,115,216,.5); }
.inst-step.active .inst-badge { color:#fff;
  background: linear-gradient(135deg, var(--inst-blue), var(--inst-blue-deep));
  border-color: transparent; box-shadow: 0 0 0 5px rgba(47,115,216,.14), 0 0 26px 2px rgba(47,115,216,.7); }
.inst-step-label { font-size:14.5px; color:var(--inst-muted); transition:.3s; }
.inst-step.active .inst-step-label { color:#fff; font-weight:600; }
.inst-step.done .inst-step-label { color:#c6d0e3; }
.inst-step a.inst-step-label:hover { color:#fff; }
.inst-step-opt { color: var(--inst-faint); font-size:12px; }

/* Контент */
.inst-body { padding: 38px 40px; min-height: 360px; display: flex; flex-direction: column; }
.inst-h { font-family:'Unbounded',sans-serif; font-weight:600; font-size:23px; letter-spacing:.2px; margin-bottom:8px; }
.inst-p { color: var(--inst-muted); font-size:14.5px; line-height:1.6; margin-bottom:24px; max-width:46ch; }
.inst-p code, .inst-code { font-family:ui-monospace,monospace; font-size:12.5px; color:#cfe0ff;
  background:rgba(47,115,216,.14); padding:1px 6px; border-radius:6px; }

.inst-field { display:block; margin-bottom:18px; }
.inst-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--inst-muted); margin-bottom:8px; }
.inst-input, .inst-select {
  width:100%; padding:13px 15px; font-size:15px; color:var(--inst-ink);
  background: rgba(255,255,255,.04); border:1px solid var(--inst-line); border-radius:12px;
  outline:none; transition:.2s; font-family:inherit;
}
.inst-input::placeholder { color: var(--inst-faint); }
.inst-input:focus, .inst-select:focus {
  border-color: rgba(47,115,216,.7);
  box-shadow: 0 0 0 4px rgba(47,115,216,.16), 0 0 26px -4px rgba(47,115,216,.55);
  background: rgba(255,255,255,.06);
}
.inst-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.inst-hint { font-size:12.5px; color:var(--inst-faint); margin-top:-8px; margin-bottom:18px; }

/* Кнопки */
.inst-actions { margin-top:auto; padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.inst-actions .right { display:flex; gap:10px; }
.inst-btn { font-family:inherit; font-weight:600; font-size:14.5px; padding:12px 24px; border-radius:12px; cursor:pointer; border:1px solid transparent; transition:.2s; }
.inst-btn-primary { color:#fff;
  background: linear-gradient(135deg, var(--inst-blue) 0%, var(--inst-blue-deep) 100%);
  box-shadow: 0 8px 30px -8px rgba(47,115,216,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.inst-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 40px -8px rgba(47,115,216,1), inset 0 1px 0 rgba(255,255,255,.3); }
.inst-btn-ghost { color:var(--inst-muted); background:rgba(255,255,255,.03); border-color:var(--inst-line); }
.inst-btn-ghost:hover { color:#fff; background:rgba(255,255,255,.07); }

/* Алёрты + аудио + таблица обзора */
.inst-alert { padding:11px 14px; border-radius:11px; font-size:13.5px; margin-bottom:18px; }
.inst-alert.err { background:rgba(214,37,39,.14); border:1px solid rgba(214,37,39,.4); color:#ffb3b4; }
.inst-alert.ok  { background:rgba(46,160,90,.14); border:1px solid rgba(46,160,90,.4); color:#9fe6bd; }
.inst-review { width:100%; border-collapse:collapse; margin:6px 0 8px; }
.inst-review td { padding:10px 0; border-bottom:1px solid var(--inst-line); font-size:14.5px; }
.inst-review td:first-child { color:var(--inst-muted); width:42%; }

/* Одноколоночная карта входа/сброса (тот же тёмный стиль) */
.inst-auth { position:relative; z-index:2; width:100%; max-width:400px;
  background:var(--inst-glass); border:1px solid var(--inst-line); border-radius:22px;
  backdrop-filter:blur(22px) saturate(120%); -webkit-backdrop-filter:blur(22px) saturate(120%);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  padding:34px 32px; animation:rise .6s cubic-bezier(.2,.8,.2,1) both; }
.inst-link { color:var(--inst-muted); font-size:13.5px; text-decoration:none; transition:.2s; }
.inst-link:hover { color:#fff; }

/* стаггер-появление контента */
.inst-stagger > * { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.inst-stagger > *:nth-child(1){animation-delay:.05s}
.inst-stagger > *:nth-child(2){animation-delay:.10s}
.inst-stagger > *:nth-child(3){animation-delay:.16s}
.inst-stagger > *:nth-child(4){animation-delay:.22s}
.inst-stagger > *:nth-child(5){animation-delay:.28s}

@media (max-width: 720px) {
  .inst-shell { grid-template-columns: 1fr; max-width: 460px; }
  .inst-steps { display:flex; gap:6px; overflow-x:auto; border-right:none; border-bottom:1px solid var(--inst-line); padding:16px; }
  .inst-step + .inst-step::before { display:none; }
  .inst-step-label { display:none; }
  .inst-body { padding:28px 24px; }
}