/* login.css — вход (login.html).

   Слева — форма и больше ничего. Справа — тёмная панель с настоящим фрагментом разметки: текст с
   тремя видами пометок. Человек ещё до входа видит, что за работа его ждёт. На узком экране
   панель уходит, остаётся форма. */
body { min-height: 100svh; display: grid; grid-template-columns: minmax(380px, 1fr) 1fr; }
.форма { display: grid; place-items: center; padding: var(--ш6) var(--ш5); background: var(--фон);
         position: relative; }
.языки { position: absolute; top: var(--ш5); right: var(--ш5); }
.обёртка { width: min(360px, 100%); }
.знак { padding: 0 0 var(--ш6); font-size: 17px; }
.знак .лого { width: 32px; height: 32px; }
h1 { font-size: 24px; margin-bottom: 6px; }
.под { color: var(--текст-3); margin: 0 0 var(--ш5); }
form { display: flex; flex-direction: column; gap: var(--ш4); }
form input { min-height: 40px; }
form button { min-height: 40px; margin-top: var(--ш1); }
.приписка { margin-top: var(--ш5); color: var(--текст-3); font-size: 12.5px; }

/* Правая панель — одна и та же в обеих темах: тёмная, без градиентов и размытия. */
.панель {
  display: flex; flex-direction: column; justify-content: center; gap: var(--ш7);
  padding: var(--ш7); background: #09090b; color: #a1a1aa; border-left: 1px solid #27272a;
}
.превью { max-width: 560px; border: 1px solid #27272a; border-radius: 12px; background: #111113;
          box-shadow: 0 20px 40px -12px rgb(0 0 0 / .6); overflow: hidden; }
.превью-шапка { display: flex; justify-content: space-between; gap: var(--ш3); padding: 12px 18px;
                border-bottom: 1px solid #27272a; font-size: 12.5px; color: #71717a; }
.превью-шапка span:first-child { color: #e4e4e7; font-weight: 500; }
.образец { padding: 22px 18px; font-size: 17px; line-height: 1.9; color: #fafafa; }
.образец .пр { background: rgba(52,211,153,.18); box-shadow: inset 0 -2px 0 #34d399; border-radius: 3px; padding: 1px 2px; }
.образец .пд { text-decoration: underline dashed #f59e0b 2px; text-underline-offset: 5px; }
.образец .пз { text-decoration: underline dotted #a78bfa 3px; text-underline-offset: 5px; }
.превью-легенда { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px;
                  border-top: 1px solid #27272a; font-size: 12px; color: #a1a1aa; }
.превью-легенда span { display: inline-flex; align-items: center; gap: 7px; }
.превью-легенда i { width: 14px; height: 3px; border-radius: 2px; }
.превью-легенда i.пр { background: #34d399; }
.превью-легенда i.пд { background: #f59e0b; }
.превью-легенда i.пз { background: #a78bfa; }
.описание { max-width: 460px; }
.описание h2 { font-size: 22px; line-height: 1.25; margin: 0 0 var(--ш3); color: #fafafa; font-weight: 550; letter-spacing: -.02em; }
.описание p { font-size: 14.5px; line-height: 1.6; margin: 0 0 var(--ш5); }
.пункты { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ш3); }
.пункты li { position: relative; padding-left: 22px; font-size: 13.5px; color: #d4d4d8; }
.пункты li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px;
                     border-radius: 50%; background: #52525b; }
@media (max-width: 900px) { body { grid-template-columns: 1fr; } .панель { display: none; } }