/* Motion Studio — общий стиль облачной студии (вход, кабинет, нарезка). Оформление по образцу Holden Academy:
   почти чёрный фон с синим свечением, шрифт Geist, поля и карточки со скруглением, кнопки-таблетки. Акцент — #333EBD. */
:root {
  --ground: #050505;
  --surface: #0B0B0B;
  --surface-2: #121212;
  --surface-3: #1B1B1B;
  --line-soft: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .12);
  --ink: #F4F4F4;
  --ink-2: #A3A3A3;
  --ink-3: #737373;
  --brand: #333EBD;
  --brand-ink: #6570EE;              /* тот же синий, светлее — для текста на чёрном */
  --brand-soft: rgba(51, 62, 189, .24);
  --pill: #ECECEC;
  --pill-ink: #0B0B0B;
  --danger: #F2555A;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow-card: 0 18px 40px -24px rgba(0, 0, 0, .9);
  --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, .9);
  --card-glow: rgba(51, 62, 189, .07);
  --card-edge: rgba(101, 112, 238, .16);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

/* знак: уголки рамки и буква M; надпись: Motion — белым, Studio — синим */
.ms-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-radius: 8px; }
.ms-logo svg { width: 34px; height: 34px; flex: none; display: block; }
.ms-word { font: 600 18px/1 var(--font); letter-spacing: -.03em; white-space: nowrap; }
.ms-word span { color: var(--brand-ink); }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1.1rem; border: 0; border-radius: 999px;
  font: 600 .875rem/1 var(--font); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: transform .16s var(--ease), background-color .16s, color .16s, box-shadow .16s, opacity .16s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-primary { background: var(--pill); color: var(--pill-ink); }
.btn-primary:hover { box-shadow: 0 0 0 4px var(--line-strong); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { box-shadow: 0 0 0 4px var(--brand-soft); }
.btn-ghost { background: linear-gradient(180deg, var(--card-glow), transparent 70%), var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 var(--card-edge); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--surface-3); color: var(--ink); }
.btn-danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px rgba(242, 85, 90, .4); }
.btn-danger:hover { background: rgba(242, 85, 90, .1); }
.btn-lg { height: 3rem; padding: 0 1.4rem; font-size: .95rem; }
.icon-btn { width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color .16s, color .16s; }
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn svg { display: block; }

/* поля */
.field { width: 100%; height: 3rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface-2); color: var(--ink);
  font: 400 1rem var(--font); outline: none; transition: border-color .16s, box-shadow .16s; }
.field::placeholder { color: var(--ink-3); }
.field:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.field:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px var(--surface-2) inset; caret-color: var(--ink); }
textarea.field { height: auto; min-height: 8rem; padding: .8rem 1rem; line-height: 1.5; resize: vertical; }

/* карточки и метки */
.card-ms { background: radial-gradient(90% 70% at 18% 0%, var(--card-glow), transparent 65%), var(--surface-2); border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--card-edge), inset 0 0 0 1px var(--line-soft), var(--shadow-card); }
.chip { display: inline-flex; align-items: center; gap: .35rem; height: 1.6rem; padding: 0 .65rem; border-radius: 999px; background: var(--surface-3);
  color: var(--ink-2); font: 500 .75rem/1 var(--font); white-space: nowrap; }
.chip-brand { background: var(--brand-soft); color: #C9CDFF; }

.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ms-spin .8s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }
@keyframes ms-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ms-from-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes ms-from-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
::selection { background: rgba(101, 112, 238, .35); }