/* TokenPlan — новый вид обзора кабинета. Работает поверх styles.css:
   cabinet-fx.js ставит #view.fx-ov на экране «Обзор» и дорисовывает иконки, места, аватарки моделей.
   Входные анимации — только при первом показе (body.fx-in), обновление раз в 10 с их не повторяет. */
#view.fx-ov { --fx-card: linear-gradient(160deg, rgba(36, 26, 18, .82), rgba(18, 14, 11, .72)); --fx-line: rgba(255, 160, 90, .13); --fx-glow: rgba(255, 122, 26, .38); }

/* ---------- меню слева: стеклянная панель ---------- */
body.adm .cab__side { padding: 14px 10px; border-radius: 20px; background: linear-gradient(180deg, rgba(30, 22, 16, .7), rgba(16, 12, 9, .55)); border: 1px solid rgba(255, 160, 90, .1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
body.adm .cab__nav { position: relative; border-radius: 12px; }
body.adm .cab__nav svg { padding: 6px; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .04); transition: background .25s, color .25s; }
body.adm .cab__nav:hover svg { background: rgba(255, 122, 26, .14); }
body.adm .cab__nav.active { background: linear-gradient(90deg, rgba(255, 122, 26, .22), rgba(255, 122, 26, .02)); box-shadow: none; border-color: rgba(255, 122, 26, .22); }
body.adm .cab__nav.active::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
body.adm .cab__nav.active svg { background: var(--accent); color: #140d07; box-shadow: 0 6px 18px -4px rgba(255, 122, 26, .45); }

/* ---------- шапка ---------- */
#view.fx-ov .cab__headrow { align-items: center; margin-bottom: 6px; }
#view.fx-ov .cab__headrow h1, #view.fx-ov .cab__title { font-size: 34px; letter-spacing: -.01em; }
#view.fx-ov .fx-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 12px 5px 10px; border-radius: 99px; font-size: 12.5px; color: #cdb8a6; background: rgba(255, 255, 255, .04); border: 1px solid var(--fx-line); }
#view.fx-ov .fx-live i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: fxLive 2s ease-out infinite; }

/* ---------- плитки: большая карточка баланса + сетка ---------- */
#view.fx-ov .cab__strip { grid-template-columns: 1.55fr repeat(3, 1fr); grid-auto-rows: minmax(112px, auto); gap: 14px; margin: 20px 0; padding: 0; border: 0; background: none; overflow: visible; border-radius: 0; }
#view.fx-ov .cab__strip > div { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px; border-radius: 18px; background: var(--fx-card); border: 1px solid var(--fx-line); box-shadow: 0 14px 40px -24px #000, inset 0 1px 0 rgba(255, 255, 255, .04); overflow: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .35s; }
#view.fx-ov .cab__strip > div:hover { transform: translateY(-3px); border-color: rgba(255, 140, 60, .35); background: var(--fx-card); box-shadow: 0 22px 50px -24px var(--fx-glow); }
#view.fx-ov .cab__strip > div:nth-child(6) { grid-column: span 2; }
#view.fx-ov .cab__strip span { position: relative; font-size: 12.5px; margin-bottom: 8px; letter-spacing: .01em; }
#view.fx-ov .cab__strip b { position: relative; font-size: 22px; line-height: 1.15; }
#view.fx-ov .fx-ic { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: rgba(255, 122, 26, .1); border: 1px solid rgba(255, 122, 26, .18); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-ov .fx-ic svg { width: 19px; height: 19px; }
#view.fx-ov .cab__strip > div:hover .fx-ic { transform: rotate(-8deg) scale(1.1); }

/* баланс — главная карточка */
#view.fx-ov .cab__strip > .fx-hero { grid-row: span 2; justify-content: space-between; padding: 24px 26px; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 122, 26, .38), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(255, 70, 20, .2), transparent 60%), linear-gradient(160deg, #2a1a0e, #130d09); border-color: rgba(255, 140, 60, .3); }
#view.fx-ov .fx-hero::before { content: ""; position: absolute; width: 340px; height: 340px; right: -120px; top: -150px; border-radius: 50%; border: 1px solid rgba(255, 170, 110, .18); box-shadow: 0 0 0 36px rgba(255, 140, 60, .04), 0 0 0 80px rgba(255, 140, 60, .03); animation: fxSpin 30s linear infinite; }
#view.fx-ov .fx-hero .fx-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--accent); color: #140d07; box-shadow: 0 10px 26px -6px var(--fx-glow); }
#view.fx-ov .fx-hero span { font-size: 14px; color: #e9cdb6; }
#view.fx-ov .fx-hero b { font-family: var(--display); font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.02em; margin-top: auto; }
#view.fx-ov .fx-hero b.accent { background: linear-gradient(90deg, #fff, #ffd0a8 40%, var(--accent) 60%, #fff); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxShine 6s linear infinite; }
#view.fx-ov .fx-hero .fx-cta { position: relative; display: flex; gap: 10px; margin-top: 18px; }
#view.fx-ov .fx-hero .fx-cta a { flex: 1; text-align: center; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; transition: transform .2s, box-shadow .25s, background .25s; }
#view.fx-ov .fx-hero .fx-cta a:first-child { background: var(--accent); color: #140d07; box-shadow: 0 10px 26px -8px var(--fx-glow); }
#view.fx-ov .fx-hero .fx-cta a:last-child { background: rgba(255, 255, 255, .07); color: var(--text); border: 1px solid rgba(255, 255, 255, .1); }
#view.fx-ov .fx-hero .fx-cta a:hover { transform: translateY(-2px); }

/* ---------- обычные карточки ---------- */
#view.fx-ov .adm__card { position: relative; border-radius: 20px; background: var(--fx-card); border: 1px solid var(--fx-line); box-shadow: 0 14px 40px -24px #000, inset 0 1px 0 rgba(255, 255, 255, .04); }
#view.fx-ov .adm__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -50%), rgba(255, 122, 26, .12), transparent 60%); }
#view.fx-ov .adm__card > * { position: relative; }
#view.fx-ov .adm__h2 { display: flex; align-items: center; gap: 10px; }
#view.fx-ov .adm__h2 .fx-ic { position: static; width: 32px; height: 32px; border-radius: 10px; flex: none; }
#view.fx-ov .adm__h2 .fx-ic svg { width: 16px; height: 16px; }

/* лимиты — полоса с акцентом слева */
#view.fx-ov .fx-limits { padding: 18px 22px; border-left: 3px solid var(--accent); }
#view.fx-ov .fx-limits .adm__bar { margin-bottom: 8px; }
#view.fx-ov .fx-limits:has(.cab__meter) { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
#view.fx-ov .fx-limits:has(.cab__meter) > :not(.cab__meter) { grid-column: 1 / -1; }
#view.fx-ov .fx-limits .cab__meter { --c: var(--accent); position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr); grid-template-areas: "r t" "r b" "r s"; column-gap: 16px; align-content: center; padding: 14px 16px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid var(--fx-line); }
#view.fx-ov .fx-limits .cab__meter + .cab__meter { border-top: 1px solid var(--fx-line); }
#view.fx-ov .fx-limits .cab__meter.fx-warm { --c: #ffb547; }
#view.fx-ov .fx-limits .cab__meter.fx-hot { --c: #ff5a5f; border-color: rgba(255, 90, 95, .35); }
#view.fx-ov .fx-ring { grid-area: r; align-self: center; position: relative; width: 68px; height: 68px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .07) 0); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 45%, transparent)); }
#view.fx-ov .fx-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #15100c; }
#view.fx-ov .fx-ring > * { position: relative; }
#view.fx-ov .fx-limits .fx-ring b { font-size: 16px; line-height: 1; color: var(--text); }
#view.fx-ov .fx-limits .cab__meter .fx-ring small { display: block; margin-top: 2px; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#view.fx-ov .fx-limits .cab__meter-top { grid-area: t; margin-bottom: 9px; font-weight: 600; font-size: 15px; }
#view.fx-ov .fx-limits .cab__meter-top b { display: none; }
#view.fx-ov .fx-limits .cab__meter-bar { grid-area: b; height: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
#view.fx-ov .fx-limits .cab__meter-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), var(--c)); box-shadow: 0 0 12px var(--c); }
#view.fx-ov .fx-limits .cab__meter small { grid-area: s; margin-top: 8px; font-size: 12px; }
.fx-in #view.fx-ov .fx-ring { animation: fxRingIn 1.2s cubic-bezier(.2, .8, .2, 1) .5s both; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes fxRingIn { from { --p: 0; } }

/* ---------- график ---------- */
#view.fx-ov .cab__split { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); }
#view.fx-ov .cab__chart { height: 250px; }
#view.fx-ov .cab__stroke { stroke-width: 2.6; filter: drop-shadow(0 0 7px rgba(255, 122, 26, .75)); }
#view.fx-ov .cab__area-fill { fill: url(#fxArea); }
#view.fx-ov .cab__col i { width: 12px; height: 12px; margin: 0 0 -6px -6px; box-shadow: 0 0 0 3px #1a120c, 0 0 16px var(--accent); }
#view.fx-ov .cab__col:last-child i { opacity: 1; animation: fxDot 1.8s ease-out infinite; }
#view.fx-ov .cab__col::before { border-left: 1px solid rgba(255, 140, 60, .35); }
#view.fx-ov .cab__tip { background: rgba(20, 14, 10, .94); border: 1px solid rgba(255, 140, 60, .4); border-radius: 10px; box-shadow: 0 10px 30px -10px var(--fx-glow); }
#view.fx-ov .cab__chips { padding: 4px; gap: 4px; display: inline-flex; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--fx-line); }
#view.fx-ov .cab__chips .chip { border: 0; border-radius: 9px; background: none; }
#view.fx-ov .cab__chips .chip.active { background: var(--accent); color: #140d07; box-shadow: 0 6px 18px -6px var(--fx-glow); }

/* ---------- подключение: окно терминала ---------- */
#view.fx-ov .cab__keybox { position: relative; padding: 38px 14px 14px; border-radius: 14px; background: #0c0907; border: 1px solid rgba(255, 140, 60, .25); box-shadow: inset 0 0 30px rgba(255, 122, 26, .05); }
#view.fx-ov .cab__keybox::before { content: ""; position: absolute; top: 13px; left: 14px; width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; box-shadow: 15px 0 #febc2e, 30px 0 #28c840; }
#view.fx-ov .cab__keybox::after { content: "base_url"; position: absolute; top: 9px; right: 14px; font: 11px var(--mono); color: #7d6b5d; }
#view.fx-ov .cab__keybox code { font-size: 14px; color: #ffb47a; }
#view.fx-ov .cab__keybox code::before { content: "$ "; color: #3ddc84; }
#view.fx-ov .cab__keybox .btn { border-radius: 10px; }

/* ---------- топ моделей: места, аватарки, дорожки ---------- */
#view.fx-ov .cab__bars { gap: 6px; }
#view.fx-ov .cab__bar { grid-template-columns: 22px 30px minmax(0, 1fr) auto; grid-template-areas: "n a k v" "n a t t"; column-gap: 10px; row-gap: 6px; padding: 8px 10px; margin: 0 -10px; border-radius: 12px; transition: background .25s; }
#view.fx-ov .cab__bar:hover { background: rgba(255, 122, 26, .07); }
#view.fx-ov .cab__bar > span:not(.fx-av):not(.fx-track):not(.mono) { grid-area: k; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view.fx-ov .cab__bar > span.mono { grid-area: v; color: #bfa995; font-size: 12px; }
#view.fx-ov .fx-n { grid-area: n; align-self: center; font: 600 13px var(--mono); color: #7d6b5d; text-align: center; }
#view.fx-ov .cab__bar:nth-child(1) .fx-n { color: #ffc46b; } #view.fx-ov .cab__bar:nth-child(2) .fx-n { color: #d8d8e0; } #view.fx-ov .cab__bar:nth-child(3) .fx-n { color: #e09a62; }
#view.fx-ov .fx-av { grid-area: a; align-self: center; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font: 700 13px var(--display); color: #fff; background: var(--v, var(--accent)); box-shadow: 0 6px 16px -6px var(--v, var(--accent)), inset 0 0 0 1px rgba(255, 255, 255, .12); }
#view.fx-ov .fx-av svg { width: 18px; height: 18px; display: block; }
#view.fx-ov .fx-track { grid-area: t; display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
#view.fx-ov .fx-track i { position: relative; height: 100%; overflow: hidden; background: linear-gradient(90deg, var(--v, var(--accent)), var(--accent-2)); box-shadow: 0 0 10px var(--v, var(--accent)); animation: none; }
#view.fx-ov .fx-track i::after, #view.fx-ov .cab__meter-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-100%); animation: fxRun 3s ease-in-out infinite; }
#view.fx-ov .cab__meter-bar i { position: relative; overflow: hidden; animation: none; }

/* маленькие плитки: иконка сверху, не наезжает на подпись */
#view.fx-ov .cab__strip { grid-template-columns: 1.8fr repeat(3, 1fr); }
#view.fx-ov .cab__strip > div:not(.fx-hero) { justify-content: flex-start; }
#view.fx-ov .cab__strip > div:not(.fx-hero) .fx-ic { position: static; width: 34px; height: 34px; margin-bottom: 12px; }
#view.fx-ov .cab__strip > div:not(.fx-hero) .fx-ic svg { width: 17px; height: 17px; }
#view.fx-ov .cab__strip > div:not(.fx-hero) b { font-size: 20px; }
#view.fx-ov .fx-hero b { font-size: clamp(26px, 2.3vw, 38px); white-space: nowrap; }
#view.fx-ov .cab__chart { height: 330px; }
#view.fx-ov .cab__bar { grid-template-areas: "n a k k" "n a t v"; }
#view.fx-ov .cab__bar > span.mono { align-self: center; font-size: 11.5px; }

/* ---------- первый показ ---------- */
/* старое появление #view > * из styles.css шло при каждом обновлении — на обзоре только при первом показе */
body:not(.fx-in) #view.fx-ov > * { animation: none; }
.fx-in #view.fx-ov .cab__headrow { animation: fxRise .6s cubic-bezier(.2, .8, .2, 1) both; }
.fx-in #view.fx-ov .cab__strip > div { animation: fxRise .65s cubic-bezier(.2, .8, .2, 1) both; }
.fx-in #view.fx-ov .cab__strip > div:nth-child(2) { animation-delay: .07s } .fx-in #view.fx-ov .cab__strip > div:nth-child(3) { animation-delay: .14s }
.fx-in #view.fx-ov .cab__strip > div:nth-child(4) { animation-delay: .21s } .fx-in #view.fx-ov .cab__strip > div:nth-child(5) { animation-delay: .28s }
.fx-in #view.fx-ov .cab__strip > div:nth-child(6) { animation-delay: .35s }
.fx-in #view.fx-ov .adm__card { animation: fxRise .7s cubic-bezier(.2, .8, .2, 1) .3s both; }
.fx-in #view.fx-ov .cab__split .adm__card { animation-delay: .42s; } .fx-in #view.fx-ov .cab__split > div > .adm__card + .adm__card { animation-delay: .54s; }
.fx-in #view.fx-ov .cab__stroke { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: fxDraw 1.8s cubic-bezier(.4, 0, .2, 1) .6s forwards; }
.fx-in #view.fx-ov .cab__area-fill { animation: fxFade 1.2s ease 1.2s both; }
.fx-in #view.fx-ov .fx-track i, .fx-in #view.fx-ov .cab__meter-bar i { transform-origin: left center; animation: fxGrow 1.1s cubic-bezier(.2, .8, .2, 1) .7s both; }
.fx-in #view.fx-ov .cab__bar { animation: fxSlide .5s cubic-bezier(.2, .8, .2, 1) both; }
.fx-in #view.fx-ov .cab__bar:nth-child(1) { animation-delay: .6s } .fx-in #view.fx-ov .cab__bar:nth-child(2) { animation-delay: .66s } .fx-in #view.fx-ov .cab__bar:nth-child(3) { animation-delay: .72s }
.fx-in #view.fx-ov .cab__bar:nth-child(4) { animation-delay: .78s } .fx-in #view.fx-ov .cab__bar:nth-child(5) { animation-delay: .84s } .fx-in #view.fx-ov .cab__bar:nth-child(6) { animation-delay: .9s }

@keyframes fxShine { to { background-position: -220% 0; } }
@keyframes fxSpin { to { transform: rotate(360deg); } }
@keyframes fxLive { 100% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } }
@keyframes fxDot { 0% { box-shadow: 0 0 0 3px #1a120c, 0 0 0 3px rgba(255, 122, 26, .7); } 100% { box-shadow: 0 0 0 3px #1a120c, 0 0 0 16px rgba(255, 122, 26, 0); } }
@keyframes fxRun { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes fxRise { from { opacity: 0; transform: translateY(18px) scale(.98); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fxSlide { from { opacity: 0; transform: translateX(-14px); } }
@keyframes fxDraw { to { stroke-dashoffset: 0; } }
@keyframes fxFade { from { opacity: 0; } }
@keyframes fxGrow { from { transform: scaleX(0); } }

@media (max-width: 1000px) {
  #view.fx-ov .cab__strip { grid-template-columns: 1fr 1fr; }
  #view.fx-ov .cab__strip > .fx-hero { grid-column: span 2; grid-row: auto; min-height: 200px; }
  #view.fx-ov .cab__strip > div:nth-child(6) { grid-column: auto; }
  #view.fx-ov .cab__split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #view.fx-ov *, #view.fx-ov *::before, #view.fx-ov *::after { animation: none !important; transition: none !important; }
}

/* ================= чат с ИИ (#view.fx-chat ставит cabinet-fx.js) ================= */
#view.fx-chat { --fx-card: linear-gradient(160deg, rgba(36, 26, 18, .82), rgba(18, 14, 11, .72)); --fx-line: rgba(255, 160, 90, .13); --fx-glow: rgba(255, 122, 26, .38); }
#view.fx-chat .chat { gap: 16px; }
#view.fx-chat .adm__card { position: relative; border-radius: 22px; background: var(--fx-card); border: 1px solid var(--fx-line); box-shadow: 0 18px 50px -28px #000, inset 0 1px 0 rgba(255, 255, 255, .04); }
#view.fx-chat .chat__side::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -50%), rgba(255, 122, 26, .1), transparent 60%); }
#view.fx-chat .chat__side > * { position: relative; }

/* шапка */
#view.fx-chat .chat__head { gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--fx-line); background: linear-gradient(180deg, rgba(255, 122, 26, .06), transparent); }
#view.fx-chat .chat__head > div { flex: 1; min-width: 0; }
#view.fx-chat .chat__head .adm__h2 { font-size: 19px; }
#view.fx-chat .fx-hic { position: relative; flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #140d07; background: linear-gradient(135deg, #ffb070, var(--accent) 60%, #e85d0c); box-shadow: 0 10px 26px -8px var(--fx-glow), inset 0 1px 0 rgba(255, 255, 255, .35); }
#view.fx-chat .fx-hic svg { width: 21px; height: 21px; }
#view.fx-chat .fx-hic::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #3ddc84; border: 2px solid #1b130d; animation: fxLive 2s ease-out infinite; }
#view.fx-chat .fx-mbadge { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 5px 12px 5px 5px; border-radius: 99px; background: rgba(0, 0, 0, .28); border: 1px solid var(--fx-line); color: var(--text); font: 500 13px var(--mono); cursor: pointer; transition: border-color .25s, background .25s, transform .2s; }
#view.fx-chat .fx-mbadge:hover { border-color: rgba(255, 140, 60, .4); background: rgba(255, 122, 26, .08); transform: translateY(-1px); }
#view.fx-chat .fx-mbadge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view.fx-chat .fx-mbadge i { flex: none; width: 6px; height: 6px; margin: -3px 0 0 2px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); }
#view.fx-chat .fx-mav { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--av) center / 58% no-repeat, var(--v, var(--accent)); box-shadow: 0 4px 12px -4px var(--v, var(--accent)), inset 0 0 0 1px rgba(255, 255, 255, .14); }
#view.fx-chat #ch-clear { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; border: 0; font-weight: 600; color: #140d07; background: var(--accent); box-shadow: 0 8px 22px -8px var(--fx-glow); transition: transform .2s, box-shadow .25s; }
#view.fx-chat #ch-clear svg { width: 15px; height: 15px; stroke-width: 2.6; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-chat #ch-clear:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px var(--fx-glow); }
#view.fx-chat #ch-clear:hover svg { transform: rotate(90deg); }

/* лента */
#view.fx-chat .chat__main { position: relative; }
#view.fx-chat .chat__log { gap: 18px; padding: 26px 58px 18px; scroll-behavior: auto; background: radial-gradient(700px 320px at 50% -60px, rgba(255, 122, 26, .09), transparent 70%), radial-gradient(rgba(255, 190, 140, .05) 1px, transparent 1px) 0 0 / 22px 22px; scrollbar-width: thin; scrollbar-color: rgba(255, 140, 60, .25) transparent; }
#view.fx-chat .chat__msg { position: relative; max-width: min(78%, 760px); padding: 12px 16px; font-size: 14.8px; line-height: 1.62; border-radius: 18px; }
#view.fx-chat .chat__msg::before { content: ""; position: absolute; top: 0; width: 32px; height: 32px; border-radius: 11px; }
#view.fx-chat .chat__msg--assistant { border-top-left-radius: 6px; background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 10px 30px -22px #000; }
#view.fx-chat .chat__msg--assistant::before { left: -44px; background: var(--av) center / 58% no-repeat, var(--v, var(--accent)); box-shadow: 0 6px 16px -6px var(--v, var(--accent)), inset 0 0 0 1px rgba(255, 255, 255, .14); }
#view.fx-chat .chat__msg--user { border-top-right-radius: 6px; color: #1a0f07; background: linear-gradient(135deg, #ffb27a, var(--accent) 55%, #f0650f); border: 0; box-shadow: 0 12px 30px -16px var(--fx-glow), inset 0 1px 0 rgba(255, 255, 255, .35); font-weight: 500; }
#view.fx-chat .chat__msg--user::before { content: attr(data-ini); right: -44px; display: grid; place-items: center; font: 700 14px var(--display); color: var(--text); background: linear-gradient(135deg, #3a2a1e, #22180f); border: 1px solid rgba(255, 160, 90, .25); }
#view.fx-chat .chat__msg--user .chat__doc { color: #1a0f07; border-color: rgba(0, 0, 0, .2); background: rgba(255, 255, 255, .25); }
#view.fx-chat .chat__msg--user .chat__doc i { color: rgba(26, 15, 7, .65); }
#view.fx-chat .chat__msg code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 122, 26, .12); color: #ffc596; font-size: .92em; }
#view.fx-chat .chat__msg--user code { background: rgba(0, 0, 0, .15); color: #1a0f07; }
#view.fx-chat .chat__msg pre code { padding: 0; background: none; color: #f3e6da; }
#view.fx-chat .chat__msg b { color: #fff; }
#view.fx-chat .chat__msg--user b { color: #1a0f07; }
#view.fx-chat .chat__imgs img { border-radius: 12px; box-shadow: 0 8px 20px -10px #000; }
#view.fx-chat .chat__msg--err { background: rgba(229, 72, 77, .08); border-color: rgba(229, 72, 77, .45); }
#view.fx-chat .chat__msg--err::before { background: #e5484d center / 58% no-repeat; }

/* ответ печатается: мигающий курсор; ждём ответ: прыгающие точки */
#view.fx-chat .chat__msg--wait { min-width: 74px; min-height: 46px; }
#view.fx-chat .chat__msg--wait::after { content: ""; position: absolute; left: 20px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; letter-spacing: 0; background: var(--accent); animation: fxDots 1.2s ease-in-out infinite; }
#view.fx-chat .chat__msg--wait::before { animation: fxThink 1.6s ease-in-out infinite; }
#view.fx-chat.fx-busy .chat__msg--assistant:last-child:not(.chat__msg--wait)::after, #view.fx-chat .fx-busy .chat__msg--assistant:last-child:not(.chat__msg--wait)::after { content: ""; display: inline-block; width: 8px; height: 1.05em; margin-left: 3px; vertical-align: -2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: fxCaret .9s steps(2) infinite; }

/* под ответом: «Копировать» */
#view.fx-chat .fx-bar { display: flex; gap: 6px; margin: 8px -4px -4px; opacity: 0; transform: translateY(-3px); transition: opacity .25s, transform .25s; }
#view.fx-chat .chat__msg:hover .fx-bar, #view.fx-chat .chat__msg:last-child .fx-bar, #view.fx-chat .fx-bar:focus-within { opacity: 1; transform: none; }
#view.fx-chat .fx-cpy { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; font-size: 12.5px; color: var(--muted); border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s; }
#view.fx-chat .fx-cpy svg { width: 14px; height: 14px; }
#view.fx-chat .fx-cpy:hover { color: var(--text); background: rgba(255, 255, 255, .06); border-color: var(--fx-line); }
#view.fx-chat .fx-cpy.done { color: #3ddc84; }

/* блоки кода — окно редактора */
#view.fx-chat .chat__code { margin: 10px 0; border-radius: 14px; border: 1px solid rgba(255, 140, 60, .2); background: #0d0a08; box-shadow: 0 14px 30px -20px #000, inset 0 0 30px rgba(255, 122, 26, .03); }
#view.fx-chat .chat__codebar { padding: 7px 8px 7px 62px; position: relative; background: rgba(255, 255, 255, .025); border-bottom: 1px solid rgba(255, 140, 60, .14); color: #c9b3a0; }
#view.fx-chat .chat__codebar::before { content: ""; position: absolute; left: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #ff5f57; box-shadow: 14px 0 #febc2e, 28px 0 #28c840; }
#view.fx-chat .chat__copy { border-radius: 8px; padding: 4px 11px; border-color: rgba(255, 140, 60, .3); transition: background .2s, color .2s, transform .15s; }
#view.fx-chat .chat__copy:hover { background: var(--accent); color: #140d07; }
#view.fx-chat .chat__copy:active { transform: scale(.95); }
#view.fx-chat .chat__code pre { padding: 14px 16px; }
#view.fx-chat .chat__zip { border-radius: 11px; border-color: rgba(255, 140, 60, .35); }

/* пустой экран */
#view.fx-chat .chat__empty.fx-e { gap: 10px; width: 100%; max-width: 640px; padding: 10px 0 20px; }
#view.fx-chat .fx-orb { position: relative; width: 112px; height: 112px; margin-bottom: 12px; display: grid; place-items: center; }
#view.fx-chat .fx-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 160, 90, .28); }
#view.fx-chat .fx-orb i:nth-child(1) { background: radial-gradient(circle at 35% 30%, #ffc28f, var(--accent) 45%, #9a3a06 80%); inset: 22px; border: 0; box-shadow: 0 0 50px rgba(255, 122, 26, .55), inset -8px -10px 20px rgba(0, 0, 0, .35); animation: fxBreath 4s ease-in-out infinite; }
#view.fx-chat .fx-orb i:nth-child(2) { inset: 8px; border-style: dashed; animation: fxSpin 18s linear infinite; }
#view.fx-chat .fx-orb i:nth-child(3) { border-color: rgba(255, 160, 90, .14); border-top-color: var(--accent); animation: fxSpin 3.2s cubic-bezier(.5, .1, .5, .9) infinite; }
#view.fx-chat .fx-orb span { position: relative; color: #1a0f07; }
#view.fx-chat .fx-orb span svg { width: 28px; height: 28px; stroke-width: 2.2; }
#view.fx-chat .chat__empty .fx-et { font: 700 26px/1.2 var(--display); letter-spacing: -.01em; background: linear-gradient(90deg, #fff, #ffd0a8 40%, var(--accent) 60%, #fff); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxShine 6s linear infinite; }
#view.fx-chat .fx-sug { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 18px; }
#view.fx-chat .fx-sug button { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "i t" "i s"; column-gap: 12px; row-gap: 2px; padding: 14px; text-align: left; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--fx-line); color: var(--text); overflow: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .25s, background .25s, box-shadow .3s; animation: fxRise .6s cubic-bezier(.2, .8, .2, 1) both; }
#view.fx-chat .fx-sug button:nth-child(2) { animation-delay: .07s; } #view.fx-chat .fx-sug button:nth-child(3) { animation-delay: .14s; } #view.fx-chat .fx-sug button:nth-child(4) { animation-delay: .21s; }
#view.fx-chat .fx-sug button:hover { transform: translateY(-3px); border-color: rgba(255, 140, 60, .4); background: rgba(255, 122, 26, .07); box-shadow: 0 16px 34px -20px var(--fx-glow); }
#view.fx-chat .fx-sug i { grid-area: i; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: rgba(255, 122, 26, .1); border: 1px solid rgba(255, 122, 26, .2); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .25s, color .25s; }
#view.fx-chat .fx-sug i svg { width: 17px; height: 17px; }
#view.fx-chat .fx-sug button:hover i { transform: rotate(-8deg) scale(1.08); background: var(--accent); color: #140d07; }
#view.fx-chat .fx-sug b { grid-area: t; font-size: 14px; }
#view.fx-chat .fx-sug span { grid-area: s; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* поле ввода — плавающая капсула со светящейся рамкой */
#view.fx-chat .chat__form { position: relative; margin: 6px 16px 0; padding: 8px; gap: 8px; align-items: flex-end; border: 1px solid rgba(255, 160, 90, .18); border-radius: 22px; background: rgba(12, 9, 7, .75); box-shadow: 0 14px 40px -20px #000; transition: border-color .3s, box-shadow .3s; }
#view.fx-chat .chat__form::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--fx-a, 0deg), transparent 0 60%, var(--accent) 80%, #ffd0a8 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; animation: fxBorder 4s linear infinite; }
#view.fx-chat .chat__form:focus-within { border-color: rgba(255, 140, 60, .35); box-shadow: 0 14px 40px -20px #000, 0 0 0 4px rgba(255, 122, 26, .08); }
#view.fx-chat .chat__form:focus-within::before, #view.fx-chat .fx-busy .chat__form::before { opacity: 1; }
#view.fx-chat .chat__form textarea { min-height: 42px; max-height: 220px; padding: 10px 6px; border: 0; background: none; box-shadow: none; font-size: 15px; line-height: 1.45; }
#view.fx-chat .chat__form textarea:focus { box-shadow: none; outline: 0; }
#view.fx-chat .chat__form .btn { flex: none; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 14px; }
#view.fx-chat .chat__form .btn svg { width: 19px; height: 19px; }
#view.fx-chat .chat__clip { order: -1; color: var(--muted); border: 0; background: rgba(255, 255, 255, .05); transition: color .2s, background .2s, transform .3s; }
#view.fx-chat .chat__clip:hover { color: var(--accent); background: rgba(255, 122, 26, .12); transform: rotate(-12deg); }
#view.fx-chat .chat__att { order: -2; padding: 2px 2px 6px; }
#view.fx-chat .chat__pic { width: 68px; height: 68px; border-radius: 12px; animation: fxPop .35s cubic-bezier(.34, 1.56, .64, 1) both; }
#view.fx-chat .chat__att .chat__doc { animation: fxPop .35s cubic-bezier(.34, 1.56, .64, 1) both; }
#view.fx-chat #ch-send { background: linear-gradient(135deg, #ffb070, var(--accent) 55%, #e85d0c); color: #140d07; border: 0; box-shadow: 0 8px 20px -8px var(--fx-glow); transition: transform .2s, box-shadow .25s; }
#view.fx-chat #ch-send svg { stroke-width: 2.6; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-chat #ch-send:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px var(--fx-glow); }
#view.fx-chat #ch-send:hover svg { transform: translateY(-2px); }
#view.fx-chat .fx-busy #ch-send { background: #2a1f17; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255, 140, 60, .4); animation: fxPulse 1.6s ease-out infinite; }
#view.fx-chat .fx-hint { margin: 8px 18px 12px; text-align: center; font-size: 11.5px; color: #7d6b5d; }
#view.fx-chat .fx-hint kbd { padding: 1px 6px; border-radius: 5px; font: 10.5px var(--mono); color: #bfa995; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }

/* кнопка «вниз» и перетаскивание файлов */
#view.fx-chat .fx-down { position: absolute; left: 50%; bottom: 120px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--text); background: rgba(30, 22, 16, .92); border: 1px solid rgba(255, 140, 60, .3); box-shadow: 0 10px 24px -8px #000; opacity: 0; pointer-events: none; transform: translate(-50%, 10px) scale(.85); transition: opacity .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-chat .fx-down.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
#view.fx-chat .fx-down svg { width: 17px; height: 17px; }
#view.fx-chat .fx-down:hover { background: var(--accent); color: #140d07; }
#view.fx-chat .fx-drop { position: absolute; inset: 10px; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 12px; border-radius: 18px; border: 2px dashed rgba(255, 140, 60, .6); background: rgba(20, 13, 8, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text); font-size: 16px; opacity: 0; pointer-events: none; transform: scale(.98); transition: opacity .2s, transform .25s; }
#view.fx-chat .fx-drop span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #140d07; background: var(--accent); box-shadow: 0 12px 30px -8px var(--fx-glow); animation: fxBob 1.4s ease-in-out infinite; }
#view.fx-chat .fx-drop span svg { width: 26px; height: 26px; }
#view.fx-chat .fx-drag .fx-drop { opacity: 1; transform: none; }

/* боковая панель */
#view.fx-chat .chat__side { padding: 18px; }
#view.fx-chat .chat__side .adm__h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #bfa995; }
#view.fx-chat .chat__list { gap: 3px; scrollbar-width: thin; scrollbar-color: rgba(255, 140, 60, .25) transparent; }
#view.fx-chat .chat__item { position: relative; border-radius: 12px; animation: fxSlide .4s cubic-bezier(.2, .8, .2, 1) both; }
#view.fx-chat .chat__item:hover { background: rgba(255, 255, 255, .045); }
#view.fx-chat .chat__item.active { border-color: rgba(255, 122, 26, .3); background: linear-gradient(90deg, rgba(255, 122, 26, .2), rgba(255, 122, 26, .03)); }
#view.fx-chat .chat__item.active::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
#view.fx-chat .chat__open { display: flex; align-items: center; gap: 9px; }
#view.fx-chat .chat__open::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: background .25s, box-shadow .25s; }
#view.fx-chat .chat__item.active .chat__open::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
#view.fx-chat .chat__item.pinned .chat__open::before { background: #ffc46b; }
#view.fx-chat .chat__act:hover { background: rgba(255, 122, 26, .14); color: var(--accent); }
#view.fx-chat .chat__side textarea, #view.fx-chat .chat__side .pick__btn { border-radius: 12px; background: rgba(0, 0, 0, .25); border-color: var(--fx-line); transition: border-color .25s, box-shadow .25s; }
#view.fx-chat .chat__side textarea:focus { border-color: rgba(255, 140, 60, .45); box-shadow: 0 0 0 3px rgba(255, 122, 26, .1); }
#view.fx-chat .pick__btn { justify-content: flex-start; }
#view.fx-chat .pick__btn span { flex: 1; font-family: var(--mono); font-size: 13.5px; }
#view.fx-chat .pick__btn .fx-mav, #view.fx-chat .pick__opt .fx-mav { width: 24px; height: 24px; border-radius: 7px; }
#view.fx-chat .pick__list { padding: 6px; border-radius: 16px; background: rgba(18, 13, 9, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#view.fx-chat .pick__opt { display: flex; align-items: center; gap: 10px; font: 13.5px var(--mono); transition: background .15s, transform .2s; }
#view.fx-chat .pick__opt:hover { transform: translateX(3px); }

/* появление */
#view.fx-chat .chat__log > .chat__msg--user { animation: fxMsgR .45s cubic-bezier(.2, .8, .2, 1) both; }
#view.fx-chat .chat__log > .chat__msg--assistant { animation: fxMsgL .5s cubic-bezier(.2, .8, .2, 1) both; }
.fx-in #view.fx-chat .chat__main { animation: fxRise .6s cubic-bezier(.2, .8, .2, 1) both; }
.fx-in #view.fx-chat .chat__side { animation: fxRise .6s cubic-bezier(.2, .8, .2, 1) .12s both; }
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fxBorder { to { --fx-a: 360deg; } }
@keyframes fxMsgR { from { opacity: 0; transform: translate(18px, 10px) scale(.96); } }
@keyframes fxMsgL { from { opacity: 0; transform: translate(-14px, 10px) scale(.97); filter: blur(4px); } }
@keyframes fxDots { 0%, 100% { box-shadow: 14px 0 0 0 rgba(255, 122, 26, .35), 28px 0 0 0 rgba(255, 122, 26, .15); transform: translateY(0); } 33% { box-shadow: 14px -6px 0 0 var(--accent), 28px 0 0 0 rgba(255, 122, 26, .35); transform: translateY(-2px); } 66% { box-shadow: 14px 0 0 0 rgba(255, 122, 26, .35), 28px -6px 0 0 var(--accent); transform: translateY(0); } }
@keyframes fxThink { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--v, #ff7a1a) 25%, transparent), 0 6px 16px -6px var(--v, #ff7a1a); } }
@keyframes fxCaret { 50% { opacity: 0; } }
@keyframes fxBreath { 50% { transform: scale(1.06); box-shadow: 0 0 70px rgba(255, 122, 26, .7), inset -8px -10px 20px rgba(0, 0, 0, .35); } }
@keyframes fxPop { from { opacity: 0; transform: scale(.7); } }
@keyframes fxPulse { 0% { box-shadow: inset 0 0 0 1px rgba(255, 140, 60, .4), 0 0 0 0 rgba(255, 122, 26, .45); } 100% { box-shadow: inset 0 0 0 1px rgba(255, 140, 60, .4), 0 0 0 10px rgba(255, 122, 26, 0); } }
@keyframes fxBob { 50% { transform: translateY(-6px); } }

/* ответ с кодом — шире, шапка на узком экране переносится */
#view.fx-chat .chat__msg--assistant:has(.chat__code) { width: min(86%, 860px); max-width: none; }
#view.fx-chat .chat__head { flex-wrap: wrap; }
#view.fx-chat .chat__head > div { flex: 1 1 200px; }
@media (max-width: 1250px) { #view.fx-chat .fx-mbadge { display: none; } }
@media (max-width: 900px) {
  #view.fx-chat .chat__log { padding: 18px 14px; }
  #view.fx-chat .chat__msg { max-width: 92%; }
  #view.fx-chat .chat__msg::before { display: none; }
  #view.fx-chat .fx-mbadge { display: none; }
  #view.fx-chat .fx-sug { grid-template-columns: 1fr; }
  #view.fx-chat .chat__form { margin: 6px 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  #view.fx-chat *, #view.fx-chat *::before, #view.fx-chat *::after { animation: none !important; transition: none !important; }
}
/* ================= генерация фото (#view.fx-photo ставит cabinet-fx.js) ================= */
#view.fx-photo { --fx-card: linear-gradient(160deg, rgba(36, 26, 18, .82), rgba(18, 14, 11, .72)); --fx-line: rgba(255, 160, 90, .13); --fx-glow: rgba(255, 122, 26, .38); }
#view.fx-photo .cab__title { display: flex; align-items: center; gap: 14px; }
#view.fx-photo .fx-pic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: #140d07; background: linear-gradient(135deg, #ffb070, var(--accent) 60%, #e85d0c); box-shadow: 0 10px 26px -8px var(--fx-glow), inset 0 1px 0 rgba(255, 255, 255, .35); animation: fxPicFloat 5s ease-in-out infinite; }
#view.fx-photo .fx-pic svg { width: 23px; height: 23px; stroke-width: 2.1; }
#view.fx-photo .adm__card { position: relative; border-radius: 22px; background: var(--fx-card); border: 1px solid var(--fx-line); box-shadow: 0 18px 50px -28px #000, inset 0 1px 0 rgba(255, 255, 255, .04); }
#view.fx-photo .adm__h2 { display: flex; align-items: center; gap: 10px; }
#view.fx-photo .adm__h2 .fx-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: rgba(255, 122, 26, .1); border: 1px solid rgba(255, 122, 26, .2); }
#view.fx-photo .adm__h2 .fx-ic svg { width: 16px; height: 16px; }
#view.fx-photo .fx-mav { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--av) center / 58% no-repeat, var(--v, var(--accent)); box-shadow: 0 4px 12px -4px var(--v, var(--accent)), inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* студия: живое сияние на фоне */
#view.fx-photo .fx-studio { overflow: hidden; padding: 22px; }
#view.fx-photo .fx-studio > :not(.fx-aur) { position: relative; }
#view.fx-photo .fx-aur { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(70px); opacity: .32; pointer-events: none; }
#view.fx-photo .fx-aur:nth-of-type(1) { left: -160px; top: -220px; background: #ff7a1a; animation: fxAur1 14s ease-in-out infinite alternate; }
#view.fx-photo .fx-aur:nth-of-type(2) { right: -180px; bottom: -260px; background: #b0367a; opacity: .22; animation: fxAur2 18s ease-in-out infinite alternate; }
#view.fx-photo.fx-pbusy .fx-aur { opacity: .5; animation-duration: 5s, 6s; }
#view.fx-photo .photo__form { gap: 14px; }
#view.fx-photo .fx-ph-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#view.fx-photo .fx-ph-tag { display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--display); }
#view.fx-photo .fx-ph-tag svg { width: 18px; height: 18px; color: var(--accent); animation: fxWand 3s ease-in-out infinite; }
#view.fx-photo .fx-cnt { font-size: 11.5px; color: #7d6b5d; }

/* поле ввода с бегущей рамкой */
#view.fx-photo .fx-ta { position: relative; border-radius: 18px; background: rgba(10, 7, 5, .7); border: 1px solid rgba(255, 160, 90, .18); transition: border-color .3s, box-shadow .3s; }
#view.fx-photo .fx-ta::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--fx-a, 0deg), transparent 0 60%, var(--accent) 80%, #ffd0a8 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; animation: fxBorder 4s linear infinite; }
#view.fx-photo .fx-ta:focus-within { border-color: rgba(255, 140, 60, .35); box-shadow: 0 0 0 4px rgba(255, 122, 26, .08); }
#view.fx-photo .fx-ta:focus-within::before, #view.fx-photo.fx-pbusy .fx-ta::before { opacity: 1; }
#view.fx-photo .fx-ta.fx-flash { animation: fxFlash .7s ease-out; }
#view.fx-photo .fx-ta textarea { display: block; width: 100%; min-height: 96px; max-height: 260px; resize: none; padding: 14px 16px; border: 0; background: none; box-shadow: none; font-size: 15.5px; line-height: 1.5; }
#view.fx-photo .fx-ta textarea:focus { outline: 0; box-shadow: none; }

/* идеи */

/* размеры, модель, кнопка */
#view.fx-photo .photo__row { align-items: center; gap: 12px; }
#view.fx-photo .cab__chips { padding: 4px; gap: 4px; display: inline-flex; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--fx-line); }
#view.fx-photo .cab__chips .chip { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; transition: background .25s, color .25s, box-shadow .25s; }
#view.fx-photo .cab__chips .chip.active { background: var(--accent); color: #140d07; box-shadow: 0 6px 18px -6px var(--fx-glow); }
#view.fx-photo .fx-shape { width: 14px; max-height: 16px; border: 1.8px solid currentColor; border-radius: 3px; opacity: .8; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-photo .fx-shape[style*="3 / 2"] { width: 17px; }
#view.fx-photo .fx-shape[style*="2 / 3"] { width: 11px; }
#view.fx-photo .chip:hover .fx-shape { transform: scale(1.15); }
#view.fx-photo .fx-cur { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 5px 12px 5px 5px; border-radius: 99px; background: rgba(0, 0, 0, .28); border: 1px solid var(--fx-line); font-size: 13px; max-width: 280px; }
#view.fx-photo .fx-cur span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view.fx-photo .fx-cur em { font-style: normal; font-size: 11.5px; padding: 2px 7px; border-radius: 99px; color: #ffd08a; background: rgba(255, 122, 26, .14); }
#view.fx-photo .fx-cur .fx-mav { width: 24px; height: 24px; border-radius: 99px; }
#view.fx-photo .fx-cur.fx-swap { animation: fxPop .4s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-photo #ph-go { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 14px; border: 0; overflow: hidden; font-weight: 700; color: #140d07; background: linear-gradient(135deg, #ffb070, var(--accent) 55%, #e85d0c); box-shadow: 0 12px 28px -10px var(--fx-glow), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .2s, box-shadow .25s, filter .25s; }
#view.fx-photo #ph-go svg { width: 18px; height: 18px; stroke-width: 2.4; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-photo #ph-go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: fxSweep 3.6s ease-in-out infinite; }
#view.fx-photo #ph-go:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px var(--fx-glow), inset 0 1px 0 rgba(255, 255, 255, .35); }
#view.fx-photo #ph-go:hover svg { transform: rotate(90deg) scale(1.1); }
#view.fx-photo #ph-go:active { transform: scale(.97); }
#view.fx-photo #ph-go:disabled { opacity: 1; cursor: progress; filter: saturate(.7) brightness(.85); }
#view.fx-photo #ph-go:disabled svg { animation: fxSpin 1.2s linear infinite; }

/* модели */
#view.fx-photo .photo__models { padding: 18px; }
#view.fx-photo .photo__models .adm__h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #bfa995; }
#view.fx-photo .photo__mlist { gap: 8px; }
#view.fx-photo .photo__model { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "a n" "a p" "a c"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 38px 12px 12px; border-radius: 16px; border-color: var(--fx-line); background: rgba(255, 255, 255, .025); animation: phIn .45s cubic-bezier(.2, .8, .2, 1) backwards; }
#view.fx-photo .photo__model .fx-mav { grid-area: a; width: 38px; height: 38px; border-radius: 12px; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-photo .photo__model:hover .fx-mav { transform: rotate(-8deg) scale(1.06); }
#view.fx-photo .photo__model b:not(.fx-mav) { grid-area: n; font-size: 14px; }
#view.fx-photo .photo__model .muted { grid-area: p; }
#view.fx-photo .photo__price { grid-area: c; justify-self: start; margin-top: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; white-space: nowrap; color: #e9b98d; background: rgba(255, 122, 26, .08); border: 1px solid rgba(255, 122, 26, .16); }
#view.fx-photo .photo__model.active { animation: phIn .45s cubic-bezier(.2, .8, .2, 1) backwards, phFlow 3s linear infinite; }
#view.fx-photo .photo__model.active .photo__price { color: #140d07; background: var(--accent); border-color: transparent; }
#view.fx-photo .photo__model.active .fx-mav { box-shadow: 0 0 0 3px rgba(255, 122, 26, .25), 0 6px 18px -6px var(--v); }

/* галерея */
#view.fx-photo .fx-gal .adm__h2 { margin-bottom: 2px; }
#view.fx-photo .fx-count:not(:empty) { padding: 2px 9px; border-radius: 99px; font-size: 12px; color: #140d07; background: var(--accent); animation: fxPop .4s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-photo .photo__grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 16px; }
#view.fx-photo .photo__item { position: relative; padding: 8px; gap: 8px; border-radius: 18px; border-color: var(--fx-line); background: rgba(255, 255, 255, .025); transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .35s; }
#view.fx-photo .photo__item:hover { transform: translateY(-4px); border-color: rgba(255, 140, 60, .35); box-shadow: 0 22px 44px -26px var(--fx-glow); }
#view.fx-photo .photo__img { position: relative; border-radius: 13px; background: radial-gradient(circle at 50% 40%, rgba(255, 122, 26, .08), rgba(0, 0, 0, .35)); }
#view.fx-photo .photo__img img { object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .4s; }
#view.fx-photo .photo__item:hover .photo__img img { transform: scale(1.06); }
#view.fx-photo .photo__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%, transparent 65%, rgba(0, 0, 0, .45)); opacity: 0; transition: opacity .3s; pointer-events: none; }
#view.fx-photo .photo__item:hover .photo__img::after { opacity: 1; }
#view.fx-photo .fx-zoom { position: absolute; z-index: 1; right: 10px; top: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: rgba(15, 10, 7, .55); border: 1px solid rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: scale(.8); transition: opacity .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-photo .fx-zoom svg { width: 16px; height: 16px; }
#view.fx-photo .photo__item:hover .fx-zoom { opacity: 1; transform: none; }
#view.fx-photo .fx-tag { position: absolute; z-index: 1; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 20px); padding: 4px 10px 4px 4px; border-radius: 99px; font-size: 12px; color: #fff; background: rgba(15, 10, 7, .6); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view.fx-photo .fx-tag .fx-mav { width: 20px; height: 20px; border-radius: 99px; }
#view.fx-photo .photo__item > .muted.small { display: none; }
#view.fx-photo .photo__item p { padding: 0 4px; font-size: 13px; line-height: 1.45; color: #cdb8a6; }
#view.fx-photo .photo__acts { gap: 6px; padding: 0 2px 2px; }
#view.fx-photo .photo__acts .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; font-size: 12.5px; border-color: var(--fx-line); background: rgba(255, 255, 255, .03); transition: background .2s, color .2s, border-color .2s, transform .2s; }
#view.fx-photo .photo__acts .chip svg { width: 14px; height: 14px; }
#view.fx-photo .photo__acts .chip:hover { transform: translateY(-1px); }
#view.fx-photo .photo__acts [data-a="dl"] { color: #140d07; background: var(--accent); border-color: transparent; font-weight: 600; }
#view.fx-photo .photo__acts [data-a="dl"]:hover { box-shadow: 0 8px 18px -8px var(--fx-glow); }
#view.fx-photo .photo__acts [data-a="again"]:hover { color: var(--accent); border-color: rgba(255, 140, 60, .4); }
#view.fx-photo .photo__acts [data-a="again"]:hover svg { animation: fxSpin .7s cubic-bezier(.2, .8, .2, 1); }
#view.fx-photo .photo__acts [data-a="del"] { margin-left: auto; padding: 7px 9px; font-size: 0; gap: 0; }
#view.fx-photo .photo__acts [data-a="del"]:hover { color: #ff6b6b; border-color: rgba(229, 72, 77, .45); background: rgba(229, 72, 77, .1); }
#view.fx-photo .photo__item.fx-first { animation: fxRise .6s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 60ms) both; }
#view.fx-photo .photo__item.fx-new { animation: fxPop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
#view.fx-photo .photo__item.fx-new img { animation: fxReveal 1.4s cubic-bezier(.2, .8, .2, 1) both; }
#view.fx-photo .photo__item.fx-new::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 2px var(--accent), 0 0 40px rgba(255, 122, 26, .5); animation: fxGlowOut 2.2s ease-out both; }

/* рисую: переливающийся холст, луч сканера, секундомер */
#view.fx-photo .photo__item--wait { border-color: rgba(255, 140, 60, .35); box-shadow: 0 20px 44px -26px var(--fx-glow); animation: fxPop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
#view.fx-photo .photo__item--wait .photo__img > span { display: none; }
#view.fx-photo .photo__item--wait p { color: #e8d5c4; }
#view.fx-photo .fx-paint { position: absolute; inset: 0; overflow: hidden; background: #140d08; }
#view.fx-photo .fx-paint > i { position: absolute; width: 70%; height: 70%; border-radius: 50%; filter: blur(34px); opacity: .85; mix-blend-mode: screen; }
#view.fx-photo .fx-paint > i:nth-child(1) { left: -10%; top: -10%; background: #ff7a1a; animation: fxBlob1 6s ease-in-out infinite alternate; }
#view.fx-photo .fx-paint > i:nth-child(2) { right: -15%; top: 20%; background: #c2367d; animation: fxBlob2 7s ease-in-out infinite alternate; }
#view.fx-photo .fx-paint > i:nth-child(3) { left: 15%; bottom: -20%; background: #ffb347; animation: fxBlob3 5s ease-in-out infinite alternate; }
#view.fx-photo .fx-paint::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.2px) 0 0 / 14px 14px; mix-blend-mode: overlay; }
#view.fx-photo .fx-scan { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(255, 220, 180, .22) 85%, rgba(255, 240, 220, .7)); border-bottom: 1px solid rgba(255, 240, 220, .8); animation: fxScan 2.6s cubic-bezier(.5, 0, .5, 1) infinite; }
#view.fx-photo .fx-pbody { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
#view.fx-photo .fx-brush { width: 54px; height: 54px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 18px; color: #140d07; background: rgba(255, 255, 255, .92); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5); animation: fxBob 1.6s ease-in-out infinite; }
#view.fx-photo .fx-brush svg { width: 26px; height: 26px; stroke-width: 2.2; animation: fxWand 1.6s ease-in-out infinite; }
#view.fx-photo .fx-pbody b { font: 700 17px var(--display); }
#view.fx-photo .fx-pbody small { font-size: 12.5px; opacity: .85; }
#view.fx-photo .fx-timer { margin-top: 8px; padding: 3px 12px; border-radius: 99px; font-size: 13px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .18); }

/* пустая галерея */
#view.fx-photo .fx-pempty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 30px 16px 26px; text-align: center; }
#view.fx-photo .fx-pempty b { font: 700 18px var(--display); }
#view.fx-photo .fx-pempty p { margin: 0; max-width: 420px; font-size: 13.5px; color: var(--muted); }
#view.fx-photo .fx-frames { position: relative; width: 150px; height: 112px; margin-bottom: 14px; }
#view.fx-photo .fx-frames > i { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 18px; border: 1px solid rgba(255, 160, 90, .25); background: rgba(255, 255, 255, .03); }
#view.fx-photo .fx-frames > i:nth-child(1) { transform: rotate(-14deg) translateX(-30px); animation: fxFanL 4s ease-in-out infinite; }
#view.fx-photo .fx-frames > i:nth-child(2) { transform: rotate(12deg) translateX(30px); animation: fxFanR 4s ease-in-out infinite; }
#view.fx-photo .fx-frames > i:nth-child(3) { display: grid; place-items: center; color: #140d07; border: 0; background: linear-gradient(135deg, #ffb070, var(--accent) 60%, #e85d0c); box-shadow: 0 16px 40px -12px var(--fx-glow); animation: fxBob 3s ease-in-out infinite; }
#view.fx-photo .fx-frames > i:nth-child(3) svg { width: 40px; height: 40px; stroke-width: 1.8; }
#view.fx-photo .fx-frames em { position: absolute; width: 8px; height: 8px; background: #ffd9b3; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: fxTwinkle 2.4s ease-in-out infinite; }
#view.fx-photo .fx-frames em:nth-of-type(1) { right: -14px; top: -10px; width: 14px; height: 14px; }
#view.fx-photo .fx-frames em:nth-of-type(2) { left: -12px; bottom: 6px; animation-delay: .8s; }
#view.fx-photo .fx-frames em:nth-of-type(3) { right: 8px; bottom: -14px; width: 10px; height: 10px; animation-delay: 1.5s; }

/* просмотр картинки */
.fx-lb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 28px; background: rgba(8, 5, 3, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: fxLbIn .3s ease both; }
.fx-lb.out { animation: fxLbOut .26s ease both; }
.fx-lb__in { position: relative; display: grid; gap: 12px; max-width: min(1100px, 100%); max-height: 100%; animation: fxLbZoom .45s cubic-bezier(.2, .8, .2, 1) both; }
.fx-lb.out .fx-lb__in { animation: fxLbZoomOut .26s ease both; }
.fx-lb__in img { display: block; max-width: 100%; max-height: calc(100vh - 160px); margin: 0 auto; border-radius: 18px; box-shadow: 0 30px 80px -20px #000, 0 0 0 1px rgba(255, 255, 255, .08); }
.fx-lb__bar { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px; background: rgba(30, 22, 16, .85); border: 1px solid rgba(255, 160, 90, .18); }
.fx-lb__bar > div { flex: 1; min-width: 0; }
.fx-lb__bar p { margin: 0; font-size: 14px; color: #f0e2d4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-lb__bar span { font-size: 12px; color: #9c8877; }
.fx-lb__bar button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; font: 600 13px var(--body, inherit); color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 160, 90, .2); cursor: pointer; transition: transform .2s, background .2s; }
.fx-lb__bar button:hover { transform: translateY(-1px); background: rgba(255, 122, 26, .14); }
.fx-lb__bar button svg { width: 16px; height: 16px; }
.fx-lb__bar .fx-lb__main { color: #140d07; background: var(--accent); border-color: transparent; }
.fx-lb__bar .fx-lb__main:hover { background: #ff8c3a; }
.fx-lb__x { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--text); background: rgba(30, 22, 16, .95); border: 1px solid rgba(255, 160, 90, .3); cursor: pointer; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .2s; }
.fx-lb__x:hover { transform: rotate(90deg); background: var(--accent); color: #140d07; }
.fx-lb__x svg { width: 18px; height: 18px; }

.fx-in #view.fx-photo .photo__wrap > div > .adm__card { animation: fxRise .6s cubic-bezier(.2, .8, .2, 1) both; }
.fx-in #view.fx-photo .photo__wrap > div > .adm__card + .adm__card { animation-delay: .1s; }
.fx-in #view.fx-photo .photo__models { animation: fxRise .6s cubic-bezier(.2, .8, .2, 1) .16s both; }
@keyframes fxPicFloat { 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes fxAur1 { to { transform: translate(260px, 120px) scale(1.2); } }
@keyframes fxAur2 { to { transform: translate(-240px, -100px) scale(.9); } }
@keyframes fxWand { 50% { transform: rotate(-14deg) scale(1.08); } }
@keyframes fxFlash { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 26, .55); } 100% { box-shadow: 0 0 0 14px rgba(255, 122, 26, 0); } }
@keyframes fxSweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes fxReveal { from { filter: blur(22px) saturate(1.6) brightness(1.3); transform: scale(1.12); clip-path: inset(0 0 100% 0); } 45% { clip-path: inset(0 0 0 0); } }
@keyframes fxGlowOut { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fxScan { 0% { top: -30%; } 100% { top: 100%; } }
@keyframes fxBlob1 { to { transform: translate(40%, 30%) scale(1.3); } }
@keyframes fxBlob2 { to { transform: translate(-45%, 25%) scale(.8); } }
@keyframes fxBlob3 { to { transform: translate(30%, -40%) scale(1.2); } }
@keyframes fxFanL { 50% { transform: rotate(-20deg) translateX(-38px); } }
@keyframes fxFanR { 50% { transform: rotate(18deg) translateX(38px); } }
@keyframes fxTwinkle { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes fxLbIn { from { opacity: 0; } }
@keyframes fxLbOut { to { opacity: 0; } }
@keyframes fxLbZoom { from { opacity: 0; transform: scale(.92) translateY(14px); } }
@keyframes fxLbZoomOut { to { opacity: 0; transform: scale(.95); } }
@media (max-width: 1000px) { #view.fx-photo .photo__models { position: static; } }
@media (max-width: 640px) {
  #view.fx-photo .fx-studio { padding: 16px; }
  #view.fx-photo .fx-cur { display: none; }
  #view.fx-photo #ph-go { width: 100%; justify-content: center; }
  #view.fx-photo .photo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #view.fx-photo .photo__acts .chip { font-size: 0; gap: 0; padding: 8px; }
  .fx-lb { padding: 14px; }
  .fx-lb__bar { flex-wrap: wrap; }
  .fx-lb__x { top: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #view.fx-photo *, #view.fx-photo *::before, #view.fx-photo *::after, .fx-lb, .fx-lb * { animation: none !important; transition: none !important; }
}

/* ===== API-ключи ===== */
#view.fx-keys { --fx-card: linear-gradient(160deg, rgba(36, 26, 18, .82), rgba(18, 14, 11, .72)); --fx-line: rgba(255, 160, 90, .13); --fx-glow: rgba(255, 122, 26, .38); }
#view.fx-keys .cab__title { display: flex; align-items: center; gap: 12px; }
#view.fx-keys .fx-kpic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #140d07; background: linear-gradient(135deg, #ffb070, var(--accent) 60%, #e85d0c); box-shadow: 0 10px 26px -8px var(--fx-glow); animation: fxKeyTurn 4s ease-in-out infinite; }
#view.fx-keys .fx-kpic svg { width: 22px; height: 22px; }
#view.fx-keys .adm__card { position: relative; border-radius: 22px; background: var(--fx-card); border: 1px solid var(--fx-line); box-shadow: 0 18px 50px -28px #000, inset 0 1px 0 rgba(255, 255, 255, .04); }
#view.fx-keys .adm__h2 { display: flex; align-items: center; gap: 10px; }
#view.fx-keys .fx-kic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: rgba(255, 122, 26, .1); border: 1px solid rgba(255, 140, 60, .25); }
#view.fx-keys .fx-kic svg { width: 17px; height: 17px; }
#view.fx-keys .fx-count:not(:empty) { margin-left: auto; padding: 2px 10px; border-radius: 99px; font-size: 12px; color: var(--accent); background: rgba(255, 122, 26, .1); border: 1px solid rgba(255, 140, 60, .25); }
#view.fx-keys .cab__form button[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; background: linear-gradient(135deg, #ffb070, var(--accent) 55%, #e85d0c); color: #140d07; border: 0; box-shadow: 0 10px 26px -10px var(--fx-glow); transition: transform .2s, box-shadow .2s, filter .2s; }
#view.fx-keys .cab__form button[type=submit] svg { width: 17px; height: 17px; }
#view.fx-keys .cab__form button[type=submit]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: fxSweep 3.6s ease-in-out infinite; }
#view.fx-keys .cab__form button[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px var(--fx-glow); }
#view.fx-keys .cab__form button[type=submit]:disabled { filter: saturate(.4) brightness(.8); transform: none; }
#view.fx-keys .cab__form button[type=submit]:disabled svg { animation: fxSpin 1s linear infinite; }
#view.fx-keys .auth__input { transition: border-color .2s, box-shadow .2s; }
#view.fx-keys .auth__input:focus { border-color: rgba(255, 140, 60, .55); box-shadow: 0 0 0 4px rgba(255, 122, 26, .12); }

/* готовый ключ — витрина */
#view.fx-keys .fx-redeem { overflow: hidden; border-color: rgba(255, 140, 60, .3); background: radial-gradient(120% 140% at 0% 0%, rgba(255, 122, 26, .16), transparent 55%), var(--fx-card); }
#view.fx-keys .fx-redeem > *:not(.fx-aur):not(.fx-conf) { position: relative; z-index: 1; }
#view.fx-keys .fx-redeem .fx-aur { position: absolute; z-index: 0; width: 260px; height: 260px; border-radius: 50%; filter: blur(60px); opacity: .35; pointer-events: none; background: var(--accent); top: -120px; right: -60px; animation: fxAur1 12s ease-in-out infinite alternate; }
#view.fx-keys .fx-redeem .fx-aur + .fx-aur { background: #ff4f8b; opacity: .16; top: auto; bottom: -140px; right: auto; left: -40px; animation: fxAur2 14s ease-in-out infinite alternate; }
#view.fx-keys .fx-redeem .fx-kic { color: #140d07; background: linear-gradient(135deg, #ffb070, var(--accent)); border: 0; animation: fxGift 3.2s ease-in-out infinite; }
#view.fx-keys .fx-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
#view.fx-keys .fx-steps span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; font-size: 13px; color: #e6d3c2; background: rgba(0, 0, 0, .25); border: 1px solid var(--fx-line); animation: fxRise .5s calc(var(--i) * .08s) cubic-bezier(.2, .8, .2, 1) both; }
#view.fx-keys .fx-steps b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: rgba(255, 122, 26, .12); }
#view.fx-keys .fx-steps b svg { width: 14px; height: 14px; }
#view.fx-keys .fx-steps em { width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 140, 60, .1), rgba(255, 140, 60, .6), rgba(255, 140, 60, .1)); background-size: 200% 100%; animation: fxKFlow 1.6s linear infinite; }
#view.fx-keys .fx-kin { position: relative; display: flex; align-items: center; border-radius: 14px; }
#view.fx-keys .fx-kin::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--fx-a, 0deg), transparent 0 60%, var(--accent) 80%, #ffd0a8 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fxBorder 4s linear infinite; opacity: .8; }
#view.fx-keys .fx-kin .auth__input { flex: 1; min-width: 0; padding-right: 48px; font-family: var(--mono); letter-spacing: .02em; }
#view.fx-keys .fx-paste { position: absolute; right: 6px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--fx-line); color: #d8c4b2; background: rgba(255, 255, 255, .04); cursor: pointer; transition: color .2s, background .2s, transform .2s; }
#view.fx-keys .fx-paste:hover { color: var(--accent); background: rgba(255, 122, 26, .1); transform: scale(1.06); }
#view.fx-keys .fx-paste svg { width: 17px; height: 17px; }
#view.fx-keys #kbal:not([hidden]) { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 16px 6px 6px; border-radius: 99px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 140, 60, .3); animation: fxPop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
#view.fx-keys #kbal b { font: 700 16px var(--mono); color: var(--accent); }
#view.fx-keys .fx-win { animation: fxWin .9s cubic-bezier(.2, .8, .2, 1); }
#view.fx-keys .fx-win #kbal b { display: inline-block; animation: fxPop .6s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-keys .fx-conf { position: absolute; z-index: 2; left: 50%; top: 55%; pointer-events: none; }
#view.fx-keys .fx-conf i { position: absolute; width: 7px; height: 11px; border-radius: 2px; background: hsl(calc(var(--h) * 1deg), 100%, 62%); animation: fxConf 1.2s cubic-bezier(.15, .7, .3, 1) forwards; }

/* новый ключ */
#view.fx-keys #knew .cab__keybox { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(60, 200, 120, .07); border: 1px solid rgba(80, 220, 140, .35); animation: fxKeyNew .6s cubic-bezier(.34, 1.56, .64, 1) both; }
#view.fx-keys #knew .cab__keybox::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%); transform: translateX(-120%); animation: fxSweep 2.4s .4s ease-in-out 2; }
#view.fx-keys #knew .fx-kic { color: #0d2416; background: #4ade80; border: 0; }
#view.fx-keys #knew code { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#view.fx-keys #kcopy { display: inline-flex; align-items: center; gap: 6px; }
#view.fx-keys #kcopy svg { width: 15px; height: 15px; }

/* список ключей */
#view.fx-keys .fx-klist .cab__table { border-collapse: separate; border-spacing: 0 8px; }
#view.fx-keys .fx-klist thead th { border: 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #9c8877; }
#view.fx-keys .fx-klist tbody tr { animation: fxRise .45s calc(var(--i, 0) * .05s) cubic-bezier(.2, .8, .2, 1) both; }
#view.fx-keys .fx-klist tbody td { border: 0; background: rgba(255, 255, 255, .025); border-top: 1px solid var(--fx-line); border-bottom: 1px solid var(--fx-line); transition: background .2s; }
#view.fx-keys .fx-klist tbody td:first-child { border-left: 1px solid var(--fx-line); border-radius: 14px 0 0 14px; }
#view.fx-keys .fx-klist tbody td:last-child { border-right: 1px solid var(--fx-line); border-radius: 0 14px 14px 0; }
#view.fx-keys .fx-klist tbody tr:hover td { background: rgba(255, 122, 26, .06); }
#view.fx-keys .fx-klist td:first-child, #view.fx-keys .fx-klist td.mono { white-space: nowrap; }
#view.fx-keys .fx-kav { display: inline-grid; place-items: center; vertical-align: middle; width: 30px; height: 30px; margin-right: 10px; border-radius: 10px; color: hsl(var(--h), 90%, 70%); background: hsla(var(--h), 90%, 60%, .12); border: 1px solid hsla(var(--h), 90%, 60%, .3); }
#view.fx-keys .fx-kav svg { width: 16px; height: 16px; }
#view.fx-keys .fx-klist .cab__tag.ok { display: inline-flex; align-items: center; gap: 6px; }
#view.fx-keys .fx-klist .cab__tag.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: fxDot 2s ease-out infinite; }
#view.fx-keys .fx-klist .acts { white-space: nowrap; }
#view.fx-keys .fx-klist .acts .chip { display: inline-flex; align-items: center; gap: 6px; transition: transform .2s, color .2s, background .2s, border-color .2s; }
#view.fx-keys .fx-klist .acts .chip:hover { transform: translateY(-2px); }
#view.fx-keys .fx-klist .acts svg { width: 15px; height: 15px; flex: none; }
#view.fx-keys .fx-copy svg + svg { display: none; }
#view.fx-keys .fx-copy.fx-done { color: #4ade80; border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .1); }
#view.fx-keys .fx-copy.fx-done svg:first-child { display: none; }
#view.fx-keys .fx-copy.fx-done svg + svg { display: block; animation: fxPop .4s cubic-bezier(.34, 1.56, .64, 1); }
#view.fx-keys .fx-on { color: #4ade80; }
#view.fx-keys .fx-off:hover { color: #fbbf24; }
#view.fx-keys .fx-del { font-size: 0; gap: 0 !important; padding-left: 9px; padding-right: 9px; }
#view.fx-keys .fx-del:hover { color: #f87171; border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .1); }
#view.fx-keys .fx-klist .cab__empty { padding: 28px 16px; text-align: center; border-radius: 16px; border: 1px dashed rgba(255, 140, 60, .3); background: rgba(255, 122, 26, .03); }

@media (max-width: 640px) {
  #view.fx-keys .fx-steps em { display: none; }
  #view.fx-keys .fx-kpic { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  #view.fx-keys *, #view.fx-keys *::before, #view.fx-keys *::after { animation: none !important; }
}

@keyframes fxKeyTurn { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-18deg); } 86% { transform: rotate(10deg); } }
@keyframes fxGift { 0%, 80%, 100% { transform: none; } 85% { transform: translateY(-3px) rotate(-8deg); } 90% { transform: translateY(-3px) rotate(8deg); } 95% { transform: none; } }
@keyframes fxWin { 30% { box-shadow: 0 0 0 2px rgba(255, 140, 60, .6), 0 20px 60px -10px var(--fx-glow); transform: scale(1.01); } }
@keyframes fxConf { from { transform: rotate(var(--a)) translateY(0) rotate(0); opacity: 1; } to { transform: rotate(var(--a)) translateY(calc(var(--d) * -1.6)) rotate(540deg); opacity: 0; } }
@keyframes fxKeyNew { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes fxDot { 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
@keyframes fxKFlow { to { background-position: -200% 0; } }

/* исходное фото в генерации */
#view .photo__src { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
#view .photo__src [hidden] { display: none !important; }
#view .photo__srcbox { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 14px; border: 1px solid rgba(255, 140, 60, .28); background: rgba(255, 122, 26, .07); }
#view .photo__srcbox img { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; display: block; }
#view .photo__srchint { opacity: .8; }

/* голос в чате: микрофон и голосовой диалог */
#view.fx-chat .chat__mic, #view.fx-chat .chat__voice { color: var(--muted); border: 0; background: rgba(255, 255, 255, .05); transition: color .2s, background .2s, box-shadow .2s; }
#view.fx-chat .chat__mic:hover, #view.fx-chat .chat__voice:hover { color: var(--accent); background: rgba(255, 122, 26, .12); }
#view.fx-chat .chat__form.is-voice .chat__voice { color: #140d07; background: linear-gradient(135deg, #ffb070, var(--accent)); box-shadow: 0 0 0 3px rgba(255, 122, 26, .2); }
#view.fx-chat .chat__form.is-listen .chat__mic { color: #fff; background: #e5484d; animation: fxMic 1.2s ease-out infinite; }
@keyframes fxMic { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 100% { box-shadow: 0 0 0 12px rgba(229, 72, 77, 0); } }
.chat__doc i + i { margin-left: 6px; }