/* app-concept.css — приложение жителя в концепции сайта site.smartapp.support (29.10.2026, решение владельца):
 * тёмный верх со свечением, моноширинный надзаголовок, крупный заголовок, «стекло» поверх тёмного,
 * ниже — светлая часть с белыми карточками; заголовки разделов — капсом.
 * Включается классом html.ac — только стандартный дизайн:
 *   index.html ставит его, если у проекта нет собственного пресета white-label (data-design);
 *   login.html — только на домене платформы (smartapp.support, локально, onrender.com).
 * У клиентов со своим дизайном (AMANOO и др.) — без изменений. Цвета — только переменные темы.
 */
html.ac{--ac-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Noto Sans Armenian',monospace}

/* ===== Главная и вся оболочка приложения ===== */
html.ac .apphead{background:var(--navy,#16263F)!important;border-bottom:0!important;color:#fff}
html.ac .apphead .hd-profile,
html.ac .apphead .langglobe,
html.ac .apphead .bellbtn{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important}
html.ac .apphead .bellbtn svg,
html.ac .apphead .hd-profile svg,
html.ac .apphead .langglobe svg{stroke:#fff!important}
html.ac .apphead .avatar{box-shadow:0 0 0 1px rgba(255,255,255,.18)}   /* тёмный логотип на тёмной шапке */
html.ac .appscroll{overflow-x:hidden}

/* тёмный «первый экран» главной: приветствие + оплата + QR. Блок на всю ширину экрана,
   содержимое — по ширине раздела (на компьютере раздел 600px по центру). */
html.ac .ac-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy,#16263F);color:#fff;
  margin:-14px calc(50% - 50vw) 16px;padding:6px calc(50vw - 50%) 20px}
html.ac .ac-hero::before{content:"";position:absolute;z-index:-1;inset:-40% -25%;pointer-events:none;
  background:radial-gradient(40% 45% at 18% 22%,color-mix(in srgb,var(--emerald,#34D399) 28%,transparent),transparent 70%),
             radial-gradient(34% 40% at 88% 78%,color-mix(in srgb,var(--emerald,#34D399) 15%,transparent),transparent 70%)}
html.ac .ac-greet{margin:8px 2px 16px}
html.ac .ac-who{font:500 11px/1.4 var(--ac-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--emerald,#34D399);overflow-wrap:anywhere}
html.ac .ac-who:empty{display:none}
html.ac .ac-hi{margin:6px 0 0;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}

/* «стекло» поверх тёмного */
html.ac .ac-hero #cardPayments,
html.ac .ac-hero #qrCard{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 40px rgba(5,12,25,.22)!important}
html.ac .ac-hero #cardPayments{border-radius:22px;margin-bottom:12px}
html.ac .ac-hero #cardPayments .cap{font:500 11px/1.4 var(--ac-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)!important}
html.ac .ac-hero #cardPayments .due,
html.ac .ac-hero #payWho{color:rgba(255,255,255,.72)!important}
html.ac .ac-hero #qrCard{margin-bottom:0!important;border-radius:20px!important}
@supports not (backdrop-filter:blur(1px)){
  html.ac .ac-hero #cardPayments,html.ac .ac-hero #qrCard{background:color-mix(in srgb,#FFFFFF 10%,var(--navy,#16263F))!important}
}

/* светлая часть: заголовки разделов — моноширинным капсом, как надзаголовки сайта */
html.ac .section{font:600 11px/1.4 var(--ac-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--forest,#2A5E42)}

/* остальные разделы: название раздела — тёмной полосой во всю ширину, продолжение шапки
   (класс ac-title ставит index.html первому заголовку раздела; «Ещё» — без полосы: там заголовки групп) */
html.ac .ac-title{position:relative;isolation:isolate;overflow:hidden;background:var(--navy,#16263F);color:#fff!important;
  margin:-14px calc(50% - 50vw) 16px!important;padding:12px calc(50vw - 50%) 22px!important;
  font-family:inherit;font-size:24px!important;font-weight:800!important;line-height:1.2;letter-spacing:-.02em;text-transform:none!important;
  display:flex;align-items:center;gap:12px;overflow-wrap:anywhere}
html.ac .ac-title::before{content:"";position:absolute;z-index:-1;inset:-60% -25%;pointer-events:none;
  background:radial-gradient(40% 60% at 15% 30%,color-mix(in srgb,var(--emerald,#34D399) 22%,transparent),transparent 70%)}
html.ac .ac-title .backbtn{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important;flex:none}
html.ac .ac-title .help-btn{border-color:rgba(255,255,255,.35)!important;color:rgba(255,255,255,.85)!important}

/* нижнее меню: выбранный раздел отмечен полоской сверху */
html.ac .nav .it.on::before{content:"";position:absolute;top:-10px;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:var(--emerald,#34D399)}

/* ===== Вход ===== */
/* Обёртка формы: вне концепции её «не существует» — вёрстка как раньше */
.lg-sheet{display:contents}
html.ac body.lg{background:var(--navy,#16263F);padding:0;align-items:stretch;position:relative;isolation:isolate;min-height:100vh;min-height:100dvh}
html.ac body.lg::before{content:"";position:fixed;z-index:-1;inset:-30% -30% 30%;pointer-events:none;
  background:radial-gradient(40% 40% at 20% 25%,color-mix(in srgb,var(--emerald,#34D399) 28%,transparent),transparent 70%),
             radial-gradient(30% 34% at 85% 60%,color-mix(in srgb,var(--emerald,#34D399) 14%,transparent),transparent 70%)}
html.ac body.lg .langbar{position:absolute;top:calc(18px + env(safe-area-inset-top));right:16px;margin:0;z-index:2}
html.ac body.lg .langbtn{background:transparent;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.82);padding:6px 11px;font-size:12px}
html.ac body.lg .langbtn.on{background:#fff;color:var(--navy,#16263F);border-color:#fff}
html.ac body.lg .phone{max-width:none;width:100%;background:transparent;box-shadow:none;border-radius:0;padding:0;display:flex;flex-direction:column;flex:1}
html.ac body.lg .brand{text-align:left;margin:0;padding:calc(64px + env(safe-area-inset-top)) 24px 30px;color:#fff}
html.ac body.lg .brand .logo{margin:0 0 18px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.25)}
html.ac body.lg .brand .name{font:500 11px/1.4 var(--ac-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--emerald,#34D399)}
html.ac body.lg .brand .subtitle{margin-top:10px;font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:#fff;max-width:340px}
html.ac body.lg .lg-sheet{display:block;flex:1;background:var(--surface,#F7F6F2);border-radius:30px 30px 0 0;
  padding:26px 22px calc(28px + env(safe-area-inset-bottom));box-shadow:0 -20px 40px rgba(0,0,0,.18)}
html.ac body.lg #platformPromo .linkbtn.primary{background:var(--emerald,#34D399);border-color:var(--emerald,#34D399);color:var(--deep,#0B3D2C)}
@media (min-width:700px){
  html.ac body.lg .phone{max-width:440px;margin:0 auto}
  html.ac body.lg .brand{padding-top:96px}
  html.ac body.lg .lg-sheet{flex:0 0 auto;border-radius:30px;margin-bottom:48px}
}

/* ===== Клиенты с собственным пресетом и brand.css (класс ac-wl; 29.10 — AMANOO) =====
   Их акцентный цвет совпадает с основным (оливковый на оливковом), поэтому надзаголовок и свечение —
   белые; логотип-надпись клиента на тёмной шапке — белым силуэтом. Шрифты и кнопки — их брендбука. */
html.ac #view-home.wl-on > #acHero{order:10}          /* в раскладке пресета — первым, быстрые кнопки (12) — под ним */
html.ac.ac-wl .ac-who{color:rgba(255,255,255,.82)}
html.ac.ac-wl .ac-hero::before,
html.ac.ac-wl .ac-title::before,
html.ac.ac-wl body.lg::before{background:radial-gradient(40% 45% at 18% 22%,rgba(255,255,255,.16),transparent 70%),
  radial-gradient(34% 40% at 88% 78%,rgba(255,255,255,.08),transparent 70%)}
html.ac.ac-wl .apphead .avatar{box-shadow:none!important}   /* у логотипа-надписи рамка не нужна */
html.ac.ac-wl .apphead #brandAvatar,
html.ac.ac-wl body.lg .brand .logo{filter:brightness(0) invert(1)}
html.ac.ac-wl body.lg{background:var(--navy,#16263F)!important}
html.ac.ac-wl body.lg .phone{background:transparent!important}
html.ac.ac-wl body.lg .brand .logo{background-position:left center!important;box-shadow:none!important}
html.ac.ac-wl body.lg .brand .subtitle{color:#fff!important}
html.ac.ac-wl body.lg .langbtn{background:transparent!important;border-color:rgba(255,255,255,.25)!important;color:rgba(255,255,255,.82)!important}
html.ac.ac-wl body.lg .langbtn.on{background:#fff!important;color:var(--navy,#16263F)!important;border-color:#fff!important}
html.ac.ac-wl body.lg .lg-sheet{background:var(--surface,#FFFFFF)}

/* Внутри YoPhone (класс yo): сверху шапка YoPhone, поэтому своя полоса скрыта, а профиль и уведомления
   стоят справа от приветствия. Остальной экран без изменений. */
html.yo.ac .apphead.yo-off{display:none!important}
html.yo.ac .yo-row{padding-top:10px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
html.yo.ac .yo-row .ac-greet{min-width:0;flex:1}
html.yo.ac .yo-acts{display:flex;gap:8px;align-items:center;flex:0 0 auto;padding-bottom:4px}
html.yo.ac .yo-acts .hd-profile,
html.yo.ac .yo-acts .langglobe,
html.yo.ac .yo-acts .bellbtn{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important}
html.yo.ac .yo-acts .hd-profile svg,
html.yo.ac .yo-acts .langglobe svg,
html.yo.ac .yo-acts .bellbtn svg{stroke:#fff!important}