/* ===================== Живой дизайн: тёплый фон, цвет, движение =====================
   Вместо «серого офиса»: мягкие янтарные пятна на фоне, цветные KPI (каждая — свой акцент), карточки «всплывают» по очереди,
   заголовок страницы с фирменным градиентом, кнопки с «волной» от пальца, активная вкладка — с подсветкой, статусы — цветные.
   Уважает «уменьшить движение» в системе: анимации тогда выключаются. */
body{background:
  radial-gradient(1200px 600px at 110% -10%,rgba(243,146,8,.10),transparent 60%),
  radial-gradient(900px 500px at -10% 110%,rgba(204,118,40,.08),transparent 60%),
  var(--bg);background-attachment:fixed}
html[data-theme=dark] body{background:radial-gradient(1200px 600px at 110% -10%,rgba(243,146,8,.12),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(204,118,40,.10),transparent 60%),var(--bg)}

/* заголовок страницы — фирменный градиент на первой строке */
main>h1:first-of-type{background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 55%,var(--accent-d) 100%);-webkit-background-clip:text;background-clip:text}
main>h1:first-of-type>*{-webkit-text-fill-color:initial}
main>h1:first-of-type{-webkit-text-fill-color:transparent}
main>h1:first-of-type .btn,main>h1:first-of-type .tag,main>h1:first-of-type a,main>h1:first-of-type span,main>h1:first-of-type select{-webkit-text-fill-color:currentColor}

/* KPI — цветные полосы и мягкое свечение по очереди */
.kpi::before{opacity:1;left:0;right:auto;top:0;bottom:0;width:4px;height:auto;border-radius:0}
.kpis .kpi:nth-child(5n+1)::before{background:linear-gradient(#f39208,#cc7628)}
.kpis .kpi:nth-child(5n+2)::before{background:linear-gradient(#34c759,#1a8f4c)}
.kpis .kpi:nth-child(5n+3)::before{background:linear-gradient(#5aa9ff,#0a6fe0)}
.kpis .kpi:nth-child(5n+4)::before{background:linear-gradient(#bf7bff,#8e44d6)}
.kpis .kpi:nth-child(5n+5)::before{background:linear-gradient(#ff7a7f,#e0383e)}
.kpi{background:linear-gradient(180deg,var(--panel),var(--panel2))}
.kpi .v{background:linear-gradient(90deg,var(--ink),var(--ink2));-webkit-background-clip:text;background-clip:text}

/* карточки и строки — появляются по очереди */
.fx-in{animation:fxUp .5s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes fxUp{from{opacity:0;transform:translateY(14px) scale(.985)}}
.card,.kpi,.pc,.doc-row,.list-row{transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .2s,border-color .2s}
.card:hover{box-shadow:var(--sh-h)}
.list-row:hover{background:var(--hover)}
tr.click{transition:background .15s}
tr.click:hover td{background:var(--accent-s)}

/* кнопки: «волна» от нажатия, главная — переливается */
.btn{position:relative;overflow:hidden}
.btn .rip{position:absolute;border-radius:50%;transform:scale(0);background:currentColor;opacity:.22;pointer-events:none;animation:rip .55s ease-out forwards}
@keyframes rip{to{transform:scale(2.6);opacity:0}}
.btn.primary{background-size:200% 100%;background-image:linear-gradient(100deg,#cc7628 0%,#e0861a 30%,#f39208 50%,#e0861a 70%,#cc7628 100%);animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-200% 0}}

/* статусы и теги — цветнее */
.tag{transition:transform .2s var(--spring)}
.tag:hover{transform:scale(1.05)}

/* меню слева — активный пункт «дышит» */
nav a.on{animation:glow 3s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 8px 26px rgba(224,134,26,.5)}}

/* нижние вкладки на телефоне — подсветка активной */
#tabbar a{position:relative;transition:color .2s}
#tabbar a.on::before{content:'';position:absolute;top:2px;width:44px;height:30px;border-radius:15px;background:var(--accent-s);z-index:-1;animation:pill .35s var(--spring)}
#tabbar a.on svg.i{transform:translateY(-1px)}
@keyframes pill{from{transform:scale(.4);opacity:0}}

/* окна, загрузка, пустые состояния */
.empty{animation:fxUp .5s var(--ease) both}
.skel{background:linear-gradient(90deg,rgba(118,118,128,.08) 25%,rgba(118,118,128,.18) 37%,rgba(118,118,128,.08) 63%);background-size:400% 100%;animation:skel 1.3s ease infinite;border-radius:10px;min-height:14px}
@keyframes skel{to{background-position:-100% 0}}
#toasts>*{animation:pop .35s var(--spring)}

@media (prefers-reduced-motion:reduce){ .fx-in,.btn.primary,nav a.on,#tabbar a.on::before{animation:none!important} }

/* всплывающая карточка «кто звонит» */
#callpop{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:8px;max-width:380px;width:calc(100vw - 24px)}
.callcard{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#2f2f2f,#4a3a2a);color:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 18px 50px rgba(0,0,0,.35);animation:pop .35s var(--spring)}
.callcard .small{color:#f5d9b8} .callcard b{color:#fff}
.cc-ic{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:20px;flex-shrink:0}
.callcard.ring .cc-ic{animation:ring 1s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-15deg)}40%{transform:rotate(15deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(10deg)}}
@media (max-width:860px){#callpop{right:12px;left:12px;width:auto;bottom:auto;top:calc(env(safe-area-inset-top) + 60px)}}

/* просмотр планировки на весь экран */
.pv-bg{position:fixed;inset:0;z-index:90;background:rgba(18,18,20,.94);display:flex;flex-direction:column;animation:fade .2s}
.pv-top{display:flex;align-items:flex-start;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 16px 10px;color:#fff}
.pv-t{flex:1;min-width:0} .pv-t .small{color:#e7c9a5}
.pv-x{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:24px;cursor:pointer;flex-shrink:0}
.pv-body{flex:1;overflow:auto;padding:8px 12px;display:flex;flex-direction:column;gap:12px;align-items:center;touch-action:pan-x pan-y pinch-zoom}
.pv-body img{max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;background:#fff;border-radius:10px;animation:pop .3s var(--spring);cursor:zoom-in}
.pv-body img.zoom{max-width:none;max-height:none;width:200%;cursor:zoom-out}
.pv-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:10px 16px calc(env(safe-area-inset-bottom) + 14px)}
.pv-bar .btn{min-width:180px}

/* отменить / вернуть в проекте */
#undobar{position:fixed;left:276px;bottom:84px;z-index:44;display:flex;gap:4px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:22px;padding:4px;box-shadow:var(--sh-h);animation:pop .3s var(--spring)}
#undobar button{border:0;background:transparent;color:var(--ink);font:650 13px var(--font);padding:7px 12px;border-radius:18px;cursor:pointer;display:flex;gap:4px;align-items:center}
#undobar button:hover:not(:disabled){background:var(--accent-s);color:var(--accent-d)}
#undobar button:disabled{opacity:.35;cursor:default}
#undobar i{font-style:normal;font-size:11px;background:var(--accent);color:#fff;border-radius:9px;padding:0 6px}
@media (max-width:860px){#undobar{left:12px;bottom:calc(env(safe-area-inset-bottom) + 132px)} #undobar button span{display:none} #undobar button{font-size:17px;padding:8px 14px}}