/* Layout: неоновый фон меняет цвет на каждой вкладке; слон в наушниках за ноутом в липкой панели (слева на широком экране); контент на стеклянных карточках; навигация внизу */
:root {
  --ink: #FFF6EC;
  --muted: #E6D9CF;
  --dim: #BCAB9F;
  --glass: linear-gradient(rgba(255, 255, 255, .09), rgba(255, 255, 255, .05)), rgba(14, 8, 12, .34);
  --glass2: rgba(255, 255, 255, .13);
  --brd: rgba(255, 255, 255, .17);
  --brd2: rgba(255, 255, 255, .34);
  --solid: #1B1420;
  --track: rgba(255, 255, 255, .16);
  --rose: #FF6B8A;
  --f-head: "Montserrat", "Onest", system-ui, sans-serif;
  --f-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ac: #FF9A3C; --ac2: #FFD166; --ac-ink: #2A1200;
  --b0: #2A1407; --b1: #4A2109; --b2: #70320C;
  --sky: #140A04; --city: #0E0704;
  color-scheme: dark;
}
:root[data-view="goals"] { --ac: #35DFA8; --ac2: #9BF5D6; --ac-ink: #032A1E; --b0: #07241C; --b1: #0D4536; --b2: #116450; --sky: #04130F; --city: #030D0A; }
:root[data-view="herd"] { --ac: #C97BFF; --ac2: #EFC2FF; --ac-ink: #26063A; --b0: #1E0D2E; --b1: #3A1757; --b2: #58217F; --sky: #110618; --city: #0C0412; }
:root[data-view="plan"] { --ac: #FFC94A; --ac2: #FFE9A8; --ac-ink: #2C1E00; --b0: #2A2009; --b1: #4A3A0D; --b2: #6E5612; --sky: #151003; --city: #0E0A02; }
* { box-sizing: border-box; }
html { background: #140B10; height: 100%; }
body {
  background: transparent; color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.45;
  padding-block: env(safe-area-inset-top, 0px) 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-text-size-adjust: 100%; min-height: 100%;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--sky); transition: background .7s ease; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--ac2); outline-offset: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--ac); color: var(--ac-ink); }

.bg { position: fixed; inset: 0; z-index: -3; background: var(--sky); transition: background .7s ease; }
.bg .wash { position: absolute; inset: 0; transition: background .7s ease;
  background: radial-gradient(90% 58% at 12% 4%, var(--b2) 0%, transparent 62%), radial-gradient(80% 52% at 92% 14%, var(--b1) 0%, transparent 60%), radial-gradient(120% 70% at 50% 104%, var(--b2) 0%, var(--b0) 42%, transparent 78%); }
.bg .neon { position: absolute; left: 0; right: 0; height: 2px; background: var(--ac); box-shadow: 0 0 22px 5px var(--ac), 0 0 60px 14px var(--ac); opacity: .5; transition: background .7s, box-shadow .7s; }
.bg .n1 { top: 24%; } .bg .n2 { top: 61%; opacity: .3; }
.bg .bokeh { position: absolute; border-radius: 50%; background: var(--ac2); filter: blur(13px); opacity: .22; transition: background .7s; }
.bg svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; }
.bg .cityF { fill: var(--city); transition: fill .7s ease; }
.bg .lit { fill: var(--ac2); opacity: .55; transition: fill .7s ease; }
.bg .tod { position: absolute; inset: 0; transition: background 2s ease, opacity 2s ease; }
:root[data-tod="morning"] .tod { background: linear-gradient(180deg, rgba(255, 216, 170, .22) 0%, rgba(255, 190, 150, .06) 45%, transparent 70%); }
:root[data-tod="day"] .tod { background: linear-gradient(180deg, rgba(185, 225, 255, .2) 0%, rgba(210, 235, 255, .07) 50%, transparent 74%); }
:root[data-tod="evening"] .tod { background: linear-gradient(180deg, rgba(255, 138, 86, .2) 0%, rgba(190, 90, 120, .08) 52%, transparent 76%); }
:root[data-tod="night"] .tod { background: linear-gradient(180deg, rgba(8, 6, 26, .5) 0%, rgba(4, 2, 14, .3) 60%, rgba(2, 1, 8, .42) 100%); }
:root[data-tod="morning"] .wash { filter: brightness(1.2) saturate(1.02); }
:root[data-tod="day"] .wash { filter: brightness(1.22) saturate(1.08); }
:root[data-tod="evening"] .wash { filter: brightness(1.02) saturate(1.08); }
:root[data-tod="night"] .wash { filter: brightness(.7) saturate(.92); }
.bg .stars { position: absolute; inset: 0 0 40% 0; opacity: 0; transition: opacity 2s ease; }
:root[data-tod="night"] .stars { opacity: .75; }
:root[data-tod="evening"] .stars { opacity: .3; }
.bg .stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #FFF6E8; box-shadow: 0 0 5px 1px rgba(255, 246, 232, .7); }
:root[data-tod="day"] .lit, :root[data-tod="morning"] .lit { opacity: .22; }

/* Небо по времени суток: утром восходит солнце, днём оно высоко и плывут облака, вечером садится за город, ночью луна и падающие звёзды */
.bg .sun, .bg .moon, .bg .cloud, .bg .shoot { position: absolute; pointer-events: none; opacity: 0; }
.bg .sun { width: 120px; height: 120px; right: 14%; top: 30%; border-radius: 50%;
  background: radial-gradient(circle, #FFFBEA 0 30%, #FFE29A 48%, #FFB44D 64%, rgba(255, 160, 60, 0) 72%);
  box-shadow: 0 0 70px 26px rgba(255, 196, 100, .32), 0 0 190px 80px rgba(255, 160, 70, .16);
  transition: opacity 2.5s ease, top 2.5s ease, right 2.5s ease, width 2.5s ease, height 2.5s ease, filter 2.5s ease; }
.bg .sun .rays { position: absolute; inset: -90%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 232, 170, .17) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); }
:root[data-tod="morning"] .bg .sun { opacity: 1; top: 27%; right: 13%; }
:root[data-tod="day"] .bg .sun { opacity: .95; top: 7%; right: 20%; width: 96px; height: 96px; filter: saturate(.85) brightness(1.08); }
:root[data-tod="evening"] .bg .sun { opacity: 1; top: 50%; right: 9%; width: 190px; height: 190px; filter: hue-rotate(-18deg) saturate(1.35);
  box-shadow: 0 0 90px 40px rgba(255, 110, 70, .34), 0 0 240px 120px rgba(255, 90, 110, .18); }
:root[data-tod="evening"] .bg .sun .rays { opacity: .35; }

.bg .moon { width: 64px; height: 64px; left: 13%; top: 11%; border-radius: 50%;
  box-shadow: inset 15px -7px 0 0 #FFF1CF; filter: drop-shadow(0 0 16px rgba(255, 240, 200, .55)) drop-shadow(0 0 46px rgba(200, 210, 255, .25));
  transition: opacity 2.5s ease; }
:root[data-tod="night"] .bg .moon { opacity: 1; }

.bg .cloud { height: 34px; border-radius: 40px; background: rgba(255, 255, 255, .5); filter: blur(10px); transition: opacity 2.5s ease; }
.bg .cloud::before, .bg .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.bg .cloud::before { width: 46%; height: 180%; left: 16%; bottom: 20%; }
.bg .cloud::after { width: 34%; height: 140%; right: 18%; bottom: 25%; }
.bg .c1 { width: 190px; top: 16%; left: -12%; }
.bg .c2 { width: 140px; top: 31%; left: 40%; }
.bg .c3 { width: 230px; top: 8%; left: 64%; }
:root[data-tod="morning"] .bg .cloud { opacity: .42; }
:root[data-tod="day"] .bg .cloud { opacity: .55; }
:root[data-tod="evening"] .bg .cloud { opacity: .38; background: rgba(255, 150, 160, .55); }

.bg .shoot { width: 120px; height: 2px; top: 14%; left: 62%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFF 70%, rgba(255, 255, 255, 0)); filter: drop-shadow(0 0 6px #fff); }

:root[data-tod="night"] .bg .lit { opacity: .9; }
:root[data-tod="evening"] .bg .lit { opacity: .7; }

@media (prefers-reduced-motion: no-preference) {
  .bg .sun .rays { animation: spin 90s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .bg .sun { animation: pulse 6s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
  .bg .cloud { animation: drift 70s linear infinite; }
  .bg .c2 { animation-duration: 95s; animation-delay: -40s; }
  .bg .c3 { animation-duration: 120s; animation-delay: -70s; }
  @keyframes drift { from { translate: -30vw 0; } to { translate: 130vw 0; } }
  :root[data-tod="night"] .bg .stars i { animation: twinkle 3.2s ease-in-out infinite; }
  .bg .stars i:nth-child(3n) { animation-delay: -1.1s; } .bg .stars i:nth-child(3n+1) { animation-delay: -2.3s; animation-duration: 4.4s; }
  @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
  :root[data-tod="night"] .bg .shoot { animation: shoot 11s ease-in 3s infinite; }
  @keyframes shoot { 0%, 88% { opacity: 0; transform: translate(0, 0) rotate(-22deg); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(-340px, 140px) rotate(-22deg); } }
  :root[data-tod="night"] .bg .moon { animation: glow 7s ease-in-out infinite; }
  @keyframes glow { 0%, 100% { filter: drop-shadow(0 0 16px rgba(255, 240, 200, .55)) drop-shadow(0 0 46px rgba(200, 210, 255, .25)); } 50% { filter: drop-shadow(0 0 22px rgba(255, 240, 200, .75)) drop-shadow(0 0 70px rgba(200, 210, 255, .35)); } }
}
.grade { position: fixed; inset: 0; z-index: -2; pointer-events: none; transition: opacity 2s ease; background: radial-gradient(120% 85% at 50% 50%, transparent 46%, rgba(6, 2, 10, .62) 100%); }
:root[data-tod="day"] .grade { opacity: .55; }
:root[data-tod="morning"] .grade { opacity: .72; }
.mg { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.mg .lb { font-size: 13px; }
.mg .lb small { display: block; color: var(--dim); font-size: 11px; }
.mg input { width: 118px; text-align: right; font-variant-numeric: tabular-nums; }
.big2 { font-family: var(--f-head); font-weight: 900; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ac); text-shadow: 0 0 26px var(--ac); }
.big2 small { font-family: var(--f-body); font-weight: 400; font-size: 13px; color: var(--dim); text-shadow: none; margin-left: 6px; }
.kv { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.kv div { font-size: 12px; color: var(--dim); }
.kv b { display: block; font-family: var(--f-head); font-weight: 800; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.grain { position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) {
  .bg .bokeh { animation: float 11s ease-in-out infinite; }
  @keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(16px, -22px); } }
  .bg .neon { animation: flick 7s ease-in-out infinite; }
  @keyframes flick { 0%, 92%, 100% { opacity: .5; } 94% { opacity: .18; } 96% { opacity: .55; } }
}

.shell { max-width: 1180px; margin: 0 auto; }
.glass { background: var(--glass); border: 1px solid var(--brd); border-radius: 20px; box-shadow: 0 14px 40px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .iconbtn, .tabs, .chip { background: var(--solid); } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-head); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 13px 20px; border-radius: 14px; border: 1px solid transparent; transition: transform .1s, box-shadow .1s; }
.btn.neon { color: var(--ac-ink); background: linear-gradient(170deg, var(--ac2), var(--ac) 62%); box-shadow: 0 4px 0 rgba(0, 0, 0, .4), 0 0 24px var(--ac), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.neon:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 0 14px var(--ac), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.ghost { background: var(--glass2); border-color: var(--brd); color: var(--ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn.ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .34); }
.btn.sm { padding: 9px 13px; font-size: 11px; border-radius: 11px; }
.btn.danger { color: var(--rose); }
.btn[disabled] { opacity: .45; cursor: default; transform: none; }
.link { color: var(--muted); font-size: 13px; padding: 6px 0; }
.link:hover { color: var(--ink); }
.link.danger { color: var(--rose); }
.iconbtn { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--brd); background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.iconbtn svg { width: 21px; height: 21px; }
.iconbtn:hover { color: var(--ink); }

.brand { display: flex; align-items: center; gap: 12px; padding: 15px 0 8px; }
.mark { width: 40px; height: 40px; flex: none; color: var(--ac); filter: drop-shadow(0 0 10px var(--ac)); }
.mark svg { width: 100%; height: 100%; }
.wm { font-family: var(--f-head); font-weight: 900; font-size: 20px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.wm em { font-style: normal; color: var(--ac); text-shadow: 0 0 16px var(--ac); }
.tagl { color: var(--dim); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; margin-top: 5px; }
.grow { flex: 1; min-width: 0; }

.app { display: block; }
.stageWrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 8; padding-block: 6px 10px; }
.stage { padding: 12px 14px; display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "say say" "ele hud"; gap: 8px 13px; align-items: center; }
.say { grid-area: say; font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; min-height: 19px; }
.say i { width: 6px; height: 6px; border-radius: 50%; background: var(--ac); flex: none; box-shadow: 0 0 10px var(--ac); }
.say span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eleBox { grid-area: ele; display: grid; place-items: center; }
#ele { width: 112px; height: 90px; overflow: visible; display: block; }
.hud { grid-area: hud; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.lvl { display: flex; gap: 11px; align-items: center; min-width: 0; }
.lvlN { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-family: var(--f-head); font-weight: 900; font-size: 19px; color: var(--ac-ink); border-radius: 12px; background: linear-gradient(170deg, var(--ac2), var(--ac)); box-shadow: 0 0 20px var(--ac), inset 0 1px 0 rgba(255, 255, 255, .6); }
.lvl .t { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.lvl b { font-family: var(--f-head); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xpbar { height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--ac), var(--ac2)); box-shadow: 0 0 12px var(--ac); transition: width .9s cubic-bezier(.3, .9, .3, 1); }
.lvl small { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.stats { display: flex; gap: 8px; }
.stat { display: flex; align-items: center; gap: 7px; border: 1px solid var(--brd); border-radius: 11px; padding: 6px 10px; font-family: var(--f-head); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; background: var(--glass); }
.stat svg { width: 17px; height: 17px; flex: none; color: var(--ac); }
.stat small { font-family: var(--f-body); font-weight: 400; font-size: 11px; color: var(--dim); }
.ring { position: relative; width: 22px; height: 22px; flex: none; }
.ring svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4.5; }
.ring .bg2 { stroke: var(--track); } .ring .fg { stroke: var(--ac); stroke-linecap: round; stroke-dasharray: 100.5; transition: stroke-dashoffset .9s; }

#ele .headG { animation: idle 4.4s ease-in-out infinite; transform-origin: 200px 150px; }
@keyframes idle { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2.5px) rotate(.6deg); } }
#ele .earL { transform-origin: 136px 112px; animation: flapL 5.4s ease-in-out infinite; }
#ele .earR { transform-origin: 264px 112px; animation: flapR 5.4s ease-in-out infinite .3s; }
@keyframes flapL { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }
@keyframes flapR { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
#ele .t1, #ele .t2, #ele .t3, #ele .t4 { transition: transform .45s cubic-bezier(.34, 1.25, .5, 1); }
#ele .t1 { transform-origin: 200px 176px; } #ele .t2 { transform-origin: 203px 212px; }
#ele .t3 { transform-origin: 204px 244px; } #ele .t4 { transform-origin: 202px 270px; }
#ele .t1 { animation: sw 5.6s ease-in-out infinite; } #ele .t3 { animation: sw2 5.6s ease-in-out infinite .6s; }
@keyframes sw { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes sw2 { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } }
#ele.curl .t1, #ele.curl .t2, #ele.curl .t3, #ele.curl .t4 { animation: none; }
#ele.curl .t1 { transform: rotate(-26deg); } #ele.curl .t2 { transform: rotate(-44deg); }
#ele.curl .t3 { transform: rotate(-52deg); } #ele.curl .t4 { transform: rotate(-48deg); }
#ele .lid { transform-origin: center; transform-box: fill-box; transform: scaleY(0); transition: transform .09s; }
#ele.blink .lid { transform: scaleY(1); }
#ele.chew .headG { animation: chew .3s ease-in-out 4; }
@keyframes chew { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(2px) scale(1.016); } }
#ele .screen { animation: scr 3.1s ease-in-out infinite; }
@keyframes scr { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
#ele .glowRing { opacity: 0; transition: opacity .3s; }
#ele.chew .glowRing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #ele *, .grain, .bg * { animation: none !important; } }

.content { min-width: 0; padding-bottom: 152px; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; gap: 4px; padding: 8px max(10px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(14, 8, 16, .78); border-top: 1px solid var(--brd); -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 1px; border-radius: 12px; font-family: var(--f-head); font-weight: 800; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); border: 1px solid transparent; text-align: center; }
.tab svg { width: 21px; height: 21px; }
.tab[aria-current="page"] { color: var(--ac); border-color: var(--brd); background: var(--glass2); box-shadow: 0 0 18px -4px var(--ac); }
.tab .n { position: absolute; transform: translate(14px, -7px); font-size: 10px; background: var(--ac); color: var(--ac-ink); border-radius: 99px; padding: 0 5px; font-family: var(--f-body); box-shadow: 0 0 10px var(--ac); }
.tabw { position: relative; display: grid; place-items: center; }
.fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 10; }
.fab svg { width: 17px; height: 17px; }
.banner { margin-top: 10px; border: 1px solid var(--rose); color: var(--rose); border-radius: 13px; padding: 10px 13px; font-size: 14px; background: var(--glass); }
.demo { margin-top: 10px; padding: 11px 13px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; border-radius: 15px; }
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 12px 2px 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; background: var(--glass); border: 1px solid var(--brd); font-family: var(--f-head); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chip[aria-pressed="true"] { color: var(--ac-ink); background: linear-gradient(170deg, var(--ac2), var(--ac)); border-color: transparent; box-shadow: 0 0 18px -2px var(--ac); }
.chip .n { font-family: var(--f-body); letter-spacing: 0; opacity: .75; }
.chip[disabled] { opacity: .45; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--mc, var(--ac)); box-shadow: 0 0 8px var(--mc, var(--ac)); }
.av { width: 19px; height: 19px; border-radius: 50%; object-fit: cover; flex: none; }

.list { display: flex; flex-direction: column; gap: 11px; }
.empty { text-align: center; color: var(--dim); padding: 30px 14px; margin: 0; font-size: 14px; }
.card { padding: 13px; display: flex; flex-direction: column; gap: 11px; position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kc, var(--ac)); box-shadow: 0 0 16px var(--kc, var(--ac)); }
.card.late { border-color: rgba(255, 107, 138, .55); }
.ctop { display: flex; gap: 12px; align-items: flex-start; width: 100%; }
.fb { width: 46px; height: 46px; flex: none; border-radius: 14px; border: 1px solid var(--brd); display: grid; place-items: center; background: var(--glass2); }
.fb svg { width: 28px; height: 28px; color: var(--kc, var(--ac)); }
.cbody { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ctitle { font-size: 16px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--brd); color: var(--muted); }
.pill.xp { color: var(--ac2); border-color: var(--brd2); font-variant-numeric: tabular-nums; }
.pill.late { color: var(--rose); border-color: rgba(255, 107, 138, .5); }
.pill.fire { color: #FFB45C; border-color: rgba(255, 180, 92, .45); }
.actions { display: flex; flex-wrap: wrap; gap: 9px; }
.actions .btn.neon { flex: 1 1 165px; }
.card.done { opacity: .6; }
.card.done .ctitle { text-decoration: line-through; }
.prog { display: flex; flex-direction: column; gap: 6px; }
.prog .bar { height: 10px; }
.prog .pn { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ac), var(--ac2)); box-shadow: 0 0 12px -2px var(--ac); transition: width .9s; }
.thumbs { display: flex; flex-wrap: wrap; gap: 7px; }
.thumbs a, .thumbs .ph { display: block; width: 62px; height: 62px; border-radius: 11px; overflow: hidden; border: 1px solid var(--brd); flex: none; background: var(--glass2); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs .ph { display: grid; place-items: center; color: var(--dim); font-size: 10px; text-align: center; padding: 4px; }
.upl { display: inline-flex; align-items: center; gap: 7px; }
.upl input[type="file"] { display: none; }

.panel { padding: 16px; display: flex; flex-direction: column; gap: 13px; }
.panel h3 { margin: 0; font-family: var(--f-head); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.panel h3 small { font-family: var(--f-body); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim); font-size: 12px; }
.mini { color: var(--dim); font-size: 13px; }
.cash3 { display: grid; grid-template-columns: 1fr; gap: 11px; }
@media (min-width: 640px) { .cash3 { grid-template-columns: repeat(3, 1fr); } }
.cc { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.cc .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cc .hd b { font-family: var(--f-head); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.cc .hd em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cc .big { font-family: var(--f-head); font-weight: 900; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ac); text-shadow: 0 0 22px var(--ac); }
.cc .big small { font-family: var(--f-body); font-weight: 400; font-size: 13px; color: var(--dim); text-shadow: none; margin-left: 5px; }
.cc.hit { border-color: var(--ac); }
.rk { display: grid; grid-template-columns: 24px 1fr auto; gap: 11px; align-items: center; }
.rk .pos { font-family: var(--f-head); font-weight: 800; color: var(--dim); text-align: center; font-size: 15px; }
.rk .nm { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rk .nm b { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 7px; overflow: hidden; }
.rk .nm b em { font-style: normal; color: var(--dim); font-size: 12px; white-space: nowrap; }
.rk .sc { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--f-head); font-weight: 800; font-size: 16px; color: var(--ac); }
.rk .sc small { display: block; font-family: var(--f-body); font-weight: 400; color: var(--dim); font-size: 11px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 9px; }
.bd { padding: 11px; border-radius: 14px; border: 1px solid var(--brd); display: flex; flex-direction: column; gap: 5px; }
.bd .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-family: var(--f-head); font-weight: 800; font-size: 13px; color: var(--ac-ink); background: linear-gradient(170deg, var(--ac2), var(--ac)); box-shadow: 0 0 14px -2px var(--ac); }
.bd.off { opacity: .4; } .bd.off .ic { color: var(--dim); background: var(--track); box-shadow: none; }
.bd b { font-weight: 500; font-size: 13px; }
.bd small { color: var(--dim); font-size: 11px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dd { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10px; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
.dd i { width: 100%; max-width: 38px; aspect-ratio: 1; border-radius: 11px; border: 1px solid var(--brd); display: grid; place-items: center; font-style: normal; font-family: var(--f-head); font-weight: 800; font-size: 14px; color: var(--dim); }
.dd.on i { color: var(--ac-ink); background: linear-gradient(170deg, var(--ac2), var(--ac)); border-color: transparent; box-shadow: 0 0 14px -3px var(--ac); }
.dd.today i { box-shadow: 0 0 0 2px var(--ac); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal .hdr { font-size: 10px; color: var(--dim); text-align: center; letter-spacing: .08em; text-transform: uppercase; padding-bottom: 2px; }
.cal .cell { min-height: 54px; border: 1px solid var(--brd); border-radius: 10px; padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.cal .cell.out { opacity: .3; }
.cal .cell.today { box-shadow: 0 0 0 1px var(--ac); }
.cal .cell .dn { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.cal .cell .mk { display: flex; flex-wrap: wrap; gap: 3px; }
.cal .cell .mk i { width: 6px; height: 6px; border-radius: 50%; background: var(--mc, var(--ac)); }
.cal .cell .ok { font-size: 10px; color: var(--ac); font-weight: 600; }
.mrow { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--brd); border-radius: 14px; }
.mrow .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mrow .nm b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.mrow .nm small { color: var(--dim); font-size: 11px; }
.mrow.off { opacity: .5; }
.plan-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 15px 2px 7px; }
.plan-h b { font-family: var(--f-head); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.plan-h small { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.prow { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.prow .nm { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.prow .shift { display: flex; gap: 6px; flex: none; }
.logline { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--muted); }
.logline b { font-weight: 500; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logline em { font-style: normal; color: var(--ac); font-variant-numeric: tabular-nums; flex: none; }
.offcal .cell { min-height: 60px; gap: 2px; }
.offcal .cell.wknd { background: rgba(255, 255, 255, .05); }
.offcal .cell.has { border-color: rgba(255, 107, 138, .45); }
.offcal .who2 { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.offcal .who2 span { font-size: 9px; line-height: 1.3; color: var(--rose); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offsum { display: flex; flex-wrap: wrap; gap: 5px; }
.offsum span { font-size: 11px; color: var(--muted); border: 1px solid var(--brd); border-radius: 99px; padding: 2px 8px; }
.offsum span b { color: var(--ink); font-weight: 600; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; text-align: center; justify-content: center; }

.flyer { position: fixed; z-index: 50; pointer-events: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--solid); border: 1px solid var(--brd2); box-shadow: 0 0 26px var(--ac); will-change: transform; }
.flyer svg { width: 26px; height: 26px; color: var(--ac); }
.trail { position: fixed; z-index: 49; pointer-events: none; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle, var(--ac2) 0 35%, var(--ac) 55%, transparent 72%); will-change: transform, opacity; }
.spark { position: fixed; z-index: 60; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; }
.xp-pop { position: fixed; z-index: 60; pointer-events: none; font-family: var(--f-head); font-weight: 900; font-size: 26px; color: var(--ac2); text-shadow: 0 0 26px var(--ac); transform: translate(-50%, -50%); }

#scrim, #scrim2 { position: fixed; inset: 0; z-index: 29; background: rgba(6, 2, 10, .66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; margin: 0 auto; max-width: 620px; max-height: 92dvh; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; background: rgba(24, 16, 26, .95); border: 1px solid var(--brd2); box-shadow: 0 -16px 60px rgba(0, 0, 0, .7), 0 0 60px -30px var(--ac); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px max(16px, env(safe-area-inset-left, 0px)) 8px; }
.sheet-head h2 { margin: 0; font-family: var(--f-head); font-weight: 900; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
.sheet-body { overflow-y: auto; padding: 4px max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 14px; }
label.l { display: block; font-family: var(--f-head); font-weight: 800; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], textarea, select { width: 100%; color: var(--ink); font: inherit; background: rgba(255, 255, 255, .08); border: 1px solid var(--brd); border-radius: 12px; padding: 11px 13px; min-width: 0; }
input:focus, textarea:focus, select:focus { border-color: var(--ac); }
textarea { min-height: 76px; resize: vertical; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dbtn { aspect-ratio: 1; border-radius: 11px; border: 1px solid var(--brd); display: grid; place-items: center; font-family: var(--f-head); font-weight: 800; font-size: 11px; color: var(--muted); }
.dbtn[aria-pressed="true"] { color: var(--ac-ink); background: linear-gradient(170deg, var(--ac2), var(--ac)); border-color: transparent; }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sz { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 6px; border-radius: 14px; border: 1px solid var(--brd); text-align: center; font-family: var(--f-head); font-weight: 800; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sz svg { width: 24px; height: 24px; }
.sz small { font-family: var(--f-body); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim); font-size: 11px; }
.sz[aria-pressed="true"] { color: var(--ac); border-color: var(--ac); box-shadow: 0 0 16px -4px var(--ac); }
.sz[disabled] { opacity: .5; }
.who { display: flex; flex-wrap: wrap; gap: 7px; }
.info { border: 1px solid var(--brd); border-radius: 13px; padding: 11px 13px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 9px; background: var(--glass); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.row2 > div, .row3 > div { min-width: 0; }
.comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.comment p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.comment .wl { font-size: 12px; color: var(--dim); display: flex; gap: 7px; align-items: center; }
.cform { display: flex; gap: 8px; }
.cform .btn { flex: none; }
h3.lab { margin: 0; font-family: var(--f-head); font-weight: 800; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.picker { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--brd); border-radius: 13px; padding: 7px; }
.opt { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 10px; width: 100%; font-size: 14px; }
.opt:hover { background: var(--glass2); }
.crow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--brd); border-radius: 13px; }
.crow .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crow .nm b { font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.crow .nm small { color: var(--dim); font-size: 11px; overflow-wrap: anywhere; }

#lvlUp { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(6, 2, 10, .84); padding: 24px; }
#lvlUp .box { max-width: 350px; width: 100%; padding: 32px 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; background: rgba(24, 16, 26, .96); }
#lvlUp .big { width: 88px; height: 88px; display: grid; place-items: center; font-family: var(--f-head); font-weight: 900; font-size: 40px; color: var(--ac-ink); border-radius: 24px; background: linear-gradient(170deg, var(--ac2), var(--ac)); box-shadow: 0 0 70px var(--ac), inset 0 2px 0 rgba(255, 255, 255, .6); }
#lvlUp h2 { margin: 0; font-family: var(--f-head); font-weight: 900; font-size: 20px; letter-spacing: .14em; text-transform: uppercase; }
#lvlUp p { margin: 0; color: var(--muted); font-size: 14px; }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(152px + env(safe-area-inset-bottom, 0px)); z-index: 40; background: rgba(26, 18, 28, .96); border: 1px solid var(--brd2); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); padding: 11px 16px; border-radius: 13px; font-size: 13px; max-width: calc(100% - 32px); display: flex; gap: 14px; align-items: center; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#toast button { color: var(--ac); font-weight: 600; text-decoration: underline; flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: up .22s ease-out; }
  @keyframes up { from { transform: translateY(26px); opacity: .5; } to { transform: none; opacity: 1; } }
}
@media (min-width: 980px) {
  .app { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 26px; align-items: start; }
  .stageWrap { top: 18px; padding-block: 0; }
  .stage { grid-template-columns: 1fr; grid-template-areas: "ele" "say" "hud"; padding: 20px; gap: 14px; }
  .say { justify-content: center; text-align: center; }
  .say span { white-space: normal; }
  #ele { width: 280px; height: 225px; }
  .content { padding-bottom: 56px; }
  .tabs { position: static; background: none; border: 0; padding: 0; margin-top: 10px; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tab { flex-direction: row; justify-content: center; gap: 8px; padding: 11px 6px; font-size: 10px; border: 1px solid var(--brd); background: var(--glass); }
  .fab { bottom: 26px; }
  #toast { bottom: 26px; }
}


/* ── вход и установка на телефон ── */
#gate { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: var(--sky); }
#gate .box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; padding: 28px 24px; }
#gate h1 { margin: 0; font-family: var(--f-head); font-weight: 900; font-size: 24px; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
#gate h1 em { font-style: normal; color: var(--ac); text-shadow: 0 0 18px var(--ac); }
#gate .sub { text-align: center; color: var(--muted); font-size: 14px; margin: -8px 0 4px; }
#gate form { display: flex; flex-direction: column; gap: 10px; }
#gate .err { color: var(--rose); font-size: 13px; min-height: 18px; }
#gate .alt { text-align: center; }
#gate .mark { width: 64px; height: 64px; margin: 0 auto 4px; }
#install { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 12; padding: 13px 15px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
#install b { font-family: var(--f-head); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
#install ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
#install .row { display: flex; gap: 8px; flex-wrap: wrap; }
.pushrow { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }

/* ===== My Life: холодная, сильная вкладка ===== */
:root[data-life="1"] { --ac: #3DD6F5; --ac2: #B8F1FF; --ac-ink: #02202C; --b0: #06182A; --b1: #0B2E4E; --b2: #12497A; --sky: #030D18; --city: #020912; }
.card.life { --kc: #3DD6F5; animation: lifeIn .55s cubic-bezier(.2, .9, .3, 1) both; background: linear-gradient(160deg, rgba(61, 214, 245, .12), rgba(124, 92, 255, .08)), var(--glass); }
.card.life:nth-child(2) { animation-delay: .05s; } .card.life:nth-child(3) { animation-delay: .1s; } .card.life:nth-child(4) { animation-delay: .15s; } .card.life:nth-child(5) { animation-delay: .2s; } .card.life:nth-child(n+6) { animation-delay: .25s; }
.card.life::before { background: linear-gradient(180deg, #B8F1FF, #3DD6F5 55%, #7C5CFF); box-shadow: 0 0 22px #3DD6F5; }
@keyframes lifeIn { from { opacity: 0; transform: translateX(-22px) scale(.98); filter: brightness(1.6); } to { opacity: 1; transform: none; filter: none; } }
.chip.lifechip { border-color: rgba(61, 214, 245, .55); color: #8FE8FA; }
.chip.lifechip[aria-pressed="true"] { color: #02202C; }
#petals { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#petals i { position: absolute; bottom: -4%; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 18%, #B8F1FF 30%, #3DD6F5 55%, transparent 72%); box-shadow: 0 0 14px #3DD6F5; opacity: 0; animation: orbRise linear infinite; will-change: transform; }
@keyframes orbRise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: .85; } 60% { transform: translate(18px, -62vh) scale(1); } 100% { transform: translate(-14px, -112vh) scale(.5); opacity: 0; } }
.ring-burst { position: fixed; z-index: 59; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid var(--ac); box-shadow: 0 0 22px var(--ac), inset 0 0 14px var(--ac); pointer-events: none; }
.floaty { position: fixed; z-index: 61; pointer-events: none; }
.xp-pop.life { color: #B8F1FF; text-shadow: 0 0 24px #3DD6F5, 0 0 6px #3DD6F5; }
#xpOther { display: block; margin-top: 4px; font-weight: 700; letter-spacing: .02em; }
#xpOther.wk { color: #FF9A3C; } #xpOther.lf { color: #3DD6F5; }
.xpboth .lgd { display: flex; gap: 14px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 2px 0 6px; }
.xpboth .lgd span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.xpboth .lgd .wk { color: #FF9A3C; } .xpboth .lgd .wk::before { background: #FF9A3C; box-shadow: 0 0 8px #FF9A3C; }
.xpboth .lgd .lf { color: #3DD6F5; } .xpboth .lgd .lf::before { background: #3DD6F5; box-shadow: 0 0 8px #3DD6F5; }
.bar2 { display: flex; height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; margin-top: 6px; }
.bar2 i { display: block; height: 100%; transition: width .9s; }
.bar2 i.w { background: linear-gradient(90deg, #FF9A3C, #FFD166); box-shadow: 0 0 10px -2px #FF9A3C; }
.bar2 i.l { background: linear-gradient(90deg, #3DD6F5, #B8F1FF); box-shadow: 0 0 10px -2px #3DD6F5; }
.sc2 { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--f-head); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.sc2 .wx { color: #FF9A3C; } .sc2 .lx { color: #3DD6F5; }
@media (prefers-reduced-motion: reduce) { #petals { display: none; } .card.life { animation: none; } }

#qbar { padding: 8px 2px 0; }
#qbar[hidden] { display: none; }
#qbar .qrow { display: flex; gap: 8px; align-items: center; }
#qin { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--brd); color: inherit; font: inherit; font-size: 14px; }
#qpre { padding: 6px 4px 0; color: var(--ac); min-height: 18px; }

/* duel + season */
.duelrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 6px}
.duelside{flex:1;text-align:center;padding:8px 4px;border-radius:14px;background:rgba(255,255,255,.04)}
.duelside.win{background:rgba(255,190,60,.14);box-shadow:0 0 18px rgba(255,190,60,.25)}
.duelside .crown{height:24px;font-size:20px;animation:crownBob 1.8s ease-in-out infinite}
.duelside .dxp{font-size:26px;font-weight:800}.duelside .dxp small{font-size:12px;opacity:.6;font-weight:600}
.duel .vs{font-weight:900;opacity:.5;letter-spacing:.1em}
.duelbar{height:8px;border-radius:6px;background:rgba(124,92,255,.5);overflow:hidden;margin:6px 0}
.duelbar i{display:block;height:100%;background:linear-gradient(90deg,#ff9f1c,#ffd166);transition:width .6s}
@keyframes crownBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.duelside .crown{animation:none}}

/* models */
:root[data-view="models"] { --ac: #4DA3FF; --ac2: #B7DBFF; --ac-ink: #031A33; --b0: #08182B; --b1: #0E2C4D; --b2: #14416F; --sky: #040E1A; --city: #030A12; }
.msplit { display: flex; height: 7px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.08); margin: 6px 0; }
.msplit i { display: block; height: 100%; } .msplit i.of { background: #3BA7FF; } .msplit i.pp { background: #FFC94A; }
.mleg { display: flex; gap: 14px; font-size: 12px; opacity: .85; margin: 8px 0 4px; }
.mleg span { display: inline-flex; align-items: center; gap: 6px; } .mleg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mg { font-size: 11px; font-weight: 700; margin-left: 6px; padding: 1px 6px; border-radius: 8px; } .mg.up { color: #4CE3A0; background: rgba(76,227,160,.14); } .mg.dn { color: #FF7A7A; background: rgba(255,122,122,.14); }
.mdl summary { list-style: none; cursor: pointer; } .mdl summary::-webkit-details-marker { display: none; }
.mdl .mh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .mdl .mh b { font-size: 17px; }
.mdl .ms { font-weight: 800; font-size: 18px; } .mdl .ms em { display: block; font-style: normal; font-size: 11px; opacity: .6; font-weight: 600; text-align: right; }
.mrow { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; opacity: .9; margin-top: 4px; }
.mbody { margin-top: 10px; border-top: 1px solid var(--brd); padding-top: 10px; }
.mdays { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin: 10px 0; }
.mdays .md { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 3px; } .mdays .md i { display: block; width: 100%; } .mdays .md i.of { background: #3BA7FF; } .mdays .md i.pp { background: #FFC94A; border-radius: 2px 2px 0 0; }
.macc { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; border-top: 1px dashed rgba(255,255,255,.08); } .macc span:first-child { opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.subseg { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.mdays { justify-content: flex-start; } .mdays .md { flex: 0 0 11px; max-width: 11px; }
.rkd>summary{list-style:none;cursor:pointer}.rkd>summary::-webkit-details-marker{display:none}
.rkd .chm{padding:6px 4px 12px 38px}.rkd .chm-r{margin:8px 0}.rkd .chm .msplit{margin-top:4px}
/* чат */
#chatBtn.has::after{content:attr(data-n);position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--ac);color:#1a0f08;font:800 11px/18px var(--f-head);text-align:center}
#chat{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;border-radius:0;background:var(--solid,#17101a);max-width:720px;margin:0 auto}
#chat[hidden]{display:none}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;border-bottom:1px solid var(--brd);font-family:var(--f-head)}
.chat-list{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
.cday{align-self:center;font-size:12px;color:var(--muted);margin:8px 0 2px}
.cmsg{max-width:82%;align-self:flex-start;background:var(--glass2);border:1px solid var(--brd);border-radius:16px 16px 16px 4px;padding:8px 12px;display:flex;flex-direction:column;gap:4px;word-break:break-word}
.cmsg.mine{align-self:flex-end;border-radius:16px 16px 4px 16px;background:rgba(255,154,60,.18)}
.cwho{font-size:12px}.ctext{white-space:pre-wrap;font-size:15px}.cmsg small{color:var(--muted);font-size:11px;align-self:flex-end}
.cmsg audio{width:220px;max-width:100%;height:36px}
.chat-form{display:flex;gap:8px;align-items:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--brd);position:relative}
.chat-form input{flex:1;min-width:0;font-size:16px}
.chat-rec{display:none;position:absolute;inset:0;align-items:center;gap:12px;padding:0 14px;background:var(--solid,#17101a)}
.chat-form.rec .chat-rec{display:flex}
.chat-rec #chatTimer{flex:1;font-family:var(--f-head);font-variant-numeric:tabular-nums}
.recdot{width:10px;height:10px;border-radius:50%;background:#ff4d5e;animation:recp 1s infinite}
@keyframes recp{50%{opacity:.25}}
/* чат v2 */
#chat{height:100vh;height:100dvh;inset:0 0 auto 0}
.chat-form{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.chat-form #chatSend{display:none;width:42px;height:42px;padding:0;border-radius:13px;place-items:center}
.chat-form #chatSend svg{width:20px;height:20px}
.chat-form.hastext #chatSend{display:grid}.chat-form.hastext #chatMic{display:none}
.chat-rec{padding-bottom:calc(64px + env(safe-area-inset-bottom));align-items:flex-start;padding-top:14px}
.chat-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--brd);font-size:13px;color:var(--muted);background:var(--glass2)}
.chat-bar[hidden]{display:none}.chat-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cquote{border-left:3px solid var(--ac);padding:2px 8px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;background:rgba(255,255,255,.05);border-radius:6px}
.cquote b{color:var(--ink)}.cquote span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.cimg{max-width:240px;width:100%;border-radius:12px;display:block}
.cmsg a{color:var(--ac);text-decoration:underline}
.creacts{display:flex;flex-wrap:wrap;gap:4px}
.creact{border:1px solid var(--brd);background:var(--glass2);color:var(--ink);border-radius:99px;padding:1px 8px;font-size:13px}
.creact.on{border-color:var(--ac);background:rgba(255,154,60,.22)}
.cmenu-wrap{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
.cmenu{width:100%;max-width:420px;margin:0 8px calc(72px + env(safe-area-inset-bottom));padding:8px;display:flex;flex-direction:column;gap:2px;background:var(--solid,#17101a)}
.cmenu button{text-align:left;padding:13px 14px;border-radius:12px;font-size:16px;color:var(--ink)}
.cmenu button:active{background:var(--glass2)}.cmenu .danger{color:#ff6b7a}
.cem{display:flex;justify-content:space-around;padding:4px 0 8px;border-bottom:1px solid var(--brd);margin-bottom:4px}
.cem button{font-size:26px;padding:6px 8px;text-align:center}
/* профиль и аватары */
.avt{display:inline-grid;place-items:center;border-radius:50%;background:var(--mc,#888);color:#1a0f08;font-family:var(--f-head);font-weight:800;overflow:hidden;flex:none;vertical-align:middle;margin-right:6px}
.avt img{width:100%;height:100%;object-fit:cover}
.mrow .avt{margin-right:10px}
.cwhorow{display:flex;align-items:center;gap:6px;cursor:pointer}.cwhorow .avt{margin-right:0}
.profwrap{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px}
.profcard{width:100%;max-width:380px;max-height:90vh;overflow:auto;padding:22px 18px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--solid,#17101a)}
.profcard .avt{margin:6px 0 0}.profcard h2{margin:4px 0 0;font-family:var(--f-head)}
.profcard .bar{width:100%}.profcard .kv{width:100%;text-align:left}
.profx{align-self:flex-end}.proflv{font-family:var(--f-head);font-weight:800}
.profact{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
/* телефон: поднять нижние кнопки над плашкой Netlify (~44px) */
@media (max-width: 979px) {
  .tabs { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .content { padding-bottom: 196px; }
  .fab { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  #toast { bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
  #install { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
}
/* профиль v2 */
.avbtn{padding:0;overflow:hidden}.avbtn .avt{margin:0}.avbtn[hidden]{display:none}
.profcard{position:relative;gap:6px;padding:0 18px 20px;overflow:auto;border:1px solid var(--mc,var(--brd));box-shadow:0 0 50px -12px var(--mc,#000),0 20px 60px rgba(0,0,0,.6)}
.profhead{align-self:stretch;margin:0 -18px;padding:10px 14px 70px;display:flex;justify-content:flex-end;background:linear-gradient(160deg,var(--mc,#888) 0%,rgba(0,0,0,0) 85%);opacity:.95}
.profav{position:relative;margin-top:-62px}
.profav .avt{border:4px solid var(--solid,#17101a);box-shadow:0 0 0 3px var(--mc,#888),0 10px 30px rgba(0,0,0,.5)}
.plvl{position:absolute;right:-4px;bottom:-2px;min-width:32px;height:32px;border-radius:50%;background:var(--mc,#888);color:#1a0f08;display:grid;place-items:center;font:900 15px var(--f-head);border:3px solid var(--solid,#17101a)}
.prole{display:inline-block;padding:3px 12px;border-radius:99px;border:1px solid var(--mc,#888);color:var(--mc,#888);font:800 11px var(--f-head);letter-spacing:.1em;text-transform:uppercase}
.pbar i{background:var(--mc,#888);box-shadow:0 0 14px var(--mc,#888)}
.ptiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:6px}
.ptile{background:var(--glass2);border:1px solid var(--brd);border-radius:14px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
.ptile .pico{font-size:18px}.ptile b{font:900 20px var(--f-head);font-variant-numeric:tabular-nums}.ptile small{font-size:10px;color:var(--muted);text-align:center;line-height:1.2}
.profx{color:#1a0f08;font-weight:800}

/* ===== v3: шапка, чат-вкладка, профиль ===== */
.avt[data-m],[data-m]{cursor:pointer}
.pill .avt{margin-right:5px}
.cment{color:var(--ac);font-weight:700}
.chat-team{display:flex;gap:10px;overflow-x:auto;padding:8px 14px;border-bottom:1px solid var(--brd);scrollbar-width:none}
.chat-team::-webkit-scrollbar{display:none}
.ct{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;color:var(--muted)}.ct .avt{margin:0}.ct small{font-size:10px;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width: 979px) {
  .brand{gap:10px}
  .brand .iconbtn{width:38px;height:38px;border-radius:12px}.brand .iconbtn svg{width:19px;height:19px}
  .brand .avbtn .avt{width:36px!important;height:36px!important}
  .wm{font-size:16px;line-height:1.08}.wm em{display:block}
  .tagl{display:none}
  #chat{inset:0 0 var(--tabsH,0px) 0;height:auto;z-index:8;max-width:none;margin:0}
  #chatClose{display:none}
  .chat-form{padding-bottom:calc(10px)}
  .tabs{z-index:9}
}
@media (min-width: 980px) {
  #chat{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:560px;height:80vh;border-radius:20px;border:1px solid var(--brd);box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .chat-form{padding-bottom:10px}
}
.profcard{max-width:400px;padding:0 18px 22px;gap:10px}
.profhead{padding:12px 14px 78px}
.profx{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:16px;display:grid;place-items:center}
.profav{width:116px;height:116px;border-radius:50%;display:grid;place-items:center;margin-top:-70px;background:conic-gradient(var(--mc,#888) calc(var(--p,0) * 1%),rgba(255,255,255,.12) 0)}
.profav .ring{width:106px;height:106px;border-radius:50%;background:var(--solid,#17101a);display:grid;place-items:center}
.profav .avt{border:0;box-shadow:none;margin:0}
.profcard h2{font-size:24px;margin:2px 0 0}
.prole{font-size:12px;padding:4px 14px}
.profact{display:flex;gap:10px;width:100%;justify-content:center;margin:2px 0}
.btn.big{width:100%;min-height:50px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:10px}.btn.big svg{width:22px;height:22px}
.psec{width:100%;text-align:left;display:flex;flex-direction:column;gap:6px;background:var(--glass2);border:1px solid var(--brd);border-radius:16px;padding:12px 14px}
.psec h4{margin:0;font:800 12px var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.proflv{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}.proflv b{font-family:var(--f-head)}.proflv span{color:var(--mc,var(--ac));font-weight:800}
.ptiles{gap:10px}
.ptile{padding:14px 6px;border-radius:16px}.ptile .pico{font-size:22px}.ptile b{font-size:26px}.ptile small{font-size:12px;color:var(--ink);opacity:.75}
.pweek{display:flex;gap:6px;align-items:flex-end;height:96px}
.pw{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;height:100%}
.pw i{width:100%;max-width:26px;border-radius:6px 6px 3px 3px;background:var(--mc,var(--ac))}
.pw em{font-style:normal;font-size:11px;font-weight:800;min-height:13px}.pw span{font-size:11px;color:var(--muted)}.pw.today span{color:var(--ink);font-weight:800}
.ptask{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:14px}
.ptask em{font-style:normal;color:var(--muted);font-size:20px}
@media (min-width: 980px) { .tab .tabw{flex-direction:row;gap:6px;display:inline-flex} .tab .n{position:static;transform:none} }

/* ===== чат v3: стекло и неон ===== */
#chat{background:radial-gradient(120% 60% at 100% 0%,rgba(255,138,43,.16),transparent 60%),radial-gradient(90% 50% at 0% 100%,rgba(70,198,255,.12),transparent 60%),#120b16;border:0}
.chat-head{background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px}
.chat-ttl{display:flex;flex-direction:column;gap:2px}.chat-ttl b{font-size:19px;letter-spacing:.02em;text-shadow:0 0 18px rgba(255,154,60,.55)}
.chat-ttl small{font-size:12px;color:var(--muted)}
.chat-team{gap:12px;padding:10px 16px;border-bottom:0;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.ct .avt{box-shadow:0 0 0 2px #120b16,0 0 0 4px var(--mc),0 0 16px -2px var(--mc);transition:transform .15s}
.ct:active .avt{transform:scale(.92)}
.ct small{font-size:11px}
.chat-list{padding:10px 14px 14px;gap:6px}
.cday{align-self:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:99px;padding:4px 12px;margin:8px 0}
.cmsg{background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:20px 20px 20px 6px;padding:9px 13px 7px;box-shadow:0 6px 20px -10px rgba(0,0,0,.6)}
.cmsg.mine{background:linear-gradient(135deg,#ffb552 0%,#ff8a2b 55%,#ff6a1a 100%);border:0;border-radius:20px 20px 6px 20px;color:#2a1405;box-shadow:0 8px 26px -8px rgba(255,138,43,.65)}
.cmsg.mine small{color:rgba(42,20,5,.62)}
.cmsg.mine .cment{color:#5a1d00;text-decoration:underline}
.cmsg.mine a{color:#5a1d00;text-decoration:underline}
.cmsg.mine .cquote{background:rgba(42,20,5,.14);border-color:#2a1405;color:#2a1405}
.cmsg.mine .creact{background:rgba(42,20,5,.14);border-color:transparent;color:#2a1405}
.cmsg.mine .creact.on{background:#2a1405;color:#ffb552}
.cmsg.mine audio{filter:sepia(.4) saturate(1.4) hue-rotate(-15deg)}
.cmsg audio{border-radius:20px}
.cimg{border-radius:14px}
.chat-form{margin:0 10px 8px;border:1px solid rgba(255,255,255,.12);border-radius:26px;background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:7px 8px;gap:8px;box-shadow:0 10px 30px -10px rgba(0,0,0,.7),0 0 0 1px rgba(255,138,43,.06)}
.chat-form .iconbtn{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.chat-form #chatMic{color:#ffb552;border-color:rgba(255,154,60,.55);box-shadow:0 0 16px -2px rgba(255,138,43,.6),inset 0 0 10px rgba(255,138,43,.12)}
.chat-form #chatAttach{color:#7fd6ff;border-color:rgba(70,198,255,.4);box-shadow:0 0 14px -4px rgba(70,198,255,.6)}
.chat-form input#chatText{background:transparent;border:0;box-shadow:none;padding:10px 6px;border-radius:0}
.chat-form input#chatText:focus{outline:none;box-shadow:none}
.chat-form #chatSend{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#ffb552,#ff7a1a);color:#2a1405;box-shadow:0 0 22px rgba(255,138,43,.7)}
.chat-rec{border-radius:26px}
@media (max-width: 979px) {
  .tabs{padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
  .content{padding-bottom:172px}
  .fab{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  #toast{bottom:calc(172px + env(safe-area-inset-bottom,0px))}
  #chat .chat-form{margin-bottom:10px}
}

/* ===== регистрация и заявки ===== */
.rolepick{display:flex;flex-wrap:wrap;gap:8px}
#gate .alt{display:flex;justify-content:center;gap:8px;align-items:center}.dim{color:var(--dim)}
#gWait{text-align:center}
#people{position:relative}#people.has{color:var(--ac)}
#people.has::after{content:attr(data-n);position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--ac);color:#1a0f08;font:800 11px/18px var(--f-head);text-align:center}
.memail{display:block;color:var(--ac2,#46C6FF);user-select:text;-webkit-user-select:text;word-break:break-all}
.mrow.pend{flex-wrap:wrap;border:1px solid var(--ac);border-radius:14px;padding:10px;background:rgba(255,154,60,.08)}
.mrow.pend .nm small{display:block}
.pact{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.rsel{background:var(--glass2);color:var(--ink);border:1px solid var(--brd);border-radius:10px;padding:6px 8px;font-size:14px}

/* ───── Вкладка «Контент» (content.js) ───── */
:root[data-view="content"] { --ac: #FF6B8A; --ac2: #FFB8C8; --ac-ink: #2E0612; --b0: #2A0A14; --b1: #4A1024; --b2: #6E1836; --sky: #150409; --city: #0E0306; }
.ct-models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .ct-models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-mbtn { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 16px; color: var(--ink); text-align: left; cursor: pointer; min-height: 56px; border: 1px solid var(--brd); }
.ct-mbtn[aria-pressed="true"] { border-color: var(--ac); box-shadow: 0 0 22px color-mix(in srgb, var(--ac) 35%, transparent); }
.ct-mtx { display: flex; flex-direction: column; min-width: 0; }
.ct-mtx b { font-family: var(--f-head); font-weight: 800; font-size: 14px; }
.ct-mtx small { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-avt { flex: none; }
.ct-hero { border-radius: 22px; min-height: 150px; display: flex; align-items: flex-end; padding: 16px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ac) 45%, transparent), transparent 60%), var(--glass); background-size: cover; background-position: center; }
.ct-hero-in { display: flex; align-items: center; gap: 14px; width: 100%; flex-wrap: wrap; }
.ct-hero-in .ct-avt { box-shadow: 0 0 0 3px var(--ac), 0 0 26px var(--ac); }
.ct-hero-tx { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.ct-hero-tx > b { font-family: var(--f-head); font-weight: 900; font-size: 24px; letter-spacing: .02em; }
.ct-hero-tx small { color: var(--muted); }
.ct-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-pg { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .35); border: 1px solid var(--brd); }
.ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .ct-grid { grid-template-columns: 1fr; } }
.ct-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--brd); }
.ct-row:first-of-type { border-top: 0; }
.ct-row > span { min-width: 0; overflow-wrap: anywhere; }
.ct-row small { color: var(--dim); }
.ct-row.done > span { color: var(--dim); }
.ct-ctr { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.ct-ctr b { font-family: var(--f-head); font-size: 19px; min-width: 22px; text-align: center; }
.ct-b { display: grid; place-items: center; padding: 0; line-height: 1; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--brd2); background: var(--glass2); color: var(--ink); font-size: 20px; font-weight: 800; cursor: pointer; }
.ct-b.plus { background: linear-gradient(170deg, var(--ac2), var(--ac) 62%); color: var(--ac-ink); border: 0; box-shadow: 0 0 16px color-mix(in srgb, var(--ac) 45%, transparent); }
.ct-b:disabled { opacity: .35; cursor: default; }
.ct-sum { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 2px solid var(--brd); }
.ct-sum b { font-family: var(--f-head); font-weight: 900; font-size: 20px; color: var(--ac); }
.ct-line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ct-line .ct-in { flex: 1 1 150px; }
.ct-in { font: inherit; color: var(--ink); background: rgba(255, 255, 255, .07); border: 1px solid var(--brd); border-radius: 12px; padding: 10px 12px; min-width: 0; min-height: 42px; }
.ct-in.ct-num { width: 100px; min-height: 36px; padding: 6px 8px; }
select.ct-in option { background: var(--solid); }
.ct-tog { min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--brd2); background: var(--glass2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.ct-tog.on { background: #35DFA8; color: #032A1E; border-color: transparent; }
.ct-x { background: none; border: 0; color: var(--dim); font-size: 18px; min-width: 40px; min-height: 40px; cursor: pointer; }
.ct-late { font-style: normal; font-size: 11px; font-weight: 800; color: #FF6B6B; margin-left: 6px; }
.ct-bar { flex: none; width: 100%; height: 8px; border-radius: 5px; background: var(--track); overflow: hidden; }
.ct-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--ac), var(--ac2)); }
.ct-bar i.ok { background: #35DFA8; }
.ct-mrow { display: grid; grid-template-columns: 120px 1fr 52px; gap: 12px; align-items: center; padding: 6px 0; }
.ct-mrow > b { text-align: right; font-family: var(--f-head); }
.ct-form { display: grid; grid-template-columns: 150px 150px 1fr 100px auto; gap: 8px; }
@media (max-width: 760px) { .ct-form { grid-template-columns: 1fr 1fr; } .ct-form > :nth-child(3) { grid-column: 1 / -1; } }
.ct-cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
.ct-day { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; border: 1px solid var(--brd); min-height: 70px; font-size: 12px; }
.ct-day.td { border-color: var(--ac); }
.ct-day i { color: var(--dim); }
.ct-chipp { font-size: 10.5px; padding: 2px 6px; border-radius: 8px; background: color-mix(in srgb, var(--ac) 25%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-chipp.done { background: rgba(53, 223, 168, .25); }
.ct-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; }
.ct-scroll { overflow-x: auto; }
.ct-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ct-tbl th { color: var(--dim); font-weight: 600; font-size: 12px; padding: 6px; text-align: center; white-space: nowrap; }
.ct-tbl td { padding: 8px 6px; text-align: center; border-top: 1px solid var(--brd); font-weight: 700; }
.ct-tbl td:first-child, .ct-tbl th:first-child { text-align: left; }
.ct-tbl tr.sel td { background: color-mix(in srgb, var(--ac) 10%, transparent); }
.ct-tbl th.td { color: var(--ac); }
.ct-big { font-family: var(--f-head); font-weight: 900; font-size: 32px; color: var(--ac); }
.ct-big small { font-size: 14px; color: var(--dim); font-family: var(--f-body); font-weight: 500; }
.c-ok { color: #35DFA8; } .c-bad { color: #FF6B6B; } .c-mid { color: var(--ac2); } .fut { color: var(--dim); }
:root[data-view="stars"] { --ac: #FFC94A; --ac2: #FFE9A8; --ac-ink: #2C1E00; --b0: #2A2009; --b1: #4A3A0D; --b2: #6E5612; --sky: #151003; --city: #0E0A02; }
.ct-stars { display: flex; flex-wrap: wrap; gap: 3px; } .ct-stars svg { width: 22px; height: 22px; }
.ct-rk { display: inline-flex; align-items: center; gap: 8px; }
.ct-dl { background: rgba(70, 198, 255, .2); white-space: normal; } .ct-dl.late { background: rgba(255, 107, 107, .25); }
.ct-person { cursor: pointer; }
.ct-pw { display: flex; align-items: center; gap: 10px; flex: 0 1 220px; }
.ct-pw > b { white-space: nowrap; font-family: var(--f-head); font-size: 13px; }
.ct-mission { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; }
.ct-mission.won { border-color: #35DFA8; box-shadow: 0 0 22px rgba(53, 223, 168, .3); }
.ct-ms-ic { font-size: 26px; }
.ct-mission .ct-mtx { flex: 1; }
@media (max-width: 600px) { .ct-pw { flex-basis: 120px; } .ct-mission { flex-wrap: wrap; } .ct-mission .ct-pw { flex: 1 1 100%; } }
.ct-pw { min-width: 0; } .ct-pw .ct-bar { flex: 1 1 auto; width: auto; min-width: 40px; }

/* ───── Team, цели, мой профиль на сцене ───── */
.meline { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; margin: 0 0 10px; border-radius: 16px; border: 1px solid var(--brd); background: var(--glass2); color: var(--ink); cursor: pointer; text-align: left; min-height: 60px; }
.meline:hover { border-color: var(--ac); }
.meline .avt { box-shadow: 0 0 0 2px var(--ac), 0 0 18px color-mix(in srgb, var(--ac) 55%, transparent); }
.ml-tx { display: flex; flex-direction: column; min-width: 0; }
.ml-tx b { font-family: var(--f-head); font-weight: 800; font-size: 15px; }
.ml-tx small { color: var(--dim); font-size: 12px; }
.goalcta { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 20px; color: var(--ink); cursor: pointer; text-align: left; border: 1px solid color-mix(in srgb, #35DFA8 55%, transparent); background: linear-gradient(120deg, rgba(53, 223, 168, .2), rgba(53, 223, 168, .04)), var(--glass); box-shadow: 0 0 26px rgba(53, 223, 168, .18); min-height: 64px; }
.goalcta .gc-ic { font-size: 30px; }
.goalcta .gc-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.goalcta .gc-tx b { font-family: var(--f-head); font-weight: 900; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: #35DFA8; }
.goalcta .gc-tx small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goalcta .gc-go { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; font-weight: 900; color: #032A1E; background: linear-gradient(170deg, #9BF5D6, #35DFA8 62%); box-shadow: 0 0 18px rgba(53, 223, 168, .6); }
.ct-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ct-role { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 18px; color: var(--ink); cursor: pointer; text-align: left; border: 1px solid var(--brd); min-height: 92px; }
.ct-role b { font-family: var(--f-head); font-weight: 900; font-size: 14px; letter-spacing: .03em; }
.ct-role small { color: var(--dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ct-role[aria-pressed="true"] { border-color: var(--ac); background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 28%, transparent), transparent 70%), var(--glass); box-shadow: 0 0 26px color-mix(in srgb, var(--ac) 40%, transparent); }
.ct-avs { display: flex; } .ct-avs .avt { margin-right: -8px; box-shadow: 0 0 0 2px var(--solid); }
.ct-avs-e { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed var(--brd2); color: var(--dim); }
@media (max-width: 560px) { .ct-role { min-height: 84px; padding: 10px; } .ct-role b { font-size: 12.5px; } }
.ct-kpis { display: flex; gap: 14px; flex: none; }
.ct-kpis > span { display: flex; flex-direction: column; align-items: flex-end; }
.ct-kpis b { font-family: var(--f-head); font-weight: 900; font-size: 18px; color: var(--ac); }
.ct-kpis small { font-size: 10.5px; color: var(--dim); }
@media (max-width: 560px) { .ct-person { flex-wrap: wrap; } .ct-kpis { width: 100%; justify-content: flex-end; } }
.ct-mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.ct-mtile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 18px; color: var(--ink); cursor: pointer; border: 1px solid var(--brd); }
.ct-mtile:hover { border-color: var(--ac); }
.ct-mtile .avt { box-shadow: 0 0 0 3px var(--ac), 0 0 22px color-mix(in srgb, var(--ac) 50%, transparent); }
.ct-mtile b { font-family: var(--f-head); font-weight: 800; }
.ct-mtile small { color: var(--dim); font-size: 12px; }
.ct-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 16px; }
.ct-mcard { width: min(520px, 100%); max-height: 90vh; overflow: auto; border-radius: 24px; padding: 0; background: var(--solid); }
.ct-mhdr { position: relative; display: flex; align-items: flex-end; gap: 14px; min-height: 170px; padding: 16px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ac) 50%, transparent), transparent 60%); background-size: cover; background-position: center; }
.ct-mhdr .avt { box-shadow: 0 0 0 3px var(--ac), 0 0 26px var(--ac); }
.ct-mhdr .ct-x { position: absolute; top: 8px; right: 8px; color: var(--ink); font-size: 24px; }
.ct-mbody { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tab[aria-current="page"] { box-shadow: 0 0 24px color-mix(in srgb, var(--ac) 45%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ac) 55%, transparent); }

/* Экран входа: прокрутка, если форма выше экрана (регистрация на телефоне) */
#gate { overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: start; }
#gate .box { margin: auto 0; }
@media (min-height: 760px) { #gate { align-items: center; } }
.chip-group[aria-pressed="true"], .chip-group { border-color: color-mix(in srgb, var(--ac) 60%, transparent); }
.ct-choose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .ct-choose { grid-template-columns: 1fr; } }
.ct-big-role { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border-radius: 22px; color: var(--ink); cursor: pointer; text-align: left; border: 1px solid var(--brd); min-height: 170px; }
.ct-big-role:hover { border-color: var(--ac); box-shadow: 0 0 26px color-mix(in srgb, var(--ac) 35%, transparent); }
.ct-big-role.me { border-color: var(--ac); background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 25%, transparent), transparent 70%), var(--glass); }
.ct-br-ic { font-size: 34px; }
.ct-big-role > b { font-family: var(--f-head); font-weight: 900; font-size: 18px; letter-spacing: .03em; }
.ct-big-role > small { color: var(--muted); font-size: 13px; }
.ct-me { position: absolute; top: 14px; right: 14px; font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: var(--ac); color: var(--ac-ink); }
.ct-back { display: flex; align-items: center; gap: 12px; }
.ct-back b { font-family: var(--f-head); font-weight: 900; font-size: 16px; letter-spacing: .03em; }
.ct-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-card { padding: 12px 14px; border-radius: 18px; display: flex; flex-direction: column; gap: 4px; }
.ct-card small { color: var(--dim); font-family: var(--f-head); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ct-card b { font-family: var(--f-head); font-weight: 900; font-size: 24px; color: var(--ac); }
.ct-form5 { grid-template-columns: 150px 140px 1fr 1fr; }
.ct-form5 > :nth-child(5) { grid-column: 1 / 4; }
@media (max-width: 760px) { .ct-form5 { grid-template-columns: 1fr 1fr; } .ct-form5 > :nth-child(5) { grid-column: 1 / -1; } }
.ct-row.sel { background: color-mix(in srgb, var(--ac) 10%, transparent); border-radius: 12px; }
.ct-spark { display: flex; align-items: flex-end; gap: 3px; height: 120px; overflow-x: auto; }
.ct-sp { flex: 1 0 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.ct-sp i { width: 100%; max-width: 16px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--ac2), var(--ac)); }
.ct-sp.td i { box-shadow: 0 0 10px var(--ac); }
.ct-sp span { font-size: 9.5px; color: var(--dim); height: 12px; }
.ct-sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .ct-sectors { grid-template-columns: 1fr; } }
.ct-sector { cursor: pointer; } .ct-sector:hover { border-color: var(--ac); box-shadow: 0 0 24px color-mix(in srgb, var(--ac) 30%, transparent); }
.ct-bigrow { display: flex; gap: 16px; flex-wrap: wrap; }
.ct-bignum { display: flex; flex-direction: column; }
.ct-bignum b { font-family: var(--f-head); font-weight: 900; font-size: 22px; color: var(--ac); }
.ct-bignum small { font-size: 11px; color: var(--dim); }

/* компактная шапка + живой слон в очках */
.stage { padding: 9px 12px; gap: 5px 11px; grid-template-columns: 92px minmax(0, 1fr); }
#ele { width: 92px; height: 76px; }
.lvlN { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
.hud { gap: 6px; } .stat { padding: 4px 8px; font-size: 13px; }
#ele .shades, #ele .spk { display: none; }
#ele.cool .shades, #ele.cool .spk { display: inline; }
#ele.cool .headG { animation: bop 1.2s ease-in-out infinite; }
@keyframes bop { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-5px) rotate(1.4deg); } }
#ele.cool .earL { animation: flapL 1.4s ease-in-out infinite; } #ele.cool .earR { animation: flapR 1.4s ease-in-out infinite .15s; }
#ele.cool .t1 { animation: sw 1.6s ease-in-out infinite; } #ele.cool .t3 { animation: sw2 1.6s ease-in-out infinite .2s; }
#ele .glint { animation: gl 3.4s ease-in-out infinite; } @keyframes gl { 0%, 70%, 100% { opacity: .15; } 80% { opacity: .9; } }
#ele .spk path { transform-box: fill-box; transform-origin: center; animation: tw 2.2s ease-in-out infinite; }
#ele .spk .s2 { animation-delay: .7s; } #ele .spk .s3 { animation-delay: 1.4s; }
@keyframes tw { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }