/* Люкс Косметикс — клиентский кабинет.
   Фирменный дизайн luxecosmetics.ru: тёмно-зелёный #06473A + #021A15,
   золото #CC9755, белый; шрифт Cera Pro. */

@font-face{font-family:'Cera Pro';src:url('fonts/CeraPro-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cera Pro';src:url('fonts/CeraPro-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cera Pro';src:url('fonts/CeraPro-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cera Pro';src:url('fonts/CeraPro-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cera Pro';src:url('fonts/CeraPro-Black.woff') format('woff');font-weight:900;font-style:normal;font-display:swap}

:root{
  --bg:#ffffff; --card:#ffffff; --panel:#f5f6f3;
  --text:#08251d; --muted:#6f7b73; --border:#e6e9e3;
  --green:#06473a; --green-d:#021a15; --green-l:#0a5a49; --green-mid:#1d806f;
  --gold:#cc9755; --gold-2:#dab179; --gold-d:#b77e37; --gold-soft:#ecd5ac;
  --shadow:0 1px 3px rgba(2,26,21,.06), 0 1px 2px rgba(2,26,21,.06);
  --shadow-lift:0 12px 34px rgba(2,26,21,.13);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%}
body{
  font-family:'Cera Pro',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased;
}
.serif{font-family:'Cera Pro',Georgia,serif}
a{color:var(--green); text-decoration:none}

/* ─────────── login ─────────── */
.login-wrap{min-height:100vh; display:grid; grid-template-columns:1.08fr 1fr}

/* левая анимированная панель с брендами — фирменный зелёный */
.login-visual{position:relative; overflow:hidden; color:#f3efe4;
  background:
    radial-gradient(680px 460px at 80% -12%, rgba(204,151,85,.20) 0%, transparent 62%),
    radial-gradient(560px 420px at 2% 118%, rgba(29,128,111,.28) 0%, transparent 60%),
    linear-gradient(152deg, var(--green-l) 0%, var(--green) 46%, var(--green-d) 100%)}
.lv-motes{position:absolute; inset:0; z-index:0}
.lv-glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(420px 420px at 32% 42%, rgba(204,151,85,.16), transparent 62%);
  animation:lvdrift 13s ease-in-out infinite}
@keyframes lvdrift{0%,100%{transform:translate(-4%,-2%)}50%{transform:translate(7%,5%)}}
.lv-inner{position:relative; z-index:2; height:100%; min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; padding:44px 50px}
.lv-top{display:flex; align-items:center; justify-content:space-between; gap:16px}
.lv-logo img{height:46px; display:block}
.lv-kicker{font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-2); font-weight:500}

.bstage{position:relative; flex:1 1 auto; display:flex; align-items:center; min-height:170px; margin:30px 0}
.bslide{position:absolute; left:0; right:0; opacity:0; transform:translateY(12px); transition:opacity .9s ease, transform .9s ease; pointer-events:none}
.bslide.active{opacity:1; transform:none}
.bslide .bnum{font-size:11px; letter-spacing:.22em; color:var(--gold-2); margin-bottom:14px; font-weight:500}
.bslide .bname{font-weight:700; font-size:clamp(32px,4.6vw,50px); line-height:1.04; letter-spacing:.2px;
  background:linear-gradient(94deg,var(--gold-soft) 0%,#fff4df 44%,var(--gold-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.bslide .bmeta{margin-top:15px; font-size:13.5px; letter-spacing:.03em; color:rgba(243,239,228,.82)}
.bslide .bmeta .dot{margin:0 8px; opacity:.5}

.lv-dots{display:flex; gap:8px; flex-wrap:wrap}
.lv-dots i{width:7px; height:7px; border-radius:50%; background:rgba(236,213,172,.30); transition:transform .4s, background .4s, box-shadow .4s; cursor:pointer}
.lv-dots i.on{background:var(--gold); transform:scale(1.18); box-shadow:0 0 0 4px rgba(204,151,85,.15)}

/* правая панель — форма входа */
.login-panel{display:flex; flex-direction:column; justify-content:center; padding:48px 56px; position:relative; background:var(--bg)}
.login-panel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--green),var(--gold) 60%,var(--gold-soft))}
.login-card{width:100%; max-width:360px; margin:0 auto}
.login-card .logo{margin-bottom:26px}
.login-card .logo img{height:54px; display:block}
.login-card .welcome{font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-d); margin-bottom:8px}
.login-card h1{font-weight:700; font-size:27px; margin:0 0 6px; letter-spacing:.2px; color:var(--text)}
.login-card .sub{color:var(--muted); font-size:14px; margin:0 0 26px}

.field{margin-bottom:16px}
.field label{display:block; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.field input{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text); font-size:15px; font-family:inherit; transition:border-color .15s, box-shadow .15s}
.field input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(6,71,58,.12)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 18px;
  background:var(--green); color:#fff; border:none; border-radius:10px;
  font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:background .15s; letter-spacing:.02em}
.btn:hover{background:var(--green-l)}

.error{background:#fbecdf; border:1px solid #ecd0a8; color:#8a5a23; padding:10px 14px; border-radius:10px; font-size:14px; margin-bottom:16px}

@media (max-width:860px){
  .login-wrap{grid-template-columns:1fr}
  .login-visual{min-height:300px}
  .lv-inner{min-height:300px; padding:30px 26px}
  .lv-logo img{height:40px}
  .bstage{min-height:120px; margin:22px 0}
  .login-panel{padding:36px 24px}
  .login-panel::before{display:none}
}

/* ─────────── topbar ─────────── */
.topbar{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border)}
.topbar::before{content:""; display:block; height:3px; background:linear-gradient(90deg,var(--green) 0%,var(--gold) 50%,var(--green) 100%)}
.topbar-inner{max-width:1080px; margin:0 auto; padding:13px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand .logo{height:42px; display:block}
.brand .tag{font-size:12px; color:var(--muted); padding-left:14px; border-left:1px solid var(--border); white-space:nowrap}
.topnav{display:flex; align-items:center; gap:18px; flex:none}
.topnav .logout{font-size:13.5px; color:var(--muted)}
.topnav .logout:hover{color:var(--green)}

main{max-width:1080px; margin:0 auto; padding:22px 22px 60px}

/* ─────────── hero ─────────── */
.hero{position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow);
  background:radial-gradient(720px 460px at 84% -20%, rgba(204,151,85,.20) 0%, transparent 60%),
             radial-gradient(620px 420px at 6% 120%, rgba(29,128,111,.26) 0%, transparent 60%),
             linear-gradient(135deg, var(--green-l) 0%, var(--green) 50%, var(--green-d) 100%);
  padding:54px 48px 50px; margin-bottom:40px}
.hero .eyebrow{font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-2); font-weight:600; margin-bottom:16px}
.hero h1{margin:0 0 14px; color:#f3efe4; font-weight:700; font-size:clamp(31px,5.2vw,50px); line-height:1.07; letter-spacing:.2px; max-width:640px}
.hero h1 .g{background:linear-gradient(96deg,var(--gold) 0%,var(--gold-soft) 50%,#fff4df 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero p{margin:0; color:rgba(243,239,228,.82); max-width:540px; font-size:clamp(14.5px,2vw,16.5px); line-height:1.62}
.hero .soon{display:inline-flex; align-items:center; gap:9px; margin-top:24px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft)}
.hero .soon::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(204,151,85,.16)}

/* ─────────── section heads ─────────── */
.section{margin-bottom:42px}
.sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:6px}
.sec-head h2{font-weight:700; font-size:clamp(21px,3vw,27px); margin:0; letter-spacing:.2px}
.sec-head .count{font-size:12px; color:var(--gold-d); background:#f6ecda; padding:3px 11px; border-radius:20px; font-weight:600}
.sec-sub{color:var(--muted); font-size:14.5px; margin:0 0 22px; max-width:640px}

/* ─────────── brand grid ─────────── */
.brands{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.bcard{position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .16s, box-shadow .16s; display:flex; flex-direction:column}
.bcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.bcard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--ac)}
.bcard .pad{padding:23px 23px 21px 25px}
.bcard .bhead{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:13px}
.bcard .bname{font-weight:700; font-size:23px; line-height:1.1; letter-spacing:.1px; color:var(--text)}
.bcard .bname .ru{display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.bcard .flag{flex:none; font-size:22px; line-height:1}
.bcard .cat{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--ac); background:color-mix(in srgb, var(--ac) 10%, #fff); border:1px solid color-mix(in srgb, var(--ac) 22%, #fff); padding:3px 11px; border-radius:20px; margin-bottom:14px}
.bcard .story{font-size:13.5px; color:#46514a; line-height:1.6; margin:0 0 16px}
.bcard .sig{display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--muted); line-height:1.45; padding-top:13px; border-top:1px solid var(--border)}
.bcard .sig::before{content:""; flex:none; width:8px; height:8px; margin-top:4px; border-radius:2px; transform:rotate(45deg); background:var(--ac)}
.bcard .meta{margin-top:auto; padding:13px 23px 16px 25px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); background:#fbfcfa}
.bcard .meta .est{margin-left:auto; letter-spacing:.04em}

/* «также в портфеле» */
.morebrands{display:flex; flex-wrap:wrap; gap:9px; margin-top:18px}
.morebrands .mb{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--text); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:7px 14px; box-shadow:var(--shadow)}
.morebrands .mb .fl{font-size:14px}
.morebrands .mb .ct{color:var(--muted); font-size:11.5px}

/* ─────────── soon-in-cabinet ─────────── */
.feat{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.fcard{background:linear-gradient(150deg,var(--panel),#fff); border:1px solid var(--border); border-radius:var(--radius); padding:22px 22px 20px; box-shadow:var(--shadow); position:relative}
.fcard .ico{font-size:24px; margin-bottom:13px}
.fcard .ft{font-size:16px; font-weight:700; color:var(--text); margin-bottom:5px}
.fcard .fs{font-size:13.5px; color:var(--muted); line-height:1.55}
.fcard .badge{position:absolute; top:18px; right:18px; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-d); background:#f6ecda; border-radius:20px; padding:3px 10px}

/* ─────────── dashboard / link cards / tokens ─────────── */
.page-intro{margin:6px 0 24px}
.page-intro h1{font-weight:700; font-size:clamp(24px,3.4vw,33px); margin:0 0 4px; letter-spacing:.2px}
.page-intro p{margin:0; color:var(--muted); font-size:14px}

.linkcard{display:flex; align-items:center; gap:18px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .15s, box-shadow .15s; color:var(--text)}
.linkcard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--green),var(--gold))}
.linkcard:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift)}
.linkcard .lc-ico{flex:none; width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:23px; background:#eef3ec; color:var(--green)}
.linkcard .lc-body{flex:1 1 auto; min-width:0}
.linkcard .lc-t{font-size:16px; font-weight:700; color:var(--text)}
.linkcard .lc-s{font-size:13px; color:var(--muted); margin-top:3px}
.linkcard .lc-go{flex:none; color:var(--green); font-weight:600; font-size:14px; white-space:nowrap}
.linkcard:hover .lc-go{color:var(--gold-d)}

.tokens{margin-top:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 20px; box-shadow:var(--shadow)}
.tokens > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--green)}
.tokens > summary::-webkit-details-marker{display:none}
.tokens > summary::before{content:"▸"; color:var(--gold-d); font-size:11px; transition:transform .15s}
.tokens[open] > summary::before{transform:rotate(90deg)}
.tokens > summary::after{content:"развернуть"; margin-left:auto; font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted)}
.tokens[open] > summary::after{content:"свернуть"}
.tokens[open] > summary{margin-bottom:8px; padding-bottom:12px; border-bottom:1px solid var(--border)}
.tok{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border)}
.tok:first-of-type{border-top:none}
.tok .tk-name{flex:none; width:120px; font-size:13px; font-weight:600; color:var(--green)}
.tok code{flex:1 1 auto; min-width:0; font-family:SFMono-Regular,Menlo,Consolas,"Courier New",monospace; font-size:13px; color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:8px 12px; overflow-x:auto; white-space:nowrap}
.tok .copy{flex:none; cursor:pointer; border:1px solid var(--border); background:#fff; color:var(--muted); border-radius:8px; padding:8px 13px; font-family:inherit; font-size:12.5px; font-weight:600; transition:border-color .15s, color .15s, background .15s}
.tok .copy:hover{border-color:var(--green); color:var(--green)}
.tok .copy.done{border-color:var(--green); color:var(--green); background:#eef3ec}
@media (max-width:560px){ .tok{flex-wrap:wrap} .tok .tk-name{width:auto} }

/* ─────────── footer ─────────── */
footer.site{max-width:1080px; margin:0 auto; padding:24px 22px 40px; border-top:1px solid var(--border); color:var(--muted); font-size:12.5px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
footer.site a{color:var(--green)}
footer.site a:hover{color:var(--gold-d)}

@media (max-width:560px){
  .lv-kicker{display:none}
  .hero{padding:38px 24px 34px}
  .brand .tag{display:none}
  .brand .logo{height:36px}
  .topbar-inner{padding:12px 16px}
  main{padding:18px 16px 48px}
  .bcard .pad{padding:20px 20px 18px 22px}
}