/* =====================================================================
   skin.css — پوستهٔ «آرتیانا»
   روشن: عاج و طلایی (منوی کناری تیره، محتوا کرمی)   تیره: مشکی و طلایی
   فقط متغیرها و ظاهر پوسته را بازنویسی می‌کند؛ منطق برنامه بدون تغییر است.
   ===================================================================== */
:root {
  --bg: #f5f0e6;
  --surface: #fffdf8;
  --surface-2: #f8f2e6;
  --line: #e8dcc6;
  --line-2: #dccbaa;
  --text: #1f1a14;
  --muted: #76664f;
  --primary: #9a6f32;
  --primary-600: #7d5823;
  --primary-soft: #f3e7cf;
  --on-primary: #fff;
  --accent: #c9a15e;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(80, 55, 20, .08);
  --shadow: 0 12px 30px -20px rgba(80, 55, 20, .4);
  --shadow-lg: 0 30px 60px -24px rgba(60, 40, 10, .45);
  --gold: #c9a15e;
  --gold-ink: #8a6128;
  --gold-grad: linear-gradient(180deg, #ecd3a3 0%, #d2ae6f 45%, #b0843f 100%);
  --gold-text: #22180c;
  --side-bg: linear-gradient(180deg, #1a1511, #110e0b);
  --side-line: #2e261d;
  --side-text: #efe5d2;
  --side-mute: #9b8a70;
  --nav-active: linear-gradient(90deg, rgba(201, 161, 94, .08), rgba(201, 161, 94, .24));
  --top-bg: #fbf7ef;
  --bevel: #f8f2e6;
  --bar: #f8f2e6;
  --title-bar: var(--gold-grad);
  --ph-bg: linear-gradient(160deg, #f7efe0, #e9dcc2);
  --ph-ink: #a97c3c;
  --ph-wheel: #f3e8d4;
  --green: #2e7d32; --green-soft: #e3f2df;
  --amber: #8a5a00; --amber-soft: #fbecc9;
  --red: #c2262d;   --red-soft: #fbe3e1;
  --blue: #2a64b0;  --blue-soft: #e3edf9;
  --violet: #6b44c9; --violet-soft: #ede6fb;
  --gray: #6b6255;  --gray-soft: #eee8dd;
}
:root[data-theme="dark"] {
  --bg: #0e0c0a;
  --surface: #18140f;
  --surface-2: #1f1a14;
  --line: #2e271e;
  --line-2: #3d3326;
  --text: #f1e9da;
  --muted: #a8987f;
  --primary: #c9a15e;
  --primary-600: #e0bd7f;
  --primary-soft: rgba(201, 161, 94, .13);
  --on-primary: #1a140c;
  --accent: #c9a15e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 20px 40px -24px rgba(0, 0, 0, .9);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .9);
  --gold-ink: #e0bd7f;
  --side-bg: #090807;
  --side-line: #2a231a;
  --side-text: #e6dcc8;
  --side-mute: #8c7d66;
  --top-bg: #120f0c;
  --bevel: #1f1a14;
  --bar: #1f1a14;
  --ph-bg: radial-gradient(ellipse at 50% 120%, #3a2c18, #15110c 70%);
  --ph-ink: #c9a15e;
  --ph-wheel: #15110c;
  --green: #5fd08a;  --green-soft: rgba(95, 208, 138, .13);
  --amber: #f0b850;  --amber-soft: rgba(240, 184, 80, .14);
  --red: #ff7a70;    --red-soft: rgba(255, 122, 112, .14);
  --blue: #7fb2f0;   --blue-soft: rgba(127, 178, 240, .14);
  --violet: #b9a0f5; --violet-soft: rgba(185, 160, 245, .14);
  --gray: #a8987f;   --gray-soft: rgba(168, 152, 127, .14);
}

body { background: var(--bg); }
.app { position: relative; z-index: 1; }

/* ستون کناری — همیشه تیره مثل صفحهٔ ورود */
.sidebar { background: var(--side-bg); border-inline-start: 1px solid var(--side-line); color: var(--side-text); padding: 0; gap: 0; }
.brand { padding: 16px 14px; background: transparent; border-bottom: 1px solid var(--side-line); }
.brand-mark { border-radius: 12px; background: var(--gold-grad); color: var(--gold-text); box-shadow: none; }
.brand b { color: var(--side-text); }
.brand span { color: var(--side-mute); }
.nav { gap: 2px; padding: 10px 8px; }
.nav a { color: var(--side-text); border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: .93rem; background: transparent; border: 1px solid transparent; }
.nav a .ic { color: var(--side-mute); }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a.active { background: var(--nav-active); color: #f3d9a6; border-color: rgba(201, 161, 94, .45); box-shadow: none; }
.nav a.active .ic { color: var(--gold); }
.nav .sep { background: var(--side-line); margin: 8px 6px; }
.side-foot { border-top: 1px solid var(--side-line); background: transparent; }
.usercard b { color: var(--side-text); } .usercard small { color: var(--side-mute); }
.side-actions button { background: rgba(255, 255, 255, .05); border: 1px solid var(--side-line); color: var(--side-text); border-radius: 10px; }
.side-actions button:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* نوار بالا و نوار ابزار */
.topbar { background: var(--top-bg); backdrop-filter: none; border-bottom: 1px solid var(--line); padding: 8px 20px; }
.topbar h1 { font-size: 1.08rem; }
.fx-chip { border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); }
.toolbar { display: flex; gap: 6px; padding: 8px 20px; overflow-x: auto; background: var(--top-bg); border-bottom: 1px solid var(--line); }
.toolbar a { flex: none; min-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 8px 6px;
  color: var(--text); font-size: .78rem; font-weight: 600; border: 1px solid transparent; border-radius: 12px; }
.toolbar a .ic { width: 28px; height: 28px; color: var(--gold-ink); }
.toolbar a:hover { border-color: var(--line-2); background: var(--primary-soft); }
.toolbar a.active { border-color: var(--gold); background: var(--primary-soft); box-shadow: inset 0 -3px 0 var(--gold); }

/* کارت‌ها، دکمه‌ها، جدول */
.card { border-radius: 16px; border-color: var(--line); box-shadow: var(--shadow); }
.card-head { padding: 12px 16px; margin: 0; background: transparent; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; color: var(--text); }
.card-head h3 { color: var(--text); font-size: .98rem; }
.card-head .muted { color: var(--muted); }
.card-head + .card-body { padding-top: 14px; }
.btn { border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); color: var(--text); box-shadow: none; }
.btn:hover { border-color: var(--gold); color: var(--gold-ink); }
.btn.primary { background: var(--gold-grad); border-color: transparent; color: var(--gold-text); font-weight: 800; box-shadow: 0 8px 18px -10px rgba(140, 100, 40, .8), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn.primary:hover { color: var(--gold-text); filter: brightness(1.05); transform: none; }
.btn.soft { background: var(--primary-soft); color: var(--gold-ink); border-color: transparent; }
.btn.danger, .btn.green { border-color: transparent; }
.input, select, textarea { border-radius: 10px !important; }
.tbl th { background: var(--surface-2); color: var(--muted); border-bottom: 1px solid var(--line-2); }
.tbl tbody tr.click:hover { background: var(--primary-soft); }
.chip { border-radius: 999px; }
.modal, .sheet { border-radius: 18px; }
.car-ph { background: var(--ph-bg) !important; color: var(--ph-ink) !important; }
.vcard { border-radius: 16px; }

/* رنگ‌های اصلی برنامه که قبلاً آبی بنفش بودند */
.check input:checked + .box, .fchip.on, .type-card.on .ico, .dp-grid button.sel, .stage.next .stage-n { color: var(--on-primary) !important; }
.stat.hero { background: linear-gradient(135deg, #2a2016 0%, #1a1511 100%); color: #f3e7cf; box-shadow: 0 18px 36px -16px rgba(60, 40, 10, .6); border: 1px solid rgba(201, 161, 94, .35); }
.stat.hero .val { color: #f3d9a6; }
.stat.hero .ico { background: var(--gold-grad); color: var(--gold-text); }
.bars .bar { background: linear-gradient(180deg, #d2ae6f, #9a6f32); }
.hbar .fill { background: linear-gradient(90deg, #d2ae6f, #9a6f32); }
a { color: var(--primary); }

/* موبایل */
@media (max-width: 1023px) {
  .toolbar { display: none; }
  .topbar { padding: 10px 14px; }
  .bottomnav { background: var(--side-bg); border-top: 1px solid var(--side-line); }
  .bottomnav a, .bottomnav button { color: var(--side-mute); }
  .bottomnav .active { color: #f3d9a6; background: rgba(201, 161, 94, .14); border-radius: 10px; }
  .bottomnav .plus span.pl { background: var(--gold-grad); color: var(--gold-text); box-shadow: 0 8px 18px -6px rgba(140, 100, 40, .8); border-radius: 14px; }
}
@media print { .toolbar { display: none !important; } }

/* ---------- اطلاعات پایه ---------- */
.lk-grid { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.lk-nav { display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.lk-li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--bevel); color: var(--text); font: inherit; text-align: right; cursor: pointer; }
.lk-li:hover { border-color: var(--primary); }
.lk-li.on { background: var(--gold-grad); color: var(--gold-text); border-color: transparent; }
.lk-li b { font-size: .8rem; opacity: .85; }
.lk-add { display: flex; gap: 8px; margin-bottom: 14px; }
.lk-add .input { flex: 1; }
@media (max-width: 860px) { .lk-grid { grid-template-columns: 1fr; } .lk-nav { flex-direction: row; flex-wrap: wrap; } }

/* ---- قبض رسید انبار ---- */
.wh-kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line, #d9d5b8); }
.wh-kv:last-child { border-bottom: 0; }
.wh-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.wh-row .input { flex: 1; min-width: 0; }
.wh-good .input { flex: 1 1 0; }
.wh-good.wh-head { font-size: .78rem; color: var(--muted); margin-bottom: 2px; }
.wh-good.wh-head span { flex: 1 1 0; }
.wh-good.wh-head span:last-child { flex: 0 0 34px; }
@media (max-width: 640px) { .wh-good { flex-wrap: wrap; } .wh-good .input { flex: 1 1 45%; } .wh-good.wh-head { display: none; } }

/* ---- کاربر بدون اجازهٔ حذف: دکمه‌های حذف پنهان می‌شوند ---- */
body.nodel .icon-btn.danger, body.nodel [data-act="delete"], body.nodel [data-del] { display: none !important; }
.perm-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.perm-table th, .perm-table td { padding: 7px 8px; border-bottom: 1px solid var(--line, #d9d5b8); text-align: center; }
.perm-table th:first-child, .perm-table td:first-child { text-align: right; }

/* ---- هویت و مدارک شخص ---- */
.id-link { margin-bottom: 12px; word-break: break-all; }
.id-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .id-grid { grid-template-columns: 1fr; } }
.id-box { border: 1px solid var(--line, #d9d5b8); border-radius: 8px; padding: 10px; }
.id-title { font-weight: 800; margin-bottom: 8px; }
.id-files { display: flex; flex-wrap: wrap; gap: 8px; }
.id-file { position: relative; }
.id-file img { width: 130px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line, #d9d5b8); display: block; }
.id-file .icon-btn { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; background: rgba(255,255,255,.9); }
.id-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 130px; height: 90px; border: 1px solid var(--line, #d9d5b8); border-radius: 6px; text-decoration: none; padding: 4px; text-align: center; }
.id-pdf small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }

/* ---- کاربر بدون اجازهٔ ثبت/ویرایش در بخش جاری: دکمه‌های ثبت و ویرایش پنهان می‌شوند ---- */
body.noedit .w { display: none !important; }

/* ---- واردات: جدول فشردهٔ خودروها ---- */
.items-tbl { min-width: 1000px; table-layout: fixed; }
.items-tbl th { padding: 8px 4px; font-size: .78rem; white-space: nowrap; }
.items-tbl td { padding: 5px 3px; }
.items-tbl th:first-child, .items-tbl td:first-child { width: 30px; text-align: center; }
.items-tbl .input { padding: 5px 7px; font-size: .84rem; min-height: 34px; height: 34px; }
.items-tbl select.input { padding-inline-end: 22px; background-position: left 6px center; }
.items-tbl .date-wrap .date-btn { width: 28px; }
.items-tbl .yr { display: flex; gap: 3px; }
.items-tbl .yr input { width: 62px; flex: none; }
.items-tbl .yr select { flex: 1; min-width: 0; }
/* حالت تمام‌صفحه: منوی کنار و نوار ابزار پنهان */
body.wide-mode .app { grid-template-columns: 1fr; }
body.wide-mode .sidebar, body.wide-mode .toolbar { display: none !important; }
.items-tbl .date-btn { width: 26px; height: 26px; left: 3px; border-radius: 6px; }
.items-tbl .jdate { padding-left: 30px; }
.items-tbl tr.grp td { background: var(--primary-soft); font-size: .82rem; padding: 6px 10px; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 10px; border: 1px dashed var(--line-2); border-radius: 6px; background: var(--surface-2); }
.bulk-bar .input { height: 34px; min-height: 34px; padding: 5px 7px; font-size: .84rem; }
.bulk-bar .yr { display: flex; gap: 3px; } .bulk-bar .yr input { width: 64px; flex: none; } .bulk-bar .yr select { flex: 1; min-width: 0; }
.bulk-bar .sep { width: 1px; height: 24px; background: var(--line-2); }
/* ---- مراحل واردات ---- */
.stage { border: 1px solid var(--line-2); border-radius: 8px; margin-bottom: 10px; background: var(--surface); }
.stage.done { border-color: color-mix(in srgb, var(--green) 45%, var(--line-2)); }
.stage.next { border: 2px solid var(--primary); }
.stage-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: 8px 8px 0 0; }
.stage-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--gray-soft); color: var(--gray); flex: none; }
.stage.done .stage-n { background: var(--green-soft); color: var(--green); }
.stage.next .stage-n { background: var(--primary); color: var(--on-primary); }
.stage-b { padding: 10px 12px; }

/* ================= صفحهٔ ورود لوکس (آرتیانا) ================= */
.lx { --lx-gold: #c9a15e; --lx-gold-2: #a97c3c; --lx-cream: #f7f1e6; --lx-ink: #1f1a14; --lx-mute: #6e6152;
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: #0a0806; color: var(--lx-ink); }
.lx-scene { position: absolute; inset: 0; overflow: hidden; }
.lx-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(8, 6, 4, .62) 0%, rgba(8, 6, 4, .25) 32%, transparent 55%); }
.lx-stage { position: absolute; left: 0; top: 50%; width: max(100vw, 177.6vh); height: max(100vh, 56.31vw);
  transform: translateY(-50%); transform-origin: 30% 60%; animation: lx-kb 26s ease-in-out infinite alternate; }
.lx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
@keyframes lx-kb { from { transform: translateY(-50%) scale(1); } to { transform: translateY(-50%) scale(1.06); } }

/* برق طلایی روی لوگو */
.lx-sheen { position: absolute; left: 14%; top: 9%; width: 26%; height: 41%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 222, 160, .55) 48%, transparent 58%);
  background-size: 300% 100%; animation: lx-sheen 7s ease-in-out infinite;
  -webkit-mask: radial-gradient(ellipse at 50% 50%, #000 45%, transparent 72%); mask: radial-gradient(ellipse at 50% 50%, #000 45%, transparent 72%); }
@keyframes lx-sheen { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -40% 0; } }

/* چراغ جلوی خودرو */
.lx-lamp { position: absolute; left: 50.3%; top: 61.6%; width: 4.2%; height: 4.6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(235, 245, 255, .95), rgba(190, 220, 255, .35) 55%, transparent);
  mix-blend-mode: screen; filter: blur(2px); animation: lx-lamp 5s ease-in-out infinite; }
@keyframes lx-lamp { 0%, 100% { opacity: .35; transform: scale(.9); } 8% { opacity: 1; transform: scale(1.25); } 14% { opacity: .45; } 20% { opacity: 1; transform: scale(1.2); } 40% { opacity: .6; transform: scale(1); } }

/* نقاط نورانی روی کرهٔ لوگو */
.lx-dot { position: absolute; width: .55%; aspect-ratio: 1; border-radius: 50%; background: #ffd890; pointer-events: none;
  box-shadow: 0 0 10px 3px rgba(255, 200, 110, .8); animation: lx-dot 3.2s ease-in-out infinite; }
.lx-d1 { left: 28.4%; top: 19.8%; }
.lx-d2 { left: 24.8%; top: 26.2%; animation-delay: 1.1s; }
.lx-d3 { left: 33.6%; top: 21.6%; animation-delay: 2.1s; }
@keyframes lx-dot { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }

/* کادر ورود */
.lx-wrap { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: flex-start;
  padding-block: 32px; padding-inline: max(20px, 5.5vw); box-sizing: border-box; }
.lx-card { width: min(430px, 100%); box-sizing: border-box; padding: 34px 34px 26px; border-radius: 26px;
  background: linear-gradient(170deg, #fbf7ef 0%, var(--lx-cream) 55%, #efe5d2 100%);
  border: 1px solid rgba(201, 161, 94, .55);
  box-shadow: 0 0 0 6px rgba(201, 161, 94, .08), 0 40px 90px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .8);
  display: flex; flex-direction: column; gap: 10px; animation: lx-in .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lx-in { from { opacity: 0; transform: translateX(40px); } }
.lx-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 14px; text-align: center; }
.lx-carline { width: 200px; height: 34px; color: var(--lx-gold); }
.lx-fa { font-size: 2.6rem; font-weight: 900; line-height: 1.15; color: var(--lx-ink); }
.lx-en { font: 600 1.75rem/1.2 "Trajan Pro", "Cinzel", Georgia, "Times New Roman", serif; letter-spacing: .32em; margin-inline-start: .32em; color: var(--lx-ink); }
.lx-sub { display: flex; align-items: center; gap: 12px; color: var(--lx-mute); font-size: .95rem; margin-top: 4px; }
.lx-sub i { width: 46px; height: 1px; background: var(--lx-gold); }
.lx-msg { background: #f3e3c4; color: #6b4a14; border-radius: 12px; padding: 9px 12px; font-size: .88rem; text-align: center; }
.lx-lbl { font-size: .92rem; font-weight: 700; color: var(--lx-ink); margin-top: 4px; }
.lx-field { position: relative; }
.lx-in { width: 100%; box-sizing: border-box; height: 52px; border-radius: 14px; border: 1px solid #e0d2b8; background: #fffdf8;
  color: var(--lx-ink); padding-left: 16px; padding-right: 50px; text-align: right; font-family: inherit; font-size: 1rem; font-weight: 500;
  box-shadow: inset 0 1px 2px rgba(80, 60, 30, .06); transition: border-color .2s, box-shadow .2s; }
.lx-in:focus { outline: none; border-color: var(--lx-gold); box-shadow: 0 0 0 4px rgba(201, 161, 94, .22); }
.lx-ic, .lx-eye { position: absolute; top: 50%; transform: translateY(-50%); right: 14px; width: 24px; height: 24px; color: #4a3f33; }
.lx-eye { border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.lx-eye svg { width: 24px; height: 24px; }
.lx-eye.on { color: var(--lx-gold-2); }
.lx-eye:focus-visible { outline: 2px solid var(--lx-gold); outline-offset: 2px; }
.lx-err { background: #fde7e8; color: #a3202b; border-radius: 12px; padding: 9px 12px; font-size: .9rem; }
.lx-btn { position: relative; overflow: hidden; height: 56px; margin-top: 14px; border: 0; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 1.15rem; font-weight: 900; color: #22180c;
  background: linear-gradient(180deg, #ecd3a3 0%, #d2ae6f 45%, #b0843f 100%);
  box-shadow: 0 10px 24px -10px rgba(140, 100, 40, .7), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .15s, filter .2s; }
.lx-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  background-size: 300% 100%; animation: lx-sheen 5s ease-in-out infinite; }
.lx-btn:hover { filter: brightness(1.05); }
.lx-btn:active { transform: translateY(1px); }
.lx-btn:disabled { filter: grayscale(.4); cursor: wait; }
.lx-btn:focus-visible { outline: 3px solid var(--lx-gold-2); outline-offset: 3px; }
.lx-forgot { align-self: center; margin-top: 8px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .95rem; font-weight: 700;
  color: #5a3d17; padding: 4px 2px; border-bottom: 1.5px solid var(--lx-gold); }
.lx-forgot:hover { color: var(--lx-gold-2); }
.lx-note { background: #f1e7d4; color: #5a4a34; border-radius: 12px; padding: 10px 12px; font-size: .88rem; line-height: 1.8; text-align: center; }
.lx .demo-hint { margin-top: 8px; }

/* موبایل و تبلت عمودی */
@media (max-width: 820px) {
  .lx-scene { position: relative; height: 44vh; min-height: 260px; }
  .lx-scene::after { background: linear-gradient(to top, #0a0806 0%, transparent 40%); }
  .lx-stage { top: 0; height: 100%; width: auto; aspect-ratio: 1671 / 941; transform: none; animation-name: lx-kb-m; }
  @keyframes lx-kb-m { from { transform: scale(1); } to { transform: scale(1.06); } }
  .lx-wrap { min-height: 0; margin-top: -56px; padding-block: 0 28px; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); justify-content: center; }
  .lx-card { padding: 26px 22px 20px; animation-name: lx-in-m; }
  @keyframes lx-in-m { from { opacity: 0; transform: translateY(30px); } }
  .lx-fa { font-size: 2.1rem; }
  .lx-en { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-stage, .lx-sheen, .lx-lamp, .lx-dot, .lx-card, .lx-btn::after { animation: none !important; }
}
body:has(.lx)::before, body:has(.lx)::after { display: none; }