/* Вход в панель управления ECLIR JEWELRY — в стиле первого экрана сайта (18.10.2026, вторая версия; первая, 17.10 —
   /Users/andreyklyzub/Downloads/Проекты/eclir интернет магазин/backups/2026-10-18-panel-login-17.10/).
   Панель подключает этот файл на страницах до входа (вход, код из приложения, подключение кода, ошибка), если на
   сервере один магазин (panel/login_theme.py). Файлы — /root/internet_stores/eclir/panel-login/:
   photo.webp — фото сайта images/eclir/hero.webp (рука с кольцами на шалфейном шёлке), sage.webp — шалфейная фактура
   сайта, paper.webp — бумажный фон сайта, logo.png — белый логотип (assets/logo-inverse.png), logo-sage.png —
   шалфейный (assets/logo-main.png), шрифты сайта: Liberation Serif (заголовок) и DejaVu Sans (текст) — свои файлы,
   защита панели не пускает сторонние адреса. Цвета — логобук ECLIR, стр. 08–09. Текст на шалфее — на затемнённой
   подложке: белый 6,3:1, светлое золото 4,8:1 (белый на чистом #667F69 дал бы только 4,37:1). */
@font-face{font-family:"Eclir Serif";src:url(/login-theme/eclir-serif-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Eclir Sans";src:url(/login-theme/dejavu-sans.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Eclir Sans";src:url(/login-theme/dejavu-sans-bold.woff2) format("woff2");font-weight:600 800;font-style:normal;font-display:swap}

body.plain{--bg:#F6F2EA;--card:#FFFCF7;--text:#263C32;--muted:#5C635B;--line:#E5E0D5;--accent:#526B55;--on-accent:#FFFFFF;
  --accent-text:#4A6250;--radius:6px;
  /* 19.10.2026: одна картинка бумаги на весь экран (cover, без повтора). Было 1600px плиткой — на экранах шире 1600px
     стыки и тень листа повторялись квадратами. fixed — фон не едет при прокрутке (iPhone его игнорирует, это не мешает) */
  background:#F6F2EA url(/login-theme/paper.webp) right top/cover no-repeat fixed;color:#263C32;
  font:15px/1.55 "Eclir Sans","DejaVu Sans",Verdana,sans-serif}
body.plain h1{font-family:"Eclir Serif",Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.02em;color:#263C32}
body.plain input{border:1px solid #D5CFC1;border-radius:999px;padding:13px 20px;background:#FFFEFB;color:#263C32;font:inherit}
body.plain input:focus-visible{border-color:#667F69;outline:3px solid rgba(184,155,104,.55);outline-offset:1px}
body.plain button{border-radius:999px;background:#526B55;color:#fff;font:600 15px/1.2 "Eclir Sans","DejaVu Sans",sans-serif;
  padding:15px 28px;min-height:50px}
body.plain button:hover{background:#263C32;filter:none}
body.plain .link,body.plain .link:hover{background:none;color:#4A6250;padding:0;min-height:0;font-weight:400;font-size:14px}
body.plain a{color:#4A6250}
:focus-visible{outline-color:#B89B68}

/* ---- страница входа: рамка как первый экран сайта — фото слева, шалфейная панель справа, скругление 100 px ---- */
body.plain:has(.lt) main{max-width:none;padding:24px}
.lt{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(400px,1fr);max-width:1320px;margin:0 auto;
  min-height:calc(100vh - 48px);min-height:calc(100dvh - 48px);border-radius:100px 4px 4px 4px;overflow:hidden;
  border:1px solid rgba(184,155,104,.45);background:#4E6554;isolation:isolate}
.lt-photo{position:relative;background:#667F69 url(/login-theme/photo.webp) 38% center/cover no-repeat}
.lt-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 62%,rgba(102,127,105,.55))}
.lt-side{position:relative;display:flex;align-items:center;justify-content:center;padding:56px 8%;overflow:hidden;
  background:linear-gradient(rgba(38,60,50,.5),rgba(38,60,50,.5)),#667F69 url(/login-theme/sage.webp) center/cover;color:#FFFDF7;z-index:0}
/* тонкая золотистая дуга, как в панели первого экрана сайта */
.lt-side::before{content:"";position:absolute;width:560px;height:560px;border:1px solid rgba(231,212,174,.55);border-radius:50%;
  top:-210px;right:-300px;pointer-events:none;z-index:-1}
.lt-side::after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(231,212,174,.3);border-radius:50%;
  bottom:-260px;left:-170px;pointer-events:none;z-index:-1}
.lt-form{width:100%;max-width:380px}
.lt-logo{display:block;width:210px;max-width:70%;height:auto;margin:0 auto 22px}
.lt-name{margin:0 0 22px;text-align:center;font:400 34px/1.1 "Eclir Serif",Georgia,serif;letter-spacing:.08em;color:#FFFDF7}
/* рубрика с золотистыми линиями по бокам — «тонкая линия» сайта */
.lt-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 18px;color:#F0DFBE;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;text-align:center;justify-content:center}
.lt-eyebrow::before,.lt-eyebrow::after{content:"";flex:1;height:1px;background:rgba(231,212,174,.6)}
body.plain .lt h1{margin:0 0 30px;text-align:center;color:#FFFDF7;font-size:clamp(52px,5vw,72px);line-height:1}
.lt label{margin:0 0 16px;color:#FFFDF7;font-size:13px;letter-spacing:.02em}
.lt label input{margin-top:7px;border-color:transparent}
body.plain .lt button{width:100%;margin-top:12px;background:#F6F2EA;color:#263C32}
body.plain .lt button:hover{background:#E7D4AE}
.lt .error,.lt .warn{margin:0 0 18px;padding:11px 16px;border-radius:6px;font-size:14px;line-height:1.45}
.lt .error{background:#FBEAE7;color:#8E1B12}
.lt .warn{background:#F3EAD7;color:#5B4520}

/* ---- код из приложения, подключение кода, ошибка: молочная карточка с шалфейным логотипом сверху ---- */
body.plain:not(:has(.lt)) main{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100dvh;padding:24px 16px}
body.plain .narrow{max-width:440px}
body.plain .narrow.wide{max-width:600px}
body.plain .card{position:relative;background:#FFFCF7;border:1px solid rgba(184,155,104,.45);border-radius:48px 4px 4px 4px;
  box-shadow:none;padding:34px 34px 28px;overflow:hidden}
/* шапка карточки — шалфейная панель с белым логотипом, как у страницы входа */
body.plain .card::before{content:"";display:block;height:118px;margin:-34px -34px 28px;
  background:url(/login-theme/logo.png) center/170px auto no-repeat,linear-gradient(rgba(38,60,50,.5),rgba(38,60,50,.5)),
  #667F69 url(/login-theme/sage.webp) center/cover;border-bottom:1px solid rgba(184,155,104,.45)}
body.plain .card h1{font-size:36px;line-height:1.1;margin:0 0 14px}
body.plain .card label{color:#5C635B;font-size:13px}
body.plain .card button{margin-top:6px}
body.plain .card .note{color:#5C635B}
body.plain .card form + p,body.plain .card > p{font-size:14px}

/* ---- телефон: фото полосой сверху со скруглением, панель — ниже ---- */
@media (max-width:760px){
  body.plain:has(.lt) main{padding:12px}
  .lt{grid-template-columns:1fr;grid-template-rows:190px auto;min-height:calc(100dvh - 24px);border-radius:60px 4px 4px 4px}
  .lt-photo{background-position:center 45%}
  .lt-photo::after{background:linear-gradient(180deg,transparent 55%,rgba(102,127,105,.55))}
  .lt-side{align-items:flex-start;padding:34px 20px 44px}
  .lt-logo{width:170px;margin-bottom:18px}
  .lt-eyebrow{font-size:10px;letter-spacing:.14em;gap:10px;white-space:nowrap}
  body.plain .lt h1{font-size:50px;margin-bottom:24px}
  body.plain .card{padding:28px 20px 22px;border-radius:36px 4px 4px 4px}
  body.plain .card::before{margin:-28px -20px 24px;height:100px;background-size:140px auto,auto,cover}
  body.plain .card h1{font-size:30px}
}

/* ---- 19.10.2026, владелец: «рука обрезана, должно быть полное фото». Фото 1400×933 (3:2) — место под него теперь той же
   формы (aspect-ratio), поэтому cover ничего не обрезает. Широкий экран: фото слева, панель справа, рамка по высоте фото
   и по центру экрана. Уже 1200px панель с формой не помещается рядом с фото без обрезки — фото сверху на всю ширину рамки,
   форма под ним. Правила стоят после блока телефона и перебивают его (190px полосы). ---- */
body.plain:has(.lt) main{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100dvh}
.lt{width:100%;max-width:1440px;min-height:0;grid-template-columns:minmax(0,1.6fr) minmax(420px,1fr);grid-template-rows:auto;align-items:stretch}
.lt-photo{aspect-ratio:1400/933;background-position:center;background-size:cover}
.lt-side{padding:36px 6%}
@media (max-width:1199px){
  .lt{max-width:760px;grid-template-columns:1fr;grid-template-rows:auto auto}
  .lt-photo::after{background:linear-gradient(180deg,transparent 62%,rgba(102,127,105,.55))}
  .lt-side{padding:40px 8% 48px}
}
@media (max-width:760px){
  .lt{min-height:0;border-radius:60px 4px 4px 4px}
  .lt-side{align-items:flex-start;padding:30px 20px 40px}
}