/* Равно — общая основа: цвета, шрифты, логотип, кнопки и поля.
   Две ноги связки — два цвета: лёд (покупка, лонг, спот) и сирень (продажа, шорт).
   Мята — деньги, которые остаются вам. Коралл — убыток. Янтарь — внимание. */
:root{
  --bg:#0C1215; --head:#0F171B; --surface:#121B20; --surface2:#18242A; --surface3:#1E2C33;
  --line:#1F2D34; --line2:#2B3C44;
  --text:#E6EEF0; --muted:#8597A0; --faint:#56676F;
  --ice:#7CC7F5; --ice-d:#15303F; --lilac:#B39DFF; --lilac-d:#272246;
  --mint:#5CE0AC; --mint-d:#12352A; --coral:#FF7A6B; --coral-d:#3A1E1C; --amber:#F2B84B; --amber-d:#3A2E14;
  /* старые имена — чтобы все правила интерфейса взяли новую палитру */
  --iris:var(--ice); --iris-d:var(--ice-d); --jade:var(--mint); --jade-d:var(--mint-d);
  --rose:var(--coral); --rose-d:var(--coral-d); --sodium:var(--amber); --sodium-d:var(--amber-d); --rail:var(--head);
  --ui:"Onest", "Segoe UI", system-ui, sans-serif;
  --display:"Tektur", "Onest", system-ui, sans-serif;
  --r-s:7px; --r-m:11px; --r-l:18px;
  --ease:cubic-bezier(.2,.75,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--ui);font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px;border-radius:4px}
::selection{background:var(--ice-d);color:var(--text)}

/* ---------- логотип: две ноги связки сходятся в «=», между ними капает фандинг ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo svg{flex:none;overflow:visible}
.logo .word{font:600 21px/1 var(--display);letter-spacing:.06em;text-transform:lowercase}
.logo .lt,.logo .lb{transform-box:fill-box;transform-origin:center}
.logo .lt{animation:logoL 1.1s var(--ease) both}
.logo .lb{animation:logoR 1.1s var(--ease) both}
.logo .ld{transform-box:fill-box;transform-origin:center;animation:logoDrop 5.5s 1.1s ease-in infinite}
.logo .lg{opacity:0;animation:logoGlow 5.5s 1.1s ease-out infinite}
.logo.tick .lg{animation:logoTick .7s ease-out}
@keyframes logoL{0%{transform:translateX(-42%);opacity:0}55%{opacity:1}80%{transform:translateX(3%)}100%{transform:none}}
@keyframes logoR{0%{transform:translateX(42%);opacity:0}55%{opacity:1}80%{transform:translateX(-3%)}100%{transform:none}}
@keyframes logoDrop{0%{transform:translateY(-12px) scale(.5);opacity:0}8%{opacity:1}22%{transform:translateY(0) scale(1);opacity:1}30%{transform:translateY(0) scale(1.35);opacity:0}100%{opacity:0}}
@keyframes logoGlow{0%,21%{opacity:0}26%{opacity:.9}45%,100%{opacity:0}}
@keyframes logoTick{0%{opacity:.9}100%{opacity:0}}

/* ---------- кнопки и поля ---------- */
.btn{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--r-s);background:var(--ice);color:#06202E;font-weight:600;transition:filter .12s,transform .1s,background-color .15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line2)}
.btn.ghost:hover{color:var(--text);border-color:var(--faint)}
.btn.danger{background:var(--coral);color:#2A0E0B}
.btn.sm{height:30px;padding:0 12px;font-size:13px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.field input{all:unset;box-sizing:border-box;height:44px;padding:0 14px;border-radius:var(--r-s);background:var(--bg);border:1px solid var(--line2);color:var(--text);font-size:15px;transition:border-color .15s,box-shadow .15s}
.field input:focus{border-color:var(--ice);box-shadow:0 0 0 3px var(--ice-d)}
.field input::placeholder{color:var(--faint)}
.pos{color:var(--mint)} .neg{color:var(--coral)} .mut{color:var(--muted)} .warn{color:var(--amber)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}