/* ══ MODIX: палитра ══ */
:root{
  --ground:#F3F4FC; --ground-2:#EBEDF9;
  --card:#FFFFFF; --card-2:#F5F6FD; --line:#E0E3F5; --line-2:#ECEEF9;
  --ink:#121633; --ink-2:#4A5078; --muted:#7D84AC;
  --accent:#5566FF; --accent-ink:#FFFFFF; --accent-edge:#3A47D6; --accent-soft:#E8EBFF; --accent-2:#8F5BFF;
  --violet:#7B4DFF; --violet-soft:#EEE8FF; --blue:#2F7CFF; --blue-soft:#E3EEFF;
  --teal:#0E9C8A; --teal-soft:#DDF5F1; --pink:#D2408A; --pink-soft:#FBE4F0;
  --amber:#D98A0A; --amber-soft:#FBEFD9; --gold:#E0A100; --gold-soft:#FFF3D1;
  --red:#E0413C; --red-soft:#FCE4E2; --green:#12A66A; --green-soft:#DDF5EA;
  --max:#5566FF; --tg:#2AA3F0; --btn-edge:#D9DCF0; --cyan:#3FC9FF;
  --glow:0 0 0 1px rgba(85,102,255,.08), 0 8px 30px rgba(85,102,255,.10);
  --sh:0 2px 6px rgba(30,40,120,.06), 0 1px 1px rgba(30,40,120,.04);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#060A20; --ground-2:#04071A;
  --card:#0D1333; --card-2:#131A42; --line:#1F2A5E; --line-2:#182252;
  --ink:#F2F5FF; --ink-2:#B8C0EA; --muted:#7C86BC;
  --accent:#5B6DFF; --accent-ink:#FFFFFF; --accent-edge:#2C3CC4; --accent-soft:#172056; --accent-2:#9260FF;
  --violet:#A688FF; --violet-soft:#221B58; --blue:#5AA8FF; --blue-soft:#12244F;
  --teal:#3ED8C0; --teal-soft:#0F2E38; --pink:#FF6FB0; --pink-soft:#341A3A;
  --amber:#FFB23F; --amber-soft:#332612; --gold:#FFC533; --gold-soft:#332A10;
  --red:#FF5F58; --red-soft:#3A1622; --green:#3DE39C; --green-soft:#0F3328;
  --max:#5B6DFF; --tg:#3DB1FF; --btn-edge:#050818; --cyan:#4FD8FF;
  --glow:0 0 0 1px rgba(91,109,255,.18), 0 10px 40px rgba(60,80,255,.18);
  --sh:0 2px 10px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --ground:#060A20; --ground-2:#04071A;
  --card:#0D1333; --card-2:#131A42; --line:#1F2A5E; --line-2:#182252;
  --ink:#F2F5FF; --ink-2:#B8C0EA; --muted:#7C86BC;
  --accent:#5B6DFF; --accent-ink:#FFFFFF; --accent-edge:#2C3CC4; --accent-soft:#172056; --accent-2:#9260FF;
  --violet:#A688FF; --violet-soft:#221B58; --blue:#5AA8FF; --blue-soft:#12244F;
  --teal:#3ED8C0; --teal-soft:#0F2E38; --pink:#FF6FB0; --pink-soft:#341A3A;
  --amber:#FFB23F; --amber-soft:#332612; --gold:#FFC533; --gold-soft:#332A10;
  --red:#FF5F58; --red-soft:#3A1622; --green:#3DE39C; --green-soft:#0F3328;
  --max:#5B6DFF; --tg:#3DB1FF; --btn-edge:#050818; --cyan:#4FD8FF;
  --glow:0 0 0 1px rgba(91,109,255,.18), 0 10px 40px rgba(60,80,255,.18);
  --sh:0 2px 10px rgba(0,0,0,.35);
}
:root[data-brand="tg"]{ --accent:#2AA3F0; --accent-2:#5CC4FF; --accent-edge:#1878BE; --accent-soft:#E0F1FF }
:root[data-theme="dark"][data-brand="tg"]{ --accent:#3DB1FF; --accent-2:#7ED2FF; --accent-edge:#1B6FB8; --accent-soft:#0F2B4A }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"])[data-brand="tg"]{ --accent:#3DB1FF; --accent-2:#7ED2FF; --accent-edge:#1B6FB8; --accent-soft:#0F2B4A } }

/* фон: глубокий космос с мягким свечением */
body,.phone{background:var(--ground)}
.phone{background:
  radial-gradient(90% 40% at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
  radial-gradient(60% 30% at 100% 100%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%),
  var(--ground)}
.head{background:color-mix(in srgb, var(--ground) 84%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.head.small{box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* ══ шапка ══ */
.brandlogo{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.brandlogo[hidden]{display:none}
.brandlogo .crown{width:36px;height:auto;flex:0 0 auto}
.brandlogo .word{height:17px;width:auto;max-width:min(88px, calc(100% - 42px));object-fit:contain;object-position:left}
.head.small .brandlogo .crown{width:28px;height:24px}
.head.small .brandlogo .word{height:17px;width:auto;max-width:min(88px, calc(100% - 42px));object-fit:contain;object-position:left}
.round{border-radius:14px;background:var(--card);box-shadow:var(--sh);border-color:var(--line)}
.brandsw{gap:5px;background:transparent;border:0;padding:0;box-shadow:none;border-radius:0}
.brandsw .thumb{display:none}
.brandsw button{height:36px;min-width:36px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 8px;color:var(--ink-2);font-weight:700;font-size:12.5px}
.brandsw button.brand-tg{padding:0;width:36px}
.brandsw button img{width:18px;height:18px;border-radius:5px}
.brandsw button[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;box-shadow:0 0 14px color-mix(in srgb, var(--accent) 55%, transparent)}
.head{gap:5px;padding-left:12px;padding-right:12px}
.round{width:36px;height:36px;border-radius:12px}
.profbtn,.round.profbtn{width:36px;height:36px;border-radius:12px}
.brandsw .thumb{background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 14px color-mix(in srgb, var(--accent) 55%, transparent)}
.profbtn,.round.profbtn{background:linear-gradient(135deg,#6C7BFF,#A56BFF);color:#fff;border-color:transparent;font-weight:700;
  box-shadow:0 0 16px rgba(120,100,255,.45)}

/* ══ карточка владельца ══ */
.ownercard,:root[data-brand="tg"] .ownercard{
  background:linear-gradient(160deg,#101A4C 0%,#0B1136 55%,#120E3F 100%);color:#F4F6FF;border:1px solid #2A3A86;
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.08);border-radius:26px;gap:12px}
:root[data-theme="light"] .ownercard,:root[data-theme="light"][data-brand="tg"] .ownercard{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--glow)}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .ownercard{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--glow)} }
.ownercard::before{inset:auto -25% -60% auto;width:280px;height:280px;background:radial-gradient(closest-side,rgba(90,110,255,.35),transparent)}
.ownercard::after{inset:-50% auto auto -25%;width:220px;height:220px;background:radial-gradient(closest-side,rgba(120,80,255,.28),transparent)}
.ownercard .top{display:grid!important;grid-template-columns:60px minmax(0,1fr) auto;gap:10px;align-items:center;z-index:2;padding:22px 0 0!important;position:relative}
.ownercard .top > .ava{grid-column:1}
.ownercard .top > div:not(.ava){grid-column:2;min-width:0}
.ownercard .ava.lg,.ownercard .ava.lg .img{width:60px!important;height:60px!important}
.ownercard .top .q{display:none}
.ownercard .top{position:relative}
.ownercard .hello{opacity:.72;font-weight:600;font-size:13px}
.ownercard .nm,.v3-home .ownercard .nm{font-size:16px!important;letter-spacing:-.03em!important;white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important;overflow:visible!important;line-height:1.15!important;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:7px}
.ownercard .who,.v3-home .ownercard .who{opacity:.72;font-size:11.5px!important;font-weight:600;white-space:normal!important;overflow:visible!important;line-height:1.25;margin-top:2px}
.ownercard .hellorow{display:flex;align-items:center;gap:6px;min-width:0}
.ownercard .hello{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;min-width:0}
.ownercard .online{position:absolute;top:-8px;right:0;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;flex:0 0 auto;
  background:rgba(61,227,156,.12);border:1px solid rgba(61,227,156,.35);color:#3DE39C;margin-left:auto}
:root[data-theme="light"] .ownercard .online{background:#E3F8EE;border-color:#B8ECD3;color:#0E8D58}
.ownercard .online i{width:8px;height:8px;border-radius:50%;background:#3DE39C;box-shadow:0 0 8px #3DE39C;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(61,227,156,.55)}60%{box-shadow:0 0 0 6px rgba(61,227,156,0)}}
.ownercard .q{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:inherit}
.ownercard .ava.mascot .img{background:#070B26;border:2px solid rgba(120,160,255,.55);box-shadow:0 0 18px rgba(80,140,255,.55);border-radius:20px;overflow:hidden}
.ownercard .ava.mascot .img img{width:100%;height:100%;display:block;object-fit:cover}
.ownercard .facts{gap:9px;position:relative;z-index:2}
.ownercard .f{background:rgba(255,255,255,.06);border:1px solid rgba(140,160,255,.18);border-radius:16px;padding:11px 10px;color:inherit;
  display:flex;flex-direction:column;gap:8px;backdrop-filter:blur(6px)}
:root[data-theme="light"] .ownercard .f{background:var(--card-2);border-color:var(--line)}
.ownercard .f:active{background:rgba(255,255,255,.12)}
.ownercard .f .tile{width:30px;height:30px;border-radius:10px}
.v3-home .ownercard .f{padding:10px 9px!important;aspect-ratio:auto!important;min-height:0}
.v3-home .ownercard .btn{flex-wrap:nowrap!important;white-space:nowrap}
.v3-home .ownercard .btn span{overflow:hidden;text-overflow:ellipsis}
.ownercard .f .n{font-size:clamp(17px,5vw,22px);font-weight:700;letter-spacing:-.03em}
.ownercard .f .k{opacity:.7;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0}
.ownercard .crystalm{grid-column:3;position:static;width:clamp(58px,20vw,84px);height:auto;margin:0;filter:drop-shadow(0 0 14px rgba(90,140,255,.5))}
:root[data-theme="light"] .ownercard .crystalm{grid-column:3;position:static;width:clamp(58px,20vw,84px);height:auto;margin:0;filter:drop-shadow(0 0 14px rgba(90,140,255,.5))}
@media (max-width:359px){ .ownercard .nm,.v3-home .ownercard .nm{font-size:16px!important} }
@media (max-width:339px){ .ownercard .crystalm{display:none!important} .ownercard .top{grid-template-columns:60px minmax(0,1fr)!important} .v3-home .ownercard .btn{font-size:14px!important} .v3-home .ownercard .btn span{white-space:nowrap!important} .cap{font-size:14.5px!important} }
.ownercard .btn,:root[data-brand="tg"] .ownercard .btn{background:rgba(255,255,255,.07);border:1px solid rgba(140,160,255,.22);color:#F4F6FF;box-shadow:none;
  border-radius:16px;min-height:50px;font-weight:700;font-size:15px;position:relative;z-index:2}
:root[data-theme="light"] .ownercard .btn{background:var(--accent-soft);color:var(--ink);border-color:transparent}
.ownercard .btn .hint{color:inherit;opacity:.7}
.crownimg{width:22px;height:auto;filter:drop-shadow(0 0 6px rgba(90,140,255,.7))}

/* ══ подписи разделов ══ */
.cap{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-transform:none;display:flex;align-items:center;gap:8px}
.cap .count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700}
.cap .right{font-size:13px;font-weight:600;color:var(--muted);margin-left:0}
.cap{flex-wrap:nowrap;white-space:nowrap}
.cap > .cap-text{overflow:hidden;text-overflow:ellipsis}
@media (max-width:369px){ .cap{font-size:15px} .caplink{font-size:12.5px} .caplink svg:first-child{display:none} }
.caplink{margin-left:auto;border:0;background:none;color:var(--accent);font:inherit;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:4px;cursor:pointer;padding:4px 0}
.caplink svg:first-child{color:var(--accent-2)}

/* ══ быстрые действия ══ */
.quick{grid-template-columns:1fr 1fr;gap:10px}
.quick button{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:11px 10px;border-radius:18px;min-height:74px;text-align:left;
  background:linear-gradient(135deg,var(--card) 0%,var(--card-2) 100%);border:1px solid var(--line);box-shadow:var(--sh);position:relative;overflow:hidden}
.quick button::before{content:"";position:absolute;inset:0;background:radial-gradient(120px 70px at 0% 0%,var(--qglow,transparent),transparent);opacity:.9;pointer-events:none}
.quick button > *{position:relative}
.quick button:active{transform:scale(.97);box-shadow:none}
.quick .tile{width:40px;height:40px;border-radius:13px;flex:0 0 auto;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.quick .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.quick .tx .t{font-size:14.5px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink);overflow-wrap:anywhere}
.quick .tx .s{font-size:11.5px;font-weight:500;color:var(--muted);line-height:1.2}
@media (max-width:429px){ .quick .chev{display:none} }
.quick .chev{color:var(--muted);flex:0 0 auto}
.quick button.hot{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--card)),color-mix(in srgb,var(--accent-2) 30%,var(--card)));border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.quick button.hot .tx .t{color:var(--ink)}
.quick .tile.blue{background:linear-gradient(135deg,#2F7CFF,#5DB0FF);--qglow:rgba(60,140,255,.25)}
.quick .tile.violet{background:linear-gradient(135deg,#6E45FF,#B06CFF)}
.quick .tile.red{background:linear-gradient(135deg,#E2433E,#FF7A72)}
.quick .tile.amber{background:linear-gradient(135deg,#D9820A,#FFB23F)}
.quick .tile.gold{background:linear-gradient(135deg,#E0A100,#FFD65C)}
.quick .tile.teal{background:linear-gradient(135deg,#0E9C8A,#3ED8C0)}
.quick .tile svg path{stroke:#fff!important;fill:#fff!important}
.quick .tile svg path[stroke]{fill:none!important}
.quick button:nth-child(1){--qglow:rgba(60,140,255,.22)} .quick button:nth-child(3){--qglow:rgba(255,90,90,.18)}
.quick button:nth-child(4){--qglow:rgba(255,178,63,.18)} .quick button:nth-child(5){--qglow:rgba(255,197,51,.18)} .quick button:nth-child(6){--qglow:rgba(62,216,192,.2)}
@media (max-width:339px){ .quick{grid-template-columns:1fr} }

/* ══ требует внимания ══ */
.att .tile{width:42px;height:42px;border-radius:13px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.att .tile.amber{background:linear-gradient(135deg,#D9820A,#FFB23F)} .att .tile.red{background:linear-gradient(135deg,#E2433E,#FF7A72)}
.att .tile.violet{background:linear-gradient(135deg,#6E45FF,#B06CFF)} .att .tile.blue{background:linear-gradient(135deg,#2F7CFF,#5DB0FF)}
.att .tile.green{background:linear-gradient(135deg,#12A66A,#3DE39C)} .att .tile.teal{background:linear-gradient(135deg,#0E9C8A,#3ED8C0)}
.att .tile svg path{stroke:#fff!important;fill:#fff!important} .att .tile svg path[stroke]{fill:none!important}
.att .t{font-size:15px;font-weight:700}
.att .n{font-size:18px;color:var(--ink)}
.att + .att::before{left:68px}

/* ══ карточки и вкладки ══ */
.card,.b,.modtile,.pcard,.hcard,.rowcard,.block{border-radius:20px;border-color:var(--line);box-shadow:var(--sh)}
.tabbar{border-radius:24px;background:color-mix(in srgb, var(--card) 92%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 36px rgba(0,0,0,.28),var(--glow);border-color:var(--line)}
.tabbar .thumb{border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 18px color-mix(in srgb, var(--accent) 55%, transparent)}
.tabbar button{font-size:11px;font-weight:700}
.tabbar button[aria-current="true"]{color:#fff}
.btn.primary,.savebar .save,.wizbar .btn.primary,.fab{background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);color:#fff}
.chip[aria-pressed="true"],.seg .thumb{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.chip[aria-pressed="true"]{color:#fff;outline:none}
.sheet{background:var(--card);border-top:1px solid var(--line)}
.bento .b .sq{border-radius:12px}