/* u47 loading.css — первый маленький CSS: база, экран загрузки (.ld), знак и фон (.ta-logo3d/.ta-bg3d), скелет.
   Подключается сразу после tokens.css; остальной CSS (components, styles, frame-v4) — после. Только копии правил из
   design/components.css и блока loading.css в styles.css (дубли безвредны: те же правила). Без inline (CSP). */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);
  font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
.ta-logo3d{position:relative;display:inline-block;flex:none;width:168px;height:168px;pointer-events:none}
.ta-logo3d--xl{width:240px;height:240px}
.ta-logo3d--header{width:32px;height:32px;margin-right:-2px}
.ta-logo3d-cv,.ta-bg3d-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ta-logo3d>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ta-logo3d.is-live>img{display:none}                       /* запасная картинка — пока нет canvas */
.ta-bg3d{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 38% at 50% 36%,rgb(43 212 127 / .16),transparent 70%),
    radial-gradient(50% 40% at 85% 8%,rgb(76 141 255 / .12),transparent 70%),
    radial-gradient(60% 50% at 8% 92%,rgb(43 212 127 / .07),transparent 70%),
    linear-gradient(180deg,#0B1016 0%,#070A0E 100%)}
.ta-bg3d::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgb(0 0 0 / .45))}   /* виньетка */
/* ---------- Скелетон ---------- */
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r-sm)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgb(230 237 243 / .06),transparent);animation:shimmer 1.4s infinite}
.skel-line{height:12px;border-radius:6px} .skel-line.lg{height:16px} .skel-line.xl{height:28px;border-radius:8px}
.skel-circle{width:40px;height:40px;border-radius:50%} .skel-tile{width:40px;height:40px;border-radius:var(--r-md)}
@keyframes shimmer{to{transform:translateX(100%)}}
/* ранний облегчённый фон: класс на <html> ставит early.js до первой отрисовки (app.js потом ставит его и на <body>) */
html.ta-bg-lite body.ta-bg-grad::before{background:radial-gradient(120% 50% at 50% -12%,rgb(var(--glow-green) / var(--bg-grad-i-lite)),transparent 64%) var(--bg)}
html.ta-bg-lite .skel::after{animation:none}
/* экран загрузки (= design/loading.css, как в начале styles.css) */
/* «Команда» — загрузочный экран v2: объёмная монета «$» (CSS 3D) + полоса прогресса 0→100 %. Требует tokens.css.
   Без внешних файлов и картинок; CSP-safe (отдельный файл, без inline-стилей). Проценты и этапы — loading.js (window.TeamLoading).
   3D: .ld-coin с transform-style: preserve-3d — лицевая и обратная стороны (translateZ ±4px) + 13 слоёв-дисков ребра между ними + полоса .ld-rim (ребро при повороте на 90°)
   (толщина 8 px видна, когда монета повёрнута ребром), блик проходит по граням, тень под монетой сжимается в такт повороту.
   prefers-reduced-motion — монета статична (повёрнута на −28°, объём виден), полоса без анимации, проценты обновляются. */
.ld{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4,16px);
  background:radial-gradient(120% 60% at 50% 38%,rgb(76 141 255 / .08),transparent 60%),var(--bg,#0E1116);color:var(--text-2,#9AA7B4);
  padding:env(safe-area-inset-top) 24px env(safe-area-inset-bottom);transition:opacity .28s ease}
.ld[hidden]{display:none}
.ld.ld-out{opacity:0;pointer-events:none}
.ld-stage{position:relative;width:112px;height:132px;perspective:520px;display:grid;justify-items:center}
.ld-coin{position:relative;width:96px;height:96px;margin-top:4px;transform-style:preserve-3d;animation:ld-spin 2.4s linear infinite;will-change:transform}
.ld-coin>*{position:absolute;inset:0;border-radius:50%}
/* ребро: слои-диски одинакового радиуса, металлический градиент */
.ld-layer,.ld-edge{background:linear-gradient(90deg,#2a5bb3,var(--accent-press,#3A72D6) 45%,#7aa6ff 52%,var(--accent-press,#3A72D6) 60%,#2a5bb3)}
.ld-coin>i.ld-layer:nth-of-type(1){transform:translateZ(-4.00px)}
.ld-coin>i.ld-layer:nth-of-type(2){transform:translateZ(-3.33px)}
.ld-coin>i.ld-layer:nth-of-type(3){transform:translateZ(-2.67px)}
.ld-coin>i.ld-layer:nth-of-type(4){transform:translateZ(-2.00px)}
.ld-coin>i.ld-layer:nth-of-type(5){transform:translateZ(-1.33px)}
.ld-coin>i.ld-layer:nth-of-type(6){transform:translateZ(-0.67px)}
.ld-coin>i.ld-layer:nth-of-type(7){transform:translateZ(0.00px)}
.ld-coin>i.ld-layer:nth-of-type(8){transform:translateZ(0.67px)}
.ld-coin>i.ld-layer:nth-of-type(9){transform:translateZ(1.33px)}
.ld-coin>i.ld-layer:nth-of-type(10){transform:translateZ(2.00px)}
.ld-coin>i.ld-layer:nth-of-type(11){transform:translateZ(2.67px)}
.ld-coin>i.ld-layer:nth-of-type(12){transform:translateZ(3.33px)}
.ld-coin>i.ld-layer:nth-of-type(13){transform:translateZ(4.00px)}
.ld-edge{transform:translateZ(0)}
.ld-coin>.ld-rim{inset:0 auto;left:calc(50% - 4px);width:8px;border-radius:4px;transform:rotateY(90deg);
  background:linear-gradient(180deg,#2a5bb3,#7aa6ff 30%,var(--accent-press,#3A72D6) 55%,#2a5bb3)}   /* ребро «ребром»: при 90° закрывает зазоры между слоями */
.ld-face{display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  background:radial-gradient(circle at 34% 28%,#8fb6ff 0%,var(--accent,#4C8DFF) 38%,var(--accent-press,#3A72D6) 78%,#2a5bb3 100%);
  box-shadow:inset 0 0 0 3px rgb(255 255 255 / .22),inset 0 0 0 9px rgb(14 17 22 / .18),inset 0 0 0 10px rgb(255 255 255 / .18),inset 0 -6px 14px rgb(14 17 22 / .35);
  color:#FFFFFF;font:800 52px/1 var(--font-sans,system-ui,sans-serif)}
.ld-face.front{transform:translateZ(4px)}
.ld-face.back{transform:rotateY(180deg) translateZ(4px)}
.ld-face::after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 38%,rgb(255 255 255 / .38) 48%,transparent 58%);
  transform:translateX(-60%);animation:ld-shine 2.4s linear infinite}
.ld-sym{position:relative;text-shadow:0 1px 0 rgb(255 255 255 / .35),0 -1px 0 rgb(14 17 22 / .45),0 3px 6px rgb(14 17 22 / .35)}   /* тиснение */
.ld-shadow{position:absolute;bottom:0;left:50%;width:80px;height:12px;margin-left:-40px;border-radius:50%;
  background:radial-gradient(closest-side,rgb(0 0 0 / .55),transparent);animation:ld-shadow 1.2s linear infinite}
.ld-label{margin:0;display:flex;gap:6px;align-items:baseline;font:500 var(--fs-body,15px)/var(--lh-body,22px) var(--font-sans,system-ui,sans-serif);color:var(--text,#E6EDF3)}
.ld-pct{min-width:4ch;font-variant-numeric:tabular-nums;font-weight:600}
.ld-bar{position:relative;width:min(240px,70vw);height:6px;border-radius:999px;background:var(--surface-2,#1F2630);overflow:hidden;box-shadow:inset 0 0 0 1px var(--border,#2A323D)}
.ld-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent-press,#3A72D6),var(--accent,#4C8DFF));
  transform-origin:left center;transform:scaleX(var(--ld-p,0));transition:transform .25s ease-out}
.ld-step{margin:0;min-height:18px;font:400 var(--fs-caption,13px)/var(--lh-caption,18px) var(--font-sans,system-ui,sans-serif);color:var(--text-2,#9AA7B4)}
@keyframes ld-spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes ld-shine{0%,8%{transform:translateX(-60%)}42%,100%{transform:translateX(60%)}}
@keyframes ld-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.42);opacity:.7}}   /* 1,2 с = пол-оборота: ребром тень уже */
@media (prefers-reduced-motion:reduce){
  .ld-coin{animation:none;transform:rotateY(-28deg)}
  .ld-face::after,.ld-shadow{animation:none}
  .ld-fill{transition:none}
}
.no-anim .ld-coin{animation:none;transform:rotateY(-28deg)}   /* только для скриншотов (?shot=1) */
.no-anim .ld-face::after,.no-anim .ld-shadow{animation:none}
.no-anim .ld-fill{transition:none}
/* v3: 3D-знак «$» + фон (.ta-bg3d / .ta-logo3d из components.css, рисует logo3d.js). Старые классы монеты .ld-coin оставлены для совместимости. */
.ld{overflow:hidden}
.ld>.ta-bg3d{position:absolute;inset:0}
.ld>*:not(.ta-bg3d){position:relative;z-index:1}
.ld-stage.ld-stage-3d{width:180px;height:180px;perspective:none;display:grid;place-items:center;margin-bottom:-4px}
.ld-fill{background:linear-gradient(90deg,#14a65c,var(--brand,#2BD47F))}
.ld-bar{background:rgb(255 255 255 / .06)}