/* ===== MenuQR — back-office, auth, landing ===== */
:root{
  --brand:#c8102e; --ink:#141210; --ink2:#5c5651; --line:#e7e2dc;
  --bg:#f7f5f2; --card:#fff; --ok:#0f9d58; --warn:#e8a33d; --err:#d64545;
  --r:14px; --sh:0 1px 2px rgba(20,18,16,.05),0 8px 24px rgba(20,18,16,.06);
  --font:'Plus Jakarta Sans',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{letter-spacing:-.02em;margin:0 0 12px}
.muted{color:var(--ink2)} .sm{font-size:12.5px} .center{text-align:center} .r{text-align:right} .nowrap{white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--brand);color:#fff;border:1px solid var(--brand);
  padding:10px 18px;border-radius:999px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;transition:.15s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink2)}
.btn.danger{background:#fff;color:var(--err);border-color:#f0cccc}
.btn.danger:hover{background:var(--err);color:#fff}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn.big{padding:14px 26px;font-size:15.5px}
.btn.full{width:100%}
.btn.disabled{background:#eee;color:#999;border-color:#eee;cursor:not-allowed}

/* shell */
.shell{display:flex;min-height:100vh}
.side{width:250px;flex:0 0 250px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px}
.side-brand{display:flex;gap:11px;align-items:center;padding:6px 8px 20px}
.side-brand img{width:40px;height:40px;border-radius:10px;object-fit:cover}
.side-brand .logo-dot{width:40px;height:40px;border-radius:10px;background:var(--brand);display:grid;place-items:center;font-size:20px}
.side-brand strong{display:block;font-size:14.5px;line-height:1.2}
.side-brand small{color:var(--ink2);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;font-size:14px;color:var(--ink2)}
.side nav a i{font-style:normal;width:20px;text-align:center}
.side nav a:hover{background:#f5f2ee;color:var(--ink)}
.side nav a.on{background:var(--brand);color:#fff;font-weight:600}
.side nav a.ext{color:var(--ink2);font-size:13px;margin-top:4px}
.side-lang{display:flex;gap:6px;padding:12px 8px 0;border-top:1px solid var(--line)}
.side-lang a{padding:5px 10px;border-radius:8px;font-size:12px;text-decoration:none;color:var(--ink2);border:1px solid var(--line)}
.side-lang a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 30px;border-bottom:1px solid var(--line);background:#fff}
.topbar h1{margin:0;font-size:21px}
.topbar-r{display:flex;align-items:center;gap:12px}
.who{font-size:13px;color:var(--ink2)}
.content{padding:24px 30px 60px;max-width:1180px;width:100%}
.banner{background:#fff6e5;border-bottom:1px solid #f0dcb5;padding:10px 30px;font-size:13.5px}
.flash{margin:16px 30px 0;padding:11px 16px;border-radius:10px;font-size:14px;background:#e8f6ee;color:#0b6b3d;border:1px solid #bfe6d0}
.flash.warn{background:#fff6e5;color:#8a5a00;border-color:#f0dcb5}
.flash.err{background:#fdeaea;color:#a12727;border-color:#f4cccc}
[dir=rtl] .side{border-right:0;border-left:1px solid var(--line)}

/* cards, kpis */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh);margin-bottom:20px}
.card h2{font-size:15.5px;margin-bottom:14px}
.card.narrow{max-width:680px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh)}
.kpi .k-ico{font-size:18px}
.kpi b{display:block;font-size:27px;letter-spacing:-.03em;margin-top:4px}
.kpi b a{font-size:14px;text-decoration:none;color:var(--brand)}
.kpi small{color:var(--ink2);font-size:12.5px}
.bar-actions{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tips{margin:0;padding-left:18px;color:var(--ink2);font-size:13.5px;line-height:1.7}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);padding:0 10px 9px;border-bottom:1px solid var(--line)}
[dir=rtl] .tbl th{text-align:right}
.tbl td{padding:11px 10px;border-bottom:1px solid #f2efeb;vertical-align:middle}
.tbl tr.off{opacity:.5}
.tbl a{color:var(--brand);text-decoration:none}
.tbl .r{text-align:right}
.thumb img{width:44px;height:44px;object-fit:cover;border-radius:9px;display:block}
.thumb .ph{display:grid;place-items:center;width:44px;height:44px;border-radius:9px;background:#f2efeb}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;background:#f2efeb;color:var(--ink2);margin-left:4px}
.tag.ok{background:#e8f6ee;color:#0b6b3d}.tag.no{background:#f2efeb;color:#8a8480}.tag.hot{background:#fff2d6;color:#8a5a00}
.inl{display:inline}

/* forms */
label{display:block;font-size:12.5px;color:var(--ink2);font-weight:600;margin-bottom:12px}
input,select,textarea{width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px;color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 30%,transparent);border-color:var(--brand)}
input[type=color]{padding:4px;height:42px}
input[type=file]{padding:8px;font-size:12.5px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 16px}
fieldset{border:1px solid var(--line);border-radius:12px;padding:16px 18px 4px;margin:0 0 18px}
legend{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2);padding:0 6px;font-weight:700}
.chk{display:flex;align-items:center;gap:7px;font-weight:500;color:var(--ink);margin-top:22px}
.chk input{width:auto;margin:0}
.badges{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.badges .chk{margin-top:6px}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:6px;flex-wrap:wrap}
.filter select{width:auto;margin:0}
.linkbox input{background:#f7f5f2;font-size:13px}
.preview-img img,.mini-img img{max-height:90px;border-radius:10px;margin-top:6px;display:block}

/* sparkline */
.spark{display:flex;align-items:flex-end;gap:5px;height:110px;padding-top:8px}
.spark.tall{height:150px}
.spark .bar{flex:1;max-width:44px;align-self:stretch;background:#f2efeb;border-radius:5px;display:flex;align-items:flex-end;min-height:4px;overflow:hidden}
.spark .bar span{display:block;width:100%;background:var(--brand);border-radius:5px;min-height:3px}

/* QR */
.qr-frame{display:inline-block;padding:16px;background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:14px}
.qr-frame img{width:260px;height:260px;display:block}

/* auth */
body.auth{display:grid;place-items:center;min-height:100vh;background:linear-gradient(160deg,#faf8f5,#efe9e2)}
.auth-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;width:100%;max-width:400px;box-shadow:var(--sh);margin:24px}
.auth-box.wide{max-width:620px}
.auth-logo{display:block;text-align:center;text-decoration:none;font-size:19px;margin-bottom:18px}
.auth-box h1{font-size:22px;text-align:center}
.auth-box .btn{margin-top:8px}
.auth-langs{display:flex;gap:6px;justify-content:center;margin-top:14px}
.auth-langs a{padding:4px 10px;border:1px solid var(--line);border-radius:8px;font-size:12px;text-decoration:none;color:var(--ink2)}
.auth-langs a.on{background:var(--ink);color:#fff}
body.mini{display:grid;place-items:center;min-height:100vh}
.mini-box{text-align:center;background:#fff;padding:40px;border-radius:20px;border:1px solid var(--line)}

/* ===== landing ===== */
body.lp{background:#fff}
.lp-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 5vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);z-index:20}
.lp-logo{font-size:18px;text-decoration:none}
.lp-nav nav{display:flex;align-items:center;gap:18px}
.lp-nav nav a{text-decoration:none;font-size:14px;color:var(--ink2)}
.lp-nav nav a.btn{color:#fff}.lp-nav nav a.btn.ghost{color:var(--ink)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:70px 5vw;background:linear-gradient(170deg,#fbf9f6,#f3ece5)}
.eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:700;margin-bottom:14px}
.hero h1{font-size:clamp(32px,4.4vw,54px);line-height:1.06;margin-bottom:16px}
.hero h1 em{font-style:italic;font-family:Georgia,serif;color:var(--brand)}
.hero p{font-size:16.5px;line-height:1.65;color:var(--ink2);max-width:520px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
.hero-points{list-style:none;padding:0;margin:0;display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--ink2)}
.hero-phone{display:flex;justify-content:center}
.phone{width:280px;border-radius:34px;background:#111;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.18)}
.phone-screen{background:#fff;border-radius:26px;overflow:hidden;padding:18px 14px}
.ps-head{text-align:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ps-head span{font-size:26px;display:block}
.ps-head b{display:block;font-size:15px;margin-top:4px}
.ps-head small{color:var(--ink2);font-size:11.5px}
.ps-tabs{display:flex;gap:6px;padding:12px 0;overflow:hidden}
.ps-tabs span{font-size:11.5px;padding:5px 11px;border-radius:999px;background:#f2efeb;color:var(--ink2);white-space:nowrap}
.ps-tabs span.on{background:var(--brand);color:#fff}
.ps-row{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #f4f1ed}
.ps-img{width:42px;height:42px;border-radius:10px;background:#f6f3ef;display:grid;place-items:center;font-size:20px;flex:0 0 42px}
.ps-row b{font-size:13px;display:block}
.ps-row small{font-size:11px;color:var(--ink2);display:block}
.ps-row i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--brand)}
.lp-sec{padding:70px 5vw;max-width:1180px;margin:0 auto}
.lp-sec.alt{background:#faf8f5;max-width:none}
.lp-sec h2{font-size:clamp(24px,3vw,34px);text-align:center;margin-bottom:10px}
.sub{text-align:center;color:var(--ink2);margin:0 auto 34px;max-width:620px}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.feat .f{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.feat .f span{font-size:24px}
.feat .f h3{font-size:15.5px;margin:10px 0 6px}
.feat .f p{font-size:13.5px;color:var(--ink2);line-height:1.6;margin:0}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column}
.plan:first-child{border:2px solid var(--brand);box-shadow:var(--sh)}
.plan h3{font-size:14px;letter-spacing:.1em;color:var(--brand)}
.plan.soon h3{color:var(--ink2)}
.p-desc{font-size:13.5px;color:var(--ink2);margin:0 0 16px;min-height:38px}
.price{margin-bottom:18px}
.price b{font-size:42px;letter-spacing:-.03em}
.price span{font-size:13px;color:var(--ink2);margin-left:6px}
.plan ul{list-style:none;padding:0;margin:0 0 20px;flex:1;font-size:13.5px;line-height:2;color:var(--ink2)}
.cta-sec{text-align:center}
.lp-foot{border-top:1px solid var(--line);padding:26px 5vw;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink2)}
.lp-langs{display:flex;gap:6px}
.lp-langs a{padding:4px 10px;border:1px solid var(--line);border-radius:8px;text-decoration:none}
.lp-langs a.on{background:var(--ink);color:#fff}

@media (max-width:1000px){
  .kpis{grid-template-columns:repeat(2,1fr)} .grid2{grid-template-columns:1fr}
  .row3,.row4{grid-template-columns:1fr 1fr} .feat{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr} .hero{grid-template-columns:1fr;padding:44px 5vw}
  .hero-phone{display:none}
}
@media (max-width:720px){
  .shell{flex-direction:column} .side{width:100%;flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:12px}
  .side nav{flex-direction:row;flex-wrap:wrap;flex:1 0 100%} .side nav a{padding:8px 10px;font-size:12.5px}
  .side-brand{padding:0 8px 0 0} .side-lang{border:0;padding:0}
  .content,.topbar,.flash{padding-left:16px;padding-right:16px;margin-left:0;margin-right:0}
  .flash{margin:12px 16px 0}
  .row2,.row3,.row4{grid-template-columns:1fr} .feat{grid-template-columns:1fr}
  .lp-nav nav a:not(.btn){display:none}
  .tbl{font-size:13px} .tbl td,.tbl th{padding:8px 6px}
}