/* ==========================================================================
   Wahid Mart — design system
   Brand: navy #214150 + signal orange #F0592D (from the logo)
   Type: Plus Jakarta Sans (Latin) + Hind Siliguri (Bangla), self-hosted
   ========================================================================== */


:root {
  --navy: #214150;
  --navy-700: #1A3542;
  --navy-900: #132833;
  --navy-50: #EDF2F5;
  --navy-100: #DCE6EB;
  --orange: #F0592D;
  --orange-600: #D9471C;
  --orange-50: #FEF0EB;
  --orange-100: #FCDCD0;
  --orange-200: #F7B39C;
  --orange-400: #F47C57;
  --navy-400: #2D5466;
  --navy-950: #0F1F27;
  --flash-end: #4A3330;
  --btn-r: 10px;
  --pcols: 5; --pcols-md: 4; --pcols-m: 2;
  --card-ratio: 1/1; --card-fit: cover; --fs: 15.5px; --logo-h: 40px; --title-lines: 2;
  --brand: var(--navy);
  --ink: #18252D;
  --text: #33424C;
  --muted: #5B6873;
  --line: #E5E9ED;
  --line-2: #D2D9DF;
  --bg: #F4F6F8;
  --surface: #FFFFFF;
  --ok: #12805C; --ok-50: #E6F4EE;
  --info: #2160A8; --info-50: #E8F0FA;
  --warn: #9A6300; --warn-50: #FFF4DC;
  --bad: #C5221F; --bad-50: #FDECEA;
  --gold: #F5A524;
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(24, 37, 45, .06);
  --sh-2: 0 6px 18px -8px rgba(24, 37, 45, .18);
  --sh-3: 0 18px 40px -18px rgba(24, 37, 45, .35);
  --font: 'WM', 'WMB', 'Hind Siliguri', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1280px;
  --gut: 16px;
  --header-h: 72px;
  --bnav-h: 62px;
}
@media (min-width: 768px) { :root { --gut: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font: 400 var(--fs)/1.6 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.has-bnav { padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { body.has-bnav { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--orange-600); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid rgba(240, 89, 45, .45); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .86em; background: var(--bg); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 820px; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.ic { width: 20px; height: 20px; flex: none; }
.ic--img { object-fit: contain; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h1 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); font-weight: 800; }
.h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); font-weight: 700; }
.h3 { font-size: 1.08rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.prose { max-width: 72ch; color: var(--text); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .3em; }
.prose h3 { margin-top: 1.4em; }
.link { color: var(--navy); font-weight: 600; background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.link .ic { width: 16px; height: 16px; }
.link:hover { color: var(--orange-600); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--btn-r); border: 1px solid transparent;
  background: var(--navy); color: #fff; font-weight: 600; font-size: .97rem; line-height: 1; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:hover { background: var(--navy-700); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 18px; height: 18px; }
.btn--accent { background: var(--orange-btn, #CA4B26); }
.btn--accent:hover { background: var(--orange-btn-h, #B24221); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--muted); }
.btn--soft { background: var(--navy-50); color: var(--navy); }
.btn--soft:hover { background: var(--navy-100); color: var(--navy); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: #fff; color: var(--orange-600); }
.btn--line-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn--line-white:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.btn--danger { background: var(--bad); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: .9rem; }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 1.03rem; }
.btn--block { width: 100%; }
.btn--pill { border-radius: 999px; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-arrow { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; margin-right: -8px; }
.btn-arrow .ic { width: 16px; height: 16px; }
.iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--ink); position: relative; flex: none; }
.iconbtn:hover { background: var(--bg); color: var(--ink); }
.iconbtn--danger { color: var(--bad); }
.iconbtn--danger:hover { background: var(--bad-50); color: var(--bad); }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], input[type=url], input[type=date], input[type=datetime-local], input:not([type]), select, textarea {
  width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: .97rem; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A85' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-100); }
input[disabled] { background: var(--bg); color: var(--muted); }
input[type=color] { width: 64px; height: 44px; padding: 4px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; }
input[type=file] { font-size: .9rem; max-width: 100%; }
.lbl { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin: 14px 0 6px; }
.form > .lbl:first-child, .form > form > .lbl:first-of-type, .fgrid > div > .lbl:first-child { margin-top: 0; }
.help { display: block; font-size: .84rem; color: var(--muted); margin-top: 6px; }
.help li { margin-bottom: 4px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.radio, .check { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: .95rem; }
.radio input, .check input { width: 18px; height: 18px; accent-color: var(--navy); flex: none; margin: 0; }
.fgrid { display: grid; gap: 14px 16px; grid-template-columns: 1fr; }
.fgrid .lbl { margin-top: 0; }
@media (min-width: 640px) { .fgrid { grid-template-columns: 1fr 1fr; } .fgrid--3 { grid-template-columns: repeat(3, 1fr); } .fgrid--4 { grid-template-columns: repeat(4, 1fr); } .span2 { grid-column: span 2; } }
.form .btn { margin-top: 18px; }
.pw { position: relative; }
.pw input { padding-right: 48px; }
.pw__t { position: absolute; right: 4px; top: 2px; width: 40px; height: 40px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; }
.w-xs { width: 64px !important; } .w-sm { width: 84px !important; } .w-md { max-width: 220px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { width: auto; flex: 1 1 160px; }
.inline-form .btn { margin: 0; }

/* ---------- Chips, tags, badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .82rem; color: var(--text); white-space: nowrap; line-height: 1.4; }
.chip .ic { width: 14px; height: 14px; }
a.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip--ok { background: var(--ok-50); border-color: transparent; color: var(--ok); }
.chip--info { background: var(--info-50); border-color: transparent; color: var(--info); }
.chip--orange { background: var(--orange-50); border-color: transparent; color: var(--orange-600); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll .chip { padding: 7px 14px; font-size: .9rem; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: .78rem; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.tag--ok { background: var(--ok-50); color: var(--ok); }
.tag--info { background: var(--info-50); color: var(--info); }
.tag--warn { background: var(--warn-50); color: var(--warn); }
.tag--bad { background: var(--bad-50); color: var(--bad); }
.tag--muted { background: var(--bg); color: var(--muted); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.off { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--bad-50); color: var(--bad); font-size: .78rem; font-weight: 700; line-height: 1.5; }
.badge-off { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 8px; border-radius: 7px; background: var(--bad); color: #fff; font-size: .76rem; font-weight: 700; line-height: 1.4; }
.badge-free { background: var(--ok); }
.count { position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--orange-btn, #CA4B26); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; line-height: 1; border: 2px solid #fff; }

/* ---------- Price ---------- */
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price b { font-weight: 800; font-size: 1.1rem; color: var(--ink); letter-spacing: -.01em; }
.price s { color: var(--muted); font-size: .86rem; }
.price--lg b { font-size: 1.85rem; }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.sec { padding-block: 28px; }
@media (min-width: 1024px) { .sec { padding-block: 36px; } }
.sec--tight { padding-block: 20px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sec-head .h2 { margin: 0; }
.sec-head p { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
.grid { display: grid; gap: 16px; }
.g-products { grid-template-columns: repeat(var(--pcols-m), minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .g-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .g-products { grid-template-columns: repeat(var(--pcols-md), minmax(0, 1fr)); } }
@media (min-width: 1200px) { .g-products { grid-template-columns: repeat(var(--pcols), minmax(0, 1fr)); } .listing .g-products { grid-template-columns: repeat(var(--pcols-md), minmax(0, 1fr)); } }
.g-courses { grid-template-columns: 1fr; }
@media (min-width: 600px) { .g-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .g-courses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .g-courses--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g-books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .g-books { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .g-books { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1200px) { .g-books--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Horizontal rails on phones */
.rail { display: grid; grid-auto-flow: column; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding: 2px var(--gut) 12px; margin-inline: calc(var(--gut) * -1); scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail--p { grid-auto-columns: 44%; }
.rail--c { grid-auto-columns: 80%; }
.rail--b { grid-auto-columns: 44%; }
@media (min-width: 640px) { .rail--p { grid-auto-columns: 30%; } .rail--c { grid-auto-columns: 46%; } .rail--b { grid-auto-columns: 26%; } }
@media (min-width: 1024px) {
  .rail { grid-auto-flow: row; overflow: visible; margin-inline: 0; padding: 0; gap: 16px; }
  .rail--p { grid-template-columns: repeat(var(--pcols-md), minmax(0, 1fr)); }
  .rail--c { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail--b { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar { background: var(--navy-900); color: rgba(255, 255, 255, .76); font-size: .82rem; }
.topbar__in { display: flex; align-items: center; gap: 22px; height: 36px; }
.topbar a { color: rgba(255, 255, 255, .76); display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: #fff; }
.topbar .ic { width: 15px; height: 15px; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.topbar__sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .18); }
@media (max-width: 1023px) { .topbar { display: none; } }

.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); gap: 2px; }
.lang a { padding: 1px 10px; border-radius: 999px; font-weight: 700; font-size: .76rem; color: rgba(255, 255, 255, .76); line-height: 1.7; }
.lang a.is-on { background: #fff; color: var(--navy); }
.lang--light { background: var(--bg); border: 1px solid var(--line); }
.lang--light a { color: var(--muted); }
.lang--light a.is-on { background: var(--navy); color: #fff; }

.header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--line); }
.header__in { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: var(--logo-h); width: auto; }
.hsearch { flex: 1; display: flex; align-items: center; min-width: 0; height: 48px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px; position: relative; transition: border-color .15s, background .15s; }
.hsearch:focus-within { background: #fff; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-100); }
.hsearch select { width: auto; min-height: 38px; border: 0; background-color: transparent; padding: 0 30px 0 16px; font-weight: 600; font-size: .9rem; color: var(--ink); border-right: 1px solid var(--line-2); border-radius: 0; box-shadow: none !important; }
.hsearch input { border: 0; background: transparent; min-height: 38px; padding: 0 14px; box-shadow: none !important; font-size: .95rem; }
.hsearch button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--navy); color: #fff; font-weight: 600; }
.hsearch button:hover { background: var(--navy-700); }
.hsearch button .ic { width: 18px; height: 18px; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-3); padding: 6px; z-index: 60; }
.suggest a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; color: var(--ink); }
.suggest a:hover, .suggest a.is-hl { background: var(--bg); color: var(--ink); }
.suggest img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--bg); }
.suggest small { color: var(--muted); }
.hactions { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.hact { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 10px; border-radius: 10px; color: var(--ink); font-size: .74rem; font-weight: 500; position: relative; background: none; border: 0; }
.hact .ic { width: 23px; height: 23px; }
.hact:hover { background: var(--bg); color: var(--ink); }
.hact .count { top: -2px; right: 6px; }
.hlogin { margin-left: 8px; }
.hmenu { display: none; }
@media (max-width: 1023px) {
  :root { --header-h: 60px; }
  .header__in { gap: 10px; }
  .logo img { height: calc(var(--logo-h) * .8); }
  .hmenu { display: inline-grid; margin-left: -8px; }
  .hsearch--desk { display: none; }
  .hact span:not(.avatar) { display: none; }
  .hact .avatar { width: 30px; height: 30px; }
  .hact { padding: 8px; }
  .hact--wish { display: none; }
  .hactions { margin-left: auto; }
  .hlogin { margin-left: 4px; min-height: 38px; padding: 0 14px; }
}
.msearch { padding: 0 var(--gut) 10px; background: rgba(255, 255, 255, .97); }
.msearch .hsearch { max-width: none; height: 44px; }
.msearch .hsearch button { height: 36px; padding: 0 14px; }
@media (min-width: 1024px) { .msearch { display: none; } }

.catnav { background: #fff; border-bottom: 1px solid var(--line); }
.catnav__in { display: flex; align-items: center; gap: 4px; height: 52px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.catnav__in::-webkit-scrollbar { display: none; }
.catbtn { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; background: var(--navy); color: #fff; font: inherit; font-weight: 600; font-size: .95rem; line-height: 1; white-space: nowrap; border: 0; margin-right: 12px; cursor: pointer; }
.catbtn:hover { background: var(--navy-700); }
.catbtn .ic { width: 18px; height: 18px; flex: none; }
.catnav a.nl { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 9px; color: var(--ink); font-weight: 500; white-space: nowrap; font-size: .95rem; }
.catnav a.nl:hover { background: var(--bg); color: var(--ink); }
.catnav a.nl.is-active { color: var(--orange-600); }
.catnav a.nl--hot { color: var(--orange-600); font-weight: 600; }
.catnav a.nl--hot .ic { width: 16px; height: 16px; }
@media (max-width: 1023px) { .catnav { display: none; } }
.catwrap { position: relative; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh-3); z-index: 55; }
.mega__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 24px; }
.mega h4 { font-size: .8rem; color: var(--muted); font-weight: 600; margin: 0 0 8px; }
.mega a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--ink); font-size: .94rem; }
.mega a:hover { background: var(--bg); color: var(--ink); }
.mega a .ic { width: 18px; height: 18px; color: var(--navy); }
.mega .sub { padding-left: 36px; font-size: .86rem; color: var(--muted); }

/* Account menu */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__pop { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-3); padding: 8px; z-index: 70; }
.menu__pop a, .menu__pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--ink); border: 0; background: none; font-size: .94rem; text-align: left; }
.menu__pop a:hover, .menu__pop button:hover { background: var(--bg); color: var(--ink); }
.menu__pop .ic { width: 18px; height: 18px; color: var(--muted); }
.menu__who { display: grid; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu__who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--navy-50); color: var(--navy); display: grid; place-items: center; font-weight: 700; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 30px; height: 30px; font-size: .85rem; }
.avatar--lg { width: 72px; height: 72px; font-size: 1.6rem; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 90; display: none; }
.drawer.is-open { display: block; }
.drawer__bg { position: absolute; inset: 0; background: rgba(19, 40, 51, .5); }
.drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); background: #fff; overflow-y: auto; animation: slide-in .22s ease-out; display: flex; flex-direction: column; }
@keyframes slide-in { from { transform: translateX(-100%); } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer__head img { height: 30px; width: auto; }
.drawer__sec { padding: 12px 8px; border-bottom: 1px solid var(--line); }
.drawer__sec h4 { font-size: .78rem; color: var(--muted); font-weight: 600; margin: 4px 10px 6px; }
.drawer__sec a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; color: var(--ink); font-weight: 500; }
.drawer__sec a:hover { background: var(--bg); color: var(--ink); }
.drawer__sec a .ic { color: var(--navy); }
.drawer__foot { padding: 16px; display: grid; gap: 10px; margin-top: auto; border-top: 1px solid var(--line); }
.drawer__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Bottom nav (app feel) */
.bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: calc(var(--bnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: 0 -6px 18px -12px rgba(24, 37, 45, .25); }
.bnav a, .bnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .7rem; font-weight: 600; background: none; border: 0; position: relative; }
.bnav .ic { width: 22px; height: 22px; }
.bnav .is-active { color: var(--navy); }
.bnav .is-active::before { content: ''; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--orange); }
.bnav .count { top: 6px; right: calc(50% - 20px); }
@media (min-width: 1024px) { .bnav { display: none; } }

/* Toasts */
.toasts { position: fixed; top: 84px; right: 16px; left: 16px; z-index: 120; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; max-width: 420px; padding: 12px 12px 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: var(--sh-3); font-size: .93rem; animation: toast-in .22s ease-out; border-left: 4px solid var(--navy-100); }
.toast button { background: none; border: 0; color: inherit; opacity: .7; padding: 0; line-height: 1; }
.toast--success { border-left-color: #4CC38A; } .toast--error { border-left-color: #FF6B5E; } .toast--warn { border-left-color: var(--gold); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* ==========================================================================
   Home
   ========================================================================== */
.home-top { display: grid; gap: 16px; padding-top: 20px; }
@media (min-width: 1024px) { .home-top { grid-template-columns: minmax(0, 1fr) 330px; padding-top: 24px; } }
.hero { position: relative; border-radius: var(--r-xl); overflow: hidden; color: #fff; background: radial-gradient(120% 140% at 85% 20%, var(--navy-400) 0%, var(--navy) 45%, var(--navy-900) 100%); min-height: 360px; display: grid; }
.hero::after { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 89, 45, .35), rgba(240, 89, 45, 0) 70%); pointer-events: none; }
.hero__grid { position: relative; z-index: 1; display: grid; gap: 24px; padding: 28px 22px; align-items: center; }
@media (min-width: 760px) { .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); padding: 44px 44px; gap: 36px; } }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); font-size: .82rem; font-weight: 600; margin-bottom: 16px; }
.hero__eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(240, 89, 45, .3); }
.hero h1 { color: #fff; font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3rem); line-height: 1.12; font-weight: 800; margin-bottom: 12px; letter-spacing: -.02em; max-width: 16ch; }
.hero__text { color: rgba(255, 255, 255, .78); font-size: 1.02rem; max-width: 46ch; margin-bottom: 20px; }
.hero__stats { display: flex; margin-bottom: 24px; flex-wrap: wrap; row-gap: 10px; }
.hero__stats div { padding-right: 18px; margin-right: 18px; border-right: 1px solid rgba(255, 255, 255, .16); }
.hero__stats div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__stats b { display: block; font-size: 1.15rem; font-weight: 800; color: #fff; }
.hero__stats span { font-size: .78rem; color: rgba(255, 255, 255, .62); }
.hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--img::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(19, 40, 51, .92) 0%, rgba(19, 40, 51, .6) 55%, rgba(19, 40, 51, .1) 100%); }
.hero--img .hero__grid { z-index: 2; }
.spot { background: #fff; color: var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .55); max-width: 330px; justify-self: center; width: 100%; }
.spot__img { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--bg); margin: 10px; border-radius: 14px; overflow: hidden; }
.spot__img img { width: 100%; height: 100%; object-fit: cover; }
.spot__tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 5px 11px; font-size: .78rem; font-weight: 700; box-shadow: var(--sh-1); color: var(--ink); }
.spot__tag .ic { width: 14px; height: 14px; color: var(--ok); }
.spot__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 16px; background: var(--navy-900); color: #fff; }
.spot__foot > div { min-width: 0; }
.spot__foot b { display: block; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot__foot strong { font-size: 1.3rem; font-weight: 800; }
.spot__go { width: 44px; height: 44px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; color: #fff; flex: none; }
.spot__go:hover { background: var(--orange-600); color: #fff; }
@media (max-width: 759px) { .spot { display: none; } }
.promos { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) { .promos { grid-template-columns: 1fr; } }
.promo { position: relative; border-radius: var(--r-xl); padding: 20px 96px 20px 22px; display: flex; flex-direction: column; justify-content: center; min-height: 172px; overflow: hidden; border: 1px solid transparent; color: var(--ink); }
.promo h3, .promo__t { font-size: 1.12rem; font-weight: 800; margin-bottom: 4px; }
.promo p { font-size: .86rem; color: var(--text); margin-bottom: 14px; }
.promo .btn { align-self: flex-start; background: #fff; color: var(--ink); min-height: 36px; padding: 0 16px; font-size: .86rem; border-radius: 999px; box-shadow: var(--sh-1); }
.promo .btn:hover { color: var(--orange-600); }
.promo__ic { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: #fff; }
.promo__ic .ic { width: 28px; height: 28px; }
.promo__img { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; object-fit: cover; }
.promo--orange { background: linear-gradient(135deg, var(--orange-50) 0%, var(--orange-100) 100%); border-color: var(--orange-100); }
.promo--orange .promo__ic { background: linear-gradient(145deg, var(--orange-400), var(--orange-600)); box-shadow: 0 10px 22px -10px var(--orange); }
.promo--teal, .promo--navy, .promo--light { background: linear-gradient(135deg, var(--navy-50) 0%, var(--navy-100) 100%); border-color: var(--navy-100); }
.promo--teal .promo__ic, .promo--navy .promo__ic, .promo--light .promo__ic { background: linear-gradient(145deg, var(--navy-400), var(--navy)); box-shadow: 0 10px 22px -10px var(--navy); }
.promo--dark { background: linear-gradient(135deg, var(--navy), var(--navy-900)); color: #fff; }
.promo--dark h3 { color: #fff; } .promo--dark p { color: rgba(255, 255, 255, .78); }
.promo--dark .promo__ic { background: var(--orange); }
@media (max-width: 559px) { .promo { min-height: 156px; padding: 64px 14px 14px; } .promo__ic { width: 40px; height: 40px; top: 14px; left: 14px; right: auto; transform: none; border-radius: 12px; } .promo__ic .ic { width: 20px; height: 20px; } .promo h3, .promo__t { font-size: .98rem; } .promo p { font-size: .8rem; margin-bottom: 10px; } }

.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cats { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; } }
.cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-align: center; font-size: .82rem; font-weight: 600; line-height: 1.3; transition: border-color .15s, box-shadow .15s; }
.cat:hover { border-color: var(--navy-100); box-shadow: var(--sh-2); color: var(--ink); }
.cat__ic { width: 46px; height: 46px; border-radius: 14px; background: var(--navy-50); color: var(--navy); display: grid; place-items: center; overflow: hidden; }
.cat__ic img { width: 100%; height: 100%; object-fit: cover; }
.cat__ic .ic { width: 22px; height: 22px; }
.cat--accent .cat__ic { background: var(--orange-50); color: var(--orange-600); }
@media (max-width: 639px) {
  /* categories: a swipeable slider, 3 per row (2 rows when there are many) */
  .cats { grid-auto-flow: column; grid-template-columns: none; grid-template-rows: auto; grid-auto-columns: calc((100% - 2 * var(--gut) - 20px) / 3); gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut) 4px; scroll-padding-inline: var(--gut); }
  .cats::-webkit-scrollbar { display: none; }
  .cats--rows2 { grid-template-rows: repeat(2, auto); }
  .cats .cat { scroll-snap-align: start; padding: 14px 6px 12px; border-radius: 16px; border-color: transparent; box-shadow: 0 1px 2px rgba(24, 37, 45, .06), 0 8px 18px -14px rgba(24, 37, 45, .35); font-size: .8rem; min-height: 112px; justify-content: flex-start; }
  .cats .cat__ic { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(145deg, var(--navy-50), #fff); box-shadow: inset 0 0 0 1px rgba(33, 65, 80, .08); }
  .cats .cat--accent .cat__ic { background: linear-gradient(145deg, var(--orange-50), #fff); }
  .cats .cat__ic .ic { width: 24px; height: 24px; }
  .cats .cat > span:last-child, .cats .cat { overflow-wrap: anywhere; }
  .scrollbar { height: 4px; border-radius: 4px; background: var(--line); margin: 10px auto 0; width: 64px; overflow: hidden; }
  .scrollbar > i { display: block; height: 100%; border-radius: 4px; background: var(--orange); width: 40%; transform: translateX(0); transition: transform .1s linear; }
}
@media (min-width: 640px) { .scrollbar { display: none; } }

.flash { border-radius: var(--r-xl); background: linear-gradient(110deg, var(--navy-900) 0%, var(--navy) 60%, var(--flash-end) 100%); color: #fff; padding: 18px 20px; display: grid; gap: 16px; align-items: center; grid-template-columns: 1fr auto; }
@media (min-width: 900px) { .flash { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 28px; padding: 20px 28px; } }
.flash__t { display: flex; align-items: center; gap: 14px; }
.flash__ic { width: 48px; height: 48px; border-radius: 14px; background: var(--orange); display: grid; place-items: center; flex: none; }
.flash__ic .ic { width: 24px; height: 24px; }
.flash__t small { display: block; color: var(--orange-200); font-size: .76rem; font-weight: 600; }
.flash__t b { font-size: 1.35rem; font-weight: 800; }
.flash__txt { color: rgba(255, 255, 255, .78); font-size: .9rem; margin: 0; max-width: 46ch; }
.timer { display: flex; align-items: center; gap: 6px; }
.timer > span { font-size: .78rem; color: rgba(255, 255, 255, .78); margin-right: 6px; }
.timer div { width: 52px; text-align: center; padding: 6px 0; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.timer div b { display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.timer div small { font-size: .62rem; color: rgba(255, 255, 255, .62); }
.timer i { font-style: normal; color: rgba(255, 255, 255, .62); font-weight: 700; }
.flash .btn { background: #fff; color: var(--ink); border-radius: 999px; }
.flash .btn:hover { color: var(--orange-600); }
@media (max-width: 899px) { .flash__txt { display: none; } .flash .timer { grid-column: 1 / -1; grid-row: 2; } }

.why { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) { .why { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.why > div { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.why__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--navy-50); color: var(--navy); display: grid; place-items: center; flex: none; }
.why h3 { font-size: .98rem; margin: 2px 0 2px; }
.why p { font-size: .84rem; color: var(--muted); margin: 0; }
@media (max-width: 559px) { .why > div { flex-direction: column; gap: 10px; padding: 14px; } }

/* ==========================================================================
   Cards
   ========================================================================== */
.pcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.pcard:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.pcard__media { position: relative; display: block; aspect-ratio: var(--card-ratio); background: #F7F8FA; overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: var(--card-fit); transition: transform .35s ease; }
.pcard:hover .pcard__media img { transform: scale(1.03); }
.wish { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; color: var(--muted); display: grid; place-items: center; box-shadow: var(--sh-1); }
.wish .ic { width: 18px; height: 18px; }
.wish:hover { color: var(--bad); }
.wish.is-on { color: var(--bad); }
.wish.is-on .ic { fill: var(--bad); }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 0; flex: 1; }
.pcard__brand { display: flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--info); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__brand .ic { width: 13px; height: 13px; }
.pcard__title { color: var(--ink); font-weight: 500; font-size: .92rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: var(--title-lines); -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.4em * var(--title-lines)); }
.pcard__title:hover { color: var(--orange-600); }
.pcard .price b { font-size: 1.05rem; }
.pcard__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.rate { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; color: var(--muted); }
.rate .ic { width: 13px; height: 13px; fill: var(--gold); color: var(--gold); stroke: none; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 10px 14px 0; padding: 10px 0 12px; border-top: 1px dashed var(--line); font-size: .76rem; color: var(--muted); }
.pcard__foot span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pcard__foot .ic { width: 14px; height: 14px; }
.qadd { position: absolute; right: 10px; top: calc(100% - 56px); }
.qadd button, .qadd a { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; display: grid; place-items: center; box-shadow: var(--sh-2); }
.qadd button:hover, .qadd a:hover { background: var(--orange-btn, #CA4B26); color: #fff; }
.qadd .ic { width: 18px; height: 18px; }
.pcard__mediawrap { position: relative; }
.pcard__mediawrap .qadd { top: auto; bottom: 10px; }
@media (max-width: 559px) { .pcard__body { padding: 10px 10px 0; } .pcard__foot { margin: 8px 10px 0; } .pcard__foot .hide-xs { display: none; } .qadd button, .qadd a { width: 32px; height: 32px; } }
.soldout { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .6); font-weight: 700; color: var(--ink); z-index: 1; }

.ccard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: var(--ink); height: 100%; transition: border-color .15s, box-shadow .15s; }
.ccard:hover { border-color: var(--line-2); box-shadow: var(--sh-2); color: var(--ink); }
.ccard__media { position: relative; aspect-ratio: 16 / 9; background: var(--bg); }
.ccard__media img { width: 100%; height: 100%; object-fit: cover; }
.ccard__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.ccard__title { font-weight: 700; font-size: 1rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccard__by { color: var(--muted); font-size: .85rem; }
.ccard__meta { display: flex; gap: 14px; color: var(--muted); font-size: .82rem; flex-wrap: wrap; }
.ccard__meta span { display: inline-flex; align-items: center; gap: 5px; }
.ccard__meta .ic { width: 15px; height: 15px; }
.ccard .price { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }

.bcard { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.bcard:hover { box-shadow: 0 10px 28px rgba(16, 24, 40, .09); transform: translateY(-2px); }
.bcard__mediawrap { position: relative; }
.bcard__media { position: relative; display: grid; place-items: center; padding: 20px 16px 34px; background: radial-gradient(120% 90% at 50% 0%, #fbfcfe 0%, #eef2f8 60%, #e6ecf5 100%); overflow: hidden; }
.bcard__media::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 22px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(16, 24, 40, .28), rgba(16, 24, 40, 0)); }
.bcard__book { position: relative; z-index: 1; display: block; width: 66%; max-width: 200px; aspect-ratio: 3 / 4; border-radius: 3px 8px 8px 3px; overflow: hidden; background: var(--line); box-shadow: 0 1px 1px rgba(24, 37, 45, .12), 0 14px 22px -10px rgba(24, 37, 45, .5), 6px 0 0 -2px #fff, 6px 0 0 -1px rgba(24, 37, 45, .12); transition: transform .3s ease, box-shadow .3s ease; }
.bcard__book::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .25) 0, rgba(255, 255, 255, .22) 4px, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, .12) 100%); pointer-events: none; }
.bcard__book img { width: 100%; height: 100%; object-fit: cover; }
.bcard:hover .bcard__book { transform: translateY(-4px) rotate(-1.5deg); }
.bcard__fmt { position: absolute; z-index: 2; bottom: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .92); padding: 3px 9px; border-radius: 99px; box-shadow: 0 1px 4px rgba(16, 24, 40, .08); }
.bcard__fmt .ic { width: 13px; height: 13px; }
.bcard__body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; flex: 1; }
.bcard__title { font-weight: 700; color: var(--ink); line-height: 1.38; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.76em; }
.bcard__title:hover { color: var(--orange-600); }
.bcard__author { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcard__author .ic { width: 13px; height: 13px; flex: none; color: var(--info); }
.bcard__alt { font-size: .76rem; color: var(--muted); }
.bcard__alt b { color: var(--orange-600); font-weight: 600; }
.bcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.bcard__foot .price { min-width: 0; column-gap: 6px; row-gap: 0; }
.bcard__foot .price s { font-size: .78rem; }
.bcard__foot form { margin: 0; }
.bcard .price { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bcard .price b { font-size: 1.06rem; }
.bcard__foot .btn { min-height: 34px; padding-inline: 12px; }
@media (max-width: 640px) { .bcard__media { padding: 14px 10px 26px; } .bcard__media::after { bottom: 15px; } .bcard__body { padding: 10px 10px 11px; } .bcard__title { font-size: .86rem; } .bcard__foot .btn span { display: none; } .bcard__foot .btn { padding-inline: 10px; } }

.scard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.scard:hover { border-color: var(--line-2); box-shadow: var(--sh-2); color: var(--ink); }
.scard__media { aspect-ratio: 16 / 8; overflow: hidden; background: var(--bg); }
.scard__media img { width: 100%; height: 100%; object-fit: cover; }
.scard__body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.scard__title { font-weight: 700; font-size: 1.02rem; line-height: 1.4; }
.scard__short { color: var(--muted); font-size: .9rem; }
.scard__foot { padding-top: 10px; margin-top: 4px; border-top: 1px dashed var(--line); font-size: .86rem; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--muted); }
.scard__foot b { font-size: 1.05rem; color: var(--ink); }

/* Stars */
.stars { display: inline-flex; gap: 1px; vertical-align: -2px; }
.star .ic { width: 15px; height: 15px; color: var(--line-2); fill: var(--line-2); stroke: none; }
.star.on .ic { color: var(--gold); fill: var(--gold); }
.rate-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-bottom: 10px; }
.rate-input input { position: absolute; opacity: 0; pointer-events: none; }
.rate-input label { cursor: pointer; }
.rate-input label .ic { width: 28px; height: 28px; fill: var(--line-2); stroke: none; }
.rate-input input:checked ~ label .ic, .rate-input label:hover .ic, .rate-input label:hover ~ label .ic { fill: var(--gold); }
.reviews { display: grid; gap: 12px; margin-top: 12px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.review header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.review header b { color: var(--ink); }
.review p { margin: 0; }
.review-form { margin: 10px 0 16px; max-width: 580px; }
.review-form .btn { margin-top: 10px; }
.rating-line { display: flex; align-items: center; gap: 10px; }
.rating-line b { font-size: 1.6rem; font-weight: 800; color: var(--ink); }

/* ==========================================================================
   Listing pages
   ========================================================================== */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); padding: 16px 0 4px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--navy); }
.crumbs .ic { width: 14px; height: 14px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 8px 18px; }
.wrap.pagehead { padding-top: 24px; }
.pagehead .h1 { margin: 0; }
.pagehead p { margin: 4px 0 0; color: var(--muted); }
.listing { display: grid; gap: 20px; padding-bottom: 40px; }
@media (min-width: 1024px) { .listing { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; } }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar select { width: auto; min-height: 40px; font-size: .9rem; }
.toolbar__count { color: var(--muted); font-size: .9rem; }
.filters { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.filters h3, .filters .fh { font-size: .9rem; margin: 18px 0 8px; }
.filters h3:first-of-type, .filters .fh:first-of-type { margin-top: 0; }
.filters .radio { padding: 5px 0; font-size: .9rem; }
.filters .radio small { color: var(--muted); margin-left: auto; }
.filters fieldset { max-height: 260px; overflow-y: auto; }
.filters .pricebox { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters .pricebox input { min-height: 38px; font-size: .9rem; }
.filters .btn { margin-top: 18px; }
.filter-open { display: inline-flex; }
.filters__head { display: none; }
@media (min-width: 1024px) { .filters { position: sticky; top: calc(var(--header-h) + 16px); } .filter-open { display: none !important; } }
@media (max-width: 1023px) {
  .filters { position: fixed; inset: 0 auto 0 0; width: min(340px, 88vw); z-index: 95; border-radius: 0; overflow-y: auto; transform: translateX(-105%); transition: transform .22s ease; }
  .filters.is-open { transform: none; box-shadow: var(--sh-3); }
  .filters__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
}
.empty { text-align: center; padding: 56px 16px; color: var(--muted); background: #fff; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.empty > .ic { width: 46px; height: 46px; color: var(--line-2); margin: 0 auto 12px; }
.empty h3 { color: var(--ink); font-size: 1.15rem; justify-content: center; }
.empty--sm { padding: 24px; }
.empty--page { padding: 80px 16px; border: 0; background: transparent; }
.empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.errcode { font-size: 4.5rem; font-weight: 800; color: var(--navy); margin: 0; line-height: 1; }
.pager { display: flex; justify-content: center; gap: 6px; padding: 28px 0 8px; flex-wrap: wrap; }
.pager a { min-width: 40px; height: 40px; padding: 0 12px; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.pager a.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.pager__gap { min-width: 24px; height: 40px; display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.pager__info { flex-basis: 100%; text-align: center; color: var(--muted); font-size: .85rem; margin-top: 4px; }

/* ==========================================================================
   Product page
   ========================================================================== */
.pd { display: grid; gap: 24px; padding-bottom: 24px; }
@media (min-width: 900px) { .pd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; } }
@media (min-width: 1200px) { .pd { grid-template-columns: 560px minmax(0, 1fr); } }
.gallery { display: grid; gap: 12px; align-content: start; }
@media (min-width: 900px) { .gallery { position: sticky; top: calc(var(--header-h) + 16px); } }
.gallery__main { position: relative; aspect-ratio: 1 / 1; background: #F7F8FA; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs button { flex: none; width: 74px; height: 74px; padding: 0; border-radius: 12px; border: 2px solid var(--line); background: #F7F8FA; overflow: hidden; }
.gallery__thumbs button.is-on { border-color: var(--navy); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd__info { min-width: 0; }
.pd__brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .86rem; color: var(--muted); margin-bottom: 8px; }
.pd__brand a { font-weight: 600; }
.pd h1 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.8rem); font-weight: 700; line-height: 1.3; margin-bottom: 12px; }
.pd__price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 18px; background: #F8FAFB; border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 18px; }
.pd__price b { font-size: 1.9rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.pd__price s { color: var(--muted); }
.pd__flash { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: linear-gradient(90deg, var(--orange-btn, #CA4B26), var(--orange-btn-h, #B24221)); color: #fff; margin-bottom: 14px; font-weight: 600; }
.pd__flash .ic { width: 18px; height: 18px; vertical-align: -3px; }
.pd__flash .timer div { width: auto; padding: 2px 8px; background: rgba(255, 255, 255, .2); border: 0; }
.pd__flash .timer div b { font-size: 1rem; display: inline; }
.pd__flash .timer div small { display: none; }
.pd__flash .timer i { color: #fff; }
.opts { margin-bottom: 16px; }
.opts .lbl { margin-top: 0; }
.opts__list { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; }
.opt span { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 14px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--ink); }
.opt span small { font-weight: 500; color: var(--muted); font-size: .76rem; }
.opt input:checked + span { border-color: var(--navy); background: var(--navy-50); color: var(--navy); }
.opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--navy-100); }
.opt input:disabled + span { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.buyrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.buyrow .btn { flex: 1 1 150px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; overflow: hidden; flex: none; }
.qty button { width: 42px; height: 50px; border: 0; background: none; display: grid; place-items: center; }
.qty button:hover { background: var(--bg); }
.qty .ic { width: 16px; height: 16px; }
.qty input { width: 52px; min-height: 50px; border: 0; border-inline: 1px solid var(--line); border-radius: 0; text-align: center; padding: 0; -moz-appearance: textfield; font-weight: 600; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty--sm button { width: 32px; height: 34px; } .qty--sm input { min-height: 34px; width: 42px; }
.wishbtn { width: 50px; height: 50px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; display: grid; place-items: center; color: var(--muted); flex: none; }
.wishbtn:hover { color: var(--bad); }
.wishbtn.is-on { color: var(--bad); border-color: var(--bad-50); background: var(--bad-50); }
.wishbtn.is-on .ic { fill: var(--bad); }
.assure { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.assure > div { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.assure > div:last-child { border-bottom: 0; }
.assure .ic { color: var(--navy); width: 20px; height: 20px; }
.assure b { display: block; color: var(--ink); font-weight: 600; }
.assure small { color: var(--muted); }
.pdtabs__nav { position: sticky; top: var(--header-h); z-index: 5; display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; background: var(--bg); }
.pdtabs__nav a { padding: 12px 16px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.pdtabs__nav a:hover { color: var(--ink); }
.pdtabs__nav a.is-on { color: var(--ink); border-bottom-color: var(--orange); }
.pdsec { padding: 24px 0; scroll-margin-top: calc(var(--header-h) + 60px); }
.pdsec .h2 { margin-bottom: 14px; }
.pdsec--tab { padding-top: 20px; min-height: 160px; }
.pdsec--tab > .h2:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.specs-t { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; max-width: 760px; }
.specs-t th, .specs-t td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.specs-t th { width: 38%; background: #F8FAFB; color: var(--muted); font-weight: 600; }
.specs-t tr:last-child th, .specs-t tr:last-child td { border-bottom: 0; }
.stickybuy { position: fixed; left: 0; right: 0; bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)); z-index: 44; background: #fff; border-top: 1px solid var(--line); padding: 10px var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -8px 20px -14px rgba(24, 37, 45, .35); transition: transform .2s; }
.stickybuy.is-off { transform: translateY(170%); }
@media (min-width: 1024px) { .stickybuy { display: none; } }

/* Book page */
.bk { display: grid; gap: 24px; padding-bottom: 24px; }
@media (min-width: 800px) { .bk { grid-template-columns: 320px minmax(0, 1fr); gap: 44px; } }
.bk__cover { display: grid; gap: 14px; align-content: start; justify-items: center; }
.book3d { width: min(270px, 66vw); position: relative; }
.book3d::after { content: ''; position: absolute; inset: 0; border-radius: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .25) 0, rgba(255, 255, 255, .2) 5px, rgba(0, 0, 0, 0) 12px); pointer-events: none; }
.book3d img { width: 100%; border-radius: 0; box-shadow: 0 2px 0 rgba(24, 37, 45, .08), 14px 22px 34px -16px rgba(24, 37, 45, .55); aspect-ratio: 3 / 4; object-fit: cover; }
.formats { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 520px) { .formats { grid-template-columns: 1fr 1fr; } }
.format { position: relative; cursor: pointer; }
.format input { position: absolute; opacity: 0; }
.format__body { display: grid; gap: 4px; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; transition: border-color .15s, background .15s; }
.format input:checked + .format__body { border-color: var(--navy); background: var(--navy-50); }
.format__t { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.format__t .ic { color: var(--navy); width: 18px; height: 18px; }
.format small { font-size: .82rem; }
.format.is-disabled { opacity: .55; cursor: not-allowed; }
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 20px 0; padding: 16px 0; border-block: 1px solid var(--line); }
.specs dt { font-size: .8rem; color: var(--muted); }
.specs dd { margin: 0; font-weight: 600; color: var(--ink); }
.specs__wide { grid-column: span 2; }
.specs__wide dd { white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Course page */
.chero { background: linear-gradient(120deg, var(--navy-900), var(--navy)); color: #fff; padding: 4px 0 30px; }
.chero .crumbs, .chero .crumbs a { color: rgba(255, 255, 255, .62); }
.chero h1 { color: #fff; max-width: 24ch; }
.chero__sub { font-size: 1.05rem; color: rgba(255, 255, 255, .78); max-width: 60ch; }
.chero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: rgba(255, 255, 255, .78); font-size: .9rem; }
.chero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.chero__meta .ic { width: 17px; height: 17px; color: var(--orange-200); }
@media (min-width: 1024px) { .chero { padding: 8px 0 48px; } .chero__in { padding-right: 400px; } }
.cdetail { display: grid; gap: 24px; padding-bottom: 40px; }
.cdetail__main { min-width: 0; }
.buybox { order: -1; margin-top: -16px; }
@media (min-width: 1024px) { .cdetail { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; } .buybox { order: 0; margin-top: -210px; } .buybox__card { position: sticky; top: calc(var(--header-h) + 16px); } }
.buybox__card { padding: 0; overflow: hidden; box-shadow: var(--sh-2); }
.buybox__media img, .yt-lite { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.yt-lite { display: grid; place-items: center; border: 0; background-size: cover; background-position: center; }
.yt-lite span { width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--orange); display: grid; place-items: center; box-shadow: var(--sh-2); }
.yt-lite span .ic { width: 30px; height: 30px; }
.buybox__media iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.buybox__body { padding: 18px 20px 20px; display: grid; gap: 10px; }
.buybox__list { list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: .9rem; }
.buybox__list li { display: flex; gap: 10px; align-items: center; }
.buybox__list .ic { width: 18px; height: 18px; color: var(--navy); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .learnbox .checks { grid-template-columns: 1fr 1fr; } }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .ic { color: var(--ok); width: 20px; height: 20px; margin-top: 2px; }
.dots { padding-left: 1.2em; }
.curriculum { display: grid; gap: 10px; }
.cur { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cur summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
.cur summary::-webkit-details-marker { display: none; }
.cur summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.cur[open] summary::after { transform: rotate(-135deg); }
.cur__n { width: 28px; height: 28px; border-radius: 8px; background: var(--navy-50); color: var(--navy); display: grid; place-items: center; font-size: .86rem; flex: none; }
.cur__t { flex: 1; }
.cur__c { color: var(--muted); font-size: .82rem; font-weight: 400; }
.cur ul { list-style: none; margin: 0; padding: 0 16px 8px; border-top: 1px solid var(--line); }
.cur li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .94rem; }
.cur li:last-child { border-bottom: 0; }
.cur li > .ic { color: var(--muted); width: 18px; height: 18px; }
.cur li a, .cur li > span:not(.chip):not(.lockic) { flex: 1; }
.lockic .ic { width: 16px; height: 16px; color: var(--muted); }
.instructor { display: flex; gap: 18px; align-items: flex-start; }
.instructor img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg); }

/* Service page */
.svc { display: grid; gap: 24px; padding-bottom: 40px; }
@media (min-width: 1024px) { .svc { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; } .svc__pkgs { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; } }
.svc__img { border-radius: var(--r-xl); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; margin: 14px 0 6px; }
.svc__meta { display: flex; gap: 16px; color: var(--muted); flex-wrap: wrap; }
.svc__meta span { display: inline-flex; align-items: center; gap: 6px; }
.pkgtabs { padding: 0; overflow: hidden; box-shadow: var(--sh-2); }
.pkgtabs__nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line); }
.pkgtabs__nav button { border: 0; background: #F8FAFB; padding: 13px 8px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; }
.pkgtabs__nav button[aria-selected=true] { background: #fff; color: var(--ink); border-bottom-color: var(--orange); }
.pkg { padding: 20px; display: grid; gap: 12px; }
.pkg__meta { display: flex; gap: 16px; font-size: .9rem; margin: 0; flex-wrap: wrap; }
.pkg__meta span { display: inline-flex; align-items: center; gap: 6px; }
.pkg__meta .ic { width: 17px; height: 17px; color: var(--navy); }
.flow { list-style: none; padding: 0; margin: 0; counter-reset: f; }
.flow li { counter-increment: f; position: relative; padding: 0 0 18px 46px; display: grid; gap: 2px; }
.flow li::before { content: counter(f); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .88rem; }
.flow li::after { content: ''; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--line-2); }
.flow li:last-child::after { display: none; }
.flow b { color: var(--ink); }
.flow span { color: var(--muted); }

/* ==========================================================================
   Auth (single page with Login / Register tabs)
   ========================================================================== */
.auth { display: grid; place-items: center; padding: 32px var(--gut) 56px; }
.auth__box { width: 100%; max-width: 980px; display: grid; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3); }
@media (min-width: 860px) { .auth__box { grid-template-columns: 1fr 1.05fr; } }
.auth__side { background: radial-gradient(120% 120% at 100% 0%, var(--navy-400) 0%, var(--navy) 50%, var(--navy-900) 100%); color: #fff; padding: 40px 36px; display: flex; flex-direction: column; gap: 22px; }
.auth__side img { height: 40px; width: auto; align-self: flex-start; }
.auth__side h2 { color: #fff; font-size: 1.5rem; margin: 6px 0 0; }
.auth__side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.auth__side li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, .82); font-size: .95rem; }
.auth__side li .ic { width: 22px; height: 22px; color: var(--orange-200); margin-top: 1px; }
.auth__side small { margin-top: auto; color: rgba(255, 255, 255, .55); }
@media (max-width: 859px) { .auth__side { display: none; } }
.auth__main { padding: 28px 22px 26px; }
@media (min-width: 860px) { .auth__main { padding: 40px 44px; } }
.atabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--bg); border-radius: 12px; margin-bottom: 22px; }
.atabs a { text-align: center; padding: 10px; border-radius: 9px; font-weight: 600; color: var(--muted); }
.atabs a.is-on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.auth__main h1 { font-size: 1.35rem; margin-bottom: 4px; }
.auth__main .lead { color: var(--muted); margin-bottom: 18px; }
.auth__alt { text-align: center; margin: 16px 0 0; color: var(--muted); font-size: .92rem; }
.auth__row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: .9rem; }

/* ==========================================================================
   Cart, checkout, order
   ========================================================================== */
.cartgrid, .checkout { display: grid; gap: 20px; padding-bottom: 40px; }
@media (min-width: 960px) { .cartgrid, .checkout { grid-template-columns: minmax(0, 1fr) 370px; align-items: start; } .summary { position: sticky; top: calc(var(--header-h) + 16px); } }
.cartlist { padding: 4px 18px; }
.citem { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.citem:last-of-type { border-bottom: 0; }
.citem__img img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; background: var(--bg); }
.citem__img.is-book img { height: auto; aspect-ratio: 3 / 4; border-radius: 3px 8px 8px 3px; }
.citem__info { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.citem__t { font-weight: 600; color: var(--ink); line-height: 1.4; }
.citem__price { display: grid; justify-items: end; gap: 4px; text-align: right; }
.citem__price b { color: var(--ink); }
.summary { display: grid; gap: 14px; }
.summary .h3 { margin: 0; }
.coupon { display: flex; gap: 8px; align-items: center; }
.coupon input { min-height: 40px; }
.totals { margin: 0; display: grid; gap: 9px; }
.totals div { display: flex; justify-content: space-between; gap: 12px; font-size: .94rem; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-weight: 600; color: var(--ink); }
.totals .ok dt, .totals .ok dd { color: var(--ok); }
.totals__grand { padding-top: 12px; border-top: 1px solid var(--line); }
.totals__grand dt { color: var(--ink); font-weight: 700; }
.totals__grand dd { font-size: 1.35rem; font-weight: 800; }
.co-sec + .co-sec { margin-top: 16px; }
.co-sec .h3 { margin-bottom: 14px; }
.zones { grid-column: 1 / -1; }
.paylist { display: grid; gap: 10px; }
.pay { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--line-2); border-radius: 12px; cursor: pointer; background: #fff; }
.pay input { width: 20px; height: 20px; accent-color: var(--navy); margin-top: 2px; flex: none; }
.pay:has(input:checked) { border-color: var(--navy); background: var(--navy-50); }
.pay__body { display: grid; gap: 2px; }
.pay__body b { color: var(--ink); }
.pay__body small { color: var(--muted); }
.manualpay { border: 1px dashed var(--orange-100); border-radius: 12px; padding: 14px 16px; background: var(--orange-50); }
.manualpay__steps { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 4px; }
.minilist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.minilist li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .9rem; }
.minilist img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; background: var(--bg); }
.minilist span { display: grid; line-height: 1.35; min-width: 0; }
.minilist small { font-size: .78rem; }
.orderpage { padding-block: 24px 48px; display: grid; gap: 16px; }
.orderhead { display: flex; gap: 16px; align-items: center; }
.orderhead .h2 { margin: 0; }
.orderhead p { margin: 2px 0 0; }
.orderhead__ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.orderhead__ic.ok { background: var(--ok-50); color: var(--ok); }
.orderhead__ic.wait { background: var(--warn-50); color: var(--warn); }
.orderhead__ic .ic { width: 28px; height: 28px; }
.nextsteps { display: flex; gap: 10px; flex-wrap: wrap; }
.olist { list-style: none; padding: 0; margin: 0 0 12px; }
.olist li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.kv { margin: 14px 0 0; display: grid; gap: 10px; }
.kv > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.kv dt { color: var(--muted); font-size: .9rem; }
.kv dd { margin: 0; }
.notice { background: var(--info-50); color: #183B63; border-radius: 12px; padding: 12px 16px; }
.notice--bad { background: var(--bad-50); color: #7A2216; }

/* ==========================================================================
   Account
   ========================================================================== */
.account { display: grid; gap: 20px; padding-top: 20px; padding-bottom: 40px; }
@media (min-width: 960px) { .account { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding-top: 28px; } }
.accside { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 960px) { .accside { position: sticky; top: calc(var(--header-h) + 16px); } }
.accuser { display: flex; align-items: center; gap: 12px; padding: 14px; }
.accuser > div { min-width: 0; }
.accuser b { display: block; color: var(--ink); }
.accuser small { color: var(--muted); font-size: .8rem; display: block; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 959px) { .accuser { display: none; } }
.accnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
.accnav::-webkit-scrollbar { display: none; }
.accnav a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; color: var(--text); background: #fff; border: 1px solid var(--line); font-weight: 500; white-space: nowrap; }
.accnav a .ic { width: 18px; height: 18px; color: var(--muted); }
.accnav a.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.accnav a.is-active .ic { color: #fff; }
@media (min-width: 960px) { .accnav { flex-direction: column; margin: 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); } .accnav a { border: 0; } .accnav a:hover:not(.is-active) { background: var(--bg); } }
.account__main { min-width: 0; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: grid; gap: 2px; padding: 16px; color: var(--ink); }
.stat:hover { color: var(--ink); border-color: var(--line-2); }
.stat .ic { color: var(--navy); margin-bottom: 4px; }
.stat b { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.stat span { color: var(--muted); font-size: .86rem; }
.mycourses { display: grid; gap: 14px; }
@media (min-width: 700px) { .mycourses { grid-template-columns: 1fr 1fr; } }
.mycourse { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 10px; color: var(--ink); }
.mycourse:hover { color: var(--ink); border-color: var(--line-2); }
.mycourse img { width: 120px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.mycourse__b { display: grid; gap: 6px; align-content: start; }
.list { padding: 0; overflow: hidden; }
.list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--ink); }
.list__row:last-child { border-bottom: 0; }
.list__row:hover { background: #F8FAFB; color: var(--ink); }
.list__row > span:first-child { display: grid; min-width: 0; }
.list__row small { font-size: .82rem; }
@media (max-width: 560px) { .list__row { grid-template-columns: minmax(0, 1fr) auto; } .list__row > .tag, .list__row > .tags { grid-column: 1; grid-row: 2; justify-self: start; } }
.library { display: grid; gap: 14px; }
@media (min-width: 640px) { .library { grid-template-columns: 1fr 1fr; } }
.libitem { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 12px; }
.libitem img { width: 84px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px 8px 8px 3px; box-shadow: 0 8px 14px -10px rgba(24, 37, 45, .5); }
.libitem > div { display: grid; gap: 6px; align-content: start; justify-items: start; }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--orange); border-radius: 3px; transition: width .3s; }
.sohead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.sohead .h2 { margin: 0; }
.thread { display: grid; gap: 12px; margin: 18px 0; }
.msg { max-width: 640px; background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 12px 14px; }
.msg--me { margin-left: auto; background: var(--navy-50); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.msg--system { max-width: none; background: transparent; border: 1px dashed var(--line-2); text-align: center; color: var(--muted); font-size: .9rem; border-radius: 10px; }
.msg--delivery { border: 2px solid var(--ok); }
.msg__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .84rem; margin-bottom: 4px; }
.msg__meta small { color: var(--muted); }
.msg--system .msg__meta { justify-content: center; }
.msg__text { overflow-wrap: anywhere; }
.msg__file { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: .88rem; }
.composer { display: grid; gap: 10px; }
.composer__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.composer__row input[type=file] { flex: 1 1 200px; }
.composer--req { border: 2px solid var(--orange-100); }
.formcard { max-width: 760px; }
.profile-av { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.profile-av .btn { margin: 0; }
.pagebody { padding-top: 16px; padding-bottom: 40px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--navy-900); color: rgba(255, 255, 255, .7); margin-top: 32px; }
.footer__pre { border-bottom: 1px solid rgba(255, 255, 255, .08); padding-block: 28px; }
.footer__pre .why > div { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.footer__pre .why h3 { color: #fff; }
.footer__pre .why p { color: rgba(255, 255, 255, .56); }
.footer__pre .why__ic { background: rgba(240, 89, 45, .15); color: var(--orange-200); }
.footer__grid { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; padding-block: 40px; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(var(--fcols, 4), minmax(0, 1fr)); gap: 32px; } }
.footer__grid > div:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer__grid > div:first-child { grid-column: auto; } }
.footer__logo { display: inline-block; padding: 0 !important; }
.footer__logo img { height: 38px; width: auto; }
.footer h4 { color: #fff; font-size: .95rem; margin: 4px 0 12px; }
.footer a { color: rgba(255, 255, 255, .7); display: block; padding: 4px 0; font-size: .92rem; }
.footer a:hover { color: #fff; }
.footer__about { font-size: .9rem; margin: 14px 0; max-width: 36ch; }
.footer__contact { display: grid; gap: 6px; font-size: .9rem; }
.footer__contact div { display: flex; gap: 10px; align-items: center; }
.footer__contact .ic { width: 16px; height: 16px; color: var(--orange-200); }
.footer__contact a { display: inline; padding: 0; }
.paybadges { display: flex; flex-wrap: wrap; gap: 6px; }
.paybadges span { padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .88); font-size: .78rem; font-weight: 600; }
.social { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.social a { padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, .08); font-size: .8rem; font-weight: 600; color: #fff; }
.social a:hover { background: var(--orange-btn, #CA4B26); color: #fff; }
.footer__bar { border-top: 1px solid rgba(255, 255, 255, .08); }
.footer__bottom { padding-block: 18px; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; text-align: center; gap: 0; font-size: .84rem; color: rgba(255, 255, 255, .55); white-space: nowrap; }
.footer__bottom > span + span::before { content: '·'; margin: 0 10px; color: rgba(255, 255, 255, .35); }
@media (max-width: 760px) {
  .footer__bottom { flex-direction: column; gap: 4px; white-space: normal; }
  .footer__bottom > span + span::before { content: none; }
}
.footer__bottom .footer__dev a { display: inline; padding: 0; color: rgba(255, 255, 255, .85); font-weight: 600; text-decoration: none; }
.footer__bottom .footer__dev a:hover { color: var(--orange); }

/* ==========================================================================
   Learn (player)
   ========================================================================== */
.page-learn { background: var(--navy-950); }
.page-learn .topbar, .page-learn .header, .page-learn .msearch, .page-learn .catnav, .page-learn .footer { display: none; }
.learn { min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); }
.learn__top { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--navy-950); color: #fff; position: sticky; top: 0; z-index: 30; }
.learn__top .iconbtn { color: #fff; }
.learn__top .iconbtn:hover { background: rgba(255, 255, 255, .08); }
.learn__ttl { flex: 1; min-width: 0; display: grid; gap: 2px; }
.learn__ttl b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.learn__prog { display: flex; align-items: center; gap: 10px; }
.learn__prog .bar { width: 140px; background: rgba(255, 255, 255, .15); }
.learn__prog small { color: rgba(255, 255, 255, .62); font-size: .78rem; }
.learn__toggle { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
.learn__body { flex: 1; display: grid; background: var(--bg); }
@media (min-width: 1024px) { .learn__body { grid-template-columns: minmax(0, 1fr) 360px; } .learn__toggle { display: none; } }
.learn__stage { min-width: 0; }
.player { position: relative; background: #000; aspect-ratio: 16 / 9; max-height: calc(100vh - 120px); width: 100%; user-select: none; -webkit-user-select: none; overflow: hidden; }
.player video, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player__err { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-align: center; padding: 24px; background: #000; }
.wm { position: absolute; z-index: 5; pointer-events: none; color: rgba(255, 255, 255, .42); font-size: clamp(11px, 1.4vw, 15px); font-weight: 600; text-shadow: 0 0 2px rgba(0, 0, 0, .55); white-space: nowrap; transition: top 1.6s ease, left 1.6s ease; top: 12%; left: 8%; }
.learn__content { padding: 20px var(--gut) 40px; max-width: 920px; }
@media (min-width: 700px) { .learn__content { padding: 28px 32px 48px; } }
.learn__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.learn__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.learn__side { background: #fff; border-left: 1px solid var(--line); overflow-y: auto; }
@media (min-width: 1024px) { .learn__side { position: sticky; top: 56px; height: calc(100vh - 56px); } .learn__sidehead .iconbtn { display: none; } }
@media (max-width: 1023px) { .learn__side { position: fixed; inset: 0 0 0 auto; width: min(380px, 90vw); z-index: 70; transform: translateX(100%); transition: transform .25s ease; box-shadow: var(--sh-3); } .learn__side.is-open { transform: none; } }
.learn__sidehead { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 1; }
.lsec__t { margin: 0; padding: 12px 16px 6px; font-weight: 600; font-size: .86rem; color: var(--muted); }
.lrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px; color: var(--ink); font-size: .93rem; border-left: 3px solid transparent; }
.lrow:hover { background: var(--bg); color: var(--ink); }
.lrow.is-current { background: var(--navy-50); border-left-color: var(--orange); font-weight: 600; }
.lrow__ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--muted); }
.lrow__ic .ic { width: 14px; height: 14px; }
.lrow.is-done .lrow__ic { background: var(--ok); color: #fff; }
.lrow.is-locked { color: var(--muted); }
.lrow small { color: var(--muted); font-size: .78rem; }

/* ==========================================================================
   Admin
   ========================================================================== */
body.admin { background: #F1F4F7; display: grid; min-height: 100vh; }
@media (min-width: 1024px) { body.admin { grid-template-columns: 256px minmax(0, 1fr); } }
.aside { background: var(--navy-900); color: rgba(255, 255, 255, .76); padding: 18px 12px; display: flex; flex-direction: column; gap: 14px; position: fixed; inset: 0 auto 0 0; width: 268px; z-index: 80; transform: translateX(-100%); transition: transform .2s; overflow-y: auto; }
.aside.is-open { transform: none; box-shadow: var(--sh-3); }
@media (min-width: 1024px) { .aside { position: sticky; top: 0; height: 100vh; transform: none; width: auto; } }
.aside__logo { padding: 2px 10px 8px; display: block; }
.aside__logo img { height: 34px; width: auto; }
.anav { display: grid; gap: 2px; }
.anav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: rgba(255, 255, 255, .76); font-weight: 500; font-size: .94rem; }
.anav a .ic { width: 18px; height: 18px; color: rgba(255, 255, 255, .55); }
.anav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.anav a.is-active { background: rgba(255, 255, 255, .1); color: #fff; }
.anav a.is-active .ic { color: var(--orange); }
.anav a em { margin-left: auto; font-style: normal; background: var(--orange-btn, #CA4B26); color: #fff; border-radius: 99px; padding: 0 8px; font-size: .74rem; font-weight: 700; }
.anav__sec { margin: 12px 10px 4px; font-size: .74rem; color: rgba(255, 255, 255, .42); }
.aside__foot { margin-top: auto; display: grid; gap: 4px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 10px; }
.aside__foot a, .aside__foot button { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .76); background: none; border: 0; padding: 8px 10px; font-size: .9rem; border-radius: 8px; text-align: left; width: 100%; }
.aside__foot .ic { width: 17px; height: 17px; }
.amain { min-width: 0; }
.atop { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.atop__t { font-size: 1.2rem; margin: 0; flex: 1; }
.atop__who { color: var(--muted); font-size: .9rem; }
.acontent { padding: 20px; display: grid; gap: 18px; align-content: start; max-width: 1440px; }
@media (min-width: 1024px) { .acontent { padding: 28px; } }
.admin .toasts { top: 70px; }
.only-mobile { display: none; }
@media (max-width: 1023px) { .only-mobile { display: inline-grid; } }
.atools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.atools__search { flex: 1; max-width: 360px; }
.atools--filters { justify-content: flex-start; }
.atools--filters input, .atools--filters select { width: auto; flex: 1 1 160px; max-width: 260px; }
.kpis { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: grid; gap: 4px; color: var(--ink); }
.kpi:hover { color: var(--ink); }
.kpi span { color: var(--muted); font-size: .88rem; }
.kpi b { font-size: 1.8rem; line-height: 1.15; font-weight: 800; }
.kpi small { color: var(--muted); font-size: .8rem; }
.kpi--alert { border-color: var(--orange-100); background: var(--orange-50); }
.agrid { display: grid; gap: 18px; }
@media (min-width: 1024px) { .agrid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .agrid--side { grid-template-columns: 360px minmax(0, 1fr); } .agrid--side2 { grid-template-columns: minmax(0, 1fr) 360px; } }
.agrid > * { min-width: 0; }
.spark { width: 100%; height: 160px; display: block; }
.spark rect { fill: var(--navy); }
.spark rect:hover { fill: var(--orange); }
.spark__legend { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; margin-top: 6px; }
.bytype { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: .9rem; }
.bytype span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot--course { background: var(--navy); } .dot--book { background: var(--gold); } .dot--service { background: var(--info); } .dot--product { background: var(--orange); }
.simple { list-style: none; margin: 0; padding: 0; }
.simple li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.simple li:last-child { border-bottom: 0; }
.tablewrap { overflow-x: auto; padding: 0; }
.card.tablewrap { padding: 0; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .82rem; padding: 12px 14px; background: #F8FAFB; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table input, .table select { min-height: 36px; padding: 6px 10px; }
.row-alert td { background: #FFF8F3; }
.actions { white-space: nowrap; }
.actions, .actions form { display: inline-flex; gap: 4px; align-items: center; }
td.actions { display: table-cell; vertical-align: middle; }
td.actions > * { vertical-align: middle; margin-inline-end: 4px; }
.thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--bg); }
.thumb--wide { width: 72px; height: 42px; }
.thumb--book { width: 40px; height: 54px; border-radius: 2px 5px 5px 2px; }
.preview { margin-top: 10px; border-radius: 10px; max-height: 180px; object-fit: cover; }
.preview--book { max-width: 140px; }
.aform { display: grid; gap: 18px; }
@media (min-width: 1100px) { .aform { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; } .aform__side { position: sticky; top: 80px; } }
.aform__main, .aform__side { display: grid; gap: 18px; min-width: 0; }
.cursec { display: grid; gap: 10px; }
.cursec__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cursec__head input[name=title] { flex: 1 1 240px; font-weight: 600; }
.curlist { list-style: none; margin: 0; padding: 0; }
.curlist li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.curlist li .ic { color: var(--muted); width: 18px; height: 18px; }
.curlist li a { flex: 1; }
.curlist input { min-height: 34px; padding: 4px 8px; }
.push { margin-left: auto; }
.segmented { display: grid; gap: 8px; margin-bottom: 14px; }
@media (min-width: 700px) { .segmented { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.segmented label { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: 10px; cursor: pointer; font-size: .9rem; }
.segmented label:has(input:checked) { border-color: var(--navy); background: var(--navy-50); }
.segmented input { accent-color: var(--navy); }
.uploader { display: grid; gap: 6px; margin-bottom: 8px; }
.uploader__row { display: flex; gap: 8px; align-items: center; }
.uploader__row input { flex: 1; }
.uploader__row .btn { margin: 0; flex: none; }
.uploader__bar { display: grid; gap: 4px; }
.uploader__bar .bar i { background: var(--navy); width: 0; }
.convert { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.pkgrow { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #F8FAFB; }
.imgpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 12px; }
.imgpick__it { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.imgpick__it img { width: 100%; height: 100%; object-fit: cover; }
.imgpick__it .x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95); color: var(--bad); display: grid; place-items: center; box-shadow: var(--sh-1); }
.imgpick__it .x .ic { width: 14px; height: 14px; }
.imgpick__it .mv { position: absolute; bottom: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .95); color: var(--navy); display: grid; place-items: center; box-shadow: var(--sh-1); }
.imgpick__it .mv .ic { width: 14px; height: 14px; transform: rotate(180deg); }
.imgpick__it:first-child .mv { display: none; }
.imgpick__it:first-child::after { content: '1'; position: absolute; left: 4px; bottom: 4px; background: var(--navy); color: #fff; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.vrow { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.vrow .lbl { margin: 0 0 4px; font-size: .78rem; }
@media (max-width: 640px) { .vrow { grid-template-columns: 1fr 1fr; } }
.tabs { display: flex; gap: 6px; overflow-x: auto; }
.tabs a { padding: 9px 16px; border-radius: 10px; color: var(--text); font-weight: 600; background: #fff; border: 1px solid var(--line); white-space: nowrap; }
.tabs a.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.settings { max-width: 920px; }
.settings .h3 { margin-top: 24px; }
.payrow { align-items: end; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.verify { border: 2px solid var(--orange-100); background: var(--orange-50); }
.verify__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.verify__actions form { display: flex; gap: 8px; }
.serp { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; font-family: Arial, sans-serif; max-width: 600px; margin-top: 12px; }
.serp__u { color: #202124; font-size: .82rem; }
.serp__t { color: #1a0dab; font-size: 1.15rem; line-height: 1.3; margin: 2px 0; }
.serp__d { color: #4d5156; font-size: .88rem; }
@media print { .topbar, .header, .msearch, .catnav, .bnav, .footer, .aside, .atop { display: none !important; } }

/* Utilities */
.push { margin-left: auto; }
@media (max-width: 559px) { .hide-xs { display: none !important; } }
@media (max-width: 1023px) { .hide-mobile { display: none !important; } }
@media (min-width: 1024px) { .only-mobile-inline { display: none !important; } }
.stack { display: grid; gap: 16px; }
.mt0 { margin-top: 0; } .mt16 { margin-top: 16px; } .mb0 { margin-bottom: 0; }
.block { padding-block: 20px; }
.block__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.block__head .h2, .block__head .h3 { margin: 0; }
.check--lg { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #F8FAFB; }
.kv--big dd { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.pkgedit { display: grid; gap: 12px; }
.preview--logo { max-height: 60px; background: var(--bg); padding: 8px; }
.hlang { display: none; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); font-weight: 700; font-size: .78rem; }
.hlang .ic { width: 15px; height: 15px; color: var(--navy); }
.hlang:hover { border-color: var(--navy); color: var(--navy); }
@media (max-width: 1023px) { .hlang { display: inline-flex; } }
@media (max-width: 380px) { .hlang .ic { display: none; } }
@media (max-width: 559px) {
  .hero__ctas { display: grid; grid-template-columns: 1fr 1fr; }
  .hero__ctas .btn--lg { min-height: 48px; padding: 0 12px; font-size: .94rem; }
  .hlogin .ic { display: none; }
}
.lsec { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.lrow__t { min-width: 0; display: grid; }

/* ---------- Theme options (Admin > Customize) ---------- */
@media (min-width: 1200px) { .rail--p { grid-template-columns: repeat(var(--pcols), minmax(0, 1fr)); } }
@media (max-width: 639px) { .rail--p { grid-auto-columns: calc(88% / var(--pcols-m)); } }
.cards-shadow .pcard, .cards-shadow .ccard, .cards-shadow .scard, .cards-shadow .cat, .cards-shadow .why > div { border-color: transparent; box-shadow: 0 2px 10px -4px rgba(24, 37, 45, .14); }
.cards-shadow .pcard:hover, .cards-shadow .ccard:hover, .cards-shadow .scard:hover { box-shadow: var(--sh-3); }
.cards-flat .pcard, .cards-flat .ccard, .cards-flat .scard { border-color: transparent; box-shadow: none; }
.cards-flat .pcard:hover, .cards-flat .ccard:hover, .cards-flat .scard:hover { box-shadow: none; border-color: var(--line); }
.header-static .header { position: relative; }
.header-brand .header, .header-brand .msearch { background: var(--navy); border-bottom-color: transparent; }
.header-brand .hact, .header-brand .hmenu, .header-brand .hlang { color: #fff; border-color: rgba(255, 255, 255, .3); }
.header-brand .hact:hover, .header-brand .hmenu:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.header-brand .hlang .ic { color: #fff; }
.header-brand .hsearch { background: #fff; border-color: transparent; }
.header-brand .hsearch button { background: var(--orange-btn, #CA4B26); }
.header-brand .count { border-color: var(--navy); }
.page-maint { display: grid; place-items: center; min-height: 100vh; padding: 24px; text-align: center; }
.maint { max-width: 520px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 40px 28px; box-shadow: var(--sh-2); }
.maint img { height: 44px; width: auto; margin: 0 auto 18px; }
/* ---------- Live courses ---------- */
.livetag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: .82rem; font-weight: 700; margin-bottom: 12px; }
.livetag i, .livebadge i { width: 8px; height: 8px; border-radius: 50%; background: #FF4D4D; box-shadow: 0 0 0 0 rgba(255, 77, 77, .6); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } }
.livebadge { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; background: #fff; color: #D92D20; font-size: .74rem; font-weight: 800; letter-spacing: .04em; box-shadow: var(--sh-1); }
.livebox { display: grid; gap: 16px; }
.livebox__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.livebox__facts > div { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: var(--r); background: var(--navy-50); }
.livebox__facts .ic { color: var(--navy); }
.livebox__facts span { display: grid; line-height: 1.3; }
.livebox__facts small { color: var(--muted); font-size: .78rem; }
.livebox__facts b { color: var(--ink); }
.sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sessions li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.sessions li.is-done { opacity: .65; }
.sessions li.is-open { border-color: var(--orange); background: var(--orange-50); }
.sessions__d { display: grid; justify-items: center; padding: 6px; border-radius: 10px; background: var(--bg); line-height: 1.15; }
.sessions__d b { font-size: 1.3rem; color: var(--ink); }
.sessions__d small { font-size: .68rem; color: var(--muted); text-align: center; }
.sessions__t { display: grid; line-height: 1.35; min-width: 0; }
.sessions__t small { color: var(--muted); }
@media (max-width: 559px) { .sessions li { grid-template-columns: 56px minmax(0, 1fr); } .sessions li > :last-child { grid-column: 1 / -1; justify-self: start; } }
/* ---------- Plans ---------- */
.planhero { background: linear-gradient(120deg, var(--navy-900), var(--navy)); color: #fff; padding: 4px 0 34px; }
.planhero .crumbs, .planhero .crumbs a { color: rgba(255, 255, 255, .62); }
.planhero h1 { color: #fff; margin-top: 10px; }
.planhero p { color: rgba(255, 255, 255, .78); max-width: 60ch; }
.planhero__stats { display: flex; gap: 10px 20px; flex-wrap: wrap; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.planhero__stats span { display: inline-flex; align-items: center; gap: 6px; }
.planhero__stats .ic { width: 17px; height: 17px; color: var(--orange-200); }
.plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 380px)); align-items: start; }
.plan { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; display: grid; gap: 12px; }
.plan--hot { border: 2px solid var(--orange); box-shadow: var(--sh-3); }
.plan__ribbon { position: absolute; top: -12px; left: 24px; background: var(--orange-btn, #CA4B26); color: #fff; font-size: .76rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.plan h3 { margin: 0; font-size: 1.2rem; }
.plan p { margin: 0; }
.plan__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__price b { font-size: 2rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.plan__price s { color: var(--muted); }
.plan__price small { color: var(--muted); }
.plan__seats { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r); background: var(--navy-50); color: var(--navy); font-weight: 600; font-size: .9rem; }
.plan__seats .ic { width: 18px; height: 18px; }
.plan .checks { font-size: .93rem; }
.plan__courses { display: grid; gap: 2px; padding: 12px; margin: 4px 0 14px; border-radius: 12px; background: var(--bg); }
.plan__courses > b { font-size: .82rem; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.plan__courses summary { cursor: pointer; color: var(--navy); font-weight: 600; font-size: .88rem; padding-top: 4px; }
.plan__courses a { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: .9rem; color: var(--ink); }
.plan__courses a:hover { color: var(--orange-600); }
.plan__courses a .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--orange); }
.plan .btn { margin-top: 4px; }
.subcard { margin-bottom: 16px; }
.subcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.subcard__head .h3 { margin: 0; }
.seatbar { display: grid; gap: 6px; max-width: 420px; }
.seatbar .bar i { background: var(--navy); }
/* ---------- Admin: Customize ---------- */
.ctabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.ctabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--text); font-weight: 600; white-space: nowrap; font-size: .92rem; }
.ctabs a .ic { width: 17px; height: 17px; color: var(--muted); }
.ctabs a.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.ctabs a.is-active .ic { color: #fff; }
.cform { display: grid; gap: 18px; }
.cform .card { min-width: 0; }
.cform__bar { position: sticky; bottom: 0; z-index: 10; display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.stackx { display: grid; gap: 4px; }
.switch { display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; }
.switch input, .modcard input { position: absolute; opacity: 0; pointer-events: none; }
.switch__ui { position: relative; flex: none; width: 42px; height: 24px; border-radius: 99px; background: var(--line-2); transition: background .15s; }
.switch__ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform .15s; }
.switch input:checked + .switch__ui, .modcard input:checked ~ .switch__ui { background: var(--ok); }
.switch input:checked + .switch__ui::after, .modcard input:checked ~ .switch__ui::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__ui { box-shadow: 0 0 0 3px var(--navy-100); }
.switch__txt { display: grid; line-height: 1.35; }
.switch__txt b { color: var(--ink); font-weight: 600; font-size: .95rem; }
.switch__txt small { color: var(--muted); font-size: .82rem; }
.presets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; }
.modgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.modcard { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-lg); cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.modcard:has(input:checked) { border-color: var(--ok); background: var(--ok-50); }
.modcard__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-50); color: var(--navy); }
.modcard__t { display: grid; line-height: 1.35; }
.modcard__t b { color: var(--ink); }
.modcard__t small { color: var(--muted); font-size: .82rem; }
.palettes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.palette { display: inline-flex; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: #fff; gap: 2px; }
.palette i { width: 18px; height: 22px; border-radius: 5px; }
.palette:hover { border-color: var(--navy); }
.brandup { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 14px; }
.brandup__it { display: grid; gap: 8px; align-content: start; }
.brandup__it .lbl { margin: 0; }
.brandup__pv { height: 84px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; padding: 12px; }
.brandup__pv img { max-height: 56px; max-width: 100%; width: auto; }
.brandup input[type=file] { font-size: .8rem; }
.themepv { position: relative; height: 120px; margin-top: 18px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.themepv__h { position: absolute; left: 0; right: 0; top: 0; height: 26px; }
.themepv__b { position: absolute; left: 16px; top: 42px; width: 55%; height: 62px; border-radius: 10px; }
.themepv__a { position: absolute; right: 16px; top: 56px; width: 90px; height: 34px; border-radius: 999px; }
.fontgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-bottom: 8px; }
.fontcard { position: relative; display: grid; gap: 6px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-lg); cursor: pointer; background: #fff; }
.fontcard input { position: absolute; opacity: 0; }
.fontcard:has(input:checked) { border-color: var(--navy); background: var(--navy-50); box-shadow: 0 0 0 3px var(--navy-100); }
.fontcard__s { font-size: 1.45rem; line-height: 1.5; color: var(--ink); }
.fontcard__n { font-size: .8rem; color: var(--muted); font-family: system-ui, sans-serif; }
.secrows { display: grid; gap: 10px; }
.secrow { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; background: #fff; }
.secrow.is-off { background: #FAFAFA; }
.secrow__top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.secrow__mv { display: inline-flex; gap: 4px; }
.secrow__mv button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-weight: 700; color: var(--muted); }
.secrow__mv button:hover { border-color: var(--navy); color: var(--navy); }
.secrow__n { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted); }
.secrow__f { margin-top: 10px; }
.secrow__f input, .secrow__f textarea { min-height: 38px; font-size: .9rem; }
.featrows { display: grid; gap: 8px; margin-top: 10px; }
.featrow { display: grid; grid-template-columns: 110px repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .featrow { grid-template-columns: 1fr 1fr; } }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.cardpv { margin-top: 16px; }
.pickcourses { display: grid; gap: 2px 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 10px; max-height: 360px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); }
.texts textarea { min-height: 40px; font-size: .9rem; padding: 8px 10px; }
.texts td { vertical-align: top; }
.home-html { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.home-html img { border-radius: var(--r); }
@media (min-width: 1024px) { .home-top--solo { grid-template-columns: 1fr; } }
.spot--course .spot__img { aspect-ratio: 16 / 10; }
.plans--home .plan { color: var(--text); }
.plans--home .plan:hover { border-color: var(--navy); color: var(--text); }
.plans--home .plan h3 { display: flex; gap: 8px; align-items: center; }
/* flipbook builder (admin book form) */
.flipbox { margin-top: 16px; padding: 16px; border: 1.5px dashed var(--line-2); border-radius: 14px; display: grid; gap: 12px; background: var(--bg-2, #F7F9FA); }
.flipbox__head { display: flex; align-items: center; gap: 12px; }
.flipbox__head > div { flex: 1; }
.flipbox__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--orange-50, #FDEDE7); color: var(--orange); }
.flipbox__ic svg { width: 22px; height: 22px; }
.flipbox__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.flipbox .bar { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.flipbox .bar i { display: block; height: 100%; background: var(--orange); transition: width .3s; }
.card .table th { white-space: normal; }
/* content translation admin */
.trbox__head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.trbox__head > div:first-child { flex: 1; min-width: 260px; }
.trstats { display: flex; gap: 10px; }
.trstats span { display: grid; text-align: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: .8rem; color: var(--muted); }
.trstats b { font-size: 1.25rem; color: var(--ink); }
.trstats .ok b { color: var(--ok); }
.trstats .bad b { color: var(--bad); }
.trsteps { margin: 14px 0; padding-left: 20px; display: grid; gap: 6px; font-size: .9rem; color: var(--ink-2, #374151); }
.trbox .uploader__bar { margin-top: 12px; }
.trbox .bar { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.trbox .bar i { display: block; height: 100%; background: var(--orange); transition: width .3s; }
/* plan course picker */
.pickcourses__bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
.pickcourses__bar input { flex: 1; min-width: 180px; }
.pickcourses__sum { font-size: .88rem; font-weight: 600; color: var(--ok); margin: 0 0 8px; }
.pickcourses__sum.bad { color: var(--bad); }
.pickcourses__list { display: grid; gap: 8px; max-height: 460px; overflow: auto; padding: 2px; }
@media (min-width: 900px) { .pickcourses__list { grid-template-columns: 1fr 1fr; } }
.pickc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--line-2); border-radius: 12px; cursor: pointer; }
.pickc[hidden] { display: none; }
.pickc:has(input:checked) { border-color: var(--navy); background: var(--navy-50); }
.pickc input { accent-color: var(--navy); flex: none; }
.pickc img, .pickc__ph { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.pickc__t { display: grid; min-width: 0; line-height: 1.35; }
.pickc__t b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickc__t small { color: var(--muted); font-size: .8rem; }
.inplans { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--ink); padding: 10px 12px; border-radius: 10px; background: var(--orange-50, #FDEDE7); margin-top: 8px; }
.inplans .ic { width: 18px; height: 18px; flex: none; color: var(--orange); margin-top: 2px; }
.inplans a { font-weight: 700; color: var(--navy); }
[data-planscope] .pickcourses { display: block; margin-top: 4px; }
[data-planscope] .segmented { grid-template-columns: 1fr 1fr; }
.seg2 { display: grid; line-height: 1.35; }
.seg2 small { font-size: .78rem; }
/* digital products */
.dmeta { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.dmeta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--navy-50); color: var(--navy); font-size: .84rem; font-weight: 600; }
.dmeta .ic { width: 15px; height: 15px; }
.owned { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ok-50); border: 1px solid rgba(15, 138, 95, .25); margin-bottom: 14px; }
.owned > .ic { width: 22px; height: 22px; color: var(--ok); flex: none; }
.owned span { flex: 1; display: grid; }
.owned small { color: var(--text); }
.flow--digital { margin-top: 22px; padding: 18px 18px 2px; border-radius: 16px; background: var(--bg); }
.pcard__dtag { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(33, 65, 80, .92); color: #fff; font-size: .72rem; font-weight: 700; }
.pcard__dtag .ic { width: 12px; height: 12px; }
.dl { display: grid; gap: 14px; }
.dlitem { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 16px; }
.dlitem img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; background: var(--bg); }
.dlitem h3 { font-size: 1.05rem; margin: 0 0 4px; }
.dlitem__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.dlitem__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dlkeys { margin-top: 12px; display: grid; gap: 6px; }
.dlkey { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: 10px; background: #FBFCFD; }
.dlkey code { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; letter-spacing: .04em; word-break: break-all; }
.dlnote { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--orange); background: var(--orange-50, #FDEDE7); border-radius: 8px; font-size: .88rem; }
@media (max-width: 560px) { .dlitem { grid-template-columns: 64px 1fr; gap: 12px; padding: 12px; } .dlitem img { width: 64px; height: 64px; } }
.ptype { margin-bottom: 16px; }
.ptype label > .ic { width: 22px; height: 22px; color: var(--navy); flex: none; }
.keystats { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.keystats span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: .84rem; color: var(--muted); }
.keystats b { color: var(--ink); }
.keystats .ok b { color: var(--ok); }
.keylist { display: grid; gap: 6px; margin-top: 8px; max-height: 320px; overflow: auto; }
.keylist__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.keylist__row code { font-family: ui-monospace, monospace; font-size: .84rem; word-break: break-all; }
/* ---------- hero slider ---------- */
.hslider { display: block; background: var(--navy-900); isolation: isolate; }
.hslider::after { display: none; }
.hslider__track { display: grid; height: 100%; }
.hslide { grid-area: 1 / 1; position: relative; display: grid; min-height: 380px; overflow: hidden; color: #fff;
  opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.hslide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; z-index: 1; }
.hslide--navy { background: radial-gradient(120% 140% at 85% 20%, var(--navy-400) 0%, var(--navy) 45%, var(--navy-900) 100%); }
.hslide--orange { background: radial-gradient(120% 140% at 85% 15%, #FF8A5B 0%, #F0592D 42%, #B83A16 100%); }
.hslide--teal { background: radial-gradient(120% 140% at 85% 20%, #2C8C8A 0%, #16615F 45%, #0B3A3A 100%); }
.hslide--plum { background: radial-gradient(120% 140% at 85% 20%, #6E4BB8 0%, #43307A 48%, #221844 100%); }
.hslide--wine { background: radial-gradient(120% 140% at 85% 20%, #A44A5E 0%, #6E2B3B 48%, #3A1520 100%); }
.hslide--dark { background: radial-gradient(120% 140% at 85% 20%, #3A4651 0%, #1F2933 50%, #0E1418 100%); }
.hslide--light { background: linear-gradient(135deg, #FFFFFF 0%, var(--navy-50) 100%); color: var(--ink); }
.hslide--light h1, .hslide--light .hslide__h { color: var(--ink) !important; }
.hslide--light .hero__text, .hslide--light .hero__stats span { color: var(--text) !important; }
.hslide--light .hero__eyebrow { background: var(--navy-50); border-color: var(--navy-100); color: var(--navy); }
.hslide--light .btn--line-white { color: var(--navy); border-color: var(--navy-100); }
.hslide__h { color: #fff; font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3rem); line-height: 1.12; font-weight: 800; margin-bottom: 12px; letter-spacing: -.02em; max-width: 16ch; }
.hslide__deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hslide__deco i { position: absolute; border-radius: 50%; }
.hslide__deco i:nth-child(1) { right: -90px; top: -90px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%); }
.hslide__deco i:nth-child(2) { left: 38%; bottom: -140px; width: 280px; height: 280px; border: 1px solid rgba(255, 255, 255, .1); }
.hslide__deco i:nth-child(3) { left: 44%; bottom: -100px; width: 200px; height: 200px; border: 1px solid rgba(255, 255, 255, .08); }
.hslide--navy .hslide__deco i:nth-child(1) { background: radial-gradient(circle, rgba(240, 89, 45, .35), rgba(240, 89, 45, 0) 70%); }
.hslide .hero__grid { z-index: 2; }
.hslide.hero--img::before { z-index: 1; }
/* entrance motion for the active slide */
.hslide__text > * { transform: translateY(14px); opacity: 0; transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s; }
.hslide.is-active .hslide__text > * { transform: none; opacity: 1; }
.hslide.is-active .hslide__text > *:nth-child(2) { transition-delay: .08s; }
.hslide.is-active .hslide__text > *:nth-child(3) { transition-delay: .16s; }
.hslide.is-active .hslide__text > *:nth-child(4) { transition-delay: .24s; }
.hslide.is-active .hslide__text > *:nth-child(5) { transition-delay: .32s; }
.hslide__vis { transform: translateX(30px) scale(.96); opacity: 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1) .15s, opacity .9s .15s; }
.hslide.is-active .hslide__vis { transform: none; opacity: 1; }
.hslide .hero__img { transform: scale(1.06); transition: transform 7s ease-out; }
.hslide.is-active .hero__img { transform: scale(1); }
/* controls */
.hslider__nav { position: absolute; top: 50%; z-index: 5; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .18); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .25s, background .2s; backdrop-filter: blur(6px); }
.hslider__nav .ic { width: 20px; height: 20px; }
.hslider__nav--prev { left: 12px; }
.hslider__nav--next { right: 12px; }
.hslider:hover .hslider__nav, .hslider__nav:focus-visible { opacity: 1; }
.hslider__nav:hover { background: rgba(0, 0, 0, .35); }
.hslider__dots { position: absolute; left: 44px; bottom: 18px; z-index: 5; display: flex; gap: 8px; }
.hslider__dots button { width: 34px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .28); cursor: pointer; overflow: hidden; position: relative; }
.hslider__dots button i { position: absolute; inset: 0; width: 0; background: #fff; border-radius: inherit; }
.hslider__dots button.is-active i { width: 100%; }
.hslider.is-playing .hslider__dots button.is-active i { width: 0; animation: hsfill var(--hs-ms, 6000ms) linear forwards; }
.hslider.is-paused .hslider__dots button.is-active i { animation-play-state: paused; }
@keyframes hsfill { to { width: 100%; } }
.hslide--light ~ .hslider__dots button, .hslider[data-light] .hslider__dots button { background: rgba(33, 65, 80, .2); }
@media (max-width: 759px) {
  .hslide { min-height: 330px; }
  .hslide .hero__grid { padding-bottom: 46px; }
  .hslider__dots { left: 22px; bottom: 16px; }
  .hslider__nav { display: none; }
  .hslide__vis { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hslide, .hslide__text > *, .hslide__vis, .hslide .hero__img { transition: none !important; }
}
/* slide visuals */
.bookfan { position: relative; height: 300px; width: 100%; max-width: 360px; justify-self: center; }
.bookfan__b { position: absolute; top: 20px; width: 168px; aspect-ratio: 3 / 4; border-radius: 0; overflow: hidden; box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .7); background: #fff; }
.bookfan__b img { width: 100%; height: 100%; object-fit: cover; }
.bookfan__b--0 { left: 50%; margin-left: -84px; z-index: 3; top: 0; }
.bookfan__b--1 { left: 4%; transform: rotate(-10deg); z-index: 2; }
.bookfan__b--2 { right: 4%; transform: rotate(10deg); z-index: 1; }
.hframe { justify-self: center; width: 100%; max-width: 420px; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .7); border: 6px solid rgba(255, 255, 255, .14); }
.hframe img { width: 100%; height: auto; display: block; }
.hicons { justify-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; max-width: 280px; }
.hicons span { aspect-ratio: 1; border-radius: 24px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(4px); }
.hicons span:nth-child(1), .hicons span:nth-child(4) { background: rgba(255, 255, 255, .18); }
.hicons .ic { width: 42px; height: 42px; color: #fff; }
.timer--hero { margin: 0 0 22px; }
.timer--hero div { width: 58px; }
.hslide--orange .btn--accent { background: #fff; color: var(--orange-600); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); }
.hslide--orange .btn--accent:hover { background: var(--navy); color: #fff; }
.hslide--orange .hero__eyebrow i { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
@media (min-width: 760px) { .hslider .hero__grid { padding-left: 64px; padding-right: 64px; } }
.hslider.is-light .hslider__dots button { background: rgba(33, 65, 80, .18); }
.hslider.is-light .hslider__dots button i { background: var(--navy); }
.hslider.is-light .hslider__nav { color: var(--navy); border-color: rgba(33, 65, 80, .2); background: rgba(255, 255, 255, .7); }
/* quiz builder (admin) */
.qlist { display: grid; gap: 12px; margin: 12px 0; }
.qblock { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; background: #FBFCFD; }
.qblock__head { display: flex; justify-content: space-between; align-items: center; }
.qopts { display: grid; gap: 6px; }
@media (min-width: 760px) { .qopts { grid-template-columns: 1fr 1fr; } }
.qopt { display: flex; align-items: center; gap: 8px; }
.qopt input[type=radio] { accent-color: var(--ok); width: 18px; height: 18px; flex: none; }
.qopt:has(input[type=radio]:checked) input:not([type=radio]) { border-color: var(--ok); background: var(--ok-50); }
/* quiz (student) */
.quiz { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; scroll-margin-top: 80px; }
.quiz__head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.quiz__head h2 { margin: 0; display: flex; gap: 8px; align-items: center; }
.quiz__q { padding: 14px 0; border-top: 1px dashed var(--line-2); }
.quiz__q:first-of-type { border-top: 0; }
.quiz__q > b { display: block; margin-bottom: 10px; }
.quiz__opts { display: grid; gap: 8px; }
.quiz__opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: 10px; cursor: pointer; }
.quiz__opt:has(input:checked) { border-color: var(--navy); background: var(--navy-50); }
.quiz__opt input { margin-top: 4px; accent-color: var(--navy); }
.quiz__opt.is-right { border-color: var(--ok); background: var(--ok-50); }
.quiz__opt.is-wrong { border-color: var(--bad); background: var(--bad-50); }
.quiz__exp { margin-top: 8px; font-size: .9rem; color: var(--text); padding: 8px 12px; background: var(--bg); border-radius: 8px; }
.quiz__score { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; margin-bottom: 8px; }
.quiz__score.ok { background: var(--ok-50); color: var(--ok); }
.quiz__score.bad { background: var(--bad-50); color: var(--bad); }
.quiz__score b { font-size: 1.4rem; }
.lrow .lrow__q { font-size: .7rem; padding: 1px 6px; border-radius: 6px; background: var(--orange-50, #FDEDE7); color: var(--orange-600); font-weight: 700; flex: none; }
/* book "look inside" */
.book3d--look { position: relative; display: block; border: 0; padding: 0; background: none; cursor: zoom-in; width: 100%; }
.lookbadge { position: absolute; top: -6px; left: 50%; transform: translate(-50%, -100%); z-index: 2; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: #D32F2F; font-weight: 800; font-size: 1.02rem; }
.lookbadge svg { width: 22px; height: 22px; color: #16A34A; transform: translateY(6px); }
.bk__cover { padding-top: 28px; }
.lookin { width: min(1180px, 96vw); height: min(860px, 94vh); max-height: none; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: transparent; }
.lookin::backdrop { background: rgba(10, 20, 26, .62); }
.lookin__in { display: grid; grid-template-columns: 1fr 280px; gap: 14px; height: 100%; }
.lookin__view { background: #fff; border-radius: 14px; overflow: hidden; }
.lookin__view iframe { width: 100%; height: 100%; border: 0; display: block; }
.lookin__side { display: flex; flex-direction: column; gap: 10px; }
.lookin__x { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; padding: 4px 0; }
.lookin__x .ic { width: 22px; height: 22px; }
.lookin__card { background: #fff; border-radius: 14px; padding: 14px; display: grid; gap: 12px; }
.lookin__book { display: flex; gap: 10px; }
.lookin__book img { width: 56px; height: 74px; object-fit: cover; }
.lookin__book b { display: block; font-size: .95rem; }
.lookin__book small { color: var(--muted); }
@media (max-width: 860px) {
  .lookin { width: 100vw; height: 100dvh; max-width: 100vw; border-radius: 0; }
  .lookin__in { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 0; background: #fff; }
  .lookin__side { display: contents; }
  .lookin__x { order: -1; color: var(--ink); padding: 10px 14px; }
  .lookin__view { border-radius: 0; }
  .lookin__card { border-radius: 0; border-top: 1px solid var(--line); grid-template-columns: 1fr auto; align-items: center; padding: 10px 14px; }
  .lookin__book, .lookin__card .price { display: none; }
}

/* Google sign-in */
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:46px;padding:10px 16px;border:1px solid #dadce0;border-radius:var(--btn-r,10px);background:#fff;color:#1f1f1f;font-weight:600;text-decoration:none;transition:background .15s,box-shadow .15s}
.gbtn:hover{background:#f8faff;box-shadow:0 1px 3px rgba(60,64,67,.2);text-decoration:none}
.orline{display:flex;align-items:center;gap:12px;margin:16px 0 4px;color:#5f6b76;font-size:13px}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:#e3e7eb}

/* ---------- v5: service slide, slider layouts, mobile slider ---------- */
.svcstack { justify-self: center; width: 100%; max-width: 340px; display: grid; gap: 10px; }
.svcmain { display: block; background: #fff; color: var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .6); }
.svcmain:hover { color: var(--ink); }
.svcmain__img { position: relative; display: block; aspect-ratio: 2 / 1; margin: 10px 10px 0; border-radius: 14px; overflow: hidden; background: var(--bg); }
.svcmain__img img { width: 100%; height: 100%; object-fit: cover; }
.svcmain__body { display: grid; gap: 6px; padding: 10px 16px 12px; }
.svcmain__body > b { font-size: .98rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svcmain__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .78rem; color: var(--muted); }
.svcmain__meta span { display: inline-flex; align-items: center; gap: 5px; }
.svcmain__meta .ic { width: 14px; height: 14px; color: var(--ok); }
.svcmain__foot { display: flex; align-items: baseline; gap: 6px; border-top: 1px dashed var(--line); padding-top: 10px; }
.svcmain__foot small { color: var(--muted); font-size: .78rem; }
.svcmain__foot strong { font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.svcmain__foot .spot__go { margin-left: auto; width: 38px; height: 38px; align-self: center; }
.svcmini { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px); }
.svcmini:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.svcmini__img { width: 64px; height: 44px; flex: none; border-radius: 9px; overflow: hidden; background: rgba(255, 255, 255, .2); }
.svcmini__img img { width: 100%; height: 100%; object-fit: cover; }
.svcmini__t { min-width: 0; display: grid; }
.svcmini__t b { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svcmini__t small { font-size: .74rem; color: rgba(255, 255, 255, .72); }
.hslide--light .svcmini { background: #fff; border-color: var(--line); color: var(--ink); }
.hslide--light .svcmini__t small { color: var(--muted); }

@media (min-width: 1024px) {
  .home-top--side1 .promos { grid-template-columns: 1fr; }
  .home-top--side1 .promo { min-height: 100%; padding: 28px 24px; justify-content: flex-end; }
  .home-top--side1 .promo__ic { top: 28px; left: 24px; right: auto; transform: none; }
}
/* admin: slider layout picker */
.layopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.layopt { display: grid; gap: 8px; padding: 10px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: .86rem; font-weight: 600; background: #fff; }
.layopt input { position: absolute; opacity: 0; pointer-events: none; }
.layopt:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-100); }
.layopt__pic { display: flex; gap: 5px; height: 54px; padding: 6px; border-radius: 8px; background: var(--bg); }
.layopt__pic i { display: block; border-radius: 5px; }
.layopt__pic .lo-big, .layopt__pic .lo-main { flex: 1; background: var(--navy); }
.layopt__pic .lo-col { width: 30%; display: grid; gap: 5px; }
.layopt__pic .lo-col i { background: var(--orange-200); }

/* Mobile & small tablets: compact, app-style banner cards with text + picture side by side */
@media (max-width: 759px) {
  .home-top { gap: 10px; padding-top: 12px; }
  .hero.hslider { border-radius: 18px; min-height: 0; }
  .hslide { min-height: 0; }
  .hslide .hero__grid { grid-template-columns: minmax(0, 1fr) 38%; gap: 12px; padding: 18px 14px 32px 18px; align-items: center; }
  .hslide.hero--img .hero__grid { grid-template-columns: minmax(0, 1fr) 20%; }
  .hslide .hero__eyebrow { font-size: .68rem; padding: 3px 9px 3px 7px; margin-bottom: 8px; gap: 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hslide .hero__eyebrow i { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(240, 89, 45, .3); }
  .hslide h1, .hslide .hslide__h { font-size: clamp(1.08rem, .8rem + 1.6vw, 1.35rem); line-height: 1.25; margin-bottom: 6px; max-width: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: 0; }
  .hslide .hero__text { font-size: .78rem; line-height: 1.45; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255, 255, 255, .8); }
  .hslide .hero__stats { display: none; }
  .hslide .hero__ctas { display: flex; gap: 8px; }
  .hslide .hero__ctas .btn--line-white { display: none; }
  .hslide .hero__ctas .btn--lg { min-height: 36px; padding: 0 14px; font-size: .8rem; }
  .hslide .hero__ctas .btn .ic { width: 15px; height: 15px; }
  .hslide .timer--hero { margin: 0 0 10px; gap: 4px; }
  .hslide .timer--hero div { width: 38px; padding: 4px 0; border-radius: 8px; }
  .hslide .timer--hero b { font-size: .86rem; }
  .hslide .timer--hero small { font-size: .56rem; }
  .hslide__vis { display: block; transform: translateX(16px) scale(.96); }
  .hslide .spot { display: block; max-width: none; border-radius: 14px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
  .hslide .spot__img { margin: 5px; border-radius: 10px; }
  .hslide .spot--course .spot__img { aspect-ratio: 4 / 3; }
  .hslide .spot__tag, .hslide .spot__foot { display: none; }
  .hslide .spot .badge-off { top: 6px; right: 6px !important; font-size: .64rem; padding: 2px 5px; }
  .hslide .bookfan { height: 140px; max-width: none; }
  .hslide .bookfan__b { width: 74px; top: 14px; }
  .hslide .bookfan__b--0 { margin-left: -37px; top: 0; }
  .hslide .bookfan__b--1 { left: 0; }
  .hslide .bookfan__b--2 { right: 0; }
  .hslide .hframe { border-width: 3px; border-radius: 12px; max-width: none; }
  .hslide .hicons { gap: 6px; max-width: none; }
  .hslide .hicons span { border-radius: 12px; }
  .hslide .hicons .ic { width: 22px; height: 22px; }
  .hslide .svcstack { max-width: none; }
  .hslide .svcmain { border-radius: 14px; }
  .hslide .svcmain__img { margin: 5px; border-radius: 10px; aspect-ratio: 4 / 3; }
  .hslide .svcmain__body, .hslide .svcmini, .hslide .svcmain .spot__tag { display: none; }
  .hslider__dots { left: 18px; bottom: 12px; gap: 5px; }
  .hslider__dots button { width: 16px; height: 4px; }
  .hslider__dots button.is-active { width: 26px; }
  /* small promo cards under the slider: one compact row each */
  .promos { gap: 10px; }
  .promo { min-height: 0; padding: 12px 12px 12px 58px; border-radius: 16px; justify-content: center; }
  .promo__ic { width: 36px !important; height: 36px !important; left: 12px !important; top: 50% !important; right: auto !important; transform: translateY(-50%) !important; border-radius: 11px !important; }
  .promo__ic .ic { width: 18px !important; height: 18px !important; }
  .promo h3, .promo__t { font-size: .86rem !important; margin: 0 0 2px; line-height: 1.3; }
  .promo p { font-size: .72rem !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .promo .btn { display: none; }
  .promo__img { width: 46px; height: 46px; left: 8px; top: 50%; transform: translateY(-50%); border-radius: 10px; right: auto; bottom: auto; }
  .home-top--nopm .promos { display: none; }
}
@media (max-width: 359px) {
  .hslide .hero__grid { grid-template-columns: minmax(0, 1fr) 34%; padding-left: 14px; }
}

/* footer link columns: always open on larger screens, tidy accordions on phones */
.fcol summary { list-style: none; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.fcol summary::-webkit-details-marker { display: none; }
.fcol summary .ic { display: none; width: 18px; height: 18px; color: rgba(255, 255, 255, .5); transition: transform .2s; }
.fcol__lang { margin-top: 20px !important; }
@media (max-width: 759px) {
  .footer { margin-top: 20px; }
  .footer__pre { display: none; }
  .footer__grid { grid-template-columns: 1fr; gap: 0; padding-block: 24px 8px; }
  .footer__grid > div:first-child { padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .footer__about { margin: 10px 0 12px; font-size: .86rem; }
  .footer__contact { font-size: .86rem; }
  .fcol { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .fcol summary { pointer-events: auto; cursor: pointer; padding: 14px 0; }
  .fcol summary h4 { margin: 0; font-size: .92rem; }
  .fcol summary .ic { display: block; }
  .fcol[open] summary .ic { transform: rotate(180deg); }
  .fcol__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding-bottom: 12px; }
  .fcol__links a { font-size: .86rem; padding: 5px 0; }
  .fcol--pay { padding: 16px 0 4px; }
  .fcol--pay h4 { font-size: .86rem; }
  .footer__bottom { padding-block: 14px; font-size: .76rem; }
}

/* ---------- v5: phone & tablet polish (app-like lists, tighter cards, readable headings) ---------- */
@media (max-width: 599px) {
  :root { --gut: 14px; }
  .sec { padding-block: 22px; }
  .sec-head { align-items: center; margin-bottom: 12px; }
  .sec-head .h2 { font-size: 1.12rem; line-height: 1.3; }
  .sec-head p { font-size: .78rem; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .sec-head > a.link { flex: none; white-space: nowrap; font-size: .82rem; }
  .sec-head > a.link .ic { width: 15px; height: 15px; }
  /* product cards */
  .g-products { gap: 10px; }
  .pcard { border-radius: 14px; }
  .pcard__body { padding: 9px 10px 10px; gap: 3px; }
  .pcard__brand { font-size: .68rem; }
  .pcard__brand .ic { width: 11px; height: 11px; }
  .pcard__title { font-size: .84rem; line-height: 1.38; font-weight: 600; min-height: calc(1.38em * var(--title-lines)); }
  .pcard__meta { min-height: 0; font-size: .7rem; }
  .pcard .price { gap: 5px; }
  .pcard .price b { font-size: .98rem; }
  .pcard .price s { font-size: .74rem; }
  .pcard__foot { display: none; }
  .pcard .wish { width: 30px; height: 30px; top: 6px; right: 6px; }
  .pcard .wish .ic { width: 16px; height: 16px; }
  .pcard .qadd button, .pcard .qadd a { width: 32px; height: 32px; }
  .badge-off { font-size: .68rem; padding: 2px 6px; top: 8px; left: 8px; }
  /* course & service lists become compact rows (thumbnail + details), like a store app */
  .g-courses, .g-3 { gap: 10px; }
  .g-courses .ccard, .g-3 .scard { display: grid; grid-template-columns: 118px minmax(0, 1fr); border-radius: 14px; }
  .g-courses .ccard__media, .g-3 .scard__media { aspect-ratio: auto; height: 100%; min-height: 96px; }
  .g-courses .ccard__media .badge-off, .g-courses .livebadge { transform: scale(.85); transform-origin: top left; }
  .g-courses .ccard__body, .g-3 .scard__body { padding: 10px 12px; gap: 4px; }
  .g-courses .ccard__title, .g-3 .scard__title { font-size: .88rem; line-height: 1.38; }
  .g-courses .ccard__by { font-size: .74rem; }
  .g-courses .ccard__meta { font-size: .72rem; gap: 10px; }
  .g-courses .ccard__meta .ic { width: 13px; height: 13px; }
  .g-courses .ccard .price { border-top: 0; padding-top: 2px; }
  .g-courses .ccard .price b { font-size: .96rem; }
  .g-3 .scard__short { font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .g-3 .scard__foot { border-top: 0; padding-top: 2px; font-size: .74rem; flex-wrap: wrap; gap: 2px 8px; }
  .g-3 .scard__foot .ic { width: 13px; height: 13px; }
  /* rails on the home page keep the vertical card but a bit smaller */
  .rail--c { grid-auto-columns: 72%; }
  .rail--c .ccard__body { padding: 10px 12px 12px; }
  .rail--c .ccard__title { font-size: .9rem; }
  .rail--p { grid-auto-columns: 46%; }
  /* detail pages */
  .pd h1 { font-size: 1.28rem; line-height: 1.35; margin-bottom: 10px; }
  .book3d, .book3d--look { width: min(220px, 58vw); margin-inline: auto; }
  .bk__cover { padding-top: 34px; }
  .lookbadge { font-size: .9rem; }
  .h1 { font-size: 1.32rem; line-height: 1.35; }
  .pagehead h1, .pagehead .h1 { font-size: 1.3rem; }
  .pagehead p { font-size: .84rem; }
  .crumbs { font-size: .76rem; padding-top: 12px; }
  /* buttons: comfortable tap size, no oversized text */
  .btn { font-size: .9rem; }
  .btn--lg { min-height: 46px; font-size: .94rem; }
  /* the trust boxes repeat the footer; on phones they only add scrolling */
  .home-why { display: none; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .g-products { gap: 12px; }
  .pcard__body { padding: 10px 12px 0; }
  .pcard__foot { margin: 8px 12px 0; padding: 8px 0 10px; }
  .hslide .hero__grid { padding: 32px 36px; gap: 24px; }
}

.pd__info > h1 + .pd__brand { margin: -4px 0 14px; }

/* ---------- v5 admin components ---------- */
.optcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.optcards > label { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; }
.optcards > label:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-100); }
.optcards > label input { margin-top: 3px; accent-color: var(--navy); }
.optcards > label > span { display: grid; gap: 2px; line-height: 1.4; }
.optcards small { color: var(--muted); font-size: .8rem; }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.statrow .stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.statrow .stat b { font-size: 1.5rem; font-weight: 800; }
.statrow .stat span { color: var(--muted); font-size: .84rem; }
.steps-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: .92rem; }
.wrapcode { display: block; width: 100%; white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; background: var(--bg); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); }
textarea.wrapcode { resize: vertical; }
.smtplog { max-height: 340px; overflow: auto; background: #0f1720; color: #cfe3d4; padding: 12px; border-radius: 10px; font-size: .78rem; white-space: pre-wrap; word-break: break-all; }
.nowrap { white-space: nowrap; }
.dot-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .2); vertical-align: middle; }
.barrow { display: grid; grid-template-columns: minmax(0, 140px) 1fr auto; align-items: center; gap: 10px; font-size: .86rem; padding: 4px 0; }
.barrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--navy), var(--navy-400)); width: var(--w); min-width: 4px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.timeline__day { font-size: .78rem; font-weight: 700; color: var(--muted); padding: 12px 0 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tl { display: flex; gap: 12px; padding: 8px 0; font-size: .9rem; line-height: 1.45; }
.tl__ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--muted); }
.tl__ic .ic { width: 15px; height: 15px; }
.tl--order .tl__ic, .tl--recover .tl__ic { background: #E7F6EC; color: #16A34A; }
.tl--cart .tl__ic, .tl--checkout .tl__ic { background: var(--orange-50); color: var(--orange-600); }
.tl--search .tl__ic { background: var(--navy-50); color: var(--navy); }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); font-size: .88rem; }
.kv dd { overflow-wrap: anywhere; }
/* public order tracking */
.trackpage { padding-block: 24px 40px; display: grid; gap: 14px; }
.trackhero { text-align: center; padding: 28px 20px; }
.trackhero__ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--orange-50); color: var(--orange-600); margin-bottom: 10px; }
.trackhero__ic .ic { width: 28px; height: 28px; }
.trackhero h1 { margin: 0 0 4px; }
.trackform { display: flex; gap: 8px; max-width: 520px; margin: 14px auto 6px; }
.trackform input { flex: 1; min-width: 0; }
.trackform .btn { flex: none; }
.trackcard { display: grid; gap: 14px; }
.trackcard__h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.trackcard__h > div:first-child { display: grid; line-height: 1.35; }
.trackcard__h b { font-size: 1.1rem; letter-spacing: .02em; }
.trackcard__tags { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.trackcard__sum { margin: 0; font-size: .92rem; color: var(--text); }
.trackverify { border-top: 1px dashed var(--line); padding-top: 12px; }
.trackverify .trackform { margin: 6px 0 0; max-width: none; }
.trackmore { text-align: center; }
.otl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.otl__s { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 0 4px; }
.otl__s::before { content: ''; position: absolute; top: 13px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.otl__s:first-child::before { display: none; }
.otl__s.is-done::before { background: #16A34A; }
.otl__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--line); color: #fff; }
.otl__dot .ic { width: 15px; height: 15px; }
.otl__s.is-done .otl__dot { background: #16A34A; border-color: #16A34A; }
.otl__s.is-cur .otl__dot { box-shadow: 0 0 0 5px rgba(22, 163, 74, .18); }
.otl__t { display: grid; line-height: 1.3; }
.otl__t b { font-size: .8rem; font-weight: 600; }
.otl__s:not(.is-done) .otl__t b { color: var(--muted); font-weight: 500; }
.otl__t small { font-size: .7rem; color: var(--muted); }
.otl--x { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bad-50); color: var(--bad); }
.otl--x .otl__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.otl--x div { display: grid; }
.otl__courier { margin: 0; font-size: .9rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.otl__courier .ic { width: 18px; height: 18px; color: var(--navy); }
.otl__notes { list-style: none; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); display: grid; gap: 6px; font-size: .86rem; }
.otl__notes li { display: grid; }
.otl__notes small { color: var(--muted); font-size: .74rem; }
.totals__due dt, .totals__due dd { color: var(--orange-600); font-weight: 700; }
@media (max-width: 520px) {
  .otl { grid-template-columns: 1fr; gap: 0; }
  .otl__s { grid-template-columns: 28px 1fr; justify-items: start; text-align: left; gap: 12px; padding: 0 0 14px; }
  .otl__s::before { left: 12.5px; right: auto; top: -14px; height: 14px; width: 3px; }
  .trackform { flex-direction: column; }
}
/* admin orders */
.ohead { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; }
.ohead h2 { margin: 2px 0; font-size: 1.4rem; letter-spacing: .02em; }
.ohead__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ohead__money { display: grid; text-align: right; }
.ohead__money b { font-size: 1.4rem; }
@media (max-width: 700px) { .ohead { grid-template-columns: 1fr; } .ohead__money { text-align: left; } }
.cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.table .num, th.num { text-align: right; white-space: nowrap; }
.inp-sm { width: 110px !important; min-height: 34px !important; padding: 4px 8px !important; text-align: right; }
.inp-xs { width: 72px !important; min-height: 34px !important; padding: 4px 8px !important; text-align: right; }
.totals .inp-sm { display: inline-block; }
.editbox { margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.editbox summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.editbox[open] summary { margin-bottom: 10px; }
.refrow { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.dangerzone { border-color: #f3c7c3; }
.filterbar { flex-wrap: wrap; gap: 8px; }
.filterbar input[type=search] { min-width: 240px; flex: 1; }
.filterbar input, .filterbar select { width: auto; }
.tabs--scroll { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.tabs--scroll a { white-space: nowrap; }
.picker { position: relative; }
.picker__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-3); max-height: 320px; overflow: auto; padding: 6px; }
.picker__list button { display: grid; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.picker__list button:hover { background: var(--bg); }
.picker__list small { color: var(--muted); }
b.warn, .warn { color: #B45309; }

/* COD with advance delivery charge */
.codadv { border: 1.5px solid var(--orange-200); background: var(--orange-50); }
.codadv__head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.codadv__head .ic { width: 22px; height: 22px; color: var(--orange-600); flex: none; margin-top: 2px; }
.codadv__head div { display: grid; line-height: 1.45; }
.codadv__head small { color: var(--text); }
.codadv__sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.codadv__sum div { background: #fff; border-radius: 10px; padding: 8px 12px; }
.codadv__sum dt { font-size: .76rem; color: var(--muted); }
.codadv__sum dd { margin: 0; font-weight: 800; font-size: 1.1rem; }
.codadv__methods { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip--radio { cursor: pointer; background: #fff; gap: 6px; }
.chip--radio:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy-100); }
.subopt { margin: 8px 0 14px 26px; padding: 12px 14px; border-left: 3px solid var(--line); background: var(--bg); border-radius: 0 10px 10px 0; }
.bulkbar select { width: auto; min-width: 200px; }
.otpinput { font-size: 1.4rem !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; max-width: 220px; }
.qrbox { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.qr { width: 180px; height: 180px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.qr svg { width: 100%; height: 100%; }
.backupcodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.backupcodes code { text-align: center; font-size: .95rem; padding: 6px; }
.loginlist li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.permrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; cursor: pointer; }
.permrow:has(input:checked) { border-color: var(--navy); background: var(--navy-50); }
.permrow input { margin-top: 4px; }
.permrow span { display: grid; line-height: 1.4; }
.permrow small { color: var(--muted); font-size: .8rem; }
.rolelist { display: grid; gap: 12px; align-content: start; }

/* ---------- v5: affiliate / reseller ---------- */
.affland { padding-block: 22px 44px; display: grid; gap: 16px; }
.affhero { text-align: center; padding: clamp(28px, 6vw, 56px) 20px; background: linear-gradient(135deg, var(--navy-50), #fff 55%, var(--orange-50)); border: 0; }
.affhero__ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--navy); color: #fff; margin-bottom: 10px; }
.affhero__ic .ic { width: 30px; height: 30px; }
.affhero .lead { max-width: 620px; margin: 6px auto 18px; color: var(--muted); font-size: 1.05rem; }
.btnrow.center { justify-content: center; }
.affgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.affcard__ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--orange-50); color: var(--orange-600); margin-bottom: 6px; }
.affcard .checks li::before { content: '✓'; color: var(--ok); font-weight: 800; }
.prefixed { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.prefixed span { display: flex; align-items: center; padding: 0 10px; background: var(--bg); color: var(--muted); font-size: .8rem; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; direction: rtl; }
.prefixed input { border: 0 !important; border-radius: 0 !important; min-width: 0; flex: 1; box-shadow: none !important; }
.affhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.affhead .h1 { margin: 0; }
.affhead p { margin: 4px 0 0; }
.affpanel .statrow { margin-bottom: 12px; }
.stat--hi { background: linear-gradient(135deg, var(--navy), var(--navy-700)) !important; border-color: transparent !important; }
.stat--hi b, .stat--hi span { color: #fff !important; }
.copyline { display: flex; gap: 8px; }
.copyline input { flex: 1; min-width: 0; }
.linklist li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.linklist li > span { flex: 1 1 220px; min-width: 0; }
.resprofit { font-size: 1.05rem; margin: 10px 0 14px; }
.resprofit b { color: var(--ok); font-size: 1.25rem; }
.resprofit b.bad { color: var(--bad); }
.addstore .picker { margin-bottom: 10px; }
.addstore select { margin: 6px 0 10px; }
.affpanel .table td small { line-height: 1.5; }
span.warn { color: var(--warn); }
span.bad, b.bad, td.bad { color: var(--bad); }
b.ok, td.ok { color: var(--ok); }

/* reseller public store */
.storepage { padding-block: 20px 44px; }
.storehead { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: 18px; background: linear-gradient(135deg, var(--navy), var(--navy-700)); color: #fff; margin-bottom: 18px; }
.storehead .h1 { color: #fff; margin: 0; }
.storehead .muted { color: rgba(255, 255, 255, .8); margin: 4px 0 0; }
.storehead__logo { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--orange); color: #fff; font-size: 1.8rem; font-weight: 800; }
.storehead__meta { margin: 8px 0 0; font-size: .88rem; display: flex; gap: 4px 16px; align-items: center; flex-wrap: wrap; }
.storehead__meta a { color: #fff; }
.storehead__meta .ic { width: 16px; height: 16px; vertical-align: -3px; }
.storegrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: start; }
.storecard { padding: 0; overflow: hidden; }
.storecard__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg); display: block; }
.storecard__body { padding: 14px; display: grid; gap: 6px; }
.storecard__body .h3 { margin: 2px 0 0; }
.storecard__price { font-size: 1.35rem; font-weight: 800; color: var(--orange-600); margin: 0; }
.storeorder summary { list-style: none; cursor: pointer; }
.storeorder summary::-webkit-details-marker { display: none; }
.storeorder[open] summary { display: none; }
.storeorder form { padding-top: 4px; }
.storefoot { margin-top: 22px; text-align: center; }
@media (max-width: 600px) { .storehead { padding: 16px; border-radius: 14px; } .storehead__logo { width: 52px; height: 52px; font-size: 1.4rem; } }

/* admin: affiliates */
.wdlist { display: grid; gap: 10px; }
.wdcard .cardhead { align-items: flex-start; }
.wdform { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.wdform input { flex: 1 1 160px; min-width: 0; }
.minibars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 6px; }
.minibars span { flex: 1; height: var(--h); min-width: 4px; max-width: 36px; background: var(--navy); border-radius: 4px 4px 0 0; opacity: .85; }
.minibars span:hover { opacity: 1; background: var(--orange); }
.agrid--2 { display: grid; gap: 14px; }
@media (min-width: 900px) { .agrid--2 { grid-template-columns: 1fr 1fr; } }
div.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; }
.accside { min-width: 0; }
.accuser > div { min-width: 0; }
.accuser small, .accuser b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.affpanel > .tabs { margin-bottom: 14px; }
.accside { grid-template-columns: minmax(0, 1fr); } .accuser > div { overflow: hidden; }

/* admin: marketing & reports */
.mkstat { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 14px; }
.mkstat .card { display: grid; gap: 6px; align-content: start; padding: 14px; }
.mkstat .card .tag { justify-self: start; }
.mkstat small { font-size: .78rem; line-height: 1.4; }
.table--compact th, .table--compact td { padding: 8px 10px; font-size: .86rem; }
.funnel, .hbar { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 10px; align-items: center; margin: 8px 0; font-size: .88rem; }
.hbar { grid-template-columns: minmax(80px, 28%) 1fr auto auto; }
.funnel i, .hbar i { display: block; height: 10px; border-radius: 6px; background: var(--line); position: relative; overflow: hidden; }
.funnel i::after, .hbar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--navy); border-radius: 6px; }
.hbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar small { color: var(--muted); min-width: 2.5em; text-align: right; }
.feedrow { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.feedrow:first-of-type { border-top: 0; }
.socprev { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.socprev img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.socpick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.socpick a { display: flex; gap: 8px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: .82rem; line-height: 1.3; }
.socpick a:hover { border-color: var(--navy); }
.socpick img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.minibars--tall { height: 180px; }
.minibars__axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .78rem; margin-top: 6px; }
.rangebar { justify-content: space-between; }
.rangebar input[type=date] { width: auto; min-height: 36px; padding: 4px 8px; }
.agrid > div:not([class]) { display: grid; gap: 18px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.agrid > div > *, .card, .form { min-width: 0; }
.card.tablewrap > .h3 { padding: 16px 18px 8px; margin: 0; }
.vcheck { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; margin: 12px 0; font-size: .9rem; border: 1px solid var(--line); }
.vcheck--ok { background: var(--ok-50); color: var(--ok); border-color: transparent; }
.vcheck--warn { background: var(--warn-50); border-color: transparent; }
.vcheck--bad { background: var(--bad-50); color: var(--bad); border-color: transparent; }
.vcheck small { color: inherit; opacity: .9; }
.hlsmaker { display: grid; gap: 8px; justify-items: start; margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--navy-100); border-radius: 12px; background: var(--navy-50); }
.hlsmaker .uploader__bar { width: 100%; }

/* ---------- v5.1: auto pay page ---------- */
.page-pay { background: linear-gradient(180deg, var(--navy-50), var(--bg) 320px); min-height: 100vh; }
.paybox { max-width: 460px; margin: 0 auto; padding: 18px 16px 30px; display: grid; gap: 14px; }
.paybox__head { display: flex; justify-content: space-between; align-items: center; }
.paybox__head img { height: 34px; width: auto; }
.paybox__secure { display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--ok); background: var(--ok-50); padding: 4px 10px; border-radius: 999px; }
.paybox__secure .ic { width: 15px; height: 15px; }
.paybox__amount { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-align: center; display: grid; gap: 4px; box-shadow: 0 10px 30px -18px rgba(16, 32, 48, .35); }
.paybox__amount small { color: var(--muted); }
.paybox__amount b { font-size: 2.2rem; font-weight: 800; color: var(--ink); line-height: 1.15; }
.paybox__timer { justify-self: center; display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--warn); background: var(--warn-50); padding: 3px 10px; border-radius: 999px; margin-top: 4px; }
.paybox__timer .ic { width: 14px; height: 14px; }
.paybox__methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.paym { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); cursor: pointer; font: inherit; color: var(--ink); }
.paym.is-active { border-color: var(--pc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 18%, transparent); }
.paym__logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--pc); color: #fff; font-weight: 800; font-size: 1.1rem; }
.paym b { font-size: .9rem; }
.payhow { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--pc); border-radius: 14px; padding: 12px 14px; }
.payhow ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: .93rem; }
.payhow__num, .payhow__amt { font-size: 1.1rem; letter-spacing: .02em; }
.payform { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.payform input[name=trx_id] { font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.paymsg { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: .9rem; background: var(--info-50); color: var(--info); }
.paymsg--ok { background: var(--ok-50); color: var(--ok); }
.paymsg--warn { background: var(--warn-50); color: #7a4a00; }
.paybox__result { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.paybox__result--ok .h2 { color: var(--ok); }
.paybox__check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; }
.paybox__check .ic { width: 34px; height: 34px; }
.paybox__cancel { text-align: center; font-size: .88rem; margin: 0; }
.paybox__cancel a { color: var(--muted); }
.paybox__foot { text-align: center; font-size: .78rem; color: var(--muted); }
/* admin: auto pay */
.setupsteps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 12px; }
.setupsteps > li { counter-increment: st; position: relative; padding-left: 40px; display: grid; gap: 2px; }
.setupsteps > li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-50); color: var(--navy); font-weight: 800; }
.setupsteps > li.is-done::before { content: '✓'; background: var(--ok); color: #fff; }
.setupsteps small { color: var(--muted); }
.setupsteps a { font-size: .86rem; font-weight: 600; }
.setupsteps--plain > li { font-size: .92rem; }
.provdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); margin-right: 6px; }
.devnew__grid { display: grid; gap: 16px; margin-top: 12px; }
@media (min-width: 760px) { .devnew__grid { grid-template-columns: 190px 1fr; } }
.devqr { width: 190px; height: 190px; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.notice--ok { background: var(--ok-50); border-color: transparent; }
.qorder { padding-block: 20px 40px; display: grid; gap: 14px; }
.qorder__item { display: flex; gap: 14px; align-items: center; }
.qorder__item img { width: 110px; height: 110px; object-fit: cover; border-radius: 12px; flex: none; background: var(--bg); }
.qorder__item .h3 { margin: 0 0 6px; }
.qorder__price { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qorder__price b { font-size: 1.4rem; color: var(--orange-600); }

/* ---------- v5.1: website chat (AI sales agent) ---------- */
.wmchat { position: fixed; right: 16px; bottom: 16px; z-index: 60; font-size: .93rem; }
.has-bnav .wmchat { bottom: calc(76px + env(safe-area-inset-bottom)); }
.wmchat__fab { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-weight: 700; box-shadow: 0 12px 30px -10px rgba(16, 32, 48, .55); }
.wmchat__fab .ic { width: 22px; height: 22px; }
.wmchat.is-open .wmchat__fab span { display: none; }
.wmchat.is-open .wmchat__fab { padding: 12px; }
@media (max-width: 600px) { .wmchat__fab span { display: none; } .wmchat__fab { padding: 13px; } }
.wmchat__panel { position: absolute; right: 0; bottom: 64px; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(16, 32, 48, .45); border: 1px solid var(--line); overflow: hidden; }
@media (max-width: 600px) { .wmchat__panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; z-index: 70; } }
.wmchat__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--navy); color: #fff; }
.wmchat__head b { display: block; }
.wmchat__head small { opacity: .85; font-size: .78rem; display: flex; align-items: center; gap: 5px; }
.wmchat__head small i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; display: inline-block; }
.wmchat__ava { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .15); display: grid; place-items: center; }
.wmchat__ava .ic { width: 20px; height: 20px; }
.wmchat__end { margin-left: auto; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; font: inherit; font-size: .74rem; border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.wmchat__end:hover { background: rgba(255,255,255,.24); }
.wmchat__end + .wmchat__x { margin-left: 2px; }
.wmchat__note { align-self: center; text-align: center; font-size: .8rem; color: var(--muted); margin: 6px auto; max-width: 90%; }
.wmchat__note button { font: inherit; border: 1px solid var(--line, #dde3ea); background: var(--card, #fff); color: inherit; border-radius: 999px; padding: 5px 12px; margin: 6px 3px 0; cursor: pointer; }
.wmchat__note button.is-main { background: var(--navy); color: #fff; border-color: var(--navy); }
.wmchat__hint { align-self: center; text-align: center; font-size: .82rem; color: var(--muted); background: var(--soft, #f3f6f9); border-radius: 12px; padding: 10px 14px; margin: 18px auto 6px; max-width: 86%; line-height: 1.5; }
.wmchat__x { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.1rem; cursor: pointer; padding: 6px; }
.wmchat__log { flex: 1; overflow-y: auto; padding: 14px 12px; display: grid; align-content: start; gap: 8px; background: var(--bg); }
.wmchat__row { display: grid; gap: 6px; justify-items: start; }
.wmchat__row--me { justify-items: end; }
.wmchat__bubble { max-width: 85%; padding: 9px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); line-height: 1.5; word-break: break-word; }
.wmchat__row--me .wmchat__bubble { background: var(--navy); color: #fff; border-color: transparent; border-bottom-right-radius: 4px; }
.wmchat__row--bot .wmchat__bubble { border-bottom-left-radius: 4px; }
.wmchat__row--human .wmchat__bubble { border-color: var(--orange-200); }
.wmchat__bubble a { color: inherit; text-decoration: underline; word-break: break-all; }
.wmchat__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.wmchat__quick button, .wmchat__cbtn button, .wmchat__cbtn a { border: 1px solid var(--navy); background: #fff; color: var(--navy); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .84rem; cursor: pointer; text-decoration: none; }
.wmchat__quick button:hover, .wmchat__cbtn button:hover { background: var(--navy); color: #fff; }
.wmchat__row--cards { justify-items: stretch; }
.wmchat__cards { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.wmchat__card { flex: 0 0 200px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; gap: 4px; padding-bottom: 10px; }
.wmchat__card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bg); }
.wmchat__card b { padding: 0 10px; font-size: .88rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wmchat__card small { padding: 0 10px; color: var(--orange-600); font-weight: 700; }
.wmchat__cbtn { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 0; }
.wmchat__cbtn button, .wmchat__cbtn a { padding: 5px 10px; font-size: .78rem; }
.wmchat__cbtn button:first-child { background: var(--orange-btn, var(--orange)); border-color: transparent; color: #fff; }
.wmchat__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: #fff; }
.wmchat__form input { flex: 1; min-width: 0; border-radius: 999px !important; }
.wmchat__form button { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--orange-btn, var(--orange)); color: #fff; display: grid; place-items: center; cursor: pointer; }
.wmchat__form button .ic { width: 18px; height: 18px; }
.wmchat__typing { display: inline-flex; gap: 4px; }
.wmchat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: wmdot 1s infinite; }
.wmchat__typing i:nth-child(2) { animation-delay: .15s; } .wmchat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wmdot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* v5.1 admin inbox + agent */
.ticklist { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.ticklist li { padding-left: 24px; position: relative; line-height: 1.5; }
.ticklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green, #1a7f4b); font-weight: 700; }
.chtag { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.chtag--messenger { background: #e7f0ff; border-color: #c4d8ff; color: #0a5bd8; }
.chtag--instagram { background: #fde8f3; border-color: #f7c3de; color: #b3186e; }
.chtag--whatsapp { background: #e4f8ec; border-color: #bfe9cf; color: #128048; }
.inboxlist tr.is-unread td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.inboxlist .badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: #fff; font-size: .72rem; text-align: center; }
.inboxchat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.inboxchat__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.inboxchat__head form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inboxchat__log { max-height: 60vh; min-height: 260px; overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 10px; background: var(--bg); }
.imsg { display: grid; gap: 3px; justify-items: start; }
.imsg__b { max-width: 80%; background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 9px 12px; line-height: 1.5; word-break: break-word; }
.imsg small { color: var(--muted); font-size: .72rem; }
.imsg--bot, .imsg--human { justify-items: end; }
.imsg--bot .imsg__b { background: #eef3fb; border-color: #d7e2f3; border-radius: 14px 14px 4px 14px; }
.imsg--human .imsg__b { background: var(--navy); color: #fff; border-color: transparent; border-radius: 14px 14px 4px 14px; }
.imsg__cards, .imsg__quick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.imsg__cards span, .imsg__quick span { font-size: .78rem; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 8px; padding: 3px 8px; }
.inboxchat__reply { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.inboxchat__reply textarea { flex: 1; min-width: 0; resize: vertical; }
.inboxchat + .help, .inboxchat .help { padding: 0 14px 12px; margin: 0; }
.agenttry { display: flex; flex-direction: column; gap: 10px; }
.agenttry__log { height: 480px; overflow-y: auto; padding: 12px; background: var(--bg); border-radius: 12px; display: grid; align-content: start; gap: 8px; }
.agenttry__form { display: flex; gap: 8px; }
.agenttry__form input { flex: 1; min-width: 0; }
@media (max-width: 640px) { .imsg__b { max-width: 92%; } .agenttry__log { height: 60vh; } }
.cardgen { display: grid; gap: 10px; margin: 6px 0 12px; }
.cardgen__prev { display: grid; gap: 8px; justify-items: start; }
.cardgen__prev canvas { width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.cardgen__styles { display: flex; gap: 6px; flex-wrap: wrap; }
.cardgen__styles .chip { cursor: pointer; font: inherit; }

/* v5.1.1 product card in chat (website widget, admin inbox, admin tester) */
.wmchat__ava.is-named { font-weight: 700; font-size: 1rem; background: var(--orange); color: #fff; }
.wmchat__cards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.wmcard { flex: 0 0 212px; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px -12px rgba(24, 37, 45, .45); }
.wmcard__img { position: relative; display: block; aspect-ratio: 1; background: #F5F6F8; }
.wmcard__img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.wmcard__noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #EEF1F4, #F8F9FA); }
.wmcard__off { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 6px; background: var(--bad); color: #fff; font-size: .72rem; font-weight: 700; }
.wmcard__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 8px; flex: 1; }
.wmcard__tag { font-size: .7rem; color: var(--info); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wmcard__title { font-size: .86rem; line-height: 1.35; color: var(--ink); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.wmcard__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wmcard__price strong { color: var(--orange-600); font-size: 1rem; }
.wmcard__price s { color: var(--muted); font-size: .76rem; }
.wmcard__sub { color: var(--orange-600); font-weight: 700; }
.wmcard__stock { font-size: .7rem; color: var(--ok, #1a7f4b); display: inline-flex; align-items: center; gap: 4px; }
.wmcard__stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wmcard__stock.is-out { color: var(--bad); }
.wmcard__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 10px 10px; }
.wmcard__btns > :only-child { grid-column: 1 / -1; }
.wmcard__btns button, .wmcard__btns a { border: 1px solid var(--line-2, var(--line)); background: #fff; color: var(--ink); border-radius: 9px; padding: 7px 6px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wmcard__btns .is-main { background: var(--orange-btn, var(--orange)); border-color: transparent; color: #fff; }
.wmcard__btns button:hover { filter: brightness(.96); }
.imsg .wmchat__cards { margin-top: 6px; max-width: 100%; }
.imsg__b--cards { background: transparent !important; border: 0 !important; padding: 0 !important; max-width: 100% !important; }
.imsg__b--cards .wmcard__btns span { border: 1px solid var(--line); border-radius: 9px; padding: 6px; font-size: .76rem; text-align: center; background: #fff; }
.imsg__b--cards .wmcard__btns span.is-main { background: var(--orange); color: #fff; border-color: transparent; }

/* v5.2 auto-pay methods */
.paym__logo.has-img { background: #fff; border: 1px solid var(--line); padding: 4px; }
.paym__logo img { width: 100%; height: 100%; object-fit: contain; }
.paybox__methods--many { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; }
.payhow__top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.payhow__nums { display: grid; gap: 8px; flex: 1; min-width: 0; }
.payhow__nums small { color: var(--muted); font-size: .76rem; }
.payhow__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.payhow__qr { margin: 0; text-align: center; flex: none; }
.payhow__qr img { width: 112px; height: 112px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 4px; }
.payhow__qr figcaption { font-size: .7rem; color: var(--muted); }
.pmlist { display: grid; gap: 10px; margin-top: 10px; }
.pmrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--pc); border-radius: 14px; padding: 12px 14px; }
.pmrow.is-off { opacity: .6; }
.pmrow__logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--pc); color: #fff; font-weight: 800; overflow: hidden; }
.pmrow__logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pmrow__info { min-width: 0; display: grid; gap: 3px; }
.pmrow__info small { color: var(--muted); }
.pmrow__act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pmrow__act .inline-form { display: inline-flex; gap: 4px; align-items: center; }
.colorpick { display: flex; align-items: center; gap: 8px; }
.colorpick input[type=color] { width: 44px; height: 40px; padding: 2px; }
.smsassign summary { list-style: none; cursor: pointer; margin-bottom: 6px; }
.smsassign summary::-webkit-details-marker { display: none; }
.smsassign form { display: grid; gap: 6px; min-width: 220px; }
.hitbody { word-break: break-word; }
@media (max-width: 640px) { .pmrow { grid-template-columns: auto 1fr; } .pmrow__act { grid-column: 1 / -1; justify-content: flex-start; } }
.pmrow__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* v5.2 section headings & "see all" buttons */
.sec-head > a.link, .sec-head > div + a.link { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font-weight: 600; font-size: .85rem; white-space: nowrap; text-decoration: none; transition: border-color .15s, background .15s; }
.sec-head > a.link:hover { border-color: var(--navy); background: var(--navy-50); }
.sec-head > a.link .ic { width: 15px; height: 15px; }
@media (max-width: 639px) {
  .sec-head { align-items: center; gap: 10px; margin-bottom: 12px; }
  .sec-head > div { min-width: 0; }
  .sec-head .h2 { display: flex; align-items: center; gap: 8px; font-size: 1.08rem; line-height: 1.3; }
  .sec-head .h2::before { content: ''; flex: none; width: 4px; height: 18px; border-radius: 3px; background: var(--orange); }
  .sec-head p { padding-left: 12px; font-size: .76rem; }
  .sec-head > a.link { padding: 5px 10px; font-size: .74rem; gap: 2px; }
  .sec-head > a.link .ic { width: 13px; height: 13px; }
  .sec { padding-block: 22px; }
  .btn--lg { min-height: 46px; font-size: .95rem; }
}
@media (max-width: 1023px) { .footer--desk { display: none; } }
.abact { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.btn--wa { background: #25D366; border-color: #25D366; color: #fff; }
.btn--wa:hover { background: #1ebe5a; color: #fff; }

/* v5.2 reseller catalogue */
.rcfilter { display: flex; gap: 8px; flex-wrap: wrap; }
.rcfilter input[type=search] { flex: 1 1 200px; min-width: 0; }
.rcfilter select { flex: 0 1 200px; }
.rcgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .rcgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rcgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rccard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.rccard__img { position: relative; display: block; aspect-ratio: 1; background: #F7F8FA; }
.rccard__img img { width: 100%; height: 100%; object-fit: contain; }
.rccard__body { padding: 10px 12px; display: grid; gap: 6px; flex: 1; }
.rccard__t { font-weight: 600; font-size: .88rem; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.rccard__p { display: grid; gap: 2px; font-size: .78rem; color: var(--muted); }
.rccard__p b { color: var(--ink); }
.rccard__p .ok { color: var(--ok, #1a7f4b); font-weight: 600; }
.rccard__btns { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 0 10px 10px; }
.rcitem { display: grid; gap: 18px; }
@media (min-width: 860px) { .rcitem { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.rcitem__gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.rcitem__gal figure { margin: 0; display: grid; gap: 6px; }
.rcitem__gal img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #F7F8FA; border-radius: 12px; border: 1px solid var(--line); }
.rcitem__info { display: grid; gap: 10px; align-content: start; }
.rcitem__info textarea { width: 100%; font-size: .88rem; }
.rcitem__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rcprice { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.rcprice > div { background: var(--bg); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.rcprice small { color: var(--muted); font-size: .74rem; }
.rcprice b { font-size: 1.02rem; }
.rcdesc summary { cursor: pointer; font-weight: 600; }
input.is-bad { border-color: var(--bad) !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, .12); }
.resum { font-weight: 600; margin: 4px 0 10px; }
.checklist { padding-left: 1.2em; display: grid; gap: 8px; margin: 10px 0 0; line-height: 1.6; }

/* courier parcel tracking (order + track pages) */
.cship { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-top: 12px; display: grid; gap: 10px; background: var(--surface); }
.cship__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cship__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--navy-50); color: var(--navy); flex: none; }
.cship__ic .ic { width: 20px; height: 20px; }
.cship__who { display: grid; line-height: 1.3; min-width: 0; }
.cship__who small { color: var(--muted); font-size: .8rem; }
.cship__now { margin-left: auto; font-size: .78rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--info-50); color: var(--info); }
.cship__now--ok { background: var(--ok-50); color: var(--ok); }
.cship__now--bad { background: var(--bad-50); color: var(--bad); }
.cship__now--go { position: relative; padding-left: 22px; }
.cship__now--go::before { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: currentColor; animation: cshipPulse 1.6s infinite; }
@keyframes cshipPulse { 0% { box-shadow: 0 0 0 0 rgba(33, 96, 168, .45); } 70% { box-shadow: 0 0 0 7px rgba(33, 96, 168, 0); } 100% { box-shadow: 0 0 0 0 rgba(33, 96, 168, 0); } }
.cship__tip { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--warn-50); color: var(--warn); font-size: .86rem; }
.cship__list { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; }
.cship__list li { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding-bottom: 12px; }
.cship__list li:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.cship__dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--line-2); margin-top: 3px; position: relative; z-index: 1; }
.cship__list li.is-now .cship__dot { border-color: #16A34A; background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.cship__list div { display: grid; line-height: 1.35; font-size: .88rem; }
.cship__list div b { font-weight: 600; }
.cship__list li:not(.is-now) div b { font-weight: 500; color: var(--text); }
.cship__list div span { color: var(--text); font-size: .84rem; }
.cship__list div small { color: var(--muted); font-size: .74rem; }
.cship__f { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
[data-otl-live] { transition: background-color .6s; border-radius: 12px; }
[data-otl-live].is-fresh { background-color: var(--ok-50); }
@media (max-width: 560px) { .otl__t b { font-size: .7rem; } .otl__t small { font-size: .62rem; } .otl__s { padding: 0 1px; } .cship__now { margin-left: 0; } }
/* admin delivery */
.fset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 4px; margin: 12px 0; }
.fset legend { font-weight: 600; font-size: .9rem; padding: 0 6px; }
.cbook { display: grid; gap: 8px; }
.cbook .fgrid { margin: 0; }
/* designed (image) banners: hero slides and side cards */
.hslide--art { background: var(--navy-900); min-height: 0; aspect-ratio: 1600 / 865; }
.hart { position: absolute; inset: 0; display: block; }
.hart picture, .hart img { display: block; width: 100%; height: 100%; }
.hart img { object-fit: cover; object-position: left center; }
.hslide--art .hart img { transform: scale(1.04); transition: transform 6s ease-out; }
.hslide--art.is-active .hart img { transform: scale(1); }
.hslider:has(.hslide--art) { min-height: 0; }
@media (max-width: 640px) { .hslide--art { aspect-ratio: 1080 / 666; } .hslider__dots { left: 18px; bottom: 10px; } .hslider__dots button { width: 22px; height: 5px; } }
.promo--art { padding: 0; min-height: 0; border: 0; background: var(--navy-50); aspect-ratio: 660 / 462; }
.promo--art picture, .promo--art img { display: block; width: 100%; height: 100%; }
.promo--art img { object-fit: cover; transition: transform .5s ease; }
.promo--art:hover img { transform: scale(1.03); }
@media (max-width: 1023px) { .promo--art { aspect-ratio: 528 / 352; min-height: 0; padding: 0; } }
@media (min-width: 1024px) { .home-top--side2 .promo--art { aspect-ratio: auto; } }
.bgallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bgallery--side { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.bgallery__i { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); display: grid; }
.bgallery__i img { width: 100%; display: block; aspect-ratio: 1600 / 865; object-fit: cover; }
.bgallery--side .bgallery__i img { aspect-ratio: 660 / 462; }
.bgallery__i figcaption { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 12px; }
.bgallery__i figcaption span { display: grid; line-height: 1.3; min-width: 0; font-size: .86rem; }
.mcpick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-height: 360px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 12px; }
.mcpick label { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; background: var(--surface); }
.mcpick label:has(input:checked) { border-color: var(--orange); background: var(--orange-50); }
.mcpick img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.mcpick span { display: grid; min-width: 0; line-height: 1.3; font-size: .84rem; }
.mcpick small { color: var(--muted); }
.mcstrip { display: flex; gap: 10px; overflow-x: auto; padding: 8px 0; }
.mcstrip canvas { width: 220px; height: 220px; flex: none; border-radius: 12px; border: 1px solid var(--line); }
/* support tickets */
.tthread { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.tthread__m { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.tthread__m--team, .tthread__m--bot { background: var(--navy-50); border-color: var(--navy-100); }
.tthread__m--system { background: var(--bg); font-size: .86rem; }
.tthread__m.is-private { border-style: dashed; background: var(--warn-50); }
.tthread__h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.tthread__h small { margin-left: auto; }
.tthread__b { white-space: normal; line-height: 1.55; }

/* ---------- design banners (editable HTML: theme + illustration + live text) ---------- */
.th-navy { --hd-bg: radial-gradient(120% 130% at 80% 30%, #2D5466 0%, #1A3542 48%, #0F1F27 100%); --hd-glow: rgba(63,182,168,.22); --hd-glow2: rgba(240,89,45,.24); --hd-ink: #fff; --hd-sub: rgba(255,255,255,.82); --hd-acc: #F0592D; --hd-acc-ink: #fff; --hd-chip: rgba(255,255,255,.10); --hd-line: rgba(255,255,255,.18); --hd-eye: #FFB59A; --hd-dot: rgba(255,255,255,.07); }
.th-teal { --hd-bg: radial-gradient(120% 130% at 80% 30%, #1F7F7A 0%, #125855 50%, #0A3533 100%); --hd-glow: rgba(255,224,138,.22); --hd-glow2: rgba(255,255,255,.10); --hd-ink: #fff; --hd-sub: rgba(255,255,255,.84); --hd-acc: #FFC94D; --hd-acc-ink: #2B2100; --hd-chip: rgba(255,255,255,.10); --hd-line: rgba(255,255,255,.2); --hd-eye: #FFE08A; --hd-dot: rgba(255,255,255,.07); }
.th-wine { --hd-bg: radial-gradient(120% 130% at 80% 30%, #8E3A4E 0%, #6E2B3B 48%, #3A1520 100%); --hd-glow: rgba(255,201,77,.22); --hd-glow2: rgba(255,158,192,.18); --hd-ink: #fff; --hd-sub: rgba(255,255,255,.84); --hd-acc: #FFC94D; --hd-acc-ink: #3A1520; --hd-chip: rgba(255,255,255,.10); --hd-line: rgba(255,255,255,.2); --hd-eye: #FFD7A1; --hd-dot: rgba(255,255,255,.07); }
.th-dark { --hd-bg: radial-gradient(120% 130% at 80% 30%, #34404B 0%, #1F2933 50%, #0E1418 100%); --hd-glow: rgba(156,123,230,.18); --hd-glow2: rgba(156,123,230,.22); --hd-ink: #fff; --hd-sub: rgba(255,255,255,.8); --hd-acc: #F0592D; --hd-acc-ink: #fff; --hd-chip: rgba(255,255,255,.08); --hd-line: rgba(255,255,255,.16); --hd-eye: #FFB59A; --hd-dot: rgba(255,255,255,.07); }
.th-orange { --hd-bg: radial-gradient(120% 130% at 80% 25%, #FF8A5B 0%, #F0592D 45%, #B83A16 100%); --hd-glow: rgba(255,224,138,.35); --hd-glow2: rgba(255,255,255,.18); --hd-ink: #fff; --hd-sub: rgba(255,255,255,.92); --hd-acc: #1A3542; --hd-acc-ink: #fff; --hd-chip: rgba(255,255,255,.16); --hd-line: rgba(255,255,255,.3); --hd-eye: #FFF1C7; --hd-dot: rgba(255,255,255,.08); }
.th-plum { --hd-bg: radial-gradient(120% 130% at 80% 30%, #6E4BB8 0%, #43307A 48%, #221844 100%); --hd-glow: rgba(255,158,192,.26); --hd-glow2: rgba(63,182,168,.2); --hd-ink: #fff; --hd-sub: rgba(255,255,255,.84); --hd-acc: #FF7AA8; --hd-acc-ink: #fff; --hd-chip: rgba(255,255,255,.10); --hd-line: rgba(255,255,255,.2); --hd-eye: #FFC7DB; --hd-dot: rgba(255,255,255,.07); }
.th-red { --hd-bg: radial-gradient(120% 130% at 78% 30%, #E9334B 0%, #B5122E 48%, #6B0A1B 100%); --hd-glow: rgba(255,224,138,.35); --hd-glow2: rgba(255,255,255,.15); --hd-ink: #fff; --hd-sub: rgba(255,255,255,.9); --hd-acc: #FFC94D; --hd-acc-ink: #5A0715; --hd-chip: rgba(255,255,255,.14); --hd-line: rgba(255,255,255,.26); --hd-eye: #FFE08A; --hd-dot: rgba(255,255,255,.08); }
.th-green { --hd-bg: radial-gradient(120% 130% at 78% 30%, #1F7A4D 0%, #11573A 48%, #082E1F 100%); --hd-glow: rgba(255,224,138,.32); --hd-glow2: rgba(255,255,255,.10); --hd-ink: #fff; --hd-sub: rgba(255,255,255,.86); --hd-acc: #FFC94D; --hd-acc-ink: #2B2100; --hd-chip: rgba(255,255,255,.10); --hd-line: rgba(255,255,255,.2); --hd-eye: #FFE08A; --hd-dot: rgba(255,255,255,.07); }
.th-cream { --hd-bg: linear-gradient(120deg, #FFF8EE 0%, #FCEBD8 60%, #F7D9BC 100%); --hd-glow: rgba(240,89,45,.18); --hd-glow2: rgba(63,182,168,.16); --hd-ink: #1A3542; --hd-sub: #4A5A64; --hd-acc: #F0592D; --hd-acc-ink: #fff; --hd-chip: rgba(26,53,66,.06); --hd-line: rgba(26,53,66,.12); --hd-eye: #C2410C; --hd-dot: rgba(26,53,66,.06); }
.th-sky { --hd-bg: linear-gradient(120deg, #F3F8FB 0%, #DCE9F0 60%, #C7DCE7 100%); --hd-glow: rgba(240,89,45,.16); --hd-glow2: rgba(63,182,168,.18); --hd-ink: #132833; --hd-sub: #43535D; --hd-acc: #1A3542; --hd-acc-ink: #fff; --hd-chip: rgba(26,53,66,.06); --hd-line: rgba(26,53,66,.12); --hd-eye: #2160A8; --hd-dot: rgba(26,53,66,.06); }
.th-peach { --hd-bg: linear-gradient(130deg, #FFF3EE 0%, #FFDCCD 100%); --hd-glow: rgba(240,89,45,.22); --hd-glow2: rgba(255,255,255,.6); --hd-ink: #3A1A0E; --hd-sub: #6B4A3D; --hd-acc: #F0592D; --hd-acc-ink: #fff; --hd-chip: rgba(240,89,45,.08); --hd-line: rgba(240,89,45,.18); --hd-eye: #C2410C; --hd-dot: rgba(58,26,14,.06); }
.th-mint { --hd-bg: linear-gradient(130deg, #EFFAF6 0%, #CFEDE3 100%); --hd-glow: rgba(30,155,91,.18); --hd-glow2: rgba(255,255,255,.6); --hd-ink: #0B3A3A; --hd-sub: #3D5E5A; --hd-acc: #147A73; --hd-acc-ink: #fff; --hd-chip: rgba(20,122,115,.08); --hd-line: rgba(20,122,115,.18); --hd-eye: #147A73; --hd-dot: rgba(11,58,58,.06); }
.th-lav { --hd-bg: linear-gradient(130deg, #F5F1FF 0%, #E0D6FA 100%); --hd-glow: rgba(90,59,168,.18); --hd-glow2: rgba(255,255,255,.6); --hd-ink: #221844; --hd-sub: #4F4570; --hd-acc: #5A3BA8; --hd-acc-ink: #fff; --hd-chip: rgba(90,59,168,.08); --hd-line: rgba(90,59,168,.18); --hd-eye: #5A3BA8; --hd-dot: rgba(34,24,68,.06); }
.th-light { --hd-bg: linear-gradient(135deg, #FFFFFF 0%, #EEF4F7 100%); --hd-glow: rgba(240,89,45,.14); --hd-glow2: rgba(63,182,168,.14); --hd-ink: #1A3542; --hd-sub: #4A5A64; --hd-acc: #F0592D; --hd-acc-ink: #fff; --hd-chip: rgba(26,53,66,.05); --hd-line: rgba(26,53,66,.12); --hd-eye: #C2410C; --hd-dot: rgba(26,53,66,.05); }

.hslide--design { background: var(--hd-bg); color: var(--hd-ink); }
.hd-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hd-fx i { position: absolute; border-radius: 50%; filter: blur(50px); }
.hd-fx i:nth-child(1) { width: 55%; aspect-ratio: 1; right: -8%; top: -30%; background: var(--hd-glow); }
.hd-fx i:nth-child(2) { width: 40%; aspect-ratio: 1; left: -12%; bottom: -60%; background: var(--hd-glow2); }
.hd-fx b { position: absolute; inset: 0; background-image: radial-gradient(var(--hd-dot) 1.4px, transparent 1.6px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 70%); mask-image: linear-gradient(100deg, transparent 30%, #000 70%); }
.hslide--design .hero__grid { position: relative; z-index: 2; }
.hslide--design .hero__eyebrow { color: var(--hd-eye); background: var(--hd-chip); border-color: var(--hd-line); }
.hslide--design .hero__eyebrow i { background: var(--hd-eye); box-shadow: 0 0 0 3px var(--hd-chip); }
.hslide--design h1, .hslide--design .hslide__h { color: var(--hd-ink) !important; max-width: 18ch; }
.hd-title em { font-style: normal; color: var(--hd-eye); display: block; }
.th-cream .hd-title em, .th-sky .hd-title em, .th-peach .hd-title em, .th-mint .hd-title em, .th-lav .hd-title em, .th-light .hd-title em { color: var(--hd-acc); }
.hslide--design .hero__text { color: var(--hd-sub); }
.hd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; max-width: 640px; }
.hd-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 12px; font-size: .86rem; font-weight: 600; background: var(--hd-chip); border: 1px solid var(--hd-line); color: var(--hd-ink); }
.hd-chips .ic { width: 18px; height: 18px; color: var(--hd-eye); flex: none; }
.th-cream .hd-chips .ic, .th-sky .hd-chips .ic, .th-peach .hd-chips .ic, .th-mint .hd-chips .ic, .th-lav .hd-chips .ic, .th-light .hd-chips .ic { color: var(--hd-acc); }
.hd-cta { background: var(--hd-acc) !important; color: var(--hd-acc-ink) !important; border-color: transparent !important; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .55); }
.hd-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hslide--design .btn--line-white { color: var(--hd-ink); border-color: var(--hd-line); }
.hd-vis { justify-self: center; width: 100%; max-width: 440px; }
.hd-vis img.hd-scene { width: 100%; height: auto; display: block; aspect-ratio: 1; filter: drop-shadow(0 26px 36px rgba(0, 0, 0, .18)); }
.hslide--design.is-active .hd-scene { animation: hdfloat 7s ease-in-out infinite; }
@keyframes hdfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.home-top--solo .hslide--design .hd-vis { max-width: 470px; }
.hslider:has(.hslide--design.is-active.th-cream, .hslide--design.is-active.th-sky, .hslide--design.is-active.th-peach, .hslide--design.is-active.th-mint, .hslide--design.is-active.th-lav, .hslide--design.is-active.th-light) .hslider__dots button { background: rgba(26, 53, 66, .2); }
.hslider:has(.hslide--design.is-active.th-cream, .hslide--design.is-active.th-sky, .hslide--design.is-active.th-peach, .hslide--design.is-active.th-mint, .hslide--design.is-active.th-lav, .hslide--design.is-active.th-light) .hslider__dots button i { background: var(--navy); }
@media (max-width: 759px) {
  /* phones: the illustration stays, smaller, beside the title (like the printed design) */
  .hslide--design .hd-vis { display: block; position: absolute; right: -22px; bottom: 34px; width: 46%; max-width: 230px; z-index: 1; opacity: .95; }
  .hslide--design .hero__grid { padding-right: 40%; }
  .hslide--design .hd-chips { display: none; }
  .hslide--design .hero__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; }
  .hslide--design .hero__ctas { display: flex; }
}
@media (max-width: 420px) { .hslide--design .hero__text { display: none; } .hslide--design .hd-vis { width: 50%; bottom: 40px; } }
@media (prefers-reduced-motion: reduce) { .hslide--design .hd-scene { animation: none !important; } }

.promo--design { background: var(--hd-bg); color: var(--hd-ink); border: 0; padding-right: 40%; isolation: isolate; }
.promo--design .promo__t { color: var(--hd-ink); position: relative; z-index: 2; }
.promo--design .promo__t em { font-style: normal; color: var(--hd-eye); }
.th-cream.promo--design .promo__t em, .th-sky.promo--design .promo__t em, .th-peach.promo--design .promo__t em, .th-mint.promo--design .promo__t em, .th-lav.promo--design .promo__t em, .th-light.promo--design .promo__t em { color: var(--hd-acc); }
.promo--design p { color: var(--hd-sub); position: relative; z-index: 2; }
.promo--design .btn { background: var(--hd-acc); color: var(--hd-acc-ink); box-shadow: 0 12px 22px -14px rgba(0, 0, 0, .5); position: relative; z-index: 2; }
.promo--design .btn:hover { color: var(--hd-acc-ink); filter: brightness(1.06); }
.promo--design .hd-scene { position: absolute; right: -6%; bottom: -8%; width: 52%; height: auto; aspect-ratio: 1; z-index: 1; transition: transform .5s ease; }
.promo--design:hover .hd-scene { transform: scale(1.04) rotate(-1deg); }
.promo--design .hd-fx { z-index: 0; }
@media (max-width: 559px) { .promo--design { padding: 16px 38% 16px 14px; } .promo--design .hd-scene { width: 58%; right: -14%; } }
/* admin: design banner picker */
.scenepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 12px; }
.scenepick__i { position: relative; display: grid; gap: 2px; justify-items: center; padding: 6px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; background: var(--bg-soft, #f6f8fa); font-size: .74rem; text-align: center; }
.scenepick__i input { position: absolute; opacity: 0; pointer-events: none; }
.scenepick__i img { width: 64px; height: 64px; }
.scenepick__i:has(input:checked) { border-color: var(--orange); background: #fff; }
.scenepick__i:has(input:focus-visible) { outline: 2px solid var(--navy); }
.bmini { display: flex; align-items: center; gap: 8px; width: 170px; padding: 8px 10px; border-radius: 10px; background: var(--hd-bg); color: var(--hd-ink); margin-bottom: 4px; font-size: .72rem; line-height: 1.2; }
.bmini img { width: 40px; height: 40px; order: 2; margin-left: auto; }
.bmini b em { font-style: normal; color: var(--hd-eye); display: block; }

/* background flipbook builder (admin) */
.flipchip { position: fixed; left: 16px; bottom: 16px; z-index: 9999; background: var(--navy, #214150); color: #fff; font-size: .82rem; padding: 9px 14px; border-radius: 999px; box-shadow: 0 6px 22px rgba(0,0,0,.18); max-width: calc(100vw - 32px); }

/* ---------- tabbed details box (book, service, course, product) ---------- */
.infotabs { margin: 22px 0; padding: 20px 22px; }
.infotabs__h { font-size: 1.2rem; margin: 0 0 12px; }
.infotabs__nav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.infotabs__nav button { font: inherit; background: none; border: 0; border-top: 3px solid transparent; padding: 10px 14px; color: var(--ink); cursor: pointer; white-space: nowrap; border-radius: 6px 6px 0 0; }
.infotabs__nav button[aria-selected="true"] { border-top-color: var(--accent, #2a9d5c); color: var(--accent-ink, #1e7a45); background: var(--card, #fff); box-shadow: 1px 0 0 var(--line), -1px 0 0 var(--line); font-weight: 600; }
.infotabs__nav button:focus-visible { outline: 2px solid var(--accent, #2a9d5c); outline-offset: -2px; }
.infotabs__panel { padding: 18px 2px 4px; animation: tabin .22s ease; }
@keyframes tabin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.spec-t { width: 100%; border-collapse: collapse; border: 1px solid var(--line); font-size: .95rem; }
.spec-t th, .spec-t td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-t th { width: 26%; background: var(--soft, #f3f5f7); font-weight: 500; border-right: 1px solid var(--line); }
.spec-t a { color: var(--link, #1a73c9); }
.infotabs__report { text-align: center; margin: 16px 0 0; }
.linkbtn { font: inherit; background: none; border: 0; color: #d6453d; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.linkbtn svg { width: 18px; height: 18px; }
.authorbox { display: flex; gap: 16px; align-items: flex-start; }
.authorbox__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
@media (max-width: 600px) { .spec-t th { width: 38%; } .infotabs { padding: 16px 14px; } .authorbox { flex-direction: column; } }
.sumbox { margin: 14px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sumbox > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.sumbox > div:last-child { border-bottom: 0; }
.sumbox dt { color: var(--muted); } .sumbox dd { margin: 0; font-weight: 600; }
.sumbox__total { background: var(--soft, #f3f6f9); } .sumbox__total dd { font-size: 1.05rem; }
.sumbox__cod dd { color: var(--accent-ink, #1e7a45); }
.subbox { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px 4px; margin: 12px 0; }
.subbox legend { font-weight: 600; padding: 0 6px; font-size: .9rem; }

/* ---------- author / publisher profile ---------- */
.profhead { display: flex; gap: 24px; align-items: flex-start; padding: 24px; margin: 8px 0 20px; background: linear-gradient(135deg, #fff6ec, #fffaf4); position: relative; overflow: hidden; }
.profhead--pub { background: linear-gradient(120deg, #2e3b55, #6b3a5c); color: #fff; }
.profhead[style*="--cover"] { background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.35)), var(--cover) center/cover; color: #fff; }
.profhead__img { flex: none; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: #e9edf2; display: grid; place-items: center; font-size: 2.6rem; font-weight: 700; color: #6b7586; box-shadow: 0 0 0 4px rgba(255,255,255,.7); }
.profhead__img img { width: 100%; height: 100%; object-fit: cover; }
.profhead__body { min-width: 0; flex: 1; }
.profhead__kind { margin: 0; font-size: .82rem; opacity: .75; text-transform: uppercase; letter-spacing: .04em; }
.profhead .h1 { margin: 2px 0 8px; }
.profhead__bio { max-height: 4.9em; overflow: hidden; position: relative; transition: max-height .35s ease; }
.profhead__bio.is-open { max-height: 120em; }
.profhead__bio .prose { text-align: justify; } .profhead--pub .prose, .profhead[style*="--cover"] .prose { color: inherit; }
.profhead__more { margin-top: 4px; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; text-decoration: underline; color: inherit; }
.profhead__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .9rem; }
.profhead__meta > * { display: inline-flex; gap: 6px; align-items: center; color: inherit; }
.profhead__meta svg { width: 16px; height: 16px; }
.profgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.profcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 12px; transition: transform .15s ease, box-shadow .15s ease; }
.profcard:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20,30,50,.08); }
.profcard__img { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: #eef1f5; display: grid; place-items: center; font-size: 1.8rem; font-weight: 700; color: #6b7586; }
.profcard__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .profhead { flex-direction: column; align-items: center; text-align: center; padding: 18px; } .profhead__meta { justify-content: center; } }

/* ---------- content pages: card layout, justified paragraphs, FAQ accordion ---------- */
.pagewrap { padding-bottom: 32px; }
.pagecard { padding: clamp(18px, 4vw, 40px); margin-top: 8px; }
.pagecard h2 { margin-top: 1.6em; padding-top: .2em; }
.pagecard h3 { margin-top: 1.3em; }
.pagecard table { width: 100%; border-collapse: collapse; } .pagecard td, .pagecard th { border: 1px solid var(--line); padding: 8px 10px; }
body.justify .prose p, body.justify .prose li, body.justify .pagebody p { text-align: justify; text-justify: inter-word; hyphens: auto; }
.faq { display: grid; gap: 10px; margin: 18px 0; }
.faq__item { border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; }
.faq__item.is-open { border-color: color-mix(in srgb, var(--accent, #2a9d5c) 45%, var(--line)); box-shadow: 0 6px 20px rgba(20, 30, 50, .06); }
.faq__q { margin: 0 !important; font-size: 1rem; }
.faq__q button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 16px 18px; cursor: pointer; }
.faq__q button:hover { background: var(--soft, #f6f8fa); }
.faq__q button:focus-visible { outline: 2px solid var(--accent, #2a9d5c); outline-offset: -2px; }
.faq__ic { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--soft, #eef2f5); position: relative; transition: transform .3s ease, background .2s ease; }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: currentColor; transform: translate(-50%, -50%); border-radius: 2px; }
.faq__ic::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s ease; }
.faq__item.is-open .faq__ic { background: var(--accent, #2a9d5c); color: #fff; transform: rotate(180deg); }
.faq__item.is-open .faq__ic::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__in { overflow: hidden; }
.faq__in > div { padding: 0 18px 16px; color: var(--muted-ink, #3b4656); }
.faq__in > div > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .faq__a, .faq__ic, .faq__ic::after { transition: none; } }

/* items per row chosen per home section (Admin › Customize › Home) */
@media (min-width: 900px) {
  [data-cols][style*="--sec-cols:"] .rail { grid-auto-flow: row; grid-template-columns: repeat(var(--sec-cols), minmax(0, 1fr)) !important; grid-auto-columns: unset; overflow: visible; margin-inline: 0; padding-inline: 0; }
  [data-cols][style*="--sec-cols:"] .grid { grid-template-columns: repeat(var(--sec-cols), minmax(0, 1fr)) !important; }
}
@media (max-width: 899px) {
  [data-cols][style*="--sec-cols-m"] .rail { grid-auto-columns: calc((100% - (var(--sec-cols-m) - 1) * 12px) / var(--sec-cols-m)) !important; }
  [data-cols][style*="--sec-cols-m"] .grid { grid-template-columns: repeat(var(--sec-cols-m), minmax(0, 1fr)) !important; }
}

/* footer: social icons and payment logos only (no text buttons) */
.social--icons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.soc { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); transition: background .18s ease, transform .18s ease, border-color .18s ease; }
.soc:hover, .soc:focus-visible { background: var(--soc); border-color: var(--soc); transform: translateY(-2px); }
.soc svg { width: 18px; height: 18px; } .soc img { width: 20px; height: 20px; object-fit: contain; }
.soc--sm { width: 26px; height: 26px; background: var(--soc); border: 0; vertical-align: middle; } .soc--sm svg { width: 14px; height: 14px; }
.paybadges--logos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.paylogo { display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 52px; padding: 4px 8px; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.paylogo img { max-height: 26px; width: auto; display: block; }
.paylogo--ic { min-width: 44px; color: var(--pc); } .paylogo--ic svg { width: 22px; height: 22px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.iconfield .lbl { display: flex; align-items: center; gap: 8px; }

/* desktop category sidebar */
.sidecat { display: none; }
@media (min-width: 1024px) {
  html.has-sidecat .pagehead ~ .chips-scroll { display: none; }
  html.has-sidecat .sidecat { display: block; padding: 14px 10px; position: sticky; top: calc(var(--header-h, 64px) + 12px); }
  .sidecat__h { display: block; font-size: .95rem; padding: 0 8px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
  .sidecat__list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - var(--header-h, 64px) - 120px); overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
  .sidecat__a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: .92rem; line-height: 1.35; }
  .sidecat__a svg { width: 16px; height: 16px; flex: none; opacity: .75; }
  .sidecat__a:hover { background: var(--soft, #f3f6f9); }
  .sidecat__a.is-active { background: color-mix(in srgb, var(--primary, #214150) 10%, transparent); color: var(--primary, #214150); font-weight: 600; }
  .listing--nav { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  .listing__side { display: grid; gap: 14px; align-content: start; }
  .listing__side .sidecat { position: static; }
  .listing__side .sidecat__list { max-height: 360px; }
}

/* service cards: delivery time icon sits beside its text; thumbnails are never cropped on phones */
.scard__foot { align-items: center; flex-wrap: wrap; }
.scard__foot > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.scard__foot svg, .scard__foot .ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; }
@media (max-width: 640px) {
  .g-3 .scard { display: flex; flex-direction: column; border-radius: 14px; }
  .g-3 .scard__media { aspect-ratio: 16 / 8; height: auto; min-height: 0; width: 100%; }
  .g-3 .scard__media img { object-fit: cover; object-position: center; }
  .g-3 .scard__body { padding: 12px 14px 14px; gap: 5px; }
  .g-3 .scard__title { font-size: .95rem; }
  .g-3 .scard__foot { border-top: 1px dashed var(--line); padding-top: 8px; font-size: .8rem; gap: 6px 12px; }
}

/* ---------- payment page (gateway style: amount box, method tabs, logo grid) ---------- */
.page-pay { background: #eef2f7; }
.pg { min-height: 100vh; display: grid; place-items: start center; padding: 18px 12px 28px; }
.pg__card { width: 100%; max-width: 980px; background: #fff; border-radius: 18px; box-shadow: 0 10px 40px rgba(20, 35, 60, .10); display: grid; overflow: hidden; }
.pg__side { padding: 20px 20px 16px; display: grid; gap: 14px; align-content: start; }
.pg__main { padding: 4px 20px 20px; display: grid; gap: 14px; align-content: start; }
.pg__head { display: flex; align-items: center; gap: 10px; }
.pg__back { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); flex: none; }
.pg__back:hover { background: #f1f4f8; } .pg__back svg { width: 20px; height: 20px; }
.pg__logo { height: 40px; width: auto; max-width: 120px; object-fit: contain; }
.pg__merchant { display: grid; line-height: 1.3; min-width: 0; } .pg__merchant b { font-size: 1.02rem; }
.pg__merchant span { font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.pg__copyic { background: none; border: 0; padding: 2px; cursor: pointer; color: #1a73c9; display: inline-grid; } .pg__copyic svg { width: 15px; height: 15px; }
.pg__timer { margin-left: auto; font-size: .82rem; color: #b45309; background: #fff7e6; border-radius: 999px; padding: 4px 10px; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.pg__timer svg { width: 14px; height: 14px; }
.pg__amount { background: #eaf3ff; border-radius: 14px; padding: 16px 18px; display: grid; gap: 4px; }
.pg__amount small { color: #4a5a70; font-size: .9rem; }
.pg__amount b { font-size: clamp(1.7rem, 4.5vw, 2.2rem); font-weight: 800; letter-spacing: -.01em; color: #0f1e33; }
.pg__amount span { font-size: .85rem; color: #4a5a70; }
.pg__lines { margin: 0; display: grid; gap: 0; border-top: 1px solid #e6ebf2; }
.pg__lines > div { display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid #f0f3f7; font-size: .92rem; }
.pg__lines dt { color: #5b6b80; } .pg__lines dd { margin: 0; font-weight: 600; }
.pg__lines-total dd { font-size: 1.05rem; color: #0f1e33; }
.pg__trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .84rem; color: #4a5a70; }
.pg__trust li { display: flex; gap: 8px; align-items: center; } .pg__trust svg { width: 16px; height: 16px; color: #1e7a45; flex: none; }
.pg__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.pg__tab { font: inherit; background: #fff; border: 1px solid #dce3ec; border-radius: 12px; padding: 12px 6px 10px; display: grid; justify-items: center; gap: 6px; color: #42526a; cursor: pointer; transition: all .15s ease; min-height: 72px; }
.pg__tab svg { width: 24px; height: 24px; } .pg__tab span { font-size: .82rem; line-height: 1.2; text-align: center; }
.pg__tab:hover { border-color: #9fb7d6; }
.pg__tab.is-on { background: #0b72d9; border-color: #0b72d9; color: #fff; box-shadow: 0 6px 16px rgba(11, 114, 217, .28); }
.pg__tab:focus-visible, .pm:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.pg__label { margin: 0 0 8px; font-size: .88rem; color: #5b6b80; }
.pg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pm { font: inherit; background: #fff; border: 1.5px solid #e1e7ef; border-radius: 12px; padding: 12px 6px 10px; display: grid; justify-items: center; gap: 6px; cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s; }
.pm:hover { border-color: color-mix(in srgb, var(--pc) 50%, #e1e7ef); }
.pm.is-active { border-color: var(--pc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 18%, transparent); }
.pm.is-active::after { content: ""; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--pc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat; }
.pm__logo { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--pc); color: #fff; font-weight: 800; font-size: 1.2rem; overflow: hidden; }
.pm__logo.has-img { background: #fff; } .pm__logo img { width: 100%; height: 100%; object-fit: contain; }
.pm__name { font-size: .8rem; font-weight: 600; color: #22324a; text-align: center; line-height: 1.2; }
.page-pay .payhow { border: 1px solid #e6ebf2; border-left: 4px solid var(--pc); border-radius: 12px; padding: 14px; display: grid; gap: 10px; background: #fbfcfe; }
.page-pay .payhow__top { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.page-pay .payhow__nums { display: grid; gap: 10px; flex: 1; min-width: 220px; }
.payhow__box { background: #fff; border: 1px solid #e6ebf2; border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; }
.payhow__box small { color: #5b6b80; font-size: .78rem; }
.page-pay .payhow__line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.page-pay .payhow__num, .page-pay .payhow__amt { font-size: 1.25rem; letter-spacing: .02em; user-select: all; -webkit-user-select: all; }
.pg__copy { font: inherit; font-size: .82rem; display: inline-flex; align-items: center; gap: 5px; background: #eaf3ff; color: #0b72d9; border: 0; border-radius: 8px; padding: 7px 11px; cursor: pointer; flex: none; }
.pg__copy svg { width: 15px; height: 15px; } .pg__copy.is-done { background: #e7f6ec; color: #1e7a45; }
.payhow__steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: .9rem; color: #33445c; }
.pg__trx { display: flex; gap: 8px; } .pg__trx input { flex: 1; min-width: 0; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.pg__paste { font: inherit; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dce3ec; background: #fff; border-radius: 10px; padding: 0 12px; cursor: pointer; color: #22324a; }
.pg__paste svg { width: 16px; height: 16px; }
.pg__pay { border-radius: 12px; min-height: 52px; font-size: 1.02rem; background: #0b72d9; border-color: #0b72d9; }
.pg__pay:hover { background: #095fb5; border-color: #095fb5; }
.pg__gw { display: flex; gap: 12px; align-items: center; background: #f5f8fc; border-radius: 12px; padding: 14px; } .pg__gw p { margin: 0; font-size: .9rem; color: #33445c; }
.pg__gwic { width: 44px; height: 44px; border-radius: 12px; background: #0b72d9; color: #fff; display: grid; place-items: center; flex: none; } .pg__gwic svg { width: 24px; height: 24px; }
.pg__gwnote { text-align: center; margin: 4px 0 0; }
.pg__result { text-align: center; padding: 22px 8px; display: grid; gap: 10px; justify-items: center; }
.pg__check { width: 64px; height: 64px; border-radius: 50%; background: #1e9e57; color: #fff; display: grid; place-items: center; } .pg__check svg { width: 34px; height: 34px; }
.pg__result--bad h1 { color: #b42318; }
.pg__foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .76rem; color: #7a889c; border-top: 1px solid #eef1f5; padding-top: 12px; }
.pg__secured { display: inline-flex; align-items: center; gap: 5px; } .pg__secured svg { width: 13px; height: 13px; }
.pg__toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); background: #0f1e33; color: #fff; font-size: .88rem; padding: 10px 16px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; max-width: calc(100vw - 32px); }
.pg__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) {
  .pg { padding: 40px 16px; }
  .pg__card { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .pg__side { padding: 30px 28px; border-right: 1px solid #eef1f5; }
  .pg__main { padding: 30px 28px; }
}
@media (max-width: 420px) { .pg__tabs { grid-auto-columns: minmax(72px, 1fr); overflow-x: auto; } .pg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.usdreq { padding: 18px; margin: 12px 0 18px; border: 1px solid #cfe0f5; background: linear-gradient(180deg, #f5f9ff, #fff); }
.usdreq__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; } .usdreq__head small { display: block; color: var(--muted); margin-top: 2px; }
.usdreq__ic { width: 40px; height: 40px; border-radius: 12px; background: #0b72d9; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; flex: none; }
.hcur b { font-size: 1rem; line-height: 1; }
/* live parts flash softly when new content arrives */
@keyframes livefresh { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #F0592D) 35%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
[data-live].is-fresh { animation: livefresh 1.4s ease-out; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { [data-live].is-fresh { animation: none; } }
.revbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin: 10px 0; border: 1px solid var(--line, #e3e7ec); border-radius: 12px; background: var(--soft, #f6f8fa); font-size: 14px; }
.revbar > span { display: inline-flex; align-items: center; gap: 6px; }
.revbar .icon { width: 16px; height: 16px; }
.revbar__buy { display: flex; gap: 8px; align-items: center; margin: 0; }
.revbar__buy select { width: auto; min-height: 36px; padding: 4px 8px; }
.badge-flash { display: inline-flex; align-items: center; gap: 2px; background: linear-gradient(135deg, #F0592D, #D92D20); }
.badge-flash .ic { width: 12px; height: 12px; }
.scard__media { position: relative; }
.fstrip { margin: 0 0 12px; }
/* flash sale row with books, courses and services side by side */
.rail--mix { grid-auto-columns: 46%; }
@media (min-width: 640px) { .rail--mix { grid-auto-columns: 30%; } }
@media (min-width: 1024px) { .rail--mix { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rail__cell { min-width: 0; display: flex; }
.rail__cell > * { flex: 1; min-width: 0; }
.mcfilter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.mcfilter input[type=search] { flex: 1 1 220px; min-width: 0; }
.mcpick label[hidden] { display: none; }
.mcpick label input { width: 18px; height: 18px; flex: none; margin: 0; }
.mcpick b { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mcstrip { max-width: 100%; }
.optcards--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hero__stats b .ic { width: 22px; height: 22px; vertical-align: -4px; }
@media (min-width: 1024px) { .cats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
.profpick { display: grid; gap: 8px; align-content: start; } .profpick .lbl { margin-bottom: 0; } .profpick [hidden] { display: none; }
/* small phones: the header keeps logo, currency, language, cart and login on one line */
@media (max-width: 480px) {
  .hcur span { display: none; }
  .hcur { padding: 0 9px; }
  .hlang .ic { display: none; }
  .hlang { padding: 0 8px; }
}
@media (max-width: 400px) {
  .hlogin { padding-inline: 10px; gap: 4px; }
  .hlogin .ic { display: none; }
  .logo img { height: calc(var(--logo-h) * .7); max-width: 112px; object-fit: contain; }
  .hcur, .hlang { height: 32px; }
}
@media (max-width: 340px) { .hcur { display: none !important; } .hlogin { font-size: .8rem; } }
/* Admin › Customize › header menu rows */
.navrows { display: grid; gap: 8px; }
.navrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) 76px; grid-template-areas: "on what ord" "bn bn bn" "en en en"; gap: 6px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
@media (min-width: 1280px) { .navrow { grid-template-areas: "on what ord" "on bn en"; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); } .navrow > :nth-child(5) { justify-self: end; width: 76px; } }
.navrow > :nth-child(1) { grid-area: on; margin: 0; }
.navrow > :nth-child(2) { grid-area: what; line-height: 1.35; }
.navrow > :nth-child(3) { grid-area: bn; }
.navrow > :nth-child(4) { grid-area: en; }
.navrow > :nth-child(5) { grid-area: ord; }
.navrow--head { display: none; }
.navrow.is-off { opacity: .55; }
.navrow .ic { width: 16px; height: 16px; vertical-align: -3px; }
.navrow input:not([type=checkbox]) { min-width: 0; width: 100%; }

/* v5.9.5 author/publisher hero: one readable colour scheme for the name AND the description, full-width text */
.profhead__body { width: 100%; }
.profhead__bio, .profhead__bio .prose { max-width: none; width: 100%; }
.profhead .h1, .profhead__kind, .profhead__meta > * { color: var(--ink); }
.profhead .prose, .profhead .prose * { color: var(--text) !important; background: transparent !important; }
.profhead--pub, .profhead[style*="--cover"] { color: #fff; }
.profhead--pub .h1, .profhead[style*="--cover"] .h1,
.profhead--pub .profhead__kind, .profhead[style*="--cover"] .profhead__kind,
.profhead--pub .profhead__meta > *, .profhead[style*="--cover"] .profhead__meta > *,
.profhead--pub .profhead__more, .profhead[style*="--cover"] .profhead__more { color: #fff; }
.profhead--pub .prose, .profhead--pub .prose *, .profhead[style*="--cover"] .prose, .profhead[style*="--cover"] .prose * { color: rgba(255,255,255,.94) !important; }
.profhead[style*="--cover"] { background: linear-gradient(90deg, rgba(10,16,24,.82), rgba(10,16,24,.62)), var(--cover) center/cover; }
.profhead[style*="--cover"] .h1, .profhead[style*="--cover"] .prose { text-shadow: 0 1px 3px rgba(0,0,0,.45); }

/* v5.9.5 payment page: one compact card like a hosted payment gateway (logo badge, tabs, pay bar at the bottom) */
.page-pay { background: #e9edf2; --pgc: #0B72D9; }
.page-pay .pg { min-height: 100vh; display: block; padding: 58px 12px 28px; }
.pgx { position: relative; width: 100%; max-width: 440px; margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(20, 35, 60, .14); padding-top: 52px; }
.pgx__badge { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); width: 92px; height: 92px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(20, 35, 60, .16); display: grid; place-items: center; overflow: hidden; border: 4px solid #fff; }
.pgx__badge img { max-width: 76px; max-height: 76px; width: auto; height: auto; object-fit: contain; }
.pgx__close, .pgx__lang { position: absolute; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #4a5a70; font-weight: 700; font-size: .78rem; }
.pgx__close { right: 12px; } .pgx__close svg { width: 20px; height: 20px; }
.pgx__lang { left: 12px; border: 1px solid #dce3ec; }
.pgx__close:hover, .pgx__lang:hover { background: #f1f4f8; }
.pgx__head { text-align: center; padding: 0 18px; }
.pgx__name { font-size: 1.15rem; margin: 0; color: #22324a; font-weight: 700; overflow-wrap: anywhere; }
.pgx__inv { margin: 4px 0 0; font-size: .8rem; color: #6b7a8f; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.pgx__inv .pg__timer { margin-left: 6px; }
.pgx__acts { display: flex; justify-content: center; gap: 18px; margin: 12px 0 4px; }
.pgx__acts > * { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 4px; color: color-mix(in srgb, var(--pgc) 85%, #000); font-size: .74rem; }
.pgx__acts span { width: 36px; height: 36px; border-radius: 50%; background: #f1f4f8; display: grid; place-items: center; color: #33445c; }
.pgx__acts svg { width: 19px; height: 19px; }
.pgx__amount { margin: 12px 16px 0; background: color-mix(in srgb, var(--pgc) 8%, #fff); border-radius: 12px; padding: 10px 14px; }
.pgx__amtbtn { font: inherit; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; display: grid; text-align: left; gap: 0; color: inherit; }
.pgx__amtbtn small { color: #5b6b80; font-size: .82rem; }
.pgx__amtbtn b { font-size: 1.55rem; font-weight: 800; color: #0f1e33; display: inline-flex; align-items: center; gap: 6px; }
.pgx__amtbtn svg { width: 18px; height: 18px; color: var(--pgc); transition: transform .2s; }
.pgx__amtbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
.pgx__for { margin: 2px 0 0; font-size: .82rem; color: #4a5a70; overflow-wrap: anywhere; }
.pgx__amount .pg__lines { margin-top: 8px; }
.pgx__amount .pg__lines > div { padding: 7px 0; font-size: .86rem; }
.pgx__tabs { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin-top: 14px; background: color-mix(in srgb, var(--pgc) 10%, #fff); border-bottom: 2px solid var(--pgc); }
.pgx__tab { font: inherit; border: 0; background: transparent; padding: 10px 4px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: color-mix(in srgb, var(--pgc) 70%, #22324a); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; min-height: 46px; }
.pgx__tab svg { width: 18px; height: 18px; flex: none; }
.pgx__tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgx__tab.is-on { background: var(--pgc); color: #fff; }
.pgx__tab:focus-visible { outline: 3px solid #93c5fd; outline-offset: -3px; }
.pgx__body { padding: 14px 16px 6px; display: grid; gap: 12px; }
.page-pay .pg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.page-pay .pm { padding: 10px 4px 8px; border-radius: 10px; gap: 5px; min-height: 76px; align-content: center; }
.page-pay .pm__logo { width: 40px; height: 40px; border-radius: 10px; }
.pm__word { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; background: color-mix(in srgb, var(--pc) 12%, #fff); color: var(--pc); font-weight: 800; font-size: .8rem; letter-spacing: -.01em; line-height: 1; max-width: 100%; overflow: hidden; }
.page-pay .pm__name { font-size: .74rem; overflow-wrap: anywhere; }
.page-pay .payhow { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid #e6ebf2; border-left: 4px solid var(--pc); background: #fbfcfe; min-width: 0; }
.payhow__row { display: grid; gap: 2px; background: #fff; border: 1px solid #e6ebf2; border-radius: 10px; padding: 7px 10px; min-width: 0; }
.payhow__row small { color: #5b6b80; font-size: .75rem; }
.page-pay .payhow__line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.page-pay .payhow__num, .page-pay .payhow__amt { font-size: 1.12rem; overflow-wrap: anywhere; min-width: 0; }
.payhow__qrbox { border: 1px dashed #cfd8e3; border-radius: 10px; padding: 6px 10px; }
.payhow__qrbox summary { cursor: pointer; font-size: .84rem; color: #33445c; display: flex; align-items: center; gap: 6px; list-style: none; }
.payhow__qrbox summary::-webkit-details-marker { display: none; }
.payhow__qrbox summary svg { width: 18px; height: 18px; }
.payhow__qrbox img { display: block; width: 100%; max-width: 180px; height: auto; aspect-ratio: 1; object-fit: contain; margin: 8px auto 4px; border-radius: 8px; background: #fff; }
.page-pay .payhow__steps { font-size: .84rem; gap: 4px; }
.page-pay.show-help .payhow__help, .pg.show-help .payhow__help { background: #fff8e6; border-radius: 8px; padding: 6px 4px; }
.page-pay .payform { display: grid; gap: 6px; }
.page-pay .payform .lbl { margin: 4px 0 0; font-size: .85rem; }
.page-pay .pg__trx input { font-size: 1rem; }
.pgx__cards { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.cardmark { height: 22px; min-width: 36px; padding: 0 6px; border-radius: 4px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 900; font-style: italic; letter-spacing: .02em; border: 1px solid #e3e8ef; background: #fff; }
.cardmark--visa { color: #1a1f71; } .cardmark--amex { color: #2e77bb; font-style: normal; font-size: .62rem; }
.cardmark--mc { position: relative; width: 36px; } .cardmark--mc i { position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 50%; } .cardmark--mc i:first-child { left: 6px; background: #eb001b; } .cardmark--mc i:last-child { left: 14px; background: #f79e1b; opacity: .9; }
.pgx__bar { margin-top: 8px; }
.pgx__pay { width: 100%; min-height: 54px; border: 0; border-radius: 0 0 16px 16px; background: var(--pgc); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; padding: 0 12px; text-align: center; }
.pgx__pay svg { width: 20px; height: 20px; flex: none; }
.pgx__pay:hover { filter: brightness(.94); color: #fff; } .pgx__pay:disabled { opacity: .65; cursor: wait; }
.pgx__pay[hidden] { display: none; }
.pgx .pg__result { padding: 18px 16px; }
.pgx__go { background: var(--pgc); border-color: var(--pgc); color: #fff; }
.pgx__foot { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: .72rem; color: #7a889c; padding: 12px 16px 14px; }
.pgx__bar + .pgx__foot { border-top: 0; }
@media (min-width: 900px) { .page-pay .pg { padding-top: 80px; } }
@media (max-width: 380px) { .pgx__tab span { font-size: .68rem; } .pgx__tab svg { display: none; } .pgx__acts { gap: 12px; } }
.pgx { display: flex; flex-direction: column; }
.pgx > * { min-width: 0; }
.pgx__bar { order: 99; margin-top: 0; }
/* small image previews next to upload fields never push the form wider than its card */
.fgrid > * { min-width: 0; }
.minipick { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.minipick img { width: auto !important; height: auto !important; max-width: 72px; max-height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 2px; }
.acontent img { max-width: 100%; }
.acontent code, .acontent .help code { overflow-wrap: anywhere; word-break: break-word; }
/* site-font dropdowns (search scope, sort, filters) */
.fsel { position: relative; display: inline-flex; flex: none; align-items: stretch; }
.fsel__native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px; min-height: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; bottom: 0; left: 0; }
.fsel__btn { font: inherit; font-weight: 600; font-size: .9rem; color: var(--ink); cursor: pointer; text-align: left; white-space: nowrap; min-height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A85' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
.fsel__btn:focus-visible { outline: 2px solid var(--orange-600, #f0592d); outline-offset: 2px; }
.hsearch .fsel__btn { border: 0; border-right: 1px solid var(--line-2); border-radius: 0; background-color: transparent; min-height: 38px; padding: 0 30px 0 16px; }
.fsel__list { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 80; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(16, 32, 48, .14); max-height: 320px; overflow-y: auto; }
.fsel__list li { font: inherit; font-size: .92rem; padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; color: var(--ink); outline: 0; }
.fsel__list li:hover, .fsel__list li:focus { background: var(--bg, #f3f5f7); }
.fsel__list li[aria-selected="true"] { color: var(--orange-600, #e04e22); font-weight: 600; }
.toolbar .fsel__list, .push .fsel__list { left: auto; right: 0; }
.hsearch .fsel__btn, .msearch .hsearch .fsel__btn, .header-brand .hsearch .fsel__btn { height: auto; align-self: stretch; display: block; border-radius: 0; background-color: transparent; color: var(--ink); gap: 0; padding: 0 30px 0 16px; font-weight: 600; }
.hsearch .fsel__btn:hover { background-color: rgba(0, 0, 0, .03); color: var(--ink); }
.hsearch .fsel { align-self: stretch; }
.hsearch .fsel__list { top: calc(100% + 10px); }
@media (max-width: 480px) { .hsearch .fsel__btn { padding: 0 24px 0 12px; font-size: .85rem; background-position: right 6px center; } }
.hsearch .fsel__btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A85' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.lang--cur a { white-space: nowrap; }
@media (min-width: 1024px) { .hlang--always { display: inline-flex; } }
@media (min-width: 1024px) { html.has-sidecat .dupcat { display: none; } }
.pmbank { border: 1px dashed var(--line); border-radius: 12px; padding: 4px 14px 12px; margin: 12px 0 4px; min-width: 0; }
.pmbank legend { font-size: .9rem; font-weight: 600; padding: 0 6px; }
.pmbank[hidden] { display: none; }
.payhow__bank { margin: 0; display: grid; gap: 0; background: #fff; border: 1px solid #e6ebf2; border-radius: 10px; padding: 4px 10px; }
.payhow__bank > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f3f7; font-size: .86rem; min-width: 0; }
.payhow__bank > div:last-child { border-bottom: 0; }
.payhow__bank dt { color: #5b6b80; flex: none; } .payhow__bank dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.pm__logo--ic { background: color-mix(in srgb, var(--pc) 12%, #fff) !important; color: var(--pc); } .pm__logo--ic svg { width: 24px; height: 24px; }

/* payment page on computers: two columns like a hosted gateway (summary left, payment options right); phones keep the
   single compact card */
@media (min-width: 900px) {
  .page-pay .pg { padding: 48px 20px; }
  .pgx { max-width: 980px; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    grid-template-areas: "badge tabs" "head body" "amount body" "left body" "foot bar"; grid-template-rows: auto auto auto 1fr auto; padding-top: 0; border-radius: 18px; overflow: hidden; }
  .pgx::before { content: ""; grid-column: 1; grid-row: 1 / -1; background: #fbfcfe; border-right: 1px solid #edf1f6; }
  .pgx > .pgx__badge { grid-area: badge; position: static; transform: none; width: 72px; height: 72px; margin: 28px 0 0 28px; box-shadow: 0 2px 10px rgba(20, 35, 60, .12); border-width: 3px; z-index: 1; }
  .pgx__badge img { max-width: 58px; max-height: 58px; }
  .pgx > .pgx__head { grid-area: head; text-align: left; padding: 12px 28px 0; z-index: 1; }
  .pgx__name { font-size: 1.3rem; }
  .pgx__inv { justify-content: flex-start; }
  .pgx__acts { justify-content: flex-start; gap: 22px; }
  .pgx > .pgx__amount { grid-area: amount; margin: 18px 28px 0; padding: 18px 20px; z-index: 1; }
  .pgx__amtbtn b { font-size: 2rem; }
  .pgx__amtbtn svg { display: none; }
  .pgx [data-amt-lines] { display: grid !important; }
  .pgx > .pgx__foot { grid-area: foot; justify-items: start; text-align: left; padding: 18px 28px 26px; z-index: 1; align-self: end; }
  .pgx > .pgx__tabs { grid-area: tabs; margin: 28px 28px 0; border-radius: 12px 12px 0 0; overflow: hidden; }
  .pgx__tab { min-height: 54px; font-size: .82rem; }
  .pgx > .pgx__body, .pgx > .pg__result { grid-area: body; padding: 18px 28px 8px; align-content: start; }
  .pgx > .pgx__bar { grid-area: bar; padding: 4px 28px 28px; }
  .pgx__pay { border-radius: 12px; min-height: 56px; font-size: 1.05rem; }
  .pgx__close { top: 18px; right: 18px; z-index: 2; }
  .pgx__lang { top: 18px; left: auto; right: 60px; z-index: 2; }
  .page-pay .pg__grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
@media (min-width: 900px) { .pgx > .pgx__tabs { margin-top: 66px; } .pgx__close { top: 20px; right: 24px; } .pgx__lang { top: 20px; right: 66px; } }
.megacol { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; margin: 10px 0; }
.megacol summary { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.megapick { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
/* labels with an icon (e.g. "instant download"): icon and text on one line */
.tag { display: inline-flex; align-items: center; gap: 5px; }
.tag > svg, .tag > .ic { width: 14px; height: 14px; flex: none; }

/* ---------- Checkout: remittance & crypto ---------- */
.remitbox { display: grid; gap: 10px; }
.remitbox .lbl { margin: 4px 0 0; font-weight: 700; }
.remitbox__provs { display: flex; flex-wrap: wrap; gap: 6px; }
.remitbox__provs .chip { margin: 0; }
.remitbox__panel[hidden], .remitbox__link[hidden] { display: none; }
.remitbox__addr { font-size: .8rem; word-break: break-all; background: #f4f6fa; padding: 2px 6px; border-radius: 6px; }
.remitbox__link { display: inline-flex; align-items: center; gap: 6px; width: max-content; }
.remitbox__link .ic { width: 15px; height: 15px; }
.remitbox__amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; background: #fff; border: 1px solid #e6ebf2; border-radius: 10px; padding: 10px 14px; }
.remitbox__amt b { font-size: 1.35rem; color: var(--primary); }
.remitbox__amt small { color: var(--muted); }
.remitbox .fgrid { margin-top: 0; }
.remitbox input[type=file] { padding: 8px; background: #fff; }
.remitbox__crypto > div { flex-direction: column; align-items: stretch; gap: 4px; }
.remitbox__crypto dd { justify-content: space-between; text-align: left; }
.payhow__bank [data-copy-btn] { white-space: nowrap; flex: none; }

/* ---------- Book combos ---------- */
.g-combos { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.combocard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-width: 0; transition: box-shadow .2s, transform .2s; }
.combocard:hover { box-shadow: 0 10px 28px rgba(16, 24, 40, .09); transform: translateY(-2px); }
.combocard__media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #f3f6fb, #e9eef6); overflow: hidden; }
.combocard__media > img { width: 100%; height: 100%; object-fit: cover; }
.combocard__media .badge-off { position: absolute; top: 10px; left: 10px; }
.combocard__count { position: absolute; bottom: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; background: rgba(255, 255, 255, .92); padding: 3px 9px; border-radius: 99px; }
.combocard__count .ic { width: 13px; height: 13px; }
.combocard__stack { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 78%; }
.combocard__stack > span { width: 30%; aspect-ratio: 3 / 4; border-radius: 4px 8px 8px 4px; overflow: hidden; box-shadow: 0 8px 18px rgba(16, 24, 40, .22); background: #fff; margin: 0 -5%; }
.combocard__stack > span img { width: 100%; height: 100%; object-fit: cover; }
.combocard__stack--3 > span:nth-child(1) { transform: rotate(-8deg) translateY(4px); }
.combocard__stack--3 > span:nth-child(2) { z-index: 2; transform: scale(1.08); }
.combocard__stack--3 > span:nth-child(3) { transform: rotate(8deg) translateY(4px); }
.combocard__stack--2 > span:nth-child(1) { transform: rotate(-6deg); }
.combocard__stack--2 > span:nth-child(2) { transform: rotate(6deg); z-index: 2; }
.combocard__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.combocard__title { font-weight: 700; line-height: 1.35; color: var(--ink); }
.combocard__rate { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--muted); }
.combocard__list { margin: 0; font-size: .8rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.combocard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.combocard__foot form { margin: 0; }
.combopage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; padding: 22px; margin-top: 8px; }
.combopage__media { display: grid; place-items: center; border-radius: var(--r-lg); background: linear-gradient(135deg, #f3f6fb, #e9eef6); aspect-ratio: 16 / 11; overflow: hidden; }
.combopage__media > img { width: 100%; height: 100%; object-fit: cover; }
.combopage__info { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.combopage__info .h2 { margin: 0; }
.combopage__price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.combolist { list-style: none; margin: 0; padding: 6px 16px; }
.combolist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.combolist li:last-child { border-bottom: 0; }
.combolist li > a { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; }
.combolist li > a img { width: 44px; height: 60px; object-fit: cover; border-radius: 3px 6px 6px 3px; flex: none; }
.combolist li > a span { display: flex; flex-direction: column; min-width: 0; }
.combolist__sum { font-weight: 600; }
.combolist__sum--ok b { color: var(--ok); font-size: 1.15rem; }
.books-combos { margin: 6px 0 18px; }
.books-combos .sec-head { margin-bottom: 10px; }
@media (max-width: 760px) {
  .combopage { grid-template-columns: 1fr; padding: 14px; gap: 16px; }
  .g-combos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.combopick { display: grid; gap: 4px; max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0 12px; }
.combopick label[hidden] { display: none; }
.combopick label { align-items: flex-start; }
.combopick small { display: block; }
.combocard__count, .combocard__media .badge-off { z-index: 3; }

/* ==========================================================================
   Pro (marketplace) header
   ========================================================================== */
.phead { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--line); transition: box-shadow .2s, background .2s; }
.header-static .phead { position: relative; }
.phead.is-scrolled { box-shadow: 0 6px 24px -12px rgba(16, 24, 40, .25); }
.phead__in { display: flex; align-items: center; gap: 18px; height: 68px; }
.phead__logo { display: inline-flex; flex: none; }
.phead__logo img { height: calc(var(--logo-h) * .92); width: auto; }
.phead__nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.phead__explore, .phead__link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--ink); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.phead__explore .ic { width: 17px; height: 17px; }
.phead__explore .ic:last-child { width: 14px; height: 14px; opacity: .7; transition: transform .2s; }
.phead__explore[aria-expanded="true"] .ic:last-child { transform: rotate(180deg); }
.phead__explore:hover, .phead__link:hover, .phead__explore[aria-expanded="true"] { background: var(--navy-50); color: var(--navy); }
.phead__link.is-active { color: var(--orange-600); }
.phead__search { flex: 1; max-width: 420px; margin-left: auto; height: 42px; }
.phead__search select, .phead__search .fsel { display: none !important; }
.phead__search { min-width: 200px; }
.phead__search button { height: 34px; width: 38px; padding: 0; justify-content: center; }
.phead__search button span { display: none; }
.phead__act { display: flex; align-items: center; gap: 6px; flex: none; }
.phead__chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.phead__chip .ic { width: 15px; height: 15px; }
.phead__chip:hover { border-color: var(--navy); color: var(--navy); }
.phead__icon { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink); }
.phead__icon:hover { background: var(--navy-50); color: var(--navy); }
.phead__icon .count { top: 0; right: -2px; }
.phead__signin { font-weight: 600; font-size: .92rem; color: var(--ink); padding: 0 8px; white-space: nowrap; }
.phead__signin:hover { color: var(--orange-600); }
.phead__join { min-height: 40px; padding: 0 18px; border-radius: 10px; white-space: nowrap; }
.phead .menu > summary.hact { padding: 2px; }
.phead .menu > summary.hact > span:not(.avatar) { display: none; }
.phead__mega { border-top: 1px solid var(--line); }
.phead__burger { display: none; }
.phead__msearch { display: none; }
.phead__nav { flex: 0 1 auto; overflow: hidden; }
.phead__link.is-cut { display: none; }
.phead__join .ic { width: 17px; height: 17px; }
@media (max-width: 1023px) {
  .phead__in { height: 60px; gap: 10px; }
  .phead__burger { display: inline-grid; margin-left: -8px; }
  .phead__nav, .phead__search, .phead__chip { display: none; }
  .phead__act { margin-left: auto; }
  .phead__signin { display: none; }
  .phead__join { min-height: 36px; padding: 0 14px; font-size: .88rem; }
  .phead__msearch { display: block; padding: 0 var(--gut) 10px; }
  .phead__msearch .hsearch { height: 44px; max-width: none; }
}
/* dark: on the landing hero */
.phead--dark { background: rgba(12, 26, 33, .86); border-bottom-color: rgba(255, 255, 255, .08); color: #fff; }
.phead--dark .phead__explore, .phead--dark .phead__link, .phead--dark .phead__signin, .phead--dark .phead__icon, .phead--dark .hmenu { color: #fff; }
.phead--dark .phead__explore:hover, .phead--dark .phead__link:hover, .phead--dark .phead__explore[aria-expanded="true"], .phead--dark .phead__icon:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.phead--dark .phead__chip { color: #fff; border-color: rgba(255, 255, 255, .22); }
.phead--dark .phead__chip:hover { border-color: #fff; color: #fff; }
.phead--dark .phead__search { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); }
.phead--dark .phead__search input { color: #fff; }
.phead--dark .phead__search input::placeholder { color: rgba(255, 255, 255, .6); }
.phead--dark .count { border-color: var(--navy-950); }
.phead--dark .phead__msearch { display: none; }

/* ==========================================================================
   Pro (marketplace) footer
   ========================================================================== */
.pfoot { background: var(--navy-950); color: rgba(255, 255, 255, .72); margin-top: 56px; font-size: .92rem; }
.pfoot a { color: rgba(255, 255, 255, .78); }
.pfoot a:hover { color: #fff; }
.pfoot__top { display: grid; grid-template-columns: minmax(240px, 1.1fr) minmax(0, 3fr); gap: 48px; padding-block: 56px 36px; }
.pfoot__logo img { height: 38px; width: auto; }
.pfoot__brand p { margin: 14px 0 16px; line-height: 1.7; max-width: 34ch; }
.pfoot__contact { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.pfoot__contact li { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.pfoot__contact .ic { width: 16px; height: 16px; color: var(--orange-400); flex: none; }
.pfoot__cols { display: grid; grid-template-columns: repeat(var(--pfc, 4), minmax(0, 1fr)); gap: 28px; }
.pfoot__col > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: default; }
.pfoot__col > summary::-webkit-details-marker { display: none; }
.pfoot__col > summary .ic { display: none; width: 16px; height: 16px; }
.pfoot__col h4 { margin: 0 0 14px; color: #fff; font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
.pfoot__col > div { display: grid; gap: 9px; }
.pfoot__col a { font-size: .9rem; }
.pfoot__trust { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding-block: 20px; border-top: 1px solid rgba(255, 255, 255, .08); }
.pfoot__secure { display: flex; align-items: center; gap: 12px; }
.pfoot__secure > .ic { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgba(255, 255, 255, .07); color: var(--orange-400); }
.pfoot__secure span { display: flex; flex-direction: column; }
.pfoot__secure b { color: #fff; font-size: .92rem; }
.pfoot__secure small { font-size: .8rem; }
.pfoot__pay { flex: 1; justify-content: center; }
.pfoot__prefs { display: flex; gap: 10px; flex-wrap: wrap; }
.pfoot__bar { background: rgba(0, 0, 0, .22); }
.pfoot__bottom { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; padding-block: 16px; font-size: .82rem; }
@media (max-width: 1023px) {
  .pfoot__top { grid-template-columns: 1fr; gap: 28px; padding-block: 40px 24px; }
  .pfoot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pfoot { margin-top: 36px; }
  .pfoot__cols { grid-template-columns: 1fr; gap: 0; }
  .pfoot__col { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .pfoot__col > summary { cursor: pointer; padding: 14px 0; }
  .pfoot__col > summary .ic { display: block; transition: transform .2s; }
  .pfoot__col:not([open]) > summary .ic { transform: rotate(-90deg); }
  .pfoot__col h4 { margin: 0; }
  .pfoot__col > div { padding-bottom: 14px; }
  .pfoot__trust { flex-direction: column; align-items: flex-start; }
  .pfoot__pay { justify-content: flex-start; }
  .pfoot__bottom { flex-direction: column; text-align: center; align-items: center; }
}

/* ==========================================================================
   Marketplace landing page
   ========================================================================== */
.page-landing main { overflow-x: clip; }
.lx-hero { position: relative; color: #fff; background: var(--navy-950); padding: 64px 0 0; isolation: isolate; }
.lx-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(600px 380px at 82% 18%, color-mix(in srgb, var(--orange) 34%, transparent), transparent 70%),
    radial-gradient(700px 500px at 8% 100%, color-mix(in srgb, var(--navy-400) 70%, transparent), transparent 70%),
    linear-gradient(160deg, var(--navy-900), var(--navy-950) 60%); }
.lx-hero__bg::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 80%); }
.lx-hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.lx-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: .84rem; font-weight: 600; color: rgba(255, 255, 255, .9); }
.lx-pill .ic { width: 15px; height: 15px; color: var(--orange-400); }
.lx-pill--dark { background: var(--navy-50); border-color: var(--navy-100); color: var(--navy); }
.lx-pill--dark .ic { color: var(--orange-600); }
.lx-stars { color: var(--gold); letter-spacing: 1px; }
.lx-h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); line-height: 1.12; letter-spacing: -.02em; margin: 18px 0 16px; color: #fff; font-weight: 800; text-wrap: balance; }
.lx-lead { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.7; color: rgba(255, 255, 255, .76); max-width: 58ch; margin: 0 0 28px; }
.lx-search { position: relative; display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 14px; padding: 7px; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55); max-width: 640px; }
.lx-search__ic { display: grid; place-items: center; padding-left: 10px; color: var(--muted); }
.lx-search__ic .ic { width: 20px; height: 20px; }
.lx-search input { flex: 1; min-width: 0; border: 0; background: none; height: 46px; font-size: 1rem; color: var(--ink); padding: 0 6px; }
.lx-search input:focus { outline: none; }
.lx-search select { border: 0; border-left: 1px solid var(--line); border-radius: 0; height: 36px; background-color: transparent; color: var(--text); font-weight: 600; padding: 0 30px 0 12px; max-width: 150px; }
.lx-search .btn { height: 46px; padding: 0 26px; border-radius: 10px; font-size: 1rem; }
.lx-search .suggest { color: var(--ink); }
.lx-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: .86rem; color: rgba(255, 255, 255, .65); }
.lx-tags a { color: #fff; padding: 5px 13px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 99px; transition: background .15s, border-color .15s; }
.lx-tags a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); color: #fff; }
.lx-hero__art { position: relative; min-height: 460px; }
.lx-art__photo, .lx-art__card { position: absolute; inset: 40px 24px 84px 48px; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.lx-art__photo img { width: 100%; height: 100%; object-fit: cover; }
.lx-art__card { background: #fff; color: var(--ink); display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 8px rgba(255, 255, 255, .06), 0 40px 80px -30px rgba(0, 0, 0, .7); }
.lx-art__card:hover { color: var(--ink); }
.lx-art__media { display: block; flex: 1; min-height: 0; background: var(--navy-50); overflow: hidden; }
.lx-art__media img { width: 100%; height: 100%; object-fit: cover; }
.lx-art__body { padding: 14px 18px 16px; display: grid; gap: 6px; border-top: 1px solid var(--line); }
.lx-art__body .lx-gig__cat { font-size: .7rem; }
.lx-art__body > b { font-size: 1rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-art__row { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--muted); }
.lx-art__row b { color: var(--ink); font-size: 1.05rem; }
.lx-rate { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink); }
.lx-rate .ic { width: 15px; height: 15px; fill: var(--gold); color: var(--gold); }
.lx-rate small { color: var(--muted); font-weight: 500; }
.lx-art__mini { position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; color: var(--ink); border-radius: 14px; padding: 10px 14px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); font-size: .84rem; max-width: 280px; animation: lx-float 6s ease-in-out infinite; }
.lx-art__mini span { display: flex; flex-direction: column; min-width: 0; }
.lx-art__mini small { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.lx-art__mini small .ic { width: 13px; height: 13px; }
.lx-art__mini--a { left: -10px; bottom: 0; }
.lx-art__mini--b { right: -8px; top: 30%; animation-delay: -2s; }
.lx-art__mini--c { left: 0; top: 0; padding: 8px 14px; animation-delay: -4s; }
.lx-art__mini--c > .ic { width: 22px; height: 22px; color: var(--ok); }
.lx-art__thumb { width: 64px; height: 44px; border-radius: 8px; overflow: hidden; flex: none; background: var(--navy-50); }
.lx-art__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lx-art__ok { display: grid !important; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ok-50); color: var(--ok); flex: none; }
.lx-art__ok .ic { width: 18px; height: 18px; }
@keyframes lx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .lx-art__mini { animation: none; } }
.lx-stats { list-style: none; margin: 56px 0 0; padding: 22px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; border-top: 1px solid rgba(255, 255, 255, .1); }
.lx-stats li > a { display: flex; flex-direction: column; gap: 2px; color: inherit; }
.lx-stats li > a:hover b { color: var(--orange-400); }
.lx-stats b { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); color: #fff; font-weight: 800; letter-spacing: -.01em; }
.lx-stats span { font-size: .86rem; color: rgba(255, 255, 255, .62); }

.lx { padding-top: 8px; }
.lx-sec { padding-block: 44px 8px; }
.lx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.lx-h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.05rem); line-height: 1.2; letter-spacing: -.015em; margin: 0; color: var(--ink); font-weight: 800; text-wrap: balance; }
.lx-head p { margin: 6px 0 0; color: var(--muted); }
.lx-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy); white-space: nowrap; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.lx-more:hover { border-color: var(--navy); color: var(--navy); }
.lx-more .ic { width: 16px; height: 16px; }

.lx-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lx-cat { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.lx-cat:hover { border-color: var(--navy-100); box-shadow: 0 12px 28px -18px rgba(16, 24, 40, .35); transform: translateY(-2px); color: var(--ink); }
.lx-cat__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--navy-50); color: var(--navy); flex: none; overflow: hidden; }
.lx-cat__ic .ic { width: 22px; height: 22px; }
.lx-cat__ic img { width: 100%; height: 100%; object-fit: cover; }
.lx-cat:nth-child(4n+2) .lx-cat__ic { background: var(--orange-50); color: var(--orange-600); }
.lx-cat:nth-child(4n+3) .lx-cat__ic { background: var(--ok-50); color: var(--ok); }
.lx-cat:nth-child(4n+4) .lx-cat__ic { background: var(--info-50); color: var(--info); }
.lx-cat__t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lx-cat__t b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-cat__t small { color: var(--muted); font-size: .78rem; }
.lx-cat__go { width: 16px; height: 16px; color: var(--muted); flex: none; transition: transform .15s; }
.lx-cat:hover .lx-cat__go { transform: translateX(3px); color: var(--navy); }

.lx-gigs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lx-gig { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; color: var(--ink); transition: box-shadow .2s, transform .2s; min-width: 0; }
.lx-gig:hover { box-shadow: 0 18px 36px -20px rgba(16, 24, 40, .4); transform: translateY(-3px); color: var(--ink); }
.lx-gig__media { aspect-ratio: 5 / 3; background: var(--navy-50); overflow: hidden; }
.lx-gig__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.lx-gig:hover .lx-gig__media img { transform: scale(1.04); }
.lx-gig__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 10px; flex: 1; }
.lx-gig__cat { color: var(--orange-600); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.lx-gig__title { font-size: .98rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-gig__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--muted); margin-top: auto; }
.lx-gig__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.lx-gig__meta .ic { width: 14px; height: 14px; }
.lx-gig__foot { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.lx-gig__foot small { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.lx-gig__foot b { font-size: 1.12rem; }

.lx-how { margin-top: 48px; padding-block: 48px; background: linear-gradient(180deg, #fff, var(--bg)); border-block: 1px solid var(--line); }
.lx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: s; }
.lx-steps li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; overflow: hidden; }
.lx-steps__n { position: absolute; right: 16px; top: 4px; font-size: 4.2rem; font-weight: 800; color: var(--navy-50); line-height: 1; }
.lx-steps__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--navy); color: #fff; margin-bottom: 18px; position: relative; }
.lx-steps li:nth-child(2) .lx-steps__ic { background: var(--orange); }
.lx-steps li:nth-child(3) .lx-steps__ic { background: var(--ok); }
.lx-steps__ic .ic { width: 24px; height: 24px; }
.lx-steps h3 { margin: 0 0 8px; font-size: 1.12rem; position: relative; }
.lx-steps p { margin: 0; color: var(--muted); line-height: 1.65; position: relative; }

.lx-why { margin-top: 52px; background: var(--navy-950); color: rgba(255, 255, 255, .78); padding-block: 60px; position: relative; overflow: hidden; }
.lx-why::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--orange) 28%, transparent), transparent 70%); }
.lx-why__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; position: relative; }
.lx-why .lx-h2 { color: #fff; margin: 16px 0 24px; }
.lx-why .lx-pill--dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
.lx-why__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lx-why__list li { display: flex; gap: 12px; }
.lx-why__list li > .ic { width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--orange-400); flex: none; }
.lx-why__list b { color: #fff; }
.lx-why__list p { margin: 4px 0 0; font-size: .9rem; line-height: 1.6; }
.lx-why__board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lx-why__board > a:hover { border-color: rgba(255, 255, 255, .3); }
.lx-why__board > div, .lx-why__board > a { color: inherit; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.lx-why__board b { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; }
.lx-why__board span { font-size: .88rem; }
.lx-why__rate { grid-column: 1 / -1; background: linear-gradient(120deg, color-mix(in srgb, var(--orange) 22%, transparent), rgba(255, 255, 255, .04)) !important; }
.lx-why__rate .lx-stars { font-size: 1.1rem; margin-left: 6px; }

.lx-quotes { columns: 3 300px; column-gap: 18px; }
.lx-quote { break-inside: avoid; margin: 0 0 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.lx-quote blockquote { margin: 0; color: var(--text); line-height: 1.7; font-size: .96rem; }
.lx-quote figcaption { display: flex; align-items: center; gap: 10px; }
.lx-quote figcaption > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.lx-quote figcaption a { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lx-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; padding: 44px; border-radius: 26px; color: #fff;
  background: radial-gradient(500px 300px at 100% 0, color-mix(in srgb, var(--orange) 45%, transparent), transparent 70%), linear-gradient(135deg, var(--navy-700), var(--navy-950)); }
.lx-cta .lx-h2 { color: #fff; }
.lx-cta p { margin: 10px 0 0; color: rgba(255, 255, 255, .75); }
.lx-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.lx-btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.lx-btn-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.lx-cta__aff { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .85); font-weight: 600; width: max-content; max-width: 100%; }
.lx-cta__aff .ic { width: 16px; height: 16px; }
.lx-cta__aff:hover { color: #fff; }

@media (max-width: 1100px) {
  .lx-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-gigs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lx-gigs > :nth-child(n+7) { display: none; }
}
@media (max-width: 900px) {
  .lx-hero { padding-top: 36px; }
  .lx-hero__in { grid-template-columns: 1fr; gap: 28px; }
  .lx-hero__art { min-height: 320px; max-width: 520px; width: 100%; margin: 0 auto; }
  .lx-why__in { grid-template-columns: 1fr; }
  .lx-steps { grid-template-columns: 1fr; }
  .lx-cta { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
  .lx-cta__btns .btn { flex: 1 1 auto; white-space: normal; }
}
@media (max-width: 640px) {
  .lx-search { flex-wrap: wrap; padding: 6px; }
  .lx-search select { display: none; }
  .lx-search .btn { width: 100%; }
  .lx-hero__art { min-height: 280px; }
  .lx-art__card { inset: 26px 12px 54px 22px; }
  .lx-art__mini { font-size: .76rem; padding: 8px 10px; }
  .lx-art__mini--a { left: -4px; }
  .lx-art__mini--b { display: none; }
  .lx-stats { margin-top: 32px; justify-content: flex-start; display: grid; grid-template-columns: 1fr 1fr; }
  .lx-cats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lx-cat { padding: 10px; gap: 10px; }
  .lx-cat__ic { width: 38px; height: 38px; }
  .lx-cat__go { display: none; }
  .lx-gigs { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .lx-gigs > * { scroll-snap-align: start; }
  .lx-gigs > :nth-child(n+7) { display: flex; }
  .lx-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .lx-sec { padding-block: 32px 4px; }
  .lx-why__list, .lx-why__board { grid-template-columns: 1fr; }
  .lx-why__board { grid-template-columns: 1fr 1fr; }
}
.homemode__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.homemode__opt { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; }
.homemode__opt:has(input:checked) { border-color: var(--navy); background: var(--navy-50); }
.homemode__opt input { margin-top: 4px; }
.homemode__opt span { display: flex; flex-direction: column; gap: 4px; }
.homemode__opt small { color: var(--muted); line-height: 1.5; }
@media (max-width: 700px) { .homemode__pick { grid-template-columns: 1fr; } }
.bulkbar--items { position: sticky; bottom: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 -10px 30px -16px rgba(16, 24, 40, .35); margin-top: 12px; }
.bulkbar--items[hidden] { display: none; }
.bulkbar__pct { display: inline-flex; align-items: center; gap: 4px; }
.bulkbar__pct[hidden] { display: none; }
.bulkbar__pct input { width: 80px; }
.table .cbx { width: 34px; padding-right: 0; }
.lx-why__sub { margin: -12px 0 22px; color: rgba(255, 255, 255, .7); }
.lx-combos { margin-bottom: 18px; }
.lx-html { padding-top: 32px; }
.menu__pop, .phead .menu__pop { color: var(--ink); }
.menu__who b { color: var(--ink); }
@media (min-width: 1024px) {
  [data-cols][style*="--sec-cols:"] .lx-cats, [data-cols][style*="--sec-cols:"] .lx-gigs { grid-template-columns: repeat(var(--sec-cols), minmax(0, 1fr)); }
  [data-cols][style*="--sec-cols:"] .lx-quotes { columns: var(--sec-cols); }
}
@media (max-width: 640px) {
  [data-cols][style*="--sec-cols-m"] .lx-cats { grid-template-columns: repeat(var(--sec-cols-m), minmax(0, 1fr)); }
  [data-cols][style*="--sec-cols-m"] .lx-gigs { grid-auto-columns: calc((100% - (var(--sec-cols-m) - 1) * 12px) / var(--sec-cols-m)); }
  [data-cols][style*="--sec-cols-m"] .lx-quotes { columns: var(--sec-cols-m); column-gap: 12px; }
}

/* ---------- Review pages ---------- */
.rvhead { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 22px; margin-top: 8px; align-items: center; }
.rvhead__img img { width: 160px; height: 160px; object-fit: cover; border-radius: 14px; background: var(--navy-50); }
.rvhead__info { display: grid; gap: 10px; justify-items: start; }
.rvhead__info .h2 { margin: 0; }
.rvbars { display: grid; gap: 4px; width: min(360px, 100%); }
.rvbars > div { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; font-size: .84rem; }
.rvbars i { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.rvbars b { display: block; height: 100%; background: var(--gold); }
.reviews--hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.reviews--hub .review { padding: 16px; display: grid; gap: 8px; align-content: start; }
.reviews--hub .review p { margin: 0; }
.reviews__all { margin-top: 12px; }
@media (max-width: 640px) { .rvhead { grid-template-columns: 1fr; } .rvhead__img img { width: 100%; height: 200px; } }
.phead__explore, .phead__link { flex: none; }
.lx-art__meta { display: inline-flex; gap: 12px; color: var(--muted); font-size: .84rem; }
.lx-art__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.lx-art__meta .ic { width: 14px; height: 14px; }
a.lx-art__mini { color: var(--ink); }
.lx-art__mini small .ic { width: 12px; height: 12px; }
/* combo covers: centred, as large as the space allows for the number of books */
.cstack { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 6% 4%; }
.cstack > span { --w: min(38%, calc(92% / (1 + (var(--n) - 1) * .55))); flex: none; width: var(--w); aspect-ratio: 3 / 4; border-radius: 3px 8px 8px 3px; overflow: hidden; background: #fff;
  box-shadow: 0 10px 24px -6px rgba(16, 24, 40, .35), inset 3px 0 0 rgba(0, 0, 0, .08); transform: translateY(var(--y)) rotate(var(--r)); transition: transform .25s; }
.cstack > span + span { margin-left: calc(var(--w) * -.45); }
.cstack > span img { width: 100%; height: 100%; object-fit: cover; display: block; }
.combocard:hover .cstack > span { transform: translateY(calc(var(--y) - 4px)) rotate(calc(var(--r) * 1.3)); }
.cstack__more { position: absolute; right: 10px; top: 10px; font-style: normal; font-weight: 700; font-size: .8rem; background: var(--navy); color: #fff; padding: 2px 9px; border-radius: 99px; z-index: 20; }
.combopage__media .cstack { padding: 8% 6%; }
.combopage__media .cstack > span { --w: min(34%, calc(90% / (1 + (var(--n) - 1) * .55))); }
.combocard__media > .cstack, .combopage__media > .cstack { position: absolute; inset: 0; } .combopage__media { position: relative; }
.combocard__media .cstack { padding: 9% 6% 12%; }
.combocard__media .cstack > span { --w: min(30%, calc(88% / (1 + (var(--n) - 1) * .55))); }
.combocard__count, .combocard__media .badge-off, .cstack__more { z-index: 30 !important; }

/* ---------- International payment: method dropdown with logos ---------- */
.pmlogo { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid #e6ebf2; overflow: hidden; }
.pmlogo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
.pmlogo--mono { --h: 206; border: 0; background: linear-gradient(135deg, hsl(var(--h) 70% 46%), hsl(calc(var(--h) + 24) 72% 36%)); color: #fff; font-weight: 800; font-size: .86rem; letter-spacing: .02em; font-family: system-ui, sans-serif; }
.pmlogo--empty { background: var(--navy-50, #eef2f7); color: var(--muted); border-style: dashed; }
.pmlogo--empty .ic { width: 20px; height: 20px; }
.remitbox__notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #eef6ff, #f3fbf6); border: 1px solid #d6e6f7; }
.remitbox__notice > .ic { flex: none; width: 22px; height: 22px; color: #1d6fb8; margin-top: 2px; }
.remitbox__notice b { display: block; color: var(--ink); font-size: .92rem; }
.remitbox__notice span { display: block; font-size: .8rem; color: #4a5a6c; margin-top: 2px; }
.paydd { position: relative; }
.paydd__btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: #fff; border: 1.5px solid #d9e1ea; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.paydd__btn:hover { border-color: #b9c6d4; }
.paydd.is-open .paydd__btn, .paydd__btn:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(240, 89, 45, .14); outline: 0; }
.paydd.is-err .paydd__btn { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.paydd__cur { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.paydd__txt { display: grid; min-width: 0; line-height: 1.3; }
.paydd__txt b { font-size: .94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paydd__txt small { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paydd__chev { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.paydd.is-open .paydd__chev { transform: rotate(180deg); }
.paydd__list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: min(360px, 60vh); overflow: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #e3e9f0; border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(16, 24, 40, .28); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s .15s; }
.paydd.is-open .paydd__list { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
.paydd__opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 10px; cursor: pointer; }
.paydd__opt:hover, .paydd__opt:focus-within { background: #f4f7fb; }
.paydd__opt[aria-selected="true"] { background: #fff4ef; }
.paydd__opt .paydd__txt { flex: 1; }
.paydd__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.paydd__net { flex: none; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #eef2f7; color: #3b4b5e; }
.paydd__tick { flex: none; width: 18px; height: 18px; color: var(--primary); opacity: 0; }
.paydd__opt[aria-selected="true"] .paydd__tick { opacity: 1; }
.remitbox__send { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: #fafbfd; border: 1px solid #e6ebf2; }
.remitbox__send[hidden] { display: none; }
.remitbox__send .lbl .muted { font-weight: 500; font-size: .8rem; }
.remitbox__net { background: #fff4ef; color: var(--orange-600, #c2410c); padding: 1px 8px; border-radius: 6px; }
.remitbox__addrrow dd { flex-wrap: wrap; }
.remitbox__addrrow .remitbox__addr { font-size: .84rem; flex: 1 1 220px; }
.remitbox__refund, .refund-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff8eb; border: 1px solid #f3dfb4; color: #6b4f12; font-size: .8rem; line-height: 1.5; }
.remitbox__refund .ic, .refund-note .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #b7791f; }
.refund-note--sm { padding: 7px 10px; font-size: .76rem; }
.foot-refund { font-size: .76rem; opacity: .7; margin: 0; padding: 0 0 16px; line-height: 1.55; }
/* admin: one row per service / wallet */
.payrows { display: grid; gap: 8px; margin: 6px 0 14px; }
.payrow { display: grid; grid-template-columns: 48px 1.1fr 1.3fr 1.2fr 1.2fr 84px 36px; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.payrows--crypto .payrow { grid-template-columns: 48px .8fr .8fr 2fr 1.2fr 84px 36px; }
.payrow input, .payrow select { min-width: 0; }
.payrow__logo { position: relative; cursor: pointer; display: grid; place-items: center; }
.payrow__logo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.payrow__logo .pmlogo { width: 44px; height: 44px; }
.payrow__logo::after { content: '+'; position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; line-height: 17px; text-align: center; font-weight: 700; pointer-events: none; }
.payrows > .btn { justify-self: start; }
@media (max-width: 900px) { .payrow, .payrows--crypto .payrow { grid-template-columns: 48px 1fr 1fr; } .payrow > select { grid-column: 2; } }
.ptable { overflow-x: auto; margin: 14px 0 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ptable table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 520px; }
.ptable th { background: var(--navy, #214150); color: #fff; text-align: left; font-weight: 700; padding: 11px 14px; }
.ptable td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.ptable tbody tr:nth-child(even) td { background: #f8fafc; }
.ptable td:first-child { font-weight: 600; color: var(--ink); }
.rvhead__img--combo { position: relative; display: block; width: 220px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #f3f6fb, #e9eef6); }
.rvhead__img--combo .cstack { position: absolute; inset: 0; padding: 10% 6%; }
.rvhead:has(.rvhead__img--combo) { grid-template-columns: 220px minmax(0, 1fr); }
@media (max-width: 640px) { .rvhead__img--combo { width: 100%; } .rvhead:has(.rvhead__img--combo) { grid-template-columns: 1fr; } }
.tbulk { position: sticky; top: 8px; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 26px -14px rgba(16, 24, 40, .35); }
.tbulk[hidden] { display: none; }
.tbulk select { width: auto; }
.kwtags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.kwtags__h { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); font-size: .9rem; margin-right: 4px; }
.kwtags a { padding: 6px 12px; border-radius: 999px; background: var(--bg); color: var(--ink); font-size: .84rem; border: 1px solid var(--line); }
.kwtags a:hover { border-color: var(--navy); color: var(--navy); }

/* ---------- Admin webmail (Outlook-like) ---------- */
.wmail { display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.wm__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wm__search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
.wm__search input { border: 0; box-shadow: none; padding: 9px 0; background: transparent; }
.wm__views { display: inline-flex; background: var(--bg); border-radius: 10px; padding: 3px; }
.wm__views a { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-size: .86rem; font-weight: 600; }
.wm__views a.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.wm__body { display: grid; grid-template-columns: 210px minmax(280px, 380px) minmax(0, 1fr); gap: 12px; min-height: 72vh; }
.wm__folders, .wm__list, .wm__read { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.wm__folders { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.wm__acct { display: flex; align-items: center; gap: 8px; padding: 8px 10px 12px; font-size: .82rem; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 6px; overflow: hidden; }
.wm__acct span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm__folders > a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); font-size: .92rem; }
.wm__folders > a span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm__folders > a b { font-size: .75rem; background: var(--navy); color: #fff; border-radius: 999px; padding: 1px 8px; }
.wm__folders > a:hover { background: var(--bg); }
.wm__folders > a.is-on { background: #e8f0fe; color: #1a56db; font-weight: 700; }
.wm__newf input { margin-top: 10px; font-size: .84rem; padding: 7px 10px; }
.wm__list { display: flex; flex-direction: column; }
.wm__listbar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.wm__listbar select { width: auto; padding: 5px 8px; font-size: .82rem; }
.wm__listbar .check { margin: 0 6px 0 2px; }
.wm__count { margin-left: auto; font-size: .8rem; color: var(--muted); }
.wm__rows { overflow-y: auto; max-height: 72vh; }
.wm__row { display: grid; grid-template-columns: 18px 1fr auto; grid-template-areas: "c who meta" "c subj subj"; column-gap: 10px; row-gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink); position: relative; }
.wm__row input { grid-area: c; margin-top: 3px; }
.wm__row:hover { background: #f6f8fa; }
.wm__row.is-open { background: #e8f0fe; }
.wm__row.is-unread { background: #fff; }
.wm__row.is-unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #1a56db; }
.wm__row.is-unread .wm__who, .wm__row.is-unread .wm__subj { font-weight: 700; }
.wm__who { grid-area: who; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.wm__subj { grid-area: subj; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; color: var(--muted); }
.wm__row.is-unread .wm__subj { color: var(--ink); }
.wm__meta { grid-area: meta; display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: var(--muted); }
.wm__meta .ic { width: 14px; height: 14px; }
.wm__star .ic { color: #f5a524; fill: #f5a524; }
.wm__read { display: flex; flex-direction: column; }
.wm__rhead { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.wm__rhead h2 { font-size: 1.2rem; margin: 0 0 10px; line-height: 1.35; }
.wm__ractions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.wm__from { display: flex; gap: 10px; align-items: center; }
.wm__from > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wm__from small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm__from time { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.wm__imgnote { padding: 8px 18px; background: #fff8e6; font-size: .85rem; border-bottom: 1px solid var(--line); }
.wm__frame { width: 100%; min-height: 320px; border: 0; flex: 1; background: #fff; }
.wm__atts { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.wm__atts a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: .86rem; max-width: 280px; }
.wm__atts a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm__atts small { color: var(--muted); }
.wm__empty { margin: auto; text-align: center; color: var(--muted); padding: 40px; }
.wm__empty .ic { width: 48px; height: 48px; opacity: .4; }
.wm-compose, .wm-pick { position: fixed; inset: 0; z-index: 900; background: rgba(15, 23, 42, .35); display: grid; place-items: end center; padding: 16px; }
.wm-compose[hidden], .wm-pick[hidden] { display: none; }
.wm-compose__box, .wm-pick__box { width: min(860px, 100%); max-height: 92vh; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; }
.wm-pick { place-items: center; z-index: 950; }
.wm-pick__box { width: min(560px, 100%); padding-bottom: 12px; }
.wm-pick__box > input, .wm-pick__box > label { margin: 10px 16px 0; width: auto; }
.wm-pick__list { overflow-y: auto; max-height: 56vh; padding: 8px 10px; display: grid; gap: 4px; }
.wm-pick__list button { display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; padding: 8px; cursor: pointer; }
.wm-pick__list button:hover { background: var(--bg); border-color: var(--line); }
.wm-pick__list img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--bg); }
.wm-pick__list span { display: flex; flex-direction: column; }
.wm-pick__list small { color: var(--muted); }
.wm-compose__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f6f8fa; border-bottom: 1px solid var(--line); }
.wm-compose__fields label { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.wm-compose__fields span { width: 44px; color: var(--muted); font-size: .85rem; }
.wm-compose__fields input { border: 0; box-shadow: none; padding: 10px 0; }
.wm-compose__tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.wm-compose__tools button { min-width: 34px; height: 32px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; font-size: .86rem; }
.wm-compose__tools button:hover { background: var(--bg); }
.wm-compose__editor { min-height: 260px; max-height: 50vh; overflow-y: auto; padding: 14px 16px; outline: none; line-height: 1.6; }
.wm-compose__foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.wm-compose__foot .btn--accent { margin-left: auto; }
@media (max-width: 1100px) { .wm__body { grid-template-columns: 180px 1fr; } .wm__read { grid-column: 1 / -1; } }
@media (max-width: 700px) { .wm__body { grid-template-columns: 1fr; } .wm__folders { flex-direction: row; overflow-x: auto; } .wm__acct, .wm__newf { display: none; } .wm__folders > a { white-space: nowrap; } }

/* ---------- Admin product e-mail ---------- */
.pmail__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pmail__left { display: grid; gap: 16px; }
.pmail__right { position: sticky; top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pmail__prevhead { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f6f8fa; }
.pmail__prev { width: 100%; height: 78vh; border: 0; background: #f4f6f9; }
.pmail__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; min-height: 8px; }
.pmail__chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: #eef4ff; color: #1a3a8a; font-size: .85rem; }
.pmail__chips small { color: #5b6b93; }
.pmail__chips button { border: 0; background: rgba(0,0,0,.06); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.pmail__search { position: relative; }
.pmail__results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.12); max-height: 340px; overflow-y: auto; padding: 6px; }
.pmail__results button { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px; cursor: pointer; }
.pmail__results button:hover { background: var(--bg); }
.pmail__results img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--bg); }
.pmail__results span { display: flex; flex-direction: column; }
.pmail__results small { color: var(--muted); }
.pmail__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pmail__actions .btn--accent { margin-left: auto; }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--bg); border-radius: 10px; padding: 3px; gap: 2px; }
.seg label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: .88rem; }
.seg label:has(input:checked) { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 700; }
.seg input { margin: 0; }
@media (max-width: 1000px) { .pmail__grid { grid-template-columns: 1fr; } .pmail__right { position: static; } }
.fbbatch__list { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; margin: 10px 0; }
.fbbatch__row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.fbbatch__row img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--bg); }
.fbbatch__row span { display: flex; flex-direction: column; min-width: 0; }
.fbbatch__row small { color: var(--muted); }
.fbbatch__row.is-busy { border-color: #93c5fd; background: #eff6ff; }
.fbbatch__row.is-ok { border-color: #86efac; background: #f0fdf4; }
.fbbatch__row.is-ok small { color: #15803d; }
.fbbatch__row.is-bad { border-color: #fca5a5; background: #fef2f2; }
.fbbatch__row.is-bad small { color: #b91c1c; }

/* ---------- admin: SEO dashboard ---------- */
.seo-tabs { margin-bottom: 16px; }
.seo-tabs a { display: inline-flex; align-items: center; gap: 7px; }
.seo-tabs .ic { width: 16px; height: 16px; }
.seo-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.seo-head__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.seg a { padding: 6px 12px; border-radius: 8px; font-size: .86rem; font-weight: 600; color: var(--text); }
.seg a.is-active { background: var(--navy); color: #fff; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.kpi-card > span { color: var(--muted); font-size: .84rem; font-weight: 600; }
.kpi-card > b { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.kpi-card > b small { font-size: .9rem; color: var(--muted); font-weight: 600; margin-left: 2px; }
.kpi-card small { font-size: .8rem; line-height: 1.35; }
.up { color: #15803d; font-weight: 700; }
.down { color: #b91c1c; font-weight: 700; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 6px; border-bottom: 1px solid var(--line); }
.spark > div { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.spark i { display: block; width: 100%; background: #dbe7f6; border-radius: 3px 3px 0 0; }
.spark b { position: absolute; left: 20%; right: 20%; bottom: 0; background: #16a34a; border-radius: 2px 2px 0 0; }
.spark > div:hover i { background: #b8cdea; }
.table--sm td, .table--sm th { padding: 8px 10px; font-size: .88rem; vertical-align: middle; }
.table .r, .table td.r, .table th.r { text-align: right; white-space: nowrap; }
.pos { display: inline-block; min-width: 38px; text-align: center; padding: 2px 8px; border-radius: 7px; background: var(--bg); font-weight: 700; font-size: .82rem; }
.pos--top { background: #dcfce7; color: #166534; }
.pos--mid { background: #fef9c3; color: #854d0e; }
.chip b { font-weight: 800; }

/* ---------- Blog (list + reading page) ---------- */
.bloghero { background: linear-gradient(180deg, var(--navy-50), var(--bg)); border-bottom: 1px solid var(--line); padding: 18px 0 26px; }
.bloghero__title { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.15; color: var(--ink); margin: 10px 0 8px; letter-spacing: -.01em; }
.bloghero__sub { color: var(--muted); max-width: 62ch; margin: 0 0 18px; font-size: 1.05em; }
.bloghero__search { display: flex; align-items: center; gap: 10px; max-width: 520px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 6px 4px 16px; box-shadow: var(--sh-1); }
.bloghero__search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.bloghero__search input { border: 0; background: transparent; flex: 1; min-width: 0; padding: 10px 4px; font: inherit; outline: none; box-shadow: none; }
.blogcats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.blogcats a { padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: .92em; text-decoration: none; }
.blogcats a.is-on, .blogcats a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.blogwrap { padding-top: 26px; padding-bottom: 40px; }
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.blcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.blcard:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.blcard__media { position: relative; display: block; aspect-ratio: 1200/630; background: var(--navy-50); overflow: hidden; }
.blcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.blcard:hover .blcard__media img { transform: scale(1.04); }
.blcard__media--txt { background: radial-gradient(120% 90% at 100% 0%, hsl(var(--h) 55% 34% / .9), transparent 60%), linear-gradient(135deg, var(--navy-900), hsl(var(--h) 40% 22%)); color: #fff; display: flex; align-items: flex-end; padding: 18px 20px; }
.blcard__mark { position: absolute; right: 8px; top: -18px; font-size: 150px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.08); }
.blcard__mtitle { position: relative; font-weight: 700; font-size: 1.15em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blcard__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.blcard__cat { font-size: .78em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--orange-600); }
.blcard__title { font-weight: 700; font-size: 1.1em; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blcard__ex { color: var(--muted); font-size: .94em; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blcard__meta { margin-top: auto; color: var(--muted); font-size: .84em; }
.blcard--lead { display: grid; grid-template-columns: 1.25fr 1fr; margin-bottom: 26px; }
.blcard--lead .blcard__media { aspect-ratio: auto; min-height: 320px; }
.blcard--lead .blcard__body { padding: 30px 32px; justify-content: center; }
.blcard--lead .blcard__title { font-size: clamp(22px, 2.6vw, 30px); -webkit-line-clamp: 3; }
.blcard--lead .blcard__ex { -webkit-line-clamp: 4; font-size: 1em; }
.blogpost__narrow { max-width: 820px; }
.blogpost__head { padding: 18px 0 30px; }
.blogpost--plain .blogpost__head { background: radial-gradient(90% 120% at 100% 0%, hsl(var(--h) 60% 92%), transparent 60%), linear-gradient(180deg, var(--navy-50), var(--bg)); border-bottom: 1px solid var(--line); padding-bottom: 40px; margin-bottom: 30px; }
.blogpost__cat { display: inline-block; margin-top: 14px; padding: 5px 12px; border-radius: 999px; background: var(--orange-50); color: var(--orange-600); font-weight: 700; font-size: .82em; text-decoration: none; }
.blogpost__title { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.2; color: var(--ink); margin: 14px 0 12px; letter-spacing: -.01em; }
.blogpost__lede { font-size: 1.15em; color: var(--muted); line-height: 1.7; margin: 0 0 20px; }
.blogpost__meta { display: flex; align-items: center; gap: 12px; }
.blogpost__meta b { display: block; color: var(--ink); }
.blogpost__meta small { color: var(--muted); }
.blogpost__av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 700; font-size: 1.1em; flex: none; }
.blogpost__cover { margin: 0 auto 34px; max-width: 1100px; }
.blogpost__cover img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r-xl); display: block; box-shadow: var(--sh-3); }
.blogpost__grid { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 48px; justify-content: center; padding-bottom: 40px; }
.blogpost__grid--solo { grid-template-columns: minmax(0, 760px); }
.blogpost__body { max-width: none; font-size: 1.08em; line-height: 1.85; color: var(--text); }
.blogpost__body h2 { font-size: 1.55em; line-height: 1.3; color: var(--ink); margin: 1.8em 0 .6em; scroll-margin-top: calc(var(--header-h) + 16px); }
.blogpost__body h3 { font-size: 1.25em; color: var(--ink); margin: 1.5em 0 .5em; scroll-margin-top: calc(var(--header-h) + 16px); }
.blogpost__body p { margin: 0 0 1.15em; }
.blogpost__body a { color: var(--orange-600); text-decoration: underline; text-underline-offset: 3px; }
.blogpost__body img { max-width: 100%; height: auto; border-radius: var(--r); display: block; margin: 1.4em auto; }
.blogpost__body figure { margin: 1.6em 0; }
.blogpost__body figure img { margin: 0 auto; }
.blogpost__body figcaption { text-align: center; color: var(--muted); font-size: .88em; margin-top: 8px; }
.blogpost__body blockquote { margin: 1.6em 0; padding: 14px 22px; border-left: 4px solid var(--orange); background: var(--orange-50); border-radius: 0 var(--r) var(--r) 0; font-size: 1.05em; color: var(--ink); }
.blogpost__body ul, .blogpost__body ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.blogpost__body li { margin-bottom: .45em; }
.blogpost__body pre { background: var(--navy-950); color: #E8EEF2; padding: 16px 18px; border-radius: var(--r); overflow-x: auto; font-size: .9em; line-height: 1.6; }
.blogpost__body code { background: var(--navy-50); padding: 2px 6px; border-radius: 5px; font-size: .92em; }
.blogpost__body pre code { background: none; padding: 0; }
.blogpost__body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95em; display: block; overflow-x: auto; }
.blogpost__body th, .blogpost__body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.blogpost__body th { background: var(--navy-50); color: var(--ink); }
.blogpost__body hr { border: 0; height: 1px; background: var(--line); margin: 2.2em 0; }
.blog-embed { position: relative; aspect-ratio: 16/9; margin: 1.6em 0; border-radius: var(--r); overflow: hidden; background: #000; }
.blog-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blogtoc { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; max-height: calc(100vh - var(--header-h) - 40px); overflow: auto; }
.blogtoc summary { font-weight: 700; color: var(--ink); cursor: pointer; margin-bottom: 10px; list-style: none; }
.blogtoc ol { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); }
.blogtoc li { margin: 0 0 8px; font-size: .92em; line-height: 1.45; }
.blogtoc .blogtoc__h3 { padding-left: 12px; font-size: .86em; }
.blogtoc a { color: var(--muted); text-decoration: none; }
.blogtoc a:hover { color: var(--orange-600); }
.blogpost__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.blogpost__tags span { background: var(--navy-50); color: var(--navy); padding: 5px 12px; border-radius: 999px; font-size: .86em; }
.blogshare { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.blogshare span { font-weight: 700; color: var(--ink); margin-right: 4px; }
.blogshare a, .blogshare button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--surface); color: var(--navy); cursor: pointer; }
.blogshare a:hover, .blogshare button:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.blogshare svg { width: 18px; height: 18px; }
.blogrel { padding-bottom: 50px; }
.blogrel .h3 { margin: 0 0 16px; }
body.justify .blogpost__body p { text-align: justify; hyphens: auto; }
@media (max-width: 1000px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blogpost__grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .blogtoc { position: static; max-height: none; margin-bottom: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; } .blogtoc details:not([open]) summary { margin: 0; } }
@media (max-width: 720px) { .bgrid { grid-template-columns: minmax(0, 1fr); } .blcard--lead { grid-template-columns: 1fr; } .blcard--lead .blcard__media { min-height: 0; aspect-ratio: 1200/630; } .blcard--lead .blcard__body { padding: 18px; } .blogpost__body { font-size: 1.02em; } .blogpost__cover img { border-radius: var(--r); } }
/* admin editor */
.htmled { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.htmled__bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.htmled__bar button { border: 1px solid transparent; background: transparent; padding: 5px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: .88em; color: var(--ink); }
.htmled__bar button:hover, .htmled__bar button.is-on { background: var(--surface); border-color: var(--line-2); }
.htmled__sp { flex: 1; }
.htmled__src { border: 0 !important; border-radius: 0 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.6; min-height: 420px; width: 100%; resize: vertical; box-shadow: none !important; }
.htmled__pv { padding: 18px 22px; min-height: 420px; max-height: 70vh; overflow: auto; }
.blogedit__title { font-size: 1.25em; font-weight: 700; }
.blogedit__cover { width: 100%; border-radius: var(--r); margin-bottom: 8px; aspect-ratio: 1200/630; object-fit: cover; }
.thumb--txt { display: inline-grid; place-items: center; background: var(--navy); color: #fff; font-weight: 700; font-size: 20px; }
.atools__search--multi { display: flex; gap: 8px; max-width: 640px; flex-wrap: wrap; }
.atools__search--multi input { flex: 1 1 200px; }
.atools__search--multi select { flex: 0 1 180px; width: auto; }
/* admin list filters beside the search box */
.atools__search.afilters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 760px; flex: 1 1 auto; }
.atools__search.afilters input[type=search] { flex: 1 1 220px; min-width: 180px; }
.afilter { width: auto; flex: 0 1 200px; min-width: 140px; }
.atools__search.afilters .check { margin: 0; white-space: nowrap; }
/* card headers inside table cards: never flush against the card edge */
.tablewrap > .cardhead, .tablewrap > .sec-head { padding: 16px 18px 12px; margin: 0; border-bottom: 1px solid var(--line); align-items: center; }
.tablewrap > .cardhead .h3, .tablewrap > .sec-head .h3 { margin: 0; }
.tablewrap > .cardhead small { flex: 1 1 260px; text-align: right; line-height: 1.5; }
.tablewrap > .bulkbar { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); border-radius: 0; position: static; }
.card.form > .h3:first-child, .card > h2.h3:first-child { margin-top: 0; }
@media (max-width: 720px) { .tablewrap > .cardhead small { text-align: left; } }
.anotices { display: grid; gap: 10px; padding: 0 20px; max-width: 1440px; }
.anotices > .notice:first-child { margin-top: 16px; }
.anotices .notice form { display: inline-block; margin: 6px 0 0 6px; }
@media (min-width: 1024px) { .anotices { padding: 0 28px; } .anotices > .notice:first-child { margin-top: 22px; } }
.copyline { align-items: stretch; }
.copyline > .btn { height: auto !important; min-height: 0; align-self: stretch; display: inline-flex; align-items: center; padding-inline: 16px; }
.wm-compose__opts { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px 0 2px; }
.wm-compose__opts .check { margin: 0; }
.sigprev { margin: 14px 0 16px; padding: 14px 18px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface); }
.wm-compose__fields .wm-compose__opts { padding: 8px 16px; border-bottom: 1px solid var(--line); }
.wm-compose__fields .wm-compose__opts label { border: 0; padding: 0; display: inline-flex; }
.wm-compose__fields .wm-compose__opts label.btn { padding: 4px 10px; }
/* ===== blog v2 (shared with Freelancer Wahid) ===== */
.bx-hero{--bx-a:var(--accent2,var(--orange-600,#c2410c));background:radial-gradient(70% 140% at 100% 0%,color-mix(in srgb,var(--bx-a) 12%,transparent),transparent 60%),linear-gradient(180deg,#f6f8f7,#fff);border-bottom:1px solid #e6e8ea}
.bx-hero__in{padding:28px 0 34px}
.bx-hero h1{font-size:clamp(30px,4.6vw,48px);line-height:1.15;letter-spacing:-.02em;color:#1d1f22;margin:12px 0 8px}
.bx-hero p{color:#5d6168;font-size:17px;margin:0 0 20px;max-width:60ch;text-align:left}
.bx-search{display:flex;align-items:center;gap:8px;max-width:560px;background:#fff;border:1px solid #d9dcdf;border-radius:12px;padding:5px 5px 5px 14px;box-shadow:0 10px 26px -20px rgba(0,0,0,.4)}
.bx-search svg{width:18px;height:18px;color:#7a7f86;flex:none}
.bx-search input{flex:1;min-width:0;border:0!important;outline:0;background:transparent;font:inherit;padding:9px 4px;box-shadow:none!important}
.bx-search button{border:0;border-radius:9px;background:#1d1f22;color:#fff;font-weight:700;padding:10px 18px;cursor:pointer;font:inherit}
.bx-cats{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.bx-cats a{padding:7px 15px;border-radius:999px;border:1px solid #dcdfe2;background:#fff;color:#404348;font-size:14px;font-weight:600;text-decoration:none}
.bx-cats a.on,.bx-cats a:hover{background:#1d1f22;border-color:#1d1f22;color:#fff}
.bx-wrap{padding-top:34px;padding-bottom:48px}
.bx-h{font-size:24px;letter-spacing:-.01em;color:#1d1f22;margin:0 0 18px}
.bx-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#eef1f0}
.bx-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.bx-media--gen{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:20px 22px;color:#fff;background:radial-gradient(120% 100% at 100% 0%,hsl(var(--h) 60% 40% / .85),transparent 60%),linear-gradient(135deg,hsl(var(--h) 35% 16%),hsl(var(--h) 45% 26%))}
.bx-media--gen::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(180deg,#000,transparent 75%)}
.bx-media__cat{position:relative;z-index:1;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.16)}
.bx-media__t{position:relative;z-index:1;font-weight:700;font-size:19px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.bx-lead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border:1px solid #e3e6e8;border-radius:20px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;margin-bottom:44px;transition:box-shadow .25s}
.bx-lead:hover{box-shadow:0 28px 60px -36px rgba(0,0,0,.45)}
.bx-lead .bx-media{aspect-ratio:auto;min-height:340px;height:100%}
.bx-lead .bx-media__t{font-size:26px;-webkit-line-clamp:4}
.bx-lead__b{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:36px 38px}
.bx-lead__t{font-size:clamp(22px,2.4vw,30px);line-height:1.3;font-weight:700;color:#1d1f22;letter-spacing:-.01em}
.bx-kick{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2,var(--orange-600,#c2410c))}
.bx-ex{color:#5d6168;font-size:15.5px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-align:left}
.bx-meta{color:#7a7f86;font-size:13.5px}
.bx-more{font-weight:700;color:#1d1f22;margin-top:4px}
.bx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bx-card{display:flex;flex-direction:column;border:1px solid #e3e6e8;border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.bx-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -32px rgba(0,0,0,.45)}
.bx-card:hover .bx-media img{transform:scale(1.04)}
.bx-card__b{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.bx-card__t{font-weight:700;font-size:18px;line-height:1.4;color:#1d1f22;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bx-card .bx-meta{margin-top:auto;padding-top:6px}
.bx-empty{padding:40px 0;color:#7a7f86;text-align:center}
.bx-post__head{background:radial-gradient(80% 140% at 100% 0%,hsl(var(--h) 55% 92%),transparent 60%),linear-gradient(180deg,#f6f8f7,#fff);border-bottom:1px solid #e6e8ea;padding:26px 0 36px}
.bx-col{max-width:820px!important}
.bx-chip{display:inline-block;margin-top:16px;padding:5px 13px;border-radius:999px;background:#fff;border:1px solid #dfe2e5;color:var(--accent2,var(--orange-600,#c2410c));font-weight:700;font-size:13px;text-decoration:none}
.bx-post h1{font-size:clamp(28px,4.2vw,44px);line-height:1.25;letter-spacing:-.015em;color:#1d1f22;margin:14px 0 12px}
.bx-post__lede{font-size:19px;line-height:1.7;color:#4d5157;margin:0 0 18px;text-align:left}
.bx-post__meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;color:#6b7076;font-size:14.5px}
.bx-post__meta span{display:inline-flex;align-items:center;gap:6px}.bx-post__meta svg{width:16px;height:16px}
.bx-cover{max-width:1100px;margin:30px auto 0}.bx-cover img{width:100%;border-radius:18px;display:block}
.bx-post__body{padding-top:34px;padding-bottom:20px}
.bx-toc{border:1px solid #e3e6e8;border-radius:14px;background:#fafbfb;margin:0 0 30px}
.bx-toc summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;font-weight:700;color:#1d1f22;list-style:none}
.bx-toc summary::-webkit-details-marker{display:none}
.bx-toc summary span{display:inline-flex;gap:8px;align-items:center}.bx-toc summary svg{width:18px;height:18px}
.bx-toc summary i{width:9px;height:9px;border-right:2px solid #6b7076;border-bottom:2px solid #6b7076;transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.bx-toc[open] summary i{transform:rotate(-135deg)}
.bx-toc ol{margin:0;padding:4px 18px 16px 40px;display:grid;gap:6px;counter-reset:none}
.bx-toc li{color:#6b7076}.bx-toc a{color:#2c2f33;text-decoration:none;line-height:1.5}.bx-toc a:hover{color:var(--accent2,var(--orange-600,#c2410c))}
.bx-toc__h3{margin-left:16px;font-size:.95em}
.bx-prose{font-size:18px;line-height:1.85;color:#2c2f33;max-width:none!important}
.bx-bn .bx-prose,.bx-bn h1,.bx-bn .bx-post__lede,.bx-bn .bx-toc{line-height:1.95}
.bx-prose h2{font-size:27px;line-height:1.35;letter-spacing:-.01em;color:#1d1f22;margin:44px 0 14px;scroll-margin-top:96px}
.bx-prose h3{font-size:21px;color:#1d1f22;margin:30px 0 10px;scroll-margin-top:96px}
.bx-prose p{margin:0 0 20px}
.bx-prose ul,.bx-prose ol{padding-left:24px;margin:0 0 22px}.bx-prose li{margin-bottom:8px}
.bx-prose a{color:var(--accent2,var(--orange-600,#c2410c));text-decoration:underline;text-underline-offset:3px}
.bx-prose blockquote{margin:26px 0;padding:6px 0 6px 20px;border-left:4px solid var(--accent2,var(--orange-600,#c2410c));color:#40444a;font-size:1.06em}
.bx-prose img{max-width:100%;height:auto;border-radius:12px}
.bx-prose pre{background:#16191c;color:#e8eaec;padding:16px;border-radius:12px;overflow:auto;font-size:14px}
.bx-tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0}.bx-tags span{padding:5px 12px;border-radius:999px;background:#f1f3f2;color:#40444a;font-size:14px}
.bx-share{display:flex;align-items:center;gap:8px;margin:28px 0 10px;padding:16px 0;border-top:1px solid #e6e8ea;border-bottom:1px solid #e6e8ea}
.bx-share span{font-weight:700;color:#1d1f22;margin-right:auto}
.bx-share a,.bx-share button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid #dfe2e5;background:#fff;color:#2c2f33;cursor:pointer;transition:.2s}
.bx-share a:hover,.bx-share button:hover{background:#1d1f22;color:#fff;border-color:#1d1f22}.bx-share svg{width:18px;height:18px}
.bx-rel{background:#f7f8f8;border-top:1px solid #e6e8ea;padding:44px 0 52px;margin-top:30px}
@media(max-width:980px){.bx-grid{grid-template-columns:1fr 1fr}.bx-lead{grid-template-columns:1fr}.bx-lead .bx-media{min-height:0;aspect-ratio:16/9}.bx-lead__b{padding:24px}}
@media(max-width:620px){.bx-grid{grid-template-columns:1fr}.bx-prose{font-size:17px}.bx-prose h2{font-size:23px}.bx-search button{padding:9px 12px}.bx-share span{width:100%;margin:0 0 4px}.bx-share{flex-wrap:wrap}}
.bx-bn h1{line-height:1.4}.bx-bn .bx-lead__t,.bx-bn .bx-card__t{line-height:1.5}
@media(max-width:620px){.bx-prose p,.bx-post__lede,.bx-ex{text-align:left!important}}
.bx-cover img{max-height:560px;object-fit:cover}
/* blog v2.1: tighter reading rhythm (news-article typography) */
.bx-col{max-width:760px!important}
.bx-post h1{font-size:clamp(28px,3.6vw,40px);line-height:1.3;margin:12px 0 10px}
.bx-bn h1,.bx-post.bx-bn h1{line-height:1.38}
.bx-post__lede{font-size:18px;line-height:1.6;margin:0 0 16px}
.bx-post__head{padding:22px 0 26px}
.bx-post__body{padding-top:26px}
.bx-prose{font-size:18px;line-height:1.7}
.bx-bn .bx-prose{font-size:19px;line-height:1.72}
.bx-bn .bx-post__lede,.bx-bn .bx-toc{line-height:1.6}
.bx-prose p{margin:0 0 1em}
.bx-prose h2{font-size:24px;line-height:1.4;margin:1.5em 0 .5em}
.bx-prose h3{font-size:20px;line-height:1.4;margin:1.3em 0 .4em}
.bx-prose li{margin-bottom:.35em;line-height:1.65}
.bx-prose ul,.bx-prose ol{margin:0 0 1em}
.bx-toc{margin:0 0 24px}.bx-toc summary{padding:12px 16px}.bx-toc ol{gap:4px;padding:2px 16px 14px 38px}.bx-toc a{line-height:1.45}
.bx-share{margin:22px 0 6px;padding:12px 0}
.bx-lead__t,.bx-card__t{line-height:1.38!important}
.bx-ex{line-height:1.55}
.bx-hero p{line-height:1.55}
.bx-media__t{line-height:1.3}
@media(max-width:620px){.bx-prose,.bx-bn .bx-prose{font-size:17px;line-height:1.68}.bx-post h1{font-size:26px}.bx-post__lede{font-size:17px}}
/* blog: article uses the full site width (the same container as the header) */
.bx-col{max-width:var(--wrap,1240px)!important}
.bx-cover{max-width:none}
.bx-post__lede{max-width:none}

/* blog: links without underline, title and search on one row */
.bx-prose a{text-decoration:none!important;border-bottom:0;font-weight:600}.bx-prose a:hover{text-decoration:none!important;opacity:.8}
.bx-hero__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,460px);gap:32px;align-items:end;margin-top:6px}
.bx-hero__row .bx-search{max-width:none;margin-bottom:4px}
.bx-hero__t p{margin-bottom:0}
@media(max-width:820px){.bx-hero__row{grid-template-columns:1fr;gap:16px}}

/* blog article: aligned with the site container, contents in two columns on wide screens */
.bx-post .bx-col,.bx-post .bx-cover{margin-inline:auto}
@media(min-width:900px){.bx-toc ol{columns:2;column-gap:40px;display:block!important}.bx-toc li{break-inside:avoid;margin-bottom:6px}}
.bx-prose img{border-radius:12px}
.bx-prose blockquote{margin:1.2em 0;padding:14px 20px;border-left:4px solid var(--accent,#c2410c);background:rgba(0,0,0,.03);border-radius:0 10px 10px 0}
.bx-post__body{background:#fff}.bx-post{background:#fff}