/* ============================================================
   CABINET HOME («Главная») + боковое/нижнее меню кабинета
   ТЗ FolioApp: «Главная» + новое меню навигации.
   Меню оборачивает ТОЛЬКО два экрана — #view-cabinet-home и #view-cabinet
   («Профиль»). Класс body.fa-cab-layout выставляет goTo() (см.
   js/nav-and-auth-entry.js) — на всех остальных страницах сайта ничего
   из этого файла не действует.
   <nav id="nav"> (header) не редактируется: на этих двух экранах ему просто
   добавляется margin-left на ширину бокового меню.
   ============================================================ */
:root{ --fa-sidebar-w:104px; --icon-tint:#ECEDF4; }

/* ---------- LAYOUT: боковое меню (десктоп) ---------- */
.fa-sidebar{ display:none; }
.fa-mobile-bar{ display:none; }
body.fa-cab-layout .fa-sidebar{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  position:fixed; top:0; left:0; bottom:0; width:var(--fa-sidebar-w);
  padding:8px 10px 22px; background:var(--bg); border-right:1px solid var(--border);
  z-index:55; overflow-y:auto;
}
body.fa-cab-layout #nav,
body.fa-cab-layout #view-cabinet,
body.fa-cab-layout #view-cabinet-home{ margin-left:var(--fa-sidebar-w); }

.fa-nav-item{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 4px; border-radius:16px; background:transparent; border:none; cursor:pointer;
  color:var(--ink-soft); transition:.15s ease;
}
.fa-nav-item:hover{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card); }
.fa-nav-item.active{ background:var(--violet-tint); color:#5847c9; }
.fa-nav-ic{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.fa-nav-item .fa-nav-ic svg{ width:19px; height:19px; flex-shrink:0; }
.fa-nav-label{ font-size:11px; font-weight:700; text-align:center; line-height:1.15; }
.fa-nav-plan{ background:var(--gold-tint); }
.fa-nav-plan svg{ stroke:#B4530A; }
.fa-nav-item.active .fa-nav-plan{ background:var(--violet-tint); }
.fa-nav-add{ margin-bottom:4px; padding-bottom:16px; }
.fa-nav-add .fa-nav-ic{ width:34px; height:34px; border-radius:50%; background:var(--coral); color:#fff; transition:background .2s ease; }
.fa-nav-add .fa-nav-ic svg{ width:15px; height:15px; }
.fa-nav-add:hover .fa-nav-ic{ background:var(--ink) !important; }
.fa-nav-add:hover{ background:transparent; box-shadow:none; }

/* ---------- LAYOUT: нижнее меню (мобилка) ---------- */
@media(max-width:880px){
  body.fa-cab-layout .fa-sidebar{ display:none; }
  body.fa-cab-layout #nav,
  body.fa-cab-layout #view-cabinet,
  body.fa-cab-layout #view-cabinet-home{ margin-left:0; }
  body.fa-cab-layout .fa-mobile-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:var(--surface); border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px)); justify-content:space-around;
    box-shadow:0 -8px 24px -18px rgba(20,21,26,.25);
  }
  .fa-mobile-bar .fa-nav-item{ flex:1; padding:6px 2px; border-radius:12px; }
  .fa-mobile-bar .fa-nav-ic{ width:32px; height:32px; }
  .fa-mobile-bar .fa-nav-label{ font-size:9.5px; }
  body.fa-cab-layout{ padding-bottom:64px; }
  /* значок «?» поддержки (сам не редактируется) не должен прятаться под нижним меню */
  body.fa-cab-layout .support-widget-btn{ bottom:78px; }
}

/* ---------- Экран «Профиль»: кнопки шапки на мобилке ---------- */
/* «Перейти в профиль» и «Отправить на верификацию» на мобилке — чёрные
   (тот же вид, что у .btn-primary, см. css/buttons.css) */
@media(max-width:640px){
  #cab-view-profile-btn.btn-outline,
  #cab-home-view-profile-btn.btn-outline,
  #cab-verify-btn.btn-outline{ background:var(--ink); color:#fff; border-color:var(--ink); }
  #cab-view-profile-btn.btn-outline:hover,
  #cab-home-view-profile-btn.btn-outline:hover,
  #cab-verify-btn.btn-outline:hover:not(:disabled){ background:var(--coral); border-color:var(--coral); transform:translateY(-1px); }
  #cab-verify-btn.btn-outline:disabled{ opacity:.6; cursor:default; }
}

/* ---------- «Что ты добавишь сегодня?» ---------- */
.fa-create-card{
  scroll-margin-top:96px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px 24px 22px; margin-bottom:44px; box-shadow:var(--shadow-card);
}
.fa-create-head{ text-align:center; margin-bottom:20px; }
.fa-create-head h2{ font-size:21px; margin:0 0 4px; }
@media(min-width:881px){ .fa-create-card{ padding:34px 32px 34px; } .fa-create-head{ margin-bottom:30px; } }

.fa-icon-grid{ display:flex; flex-wrap:wrap; }
.fa-icon-cell{ box-sizing:border-box; padding:5px; }
.fa-icon-grid.cols-6 .fa-icon-cell{ width:16.6666%; }
.fa-icon-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:16px 6px; width:100%; height:100%; border-radius:16px; border:1px solid var(--border);
  background:var(--bg); cursor:pointer; transition:.15s ease; font-family:inherit; box-sizing:border-box;
}
.fa-icon-card:hover{ border-color:var(--ink); transform:translateY(-2px); background:var(--surface); box-shadow:var(--shadow-card); }
.fa-icon-circle{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; }
.fa-icon-circle svg{ width:21px; height:21px; }
.fa-icon-ru{ font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.25; overflow-wrap:break-word; word-break:break-word; }

@media(max-width:880px){
  .fa-icon-cell{ padding:3px; }
  .fa-icon-grid.cols-6 .fa-icon-cell{ width:20%; }
  /* «Шаблоны» и «Инструменты» на мобилке не показываются */
  .fa-desktop-only{ display:none; }
  .fa-create-card{ padding:18px 10px 14px; margin-bottom:32px; }
  .fa-create-head{ margin-bottom:14px; }
  .fa-icon-card{ padding:8px 2px; border-radius:12px; gap:6px; }
  .fa-icon-circle{ width:30px; height:30px; border-radius:9px; }
  .fa-icon-circle svg{ width:14px; height:14px; }
  .fa-icon-ru{ font-size:9px; line-height:1.2; word-break:normal; overflow-wrap:break-word; hyphens:none; }
}

/* ---------- Вариант-1: слайдер ---------- */
.fa-quick-intro.fa-quickfill-intro{ text-align:center; margin-bottom:14px; }
.fa-quick-intro.fa-quickfill-intro h3{ margin-bottom:4px; }
.fa-quick-intro.fa-quickfill-intro p{ max-width:100%; text-align:center; margin:0 auto; }
.fa-slider{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; position:relative; margin-bottom:28px; box-shadow:var(--shadow-card);
}
.fa-slider-supr{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; border-radius:inherit; }
.fa-rect{ position:absolute; mix-blend-mode:multiply; }
.fa-rect--a{ width:50%; height:14%; top:4%; left:-12%; background:#FF4D6D; opacity:.12; transform:rotate(-14deg); }
.fa-rect--b{ width:28%; height:28%; top:-8%; right:-8%; background:#2148C2; opacity:.09; transform:rotate(12deg); }
.fa-rect--c{ width:60%; height:9%; bottom:8%; right:-16%; background:#17181C; opacity:.06; transform:rotate(9deg); }
.fa-rect--d{ width:20%; height:20%; bottom:-6%; left:-6%; background:#F2C230; opacity:.12; transform:rotate(-20deg); }
.fa-slide{ display:none; position:relative; z-index:1; padding:38px clamp(20px,4vw,44px) 34px; }
.fa-slide.active{ display:block; }
.fa-step-label{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; }
.fa-slide-title{ font-family:'Unbounded',sans-serif; font-weight:800; font-size:22px; margin:0 0 22px; line-height:1.3; }
.fa-slide-body{ max-width:520px; }
.fa-slide-body--wide{ max-width:720px; }
.fa-slide-body--promo{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.fa-promo-side{ flex:1; min-width:200px; }
.fa-promo-side .cab-promo-scale-hint{ margin-top:0; max-width:320px; }
.fa-slide .cab-avatar-row{ margin-bottom:8px; }
.fa-slide .cab-avatar-hint{ max-width:320px; }
.fa-slide .field-row{ display:flex; gap:16px; }
.fa-slide .field-row .field{ flex:1; min-width:0; }
.fa-slide .field input[readonly]{ background:var(--bg); color:var(--ink-soft); }
.fa-slide-footer{
  position:relative; z-index:1; padding:16px clamp(20px,4vw,44px) 28px; border-top:1px solid var(--border);
  background:var(--surface); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.fa-dots{ display:flex; gap:7px; margin-bottom:4px; }
.fa-dot{ width:7px; height:7px; border-radius:50%; background:var(--border); transition:.2s ease; }
.fa-dot.active{ background:var(--ink); width:22px; border-radius:4px; }
.fa-slide-save-btn{ width:100%; max-width:320px; }
.fa-slide-save-btn:disabled{ opacity:.45; cursor:default; transform:none; }
.fa-slide-save-btn:disabled:hover{ background:var(--ink); transform:none; }
.fa-slide-nav{ display:flex; justify-content:space-between; width:100%; max-width:420px; margin-top:2px; }
.fa-slide-nav button{ background:none; border:none; color:var(--ink-soft); font-weight:600; font-size:13px; cursor:pointer; padding:4px 6px; }
.fa-slide-nav button:hover{ color:var(--ink); }
.fa-slide-nav button:disabled{ opacity:0; pointer-events:none; }
@media(max-width:640px){
  .fa-slide .field-row{ flex-direction:column; gap:0; }
  .fa-slide-title{ font-size:19px; }
}

/* ---------- Вариант-2: быстрые формы проекта / альбома ---------- */
.fa-quick-section{ margin-bottom:56px; }
.fa-quick-intro{ margin-bottom:16px; }
.fa-quick-intro h3{ font-size:19px; margin-bottom:6px; }
.fa-quick-intro p{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; max-width:640px; margin:0; }
.fa-quick-save-row{ margin-top:18px; display:flex; justify-content:flex-end; }
/* формы — те же, что во вкладках «Проекты»/«Медиагалерея»; кнопка удаления
   карточки на быстрой форме не нужна (это ещё не сохранённый черновик) */
.fa-quick-section .cab-item-card > .cab-item-remove,
.fa-quick-section .cab-album-delete-btn{ display:none; }
/* на «Главной» карточка альбома лежит прямо на фоне страницы (не внутри белой карточки, как в «Профиле») — фон белый, как у формы проекта */
.fa-quick-section .cab-album-card{ background:var(--surface); }

/* ---------- Модалка «Релиз нового функционала — скоро!» ---------- */
.fa-soon-overlay{
  position:fixed; inset:0; background:rgba(20,21,26,.5); z-index:500; display:none;
  align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(3px);
}
.fa-soon-overlay.show{ display:flex; }
.fa-soon-modal{
  background:var(--surface); border-radius:var(--radius-lg); width:380px; max-width:100%;
  padding:34px 30px 28px; text-align:center; box-shadow:var(--shadow-soft); position:relative;
}
.fa-soon-icon{
  width:56px; height:56px; border-radius:16px; background:var(--violet-tint); color:#5847c9;
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.fa-soon-icon svg{ width:26px; height:26px; }
.fa-soon-modal h3{ font-size:19px; margin-bottom:22px; }

/* ---------- Тост «Сохранено ✓» на «Главной» ---------- */
.fa-toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:13px 22px; border-radius:999px;
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow-soft);
  opacity:0; pointer-events:none; transition:all .3s cubic-bezier(.2,.8,.2,1); z-index:400;
  max-width:calc(100vw - 32px); text-align:center;
}
.fa-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media(max-width:880px){ .fa-toast{ bottom:84px; } }