/* Crystal concept — local preview only. Existing actions and data stay intact. */
:root[data-theme],:root{--primary:#7652ed;--primary-2:#a080ff;--ground:#f5f5fc;--ground-2:#eeeff9;--card:#fff;--card-2:#f7f7fc;--ink:#22223c;--ink-2:#626581;--muted:#8588a4;--line:#e9e9f4;--line-2:#efeff8;--accent:#7652ed;--accent-soft:#eee9ff}
body{background:#e8eaf5;color:var(--ink)}
.phone{background:radial-gradient(ellipse at 95% 5%,#ebe5ff 0,transparent 46%),radial-gradient(ellipse at 0 80%,#eaf5ff 0,transparent 42%),#f6f6fc;max-width:480px;margin:auto}
.head{background:transparent!important;backdrop-filter:none;box-shadow:none!important;padding:18px 20px 12px;gap:9px}
.head .round,.brandsw button{border:1px solid #ffffffb0;background:#ffffffa6;box-shadow:0 3px 10px #333b7010;border-radius:14px}
.brandlogo{gap:4px}.brandlogo .crown{width:31px}.brandlogo .word{height:18px;max-width:94px}
.scroll{padding:10px 20px 112px!important}
#v-home{gap:18px}
.v3-home .ownercard.v7{padding:20px 16px;border:1px solid #fff;background:linear-gradient(120deg,#fff 28%,#f0edff)!important;border-radius:26px;box-shadow:0 8px 28px #4a42800a!important;overflow:hidden}
.ownercard.v7 .top{grid-template-columns:62px minmax(0,1fr) 58px;gap:12px}
.ownercard.v7 .ava,.ownercard.v7 .ava .img{width:62px!important;height:62px!important;border-radius:20px!important;box-shadow:0 8px 20px #424db329}
.ownercard.v7 .hello{font-size:12px;font-weight:500;color:#8b88a7}
.ownercard.v7 .nm{font-size:25px!important;letter-spacing:-1px;margin:4px 0}
.ownercard.v7 .who{font-size:10px!important;font-weight:500;color:#838099}
.ownercard.v7 .crystalm{width:60px;height:66px;filter:drop-shadow(0 8px 9px #8877dd28)}
.ownercard.v7 .online{font-size:10px;padding:4px 8px;margin-top:9px;background:#e5f9ef;color:#20a876;box-shadow:none}
.factrow{gap:10px!important}
.factrow .f{aspect-ratio:1;box-sizing:border-box;position:relative;height:auto;min-height:0;gap:4px!important;padding:12px!important;border-radius:22px!important;border:1px solid #fff!important;background:linear-gradient(150deg,#fff,#f2f7ff)!important;box-shadow:0 5px 14px #38387608!important;overflow:hidden}
.factrow .f:nth-child(2){background:linear-gradient(150deg,#fff,#f8f3ff)!important}
.factrow .f:nth-child(3){background:linear-gradient(150deg,#fff,#f3f0ff)!important}
.factrow .f .tile,.factrow .f .fi{position:static!important;width:26px!important;height:26px!important;border-radius:9px!important;margin-bottom:3px;box-shadow:none!important;background:#e7f0ff!important;color:#5796ee!important}
.factrow .f:nth-child(2) .tile,.factrow .f:nth-child(2) .fi{background:#f2e9ff!important;color:#b17be5!important}
.factrow .f:nth-child(3) .tile,.factrow .f:nth-child(3) .fi{background:#eee8ff!important;color:#956bea!important}
.factrow .f .tile::before{display:none}
.factrow .f .tile svg{width:16px;height:16px;filter:none}
.factrow .f .tile svg path{stroke:currentColor!important;fill:none!important}
.factrow .f .n{font-size:clamp(21px,6.2vw,29px)!important;letter-spacing:-1px;font-weight:700;line-height:1.05}
.factrow .f .k{font-size:10px!important;font-weight:500;line-height:1.2;color:#85849b}
.factrow .f .trend{font-size:8px!important;font-weight:500;line-height:1.2;margin-top:auto;color:#9693ad}
.factrow .f .barrow{margin-top:auto;gap:4px}.factrow .f .pct{font-size:8px}.factrow .f .bar{height:4px;background:#e8e0fa}
.subbanner{position:relative;overflow:hidden;min-height:76px;padding:16px 18px;border-radius:22px;background:linear-gradient(115deg,#7854ed,#9b79f6 70%,#b399ff);box-shadow:0 7px 20px #825bed23}
.subbanner::before{content:"";position:absolute;width:180px;height:180px;border:1px solid #ffffff20;border-radius:50%;right:-55px;top:-86px;box-shadow:0 0 0 28px #ffffff06,0 0 0 57px #ffffff06;pointer-events:none}
.subbanner .t{font-size:15px;font-weight:600}.subbanner .s{font-size:11px;font-weight:400;opacity:.8;margin-top:5px}
#v-home .group{gap:13px}#v-home .cap{font-size:18px;font-weight:700;letter-spacing:-.5px;margin:5px 0 0}#v-home .caplink{font-size:10px;font-weight:600}
.v3-home .quick{gap:12px}
.v3-home .quick button[data-tone]{position:relative;min-height:137px;padding:16px!important;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:13px;border-radius:23px;background:linear-gradient(145deg,#fff,#f5f6ff)!important;border:1px solid #fff;box-shadow:0 5px 16px #3a307909!important;text-align:left;color:var(--ink)}
.v3-home .quick button[data-tone="blue"]{background:linear-gradient(145deg,#fff,#edf6ff)!important}
.v3-home .quick button[data-tone="green"]{background:linear-gradient(145deg,#fff,#eff9f8)!important}
.v3-home .quick .tile{width:43px;height:43px;border-radius:14px;overflow:visible;background:linear-gradient(145deg,#b6c8ff99,#7754ec)!important;border:1px solid #ffffff9c;box-shadow:inset 2px 2px 5px #ffffff9c,inset -2px -3px 6px #513bd24d,0 5px 9px #7652ed24;transform:rotate(-5deg)}
.v3-home .quick .tile.blue{background:linear-gradient(145deg,#a5eaffb0,#529bf8 60%,#6877ee)!important}
.v3-home .quick .tile.green{background:linear-gradient(145deg,#a2eae2a0,#4bb6b5 60%,#6d98d5)!important}
.v3-home .quick .tile.amber{background:linear-gradient(145deg,#d4c1ffa0,#9d85e1 60%,#7f78cf)!important}
.v3-home .quick .tile::before{border-radius:inherit;background:linear-gradient(135deg,#ffffff65,transparent 50%);inset:3px}
.v3-home .quick .tile svg{width:24px;height:24px;transform:rotate(5deg);filter:drop-shadow(0 2px 2px #52479238)}
.v3-home .quick .tx{flex:0}.v3-home .quick .t{font-size:14px;font-weight:600;letter-spacing:-.3px}.v3-home .quick .s{font-size:10px;font-weight:400;line-height:1.4;margin-top:4px;color:#9190a7}
.v3-home .quick button>.chev{position:absolute;right:15px;top:21px;opacity:.45}.v3-home .quick button>svg:last-child{position:absolute;right:15px;top:21px;width:14px;color:#b2abc8}
:root .tabbar,:root .tabbar.liquid-on,:root .tabbar.liquid-on.scrolling{max-width:440px;width:calc(100% - 32px);bottom:18px;border-radius:28px!important;background:#ffffff85!important;border:1px solid #ffffffd0!important;backdrop-filter:blur(22px) saturate(140%)!important;-webkit-backdrop-filter:blur(22px) saturate(140%)!important;box-shadow:0 10px 32px #3c35641c,inset 0 1px 0 #fff!important;min-height:70px;padding:6px;will-change:auto}
:root .tabbar::before,:root .tabbar::after{display:none!important}
:root .tabbar .thumb,:root .tabbar.liquid-on .thumb{border-radius:22px;background:linear-gradient(155deg,#baa2ff,#845deb)!important;box-shadow:0 4px 12px #8c6ae332,inset 0 1px 0 #ffffff65!important}
.tabbar button{gap:5px;color:#9391af;font-size:9px;font-weight:500}.tabbar button svg{width:21px;height:21px;filter:none!important}.tabbar button[aria-current="true"]{color:#fff!important}
button:focus-visible{outline:2px solid #7652ed;outline-offset:3px}
@media(max-width:370px){.head{padding:14px 12px 8px;gap:5px}.scroll{padding:8px 12px 110px!important}.ownercard.v7 .top{grid-template-columns:50px minmax(0,1fr) 44px;gap:9px}.ownercard.v7 .ava,.ownercard.v7 .ava .img{width:50px!important;height:50px!important}.ownercard.v7 .crystalm{width:44px}.factrow .f{padding:9px!important;gap:3px!important}.factrow .f .n{font-size:22px!important}.factrow .f .trend{font-size:7px!important}.v3-home .quick button[data-tone]{padding:13px!important}.brandlogo .word{max-width:76px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Reference fidelity pass: supplied screen 17 September. */
:root{--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--ink:#080911;--ink-2:#49538a;--muted:#838bbd}
body{font-family:var(--sans);background:#e9edff}
.phone{max-width:573px;background:radial-gradient(ellipse at 80% 38%,#e9e6ff,transparent 65%),#eff1ff}
.head{height:61px;padding:8px 10px!important;gap:8px!important;flex-wrap:nowrap}
.head .round{width:39px;height:41px;border-radius:12px;background:#fff;flex-shrink:0;color:#131665;box-shadow:0 3px 12px #7e87d528}
.brandlogo{gap:3px}.brandlogo .crown{width:40px}.brandlogo .word{height:25px;max-width:100px;width:100px}
.brandsw button{height:41px!important;border-radius:12px!important}.brandsw button.brand-max{min-width:81px;background:linear-gradient(145deg,#9c80ff,#5645ff)!important;font-size:14px}.brandsw button.brand-tg{width:39px}
.profbtn{display:none!important}
.scroll{padding:3px 11px 108px!important}#v-home{gap:11px!important}
.v3-home .ownercard.v7{border-radius:13px;padding:14px!important;min-height:132px;background:linear-gradient(135deg,#fff 47%,#e2e4ff 72%,#f5f0ff)!important;box-shadow:0 3px 10px #6e77bc15!important}
.ownercard.v7 .top{grid-template-columns:98px minmax(0,1fr) 94px!important;gap:16px!important}
.ownercard.v7 .ava,.ownercard.v7 .ava .img{width:98px!important;height:100px!important;border-radius:16px!important;box-shadow:0 5px 15px #2586f53b}
.ownercard.v7 .hello{font-size:14px;font-weight:700;white-space:nowrap;color:#8a91c1}
.ownercard.v7 .nm{font-size:28px!important;letter-spacing:-.8px;margin:4px 0;display:flex;align-items:center;gap:8px;color:#080910}
.verified{display:inline-grid;place-items:center;width:20px;height:20px;flex-shrink:0;background:#008aff;color:#fff;font-size:14px;clip-path:polygon(50% 0,65% 9%,82% 8%,91% 27%,100% 40%,94% 59%,94% 77%,73% 87%,59% 100%,40% 94%,22% 94%,11% 75%,0 60%,7% 41%,7% 24%,28% 13%)}
.ownercard.v7 .who{font-size:12px!important;white-space:nowrap;overflow:visible;font-weight:600;color:#8b91bc}
.ownercard.v7 .online{font-size:12px;margin-top:8px;padding:4px 9px;background:#daffe5;border:1px solid #a4f3ba;color:#075d16}.ownercard.v7 .online i{background:#00d40c;width:10px;height:10px}
.ownercard.v7 .crystalm{width:98px!important;height:108px!important;max-width:none;filter:drop-shadow(0 6px 10px #7774f235)}
.ownercard.v7 .q{display:none}
.factrow{gap:9px!important}.factrow .f{aspect-ratio:auto;min-height:155px;padding:13px!important;gap:6px!important;border-radius:9px!important;border:1px solid #d5e3ff!important;background:linear-gradient(115deg,#f8fcff,#eff5ff)!important;box-shadow:0 3px 7px #7d90d515!important}
.factrow .f:nth-child(2){background:linear-gradient(110deg,#fff9fc,#f7effa)!important;border-color:#fff!important}.factrow .f:nth-child(3){background:linear-gradient(110deg,#fbf8ff,#f2efff)!important;border-color:#dbd3ff!important}
.factrow .f .tile{width:47px!important;height:47px!important;border-radius:13px!important;margin-bottom:3px;background:linear-gradient(145deg,#58bcff,#0588f7)!important;color:#fff!important;box-shadow:0 5px 12px #288ef72a!important}
.factrow .f:nth-child(2) .tile{background:linear-gradient(145deg,#ffeaf4,#ffc8df)!important;color:#f60064!important;box-shadow:0 5px 12px #f39bcb28!important}.factrow .f:nth-child(3) .tile{background:linear-gradient(145deg,#e8d7ff,#c69aff)!important;color:#7800ff!important}
.factrow .f .tile svg{width:28px;height:28px}.factrow .f .tile svg path{fill:currentColor!important;stroke:none!important}
.factrow .f .n{font-size:33px!important;letter-spacing:-1px;font-weight:700;line-height:1.03;color:#030409}.factrow .f .k{font-size:14px!important;font-weight:600;line-height:1.14;color:#465082}.factrow .f .trend{font-size:11px!important;font-weight:500;margin-top:auto;white-space:nowrap;color:#697cfa;gap:6px}.trend-arrow{font-size:24px;line-height:.6;font-weight:700;color:#06c65b}.factrow .f .pct{font-size:11px;color:#414b84}.factrow .f .bar{height:8px;background:#ded8fc}.factrow .f .bar i{background:linear-gradient(90deg,#9836ff,#6534ff)}
.subbanner{min-height:73px;padding:15px 24px;border-radius:10px;gap:20px;background:linear-gradient(110deg,#5745f2,#9165ff);box-shadow:0 5px 12px #735deb22}.subbanner::before{display:none}.subbanner .crownimg{width:46px!important;height:auto}.subbanner .t{font-size:17px;font-weight:700}.subbanner .s{font-size:13px;margin-top:5px;color:#e0dfff;opacity:1}.subbanner .chev svg{width:23px;height:23px}
#v-home .group{gap:12px}#v-home .cap{font-size:20px;font-weight:700;letter-spacing:-.5px;margin:7px 0 0}#v-home .caplink{font-size:13px;font-weight:600;gap:5px}
.v3-home .quick{gap:10px}.v3-home .quick button[data-tone]{min-height:78px!important;padding:11px!important;border-radius:11px!important;display:flex;flex-direction:row;align-items:center;gap:13px!important;background:linear-gradient(115deg,#e7f3ff,#ddebff)!important;border:1px solid #caddfb;box-shadow:inset 0 0 0 1px #ffffff65!important}
.v3-home .quick button[data-tone="violet"]{background:linear-gradient(115deg,#efe7ff,#e8e1ff)!important;border-color:#dacdff}.v3-home .quick button[data-tone="green"]{background:linear-gradient(115deg,#e9fff7,#d9f4eb)!important;border-color:#ccefe2}.v3-home .quick button[data-tone="amber"]{background:linear-gradient(115deg,#fff8e5,#ffefd4)!important;border-color:#f4e2bd}
.v3-home .quick .tile{width:49px;height:51px;border-radius:12px;flex:0 0 49px;transform:none!important;box-shadow:0 5px 9px #6171b328}.v3-home .quick .tile svg{transform:none;width:30px;height:30px}.v3-home .quick .tx{flex:1;min-width:0}.v3-home .quick .t{font-size:14px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}.v3-home .quick .s{font-size:12px;line-height:1.25;margin-top:4px;font-weight:500;color:#7e8aba;max-width:92px}.v3-home .quick button>.chev{position:static;margin-left:auto;flex:0 0 8px;opacity:.8}.v3-home .quick button>.chev svg{width:11px}
:root .tabbar,:root .tabbar.liquid-on,:root .tabbar.liquid-on.scrolling{max-width:550px;width:calc(100% - 24px);height:73px;bottom:17px;padding:5px;border-radius:25px!important;background:linear-gradient(120deg,#ffffff70,#d6ddff55,#ffffff95)!important;border:1px solid #fff!important;backdrop-filter:blur(12px) saturate(180%)!important;-webkit-backdrop-filter:blur(12px) saturate(180%)!important;box-shadow:0 8px 17px #586bbf55,inset 0 0 3px 2px #fff,inset 0 -3px 7px #a8b8f365,0 0 0 3px #ffffff60!important}
:root .tabbar::after{display:block!important;content:"";position:absolute;inset:3px;border-radius:21px;border-top:2px solid #fff;border-bottom:1px solid #ffffffc0;background:linear-gradient(115deg,transparent 12%,#ffffff90 15%,transparent 21%,transparent 63%,#fff7 66%,transparent 71%);pointer-events:none;opacity:.7}
:root .tabbar .thumb,:root .tabbar.liquid-on .thumb{border-radius:21px;background:linear-gradient(145deg,#b89bff,#7657ff 60%,#6c4bed)!important;box-shadow:inset 0 1px 5px #fff,0 0 6px 2px #d7cfff,0 5px 13px #7450e880!important}
.tabbar button{font-size:12px;gap:6px;font-weight:500;color:#536298}.tabbar button svg{width:24px;height:24px}.tabbar .badge{display:none}
/* Keep secondary home sections below the reference's first screen, accessible by scrolling. */
@media(max-width:390px){.head{gap:5px!important}.brandlogo .crown{width:29px}.brandlogo .word{width:84px;max-width:84px;height:22px}.head .round{width:35px}.brandsw button.brand-max{min-width:65px}.ownercard.v7 .top{grid-template-columns:80px minmax(0,1fr) 72px!important;gap:10px!important}.ownercard.v7 .ava,.ownercard.v7 .ava .img{width:80px!important;height:84px!important}.ownercard.v7 .crystalm{width:76px!important;height:90px!important}.ownercard.v7 .nm{font-size:25px!important}.ownercard.v7 .who{font-size:10px!important}.factrow .f{padding:10px!important;min-height:144px}.factrow .f .n{font-size:29px!important}.factrow .f .k{font-size:12px!important}.factrow .f .trend{font-size:10px!important}.v3-home .quick button[data-tone]{gap:8px!important;padding:9px!important}.v3-home .quick .tile{width:44px;height:46px;flex-basis:44px}.v3-home .quick .t{font-size:12px}.v3-home .quick .s{font-size:11px}#v-home .cap{font-size:18px}#v-home .caplink{font-size:11px}}
/* Imagegen atlas: four real raster assets, no CSS imitation of the action icons. */
@media(max-width:390px){.v3-home .quick button[data-tone] .tile{width:52px;height:52px;flex-basis:52px}.v3-home .quick button[data-tone] .tx{width:0;flex:1}.v3-home .quick .t{white-space:normal}.v3-home .quick button>.chev{flex-basis:7px}}
.v3-home .quick{grid-template-columns:repeat(2,minmax(0,1fr))!important}.v3-home .quick button[data-tone]{min-width:0!important}.v3-home .quick button[data-tone] .tx{min-width:0;width:0;flex:1}.v3-home .quick .t{white-space:normal;overflow-wrap:normal}

/* Буква М — украшение, а не сосед имени: опускаем её ниже строки с именем,
   а само имя обрезаем многоточием, чтобы длинное имя не уезжало под картинку. */
.ownercard.v7 .crystalm{align-self:end!important;margin-top:16px!important;pointer-events:none;
  width:56px!important;height:66px!important;opacity:.9}
.ownercard.v7 .top{grid-template-columns:80px minmax(0,1fr) 56px!important}
.ownercard.v7 .nm{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;display:block!important}/* 04.10.2026: у flex-контейнера многоточие не рисуется — имя срезалось на полуслове */

/* Плитки быстрых действий рисуются обычным значком на градиенте.
   Раньше сюда подставлялась картинка на четыре ячейки, и список из шести
   пунктов получал чужие рисунки: мут и приветствия показывали плюс. */

/* Значок из кристального набора сам нарисован как объёмная кнопка, поэтому
   под ним не нужна вторая подложка: контейнер делаем прозрачным, а рисунок
   растягиваем на всю клетку — иначе выходит светлый квадрат с мелкой кнопкой. */
.v3-home .quick button[data-tone] .tile{
  width:58px!important;height:58px!important;flex-basis:58px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;overflow:visible!important;transform:none!important}
.v3-home .quick button[data-tone] .tile::before,
.v3-home .quick button[data-tone] .tile::after{display:none!important}
.v3-home .quick button[data-tone] .tile svg{
  width:58px!important;height:58px!important;transform:none!important;
  filter:drop-shadow(0 5px 9px rgba(97,113,179,.28))!important}
@media(max-width:390px){
  .v3-home .quick button[data-tone] .tile{width:52px!important;height:52px!important;flex-basis:52px!important}
  .v3-home .quick button[data-tone] .tile svg{width:52px!important;height:52px!important}
}

/* Общее правило для всего приложения.
   Значки кристального набора уже нарисованы объёмной кнопкой с бликом и тенью.
   Если такой значок кладут в плитку, кружок или уведомление со своим фоном,
   видно вторую подложку: бледный квадрат, а внутри маленькая кнопка. Фон, рамку
   и тень у контейнера убираем, рисунок растягиваем на всю клетку.
   Класс crystal-icon ставится только когда подмена значка действительно
   сработала, поэтому обычные значки остаются со своими подложками. */
.tile:has(> svg.crystal-icon),
.sq:has(> svg.crystal-icon),
.ico:has(> svg.crystal-icon),
.mark:has(> svg.crystal-icon),
.dotc:has(> svg.crystal-icon),
.tico:has(> svg.crystal-icon),
.round:has(> svg.crystal-icon){
  background:transparent!important;background-image:none!important;border:0!important;
  box-shadow:none!important;overflow:visible!important;transform:none!important}
.tile:has(> svg.crystal-icon)::before,.tile:has(> svg.crystal-icon)::after,
.sq:has(> svg.crystal-icon)::before,.ico:has(> svg.crystal-icon)::before,
.mark:has(> svg.crystal-icon)::before,.dotc:has(> svg.crystal-icon)::before,
.round:has(> svg.crystal-icon)::before{display:none!important}
.tile > svg.crystal-icon,.sq > svg.crystal-icon,.ico > svg.crystal-icon,
.mark > svg.crystal-icon,.dotc > svg.crystal-icon,.tico > svg.crystal-icon,
.round > svg.crystal-icon{
  width:100%!important;height:100%!important;transform:none!important;
  filter:drop-shadow(0 4px 8px rgba(97,113,179,.26))!important}

/* Переключатель в списках сжимался до вертикального пятна: в узкой строке
   дорожка ужималась по ширине. Размер фиксируем явно. */
.switch{flex:0 0 auto!important}
.switch .track{width:52px!important;height:32px!important;flex:0 0 52px!important;border-radius:11px!important}
.switch .track::after{width:24px!important;height:24px!important;border-radius:8px!important}
.switch:active .track::after{width:30px!important}
/* В ночной теме ручка совпадала по цвету с дорожкой, и переключатель
   выглядел пустой рамкой. */
:root[data-theme="dark"] .switch .track::after{background:#dfe5ff!important}