.demo{ position:absolute; inset:0; visibility:hidden; text-align:left; font-weight:400; line-height:1.55; -webkit-font-smoothing:antialiased; }
.demo.on{ visibility:visible; z-index:2; }
.demo.leaving{ visibility:visible; z-index:1; }
.demo input,.demo select,.demo textarea{ font:inherit; color:inherit; }
.demo button:focus-visible,.demo a:focus-visible,.demo input:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.d-scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.demo svg{ max-width:none; }
.dm-barber{ --bg:#120e0b; --bg2:#1b1511; --line:#ffffff17; --text:#f4ebe1; --mute:#b3a495; --gold:#d4a373; --gold2:#e9c29a; --disp:'Unbounded',system-ui,sans-serif; --pad:clamp(16px,4cqi,40px); background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:15px; }
.dm-barber .d-scroll{ scrollbar-color:#d4a37355 transparent; }
.bx-nav{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:26px; height:64px; padding:0 var(--pad); background:#120e0bdd; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.bx-logo{ font:800 20px var(--disp); letter-spacing:.08em; margin-right:auto; }
.bx-logo span{ color:var(--gold); }
.bx-menu{ display:flex; gap:26px; font-size:14px; color:var(--mute); }
.bx-menu button:hover{ color:var(--text); }
.bx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px; border-radius:12px; font:600 14px var(--font-sans); transition:transform .3s var(--ease),background .3s,border-color .3s; }
.bx-gold{ background:var(--gold); color:#1b1410; box-shadow:0 10px 30px #d4a37333; }
.bx-gold:hover{ background:var(--gold2); transform:translateY(-2px); }
.bx-line{ border:1px solid #ffffff2a; }
.bx-line:hover{ border-color:var(--gold); }
.bx-nav .bx-btn{ height:40px; padding:0 16px; font-size:13px; }
.bx-hero{ position:relative; overflow:hidden; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding:60px var(--pad) 76px; }
.bx-hero::before{ content:""; position:absolute; right:-20%; top:-30%; width:640px; height:640px; border-radius:50%; background:radial-gradient(closest-side,#d4a37326,transparent); pointer-events:none; }
.bx-hero > *{ position:relative; }
.bx-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--gold2); margin-bottom:22px; padding:7px 13px; border:1px solid #d4a37344; border-radius:999px; }
.bx-eyebrow i{ width:8px; height:8px; border-radius:50%; background:#6ee7a0; box-shadow:0 0 10px #6ee7a0; }
.bx-h1{ font:800 clamp(30px,6.2cqi,66px)/.98 var(--disp); letter-spacing:-.03em; text-transform:uppercase; margin-bottom:22px; }
.bx-h1 em{ font-style:normal; color:var(--gold); }
.bx-lead{ font-size:17px; color:var(--mute); max-width:460px; margin-bottom:28px; }
.bx-cta{ display:flex; flex-wrap:wrap; gap:10px; }
.bx-card{ position:relative; aspect-ratio:4/5; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#1a120d; }
.bx-card svg{ position:absolute; inset:0; width:100%; height:100%; }
.bx-badge{ position:absolute; left:14px; right:14px; bottom:14px; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:#120e0bd9; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--line); }
.bx-badge b{ font:600 24px var(--disp); color:var(--gold); white-space:nowrap; }
.bx-badge span{ font-size:12px; color:var(--mute); line-height:1.4; }
.bx-sec{ padding:64px var(--pad); }
.bx-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.bx-h2{ font:600 clamp(24px,3.6cqi,40px)/1.05 var(--disp); letter-spacing:-.02em; text-transform:uppercase; }
.bx-title p{ color:var(--mute); max-width:340px; font-size:14px; }
.bx-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bx-svc{ padding:22px; border-radius:18px; background:var(--bg2); border:1px solid var(--line); display:flex; flex-direction:column; gap:8px; transition:border-color .3s,transform .3s var(--ease); }
.bx-svc:hover{ border-color:#d4a37366; transform:translateY(-3px); }
.bx-svc b{ font:600 16px var(--font-sans); }
.bx-svc p{ font-size:13px; color:var(--mute); }
.bx-svc-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.bx-price{ font:600 20px var(--disp); color:var(--gold); }
.bx-time{ font-size:12px; color:var(--mute); }
.bx-booking{ background:linear-gradient(180deg,#1b1511,#120e0b); border-block:1px solid var(--line); }
.bx-bk{ display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
.bx-bk-main{ padding:26px; border-radius:22px; background:#0e0b09; border:1px solid var(--line); display:flex; flex-direction:column; gap:24px; }
.bx-label{ display:flex; align-items:center; gap:10px; font:600 12px var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-bottom:12px; }
.bx-label b{ display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#d4a37322; color:var(--gold); font-size:12px; }
.bx-masters{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.bx-master{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; border:1px solid var(--line); text-align:left; font-size:14px; transition:border-color .25s,background .25s; }
.bx-ava{ flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font:600 14px var(--disp); color:#1b1410; }
.bx-master small{ display:block; font-size:12px; color:var(--mute); }
.bx-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.bx-chip{ padding:9px 13px; border-radius:12px; border:1px solid var(--line); font-size:14px; transition:border-color .25s,background .25s; }
.bx-chip small{ display:block; font-size:12px; color:var(--mute); }
.bx-chip:disabled{ opacity:.3; cursor:not-allowed; text-decoration:line-through; }
.bx-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.bx-day{ padding:8px 0; border-radius:12px; border:1px solid var(--line); text-align:center; font-size:15px; font-weight:600; }
.bx-day small{ display:block; font-size:11px; font-weight:400; color:var(--mute); text-transform:uppercase; }
.bx-slots{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.bx-slots .bx-chip{ text-align:center; padding:9px 0; }
.dm-barber .sel{ border-color:var(--gold); background:#d4a3731f; }
.bx-side{ position:sticky; top:80px; padding:22px; border-radius:22px; background:var(--gold); color:#1b1410; }
.bx-side-h{ font:600 19px var(--disp); text-transform:uppercase; margin-bottom:14px; }
.bx-sum{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.bx-sum li{ display:flex; justify-content:space-between; gap:12px; font-size:14px; padding-bottom:8px; border-bottom:1px solid #1b141026; }
.bx-sum li span{ opacity:.7; }
.bx-sum li b{ text-align:right; }
.bx-side input{ width:100%; height:46px; border-radius:12px; border:1px solid #1b141033; background:#fff6ec; padding:0 14px; font-size:15px; font-weight:500; color:#1b1410; margin-bottom:8px; }
.bx-side input:focus{ outline:2px solid #1b1410; }
.bx-side .bx-btn{ width:100%; background:#1b1410; color:var(--gold2); }
.bx-side .bx-btn:disabled{ opacity:.45; cursor:not-allowed; }
.bx-hint{ margin-top:8px; font-size:12px; opacity:.7; text-align:center; }
.bx-done{ text-align:center; padding:12px 0; }
.bx-ok{ width:60px; height:60px; margin:0 auto 14px; border-radius:50%; background:#1b1410; display:grid; place-items:center; }
.bx-ok svg{ width:28px; height:28px; stroke:var(--gold2); }
.bx-done p{ font-size:14px; margin-top:6px; }
.bx-contacts{ display:grid; grid-template-columns:1fr 1.2fr; gap:16px; }
.bx-clist{ display:flex; flex-direction:column; gap:10px; }
.bx-citem{ padding:18px 20px; border-radius:16px; background:var(--bg2); border:1px solid var(--line); }
.bx-citem small{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-bottom:2px; }
.bx-citem b{ font-weight:600; font-size:16px; }
.bx-quick{ display:flex; gap:8px; }
.bx-quick span{ flex:1; text-align:center; padding:13px 6px; border-radius:14px; font-weight:600; font-size:14px; }
.bx-map{ position:relative; min-height:260px; border-radius:20px; overflow:hidden; background:#1e1813; border:1px solid var(--line); }
.bx-map svg{ position:absolute; inset:0; width:100%; height:100%; }
.bx-pin{ position:absolute; left:52%; top:48%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; }
.bx-pin span{ padding:7px 11px; border-radius:10px; background:var(--gold); color:#1b1410; font:600 13px var(--font-sans); box-shadow:0 8px 20px #0008; }
.bx-pin i{ width:14px; height:14px; margin-top:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 8px #d4a37333,0 0 0 16px #d4a37318; animation:bx-pulse 2s infinite; }
@keyframes bx-pulse{ 50%{ box-shadow:0 0 0 12px #d4a37322,0 0 0 24px #d4a37308; } }
.bx-foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:28px var(--pad) 90px; border-top:1px solid var(--line); color:var(--mute); font-size:13px; }
.bx-fab{ position:absolute; z-index:6; right:16px; bottom:16px; display:flex; align-items:center; gap:10px; height:52px; padding:0 18px 0 7px; border-radius:999px; background:var(--gold); color:#1b1410; font-weight:600; font-size:14px; box-shadow:0 14px 40px #0009; transition:transform .3s var(--ease); }
.bx-fab:hover{ transform:translateY(-3px); }
.bx-orb{ flex:none; width:38px; height:38px; border-radius:50%; background:conic-gradient(#1b1410,#6b4a2f,#1b1410); display:grid; place-items:center; }
.bx-orb::after{ content:""; width:11px; height:11px; border-radius:50%; background:var(--gold2); box-shadow:0 0 12px var(--gold2); }
.bx-ai{ position:absolute; z-index:7; right:16px; bottom:80px; width:350px; max-height:calc(100% - 100px); display:flex; flex-direction:column; border-radius:20px; overflow:hidden; background:#17110d; border:1px solid #d4a37344; box-shadow:0 30px 80px #000c; opacity:0; transform:translateY(14px) scale(.98); pointer-events:none; visibility:hidden; transition:opacity .3s,transform .4s var(--ease),visibility 0s .4s; }
.bx-ai.open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .3s,transform .4s var(--ease); }
.bx-ai-head{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); }
.bx-ai-head .bx-orb{ width:34px; height:34px; background:conic-gradient(#d4a373,#6b4a2f,#d4a373); }
.bx-ai-head b{ display:block; font-size:14px; }
.bx-ai-head small{ font-size:12px; color:#6ee7a0; }
.bx-ai-head button{ margin-left:auto; font-size:22px; color:var(--mute); width:32px; height:32px; }
.bx-log{ flex:1; min-height:140px; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; }
.bx-msg{ max-width:86%; padding:9px 13px; border-radius:16px; font-size:14px; line-height:1.5; animation:bx-msg .35s var(--ease) both; }
@keyframes bx-msg{ from{ opacity:0; transform:translateY(6px); } }
.bx-msg.bot{ background:#261d17; border-bottom-left-radius:4px; }
.bx-msg.me{ align-self:flex-end; background:var(--gold); color:#1b1410; border-bottom-right-radius:4px; }
.bx-typing{ display:flex; gap:4px; padding:13px; }
.bx-typing i{ width:6px; height:6px; border-radius:50%; background:var(--mute); animation:bx-blink 1s infinite; }
.bx-typing i:nth-child(2){ animation-delay:.15s; } .bx-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes bx-blink{ 50%{ opacity:.25; } }
.bx-quickq{ display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 10px; }
.bx-quickq button{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid #d4a37355; color:var(--gold2); }
.bx-ai-form{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); }
.bx-ai-form input{ flex:1; min-width:0; height:42px; border-radius:12px; border:1px solid var(--line); background:#0e0b09; color:var(--text); padding:0 12px; font-size:15px; }
.bx-ai-form button{ width:42px; height:42px; border-radius:12px; background:var(--gold); color:#1b1410; font-weight:700; }
@container demo (max-width:760px){
  .bx-menu{ display:none; }
  .bx-hero{ grid-template-columns:1fr; padding-top:36px; padding-bottom:56px; gap:28px; }
  .bx-card{ aspect-ratio:16/10; }
  .bx-services{ grid-template-columns:1fr 1fr; }
  .bx-bk,.bx-contacts{ grid-template-columns:1fr; }
  .bx-side{ position:static; }
  .bx-title{ flex-direction:column; align-items:flex-start; gap:10px; }
  .bx-sec{ padding-block:48px; }
}
@container demo (max-width:480px){
  .bx-nav{ height:58px; }
  .bx-lead{ font-size:15px; }
  .bx-cta .bx-btn{ flex:1; }
  .bx-services,.bx-masters{ grid-template-columns:1fr; }
  .bx-bk-main{ padding:16px; }
  .bx-days{ grid-template-columns:repeat(4,1fr); }
  .bx-slots{ grid-template-columns:repeat(3,1fr); }
  .bx-ai{ left:10px; right:10px; width:auto; bottom:76px; }
  .bx-fab{ right:12px; bottom:12px; height:48px; }
  .bx-badge b{ font-size:20px; }
}
.dm-shop{ --bg:#fbf6ef; --ink:#2b1d14; --mute:#806c5b; --line:#eadfd2; --acc:#e07a5f; --acc2:#c95f45; --mint:#6fa58a; --serif:'Fraunces',Georgia,serif; --pad:clamp(14px,3.4cqi,36px); background:var(--bg); color:var(--ink); font-family:var(--font-sans); font-size:15px; }
.cx-top{ background:var(--ink); color:#f5e9dc; font-size:13px; text-align:center; padding:8px 12px; }
.cx-top b{ color:#ffc9a8; font-weight:600; }
.cx-head{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:20px; height:68px; padding:0 var(--pad); background:#fbf6efee; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.cx-logo{ font:700 26px var(--serif); letter-spacing:-.02em; }
.cx-logo span{ color:var(--acc); }
.cx-search{ flex:1; max-width:380px; position:relative; }
.cx-search input{ width:100%; height:44px; border-radius:999px; border:1px solid var(--line); background:#fff; padding:0 16px 0 42px; font-size:15px; color:var(--ink); }
.cx-search input:focus{ outline:2px solid var(--acc); border-color:transparent; }
.cx-search svg{ position:absolute; left:15px; top:13px; width:18px; height:18px; color:var(--mute); }
.cx-cart{ margin-left:auto; display:flex; align-items:center; gap:9px; height:44px; padding:0 16px; border-radius:999px; background:var(--ink); color:#fff; font-weight:600; font-size:14px; }
.cx-cart svg{ width:19px; height:19px; }
.cx-count{ min-width:22px; height:22px; border-radius:11px; background:var(--acc); display:grid; place-items:center; font-size:12px; padding:0 6px; }
.cx-cart.bump{ animation:cx-bump .5s var(--ease); }
@keyframes cx-bump{ 30%{ transform:scale(1.08); } }
.cx-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; padding:48px var(--pad) 36px; }
.cx-h1{ font:700 clamp(32px,5.8cqi,64px)/1 var(--serif); letter-spacing:-.035em; margin-bottom:18px; }
.cx-h1 em{ font-style:italic; color:var(--acc); }
.cx-lead{ font-size:17px; color:var(--mute); max-width:460px; margin-bottom:24px; }
.cx-perks{ display:flex; flex-wrap:wrap; gap:8px; }
.cx-perks span{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; padding:9px 13px; border-radius:999px; background:#fff; border:1px solid var(--line); }
.cx-perks i{ width:8px; height:8px; border-radius:50%; background:var(--mint); }
.cx-art{ position:relative; aspect-ratio:1; max-width:380px; width:100%; justify-self:center; border-radius:40% 60% 55% 45%/50% 45% 55% 50%; background:radial-gradient(circle at 30% 30%,#ffd7c2,#f3a78c 60%,#e07a5f); display:grid; place-items:center; }
.cx-art svg{ width:76%; filter:drop-shadow(0 30px 30px #7a3a2244); }
.cx-sticker{ position:absolute; right:2%; top:6%; width:108px; height:108px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; text-align:center; font:700 14px/1.15 var(--serif); transform:rotate(12deg); }
.cx-sticker b{ display:block; font-size:27px; color:#ffc9a8; }
.cx-shop{ padding:20px var(--pad) 64px; }
.cx-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; }
.cx-cats{ display:flex; gap:8px; }
.cx-cat{ flex:none; height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:14px; font-weight:500; transition:background .25s,color .25s; }
.cx-cat.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cx-sort{ margin-left:auto; height:40px; border-radius:999px; border:1px solid var(--line); background:#fff; padding:0 14px; font-size:14px; color:var(--ink); }
.cx-found{ font-size:13px; color:var(--mute); margin-bottom:12px; }
.cx-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cx-p{ background:#fff; border-radius:20px; border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition:transform .35s var(--ease),box-shadow .35s; animation:cx-in .45s var(--ease) both; }
@keyframes cx-in{ from{ opacity:0; transform:translateY(12px); } }
.cx-p:hover{ transform:translateY(-4px); box-shadow:0 20px 40px #7a3a221a; }
.cx-img{ position:relative; aspect-ratio:1/.8; display:grid; place-items:center; }
.cx-img svg{ width:60%; }
.cx-tag{ position:absolute; left:10px; top:10px; font-size:12px; font-weight:600; padding:4px 9px; border-radius:999px; background:#fff; }
.cx-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:2px; flex:1; }
.cx-body b{ font-weight:600; font-size:15px; line-height:1.35; }
.cx-body small{ color:var(--mute); font-size:12px; }
.cx-pfoot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:12px; }
.cx-price{ font:700 20px var(--serif); white-space:nowrap; }
.cx-add{ height:38px; padding:0 14px; border-radius:12px; background:var(--acc); color:#fff; font-weight:600; font-size:13px; transition:background .25s; white-space:nowrap; }
.cx-add:hover{ background:var(--acc2); }
.cx-add.in{ background:var(--mint); }
.cx-empty{ grid-column:1/-1; text-align:center; padding:50px 0; color:var(--mute); }
.cx-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:48px var(--pad); background:#fff; border-top:1px solid var(--line); }
.cx-icard{ padding:22px; border-radius:18px; background:var(--bg); }
.cx-icard b{ display:block; font:700 20px var(--serif); margin-bottom:6px; }
.cx-icard p{ color:var(--mute); font-size:14px; }
.cx-foot{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:20px; padding:30px var(--pad) 40px; background:var(--ink); color:#cdb9a6; font-size:13px; line-height:1.8; }
.cx-foot b{ color:#fff; display:block; margin-bottom:4px; font-weight:600; }
.cx-pay{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.cx-pay span{ font-size:11px; font-weight:600; padding:4px 8px; border-radius:6px; background:#ffffff14; color:#fff; }
.cx-shade{ position:absolute; inset:0; z-index:8; background:#2b1d1466; opacity:0; pointer-events:none; transition:opacity .35s; }
.cx-shade.on{ opacity:1; pointer-events:auto; }
.cx-drawer{ position:absolute; z-index:9; top:0; right:0; bottom:0; width:min(400px,100%); background:var(--bg); display:flex; flex-direction:column; transform:translateX(102%); visibility:hidden; transition:transform .5s var(--ease),visibility 0s .5s; box-shadow:-20px 0 60px #2b1d1426; }
.cx-drawer.on{ transform:none; visibility:visible; transition:transform .5s var(--ease); }
.cx-dhead{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); }
.cx-dhead b{ font:700 24px var(--serif); }
.cx-dhead button{ width:38px; height:38px; border-radius:50%; background:#fff; font-size:22px; border:1px solid var(--line); }
.cx-dbody{ flex:1; overflow-y:auto; padding:10px 18px; }
.cx-line{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.cx-limg{ width:56px; height:56px; border-radius:12px; display:grid; place-items:center; }
.cx-limg svg{ width:70%; }
.cx-line b{ font-weight:600; font-size:14px; display:block; }
.cx-line small{ color:var(--mute); font-size:12px; }
.cx-qty{ display:flex; align-items:center; gap:6px; margin-top:4px; }
.cx-qty button{ width:28px; height:28px; border-radius:8px; background:#fff; border:1px solid var(--line); font-weight:600; }
.cx-qty span{ min-width:20px; text-align:center; font-weight:600; }
.cx-lsum{ font:700 16px var(--serif); white-space:nowrap; }
.cx-dempty{ text-align:center; color:var(--mute); padding:50px 0; }
.cx-dfoot{ padding:14px 18px 18px; border-top:1px solid var(--line); background:#fff; }
.cx-opt{ margin-bottom:10px; }
.cx-opt p{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-bottom:6px; }
.cx-radios{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.cx-radios.two{ grid-template-columns:1fr 1fr; }
.cx-radio{ padding:8px 4px; border-radius:12px; border:1px solid var(--line); text-align:center; font-size:13px; font-weight:500; background:#fff; line-height:1.3; }
.cx-radio small{ display:block; font-size:11px; color:var(--mute); font-weight:400; }
.cx-radio.on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.cx-free{ font-size:12px; color:var(--mute); }
.cx-progress{ height:6px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:4px; }
.cx-progress i{ display:block; height:100%; background:var(--mint); transition:width .5s var(--ease); }
.cx-totals{ display:flex; flex-direction:column; gap:2px; margin:10px 0; font-size:14px; }
.cx-totals div{ display:flex; justify-content:space-between; }
.cx-totals .grand{ font:700 22px var(--serif); padding-top:6px; }
.cx-checkout{ width:100%; height:50px; border-radius:14px; background:var(--acc); color:#fff; font-weight:600; font-size:15px; }
.cx-success{ text-align:center; padding:24px 2px; }
.cx-big{ width:76px; height:76px; margin:0 auto 16px; border-radius:50%; background:var(--mint); display:grid; place-items:center; animation:cx-pop .6s var(--ease); }
@keyframes cx-pop{ from{ transform:scale(.4); opacity:0; } }
.cx-big svg{ width:36px; stroke:#fff; }
.cx-success b{ display:block; font:700 26px var(--serif); margin-bottom:6px; }
.cx-success p{ color:var(--mute); font-size:14px; }
.cx-erip{ margin-top:16px; text-align:left; border-radius:16px; background:#fff; border:1px solid var(--line); padding:14px; font-size:14px; }
.cx-erip small{ display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-bottom:4px; }
.cx-erip code{ font:600 20px var(--font-sans); letter-spacing:.06em; }
.cx-erip ol{ margin:8px 0 0 18px; color:var(--mute); font-size:13px; }
.cx-toast{ position:absolute; z-index:10; left:50%; top:84px; transform:translate(-50%,-16px); opacity:0; background:var(--ink); color:#fff; font-size:14px; padding:10px 16px; border-radius:12px; transition:opacity .3s,transform .4s var(--ease); pointer-events:none; white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis; }
.cx-toast.on{ opacity:1; transform:translate(-50%,0); }
@container demo (max-width:760px){
  .cx-hero{ grid-template-columns:1fr; padding-top:32px; }
  .cx-art{ max-width:300px; }
  .cx-grid{ grid-template-columns:repeat(3,1fr); }
  .cx-info,.cx-foot{ grid-template-columns:1fr; }
  .cx-search{ max-width:none; }
}
@container demo (max-width:480px){
  .cx-top{ font-size:12px; }
  .cx-head{ gap:10px; height:60px; }
  .cx-logo{ font-size:23px; }
  .cx-search,.cx-lbl{ display:none; }
  .cx-lead{ font-size:15px; }
  .cx-sticker{ width:86px; height:86px; font-size:12px; } .cx-sticker b{ font-size:21px; }
  .cx-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .cx-body{ padding:10px 12px 12px; } .cx-body b{ font-size:14px; } .cx-price{ font-size:17px; }
  .cx-pfoot{ flex-direction:column; align-items:stretch; }
  .cx-cats{ overflow-x:auto; width:100%; padding-bottom:4px; scrollbar-width:none; }
  .cx-sort{ margin-left:0; }
}
.dm-factory{ --bg:#0d0f12; --panel:#15181d; --panel2:#1b1f26; --line:#ffffff14; --text:#eceff3; --mute:#9aa2ad; --y:#f2b705; --y2:#ffd24a; --disp:'Oswald',Impact,sans-serif; --pad:clamp(16px,4cqi,40px); background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:15px; }
.fx-head{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:24px; height:68px; padding:0 var(--pad); background:#0d0f12ee; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.fx-logo{ display:flex; align-items:center; gap:10px; font:700 20px var(--disp); letter-spacing:.04em; text-transform:uppercase; }
.fx-logo i{ width:30px; height:30px; background:var(--y); clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%); }
.fx-menu{ display:flex; gap:24px; font-size:14px; color:var(--mute); margin-left:auto; }
.fx-menu button:hover{ color:var(--text); }
.fx-lang{ display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.fx-lang button{ padding:7px 11px; font:500 12px var(--font-mono); color:var(--mute); }
.fx-lang button.on{ background:var(--y); color:#0d0f12; }
.fx-btn{ display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 24px; font:600 13px var(--font-sans); letter-spacing:.05em; text-transform:uppercase; border-radius:4px; transition:background .25s,transform .3s var(--ease),border-color .25s; }
.fx-y{ background:var(--y); color:#0d0f12; }
.fx-y:hover{ background:var(--y2); transform:translateY(-2px); }
.fx-o{ border:1px solid #ffffff33; }
.fx-o:hover{ border-color:var(--y); }
.fx-head .fx-btn{ height:40px; padding:0 16px; font-size:12px; }
.fx-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.fx-grid{ position:absolute; inset:0; background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(circle at 70% 40%,#000,transparent 70%); mask-image:radial-gradient(circle at 70% 40%,#000,transparent 70%); }
.fx-hero-in{ position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:end; padding:64px var(--pad) 56px; }
.fx-kicker{ font:500 12px var(--font-mono); color:var(--y); letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; display:flex; align-items:center; gap:12px; }
.fx-kicker::before{ content:""; width:32px; height:2px; background:var(--y); flex:none; }
.fx-h1{ font:700 clamp(38px,7.4cqi,92px)/.92 var(--disp); text-transform:uppercase; margin-bottom:22px; }
.fx-h1 span{ color:var(--y); }
.fx-lead{ font-size:16px; color:var(--mute); max-width:520px; margin-bottom:28px; }
.fx-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.fx-stats{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); background:var(--panel); }
.fx-stat{ padding:20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.fx-stat:nth-child(2n){ border-right:0; } .fx-stat:nth-last-child(-n+2){ border-bottom:0; }
.fx-stat b{ display:block; font:600 38px/1 var(--disp); }
.fx-stat b em{ font-style:normal; color:var(--y); }
.fx-stat span{ font-size:13px; color:var(--mute); }
.fx-sec{ padding:64px var(--pad); border-bottom:1px solid var(--line); }
.fx-title{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:30px; }
.fx-h2{ font:600 clamp(30px,4.4cqi,50px)/1 var(--disp); text-transform:uppercase; }
.fx-title p{ max-width:360px; color:var(--mute); font-size:14px; }
.fx-cat{ display:grid; grid-template-columns:240px 1fr; gap:18px; align-items:start; }
.fx-filters{ position:sticky; top:84px; padding:20px; background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; gap:20px; }
.fx-ftitle{ font:500 12px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-bottom:8px; display:flex; justify-content:space-between; }
.fx-ftitle b{ color:var(--y); font-weight:500; }
.fx-check{ display:flex; align-items:center; gap:10px; padding:5px 0; font-size:14px; cursor:pointer; }
.fx-check input{ appearance:none; -webkit-appearance:none; width:18px; height:18px; border:1.5px solid #ffffff44; border-radius:3px; display:grid; place-items:center; flex:none; margin:0; }
.fx-check input:checked{ background:var(--y); border-color:var(--y); }
.fx-check input:checked::after{ content:""; width:5px; height:9px; border:solid #0d0f12; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px); }
.fx-check small{ margin-left:auto; color:var(--mute); font:12px var(--font-mono); }
.dm-factory input[type=range]{ width:100%; accent-color:var(--y); }
.fx-reset{ font:500 12px var(--font-mono); color:var(--y); text-align:left; }
.fx-items{ display:flex; flex-direction:column; gap:8px; }
.fx-item{ display:grid; grid-template-columns:84px 1fr auto auto; gap:18px; align-items:center; padding:14px 18px 14px 14px; background:var(--panel); border:1px solid var(--line); transition:border-color .25s,background .25s; animation:fx-in .4s var(--ease) both; }
@keyframes fx-in{ from{ opacity:0; transform:translateY(8px); } }
.fx-item:hover{ border-color:#f2b70566; background:var(--panel2); }
.fx-iimg{ width:84px; height:64px; background:#0d0f12; display:grid; place-items:center; border:1px solid var(--line); }
.fx-iimg svg{ width:70%; }
.fx-item b{ font-weight:600; font-size:15px; }
.fx-specs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.fx-specs span{ font:500 12px var(--font-mono); color:var(--mute); padding:2px 7px; border:1px solid var(--line); }
.fx-stock{ font:500 12px var(--font-mono); white-space:nowrap; }
.fx-stock.ok{ color:#5ee6a0; } .fx-stock.low{ color:var(--y); }
.fx-item .fx-btn{ height:40px; padding:0 14px; font-size:12px; }
.fx-none{ padding:40px; text-align:center; color:var(--mute); border:1px dashed var(--line); }
.fx-calc{ display:grid; grid-template-columns:1.1fr .9fr; border:1px solid var(--line); }
.fx-form{ padding:30px; background:var(--panel); display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start; }
.fx-fld{ display:flex; flex-direction:column; gap:7px; }
.fx-fld.wide{ grid-column:1/-1; }
.fx-fld label,.fx-fld .fx-flabel{ font:500 12px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.fx-fld select,.fx-fld input{ height:50px; background:#0d0f12; border:1px solid #ffffff22; border-radius:4px; padding:0 12px; font-size:15px; color:var(--text); width:100%; }
.fx-fld select:focus,.fx-fld input:focus{ outline:2px solid var(--y); border-color:transparent; }
.fx-seg{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #ffffff22; border-radius:4px; overflow:hidden; }
.fx-seg button{ height:48px; font-size:14px; border-right:1px solid #ffffff22; }
.fx-seg button:last-child{ border-right:0; }
.fx-seg button.on{ background:var(--y); color:#0d0f12; font-weight:600; }
.fx-out{ padding:30px; background:var(--y); color:#0d0f12; display:flex; flex-direction:column; }
.fx-out small{ font:500 12px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.fx-total{ font:700 clamp(36px,5cqi,60px)/1 var(--disp); margin:8px 0 4px; transition:opacity .2s; }
.fx-lines{ list-style:none; margin:18px 0; display:flex; flex-direction:column; gap:6px; font-size:14px; }
.fx-lines li{ display:flex; justify-content:space-between; gap:12px; padding-bottom:6px; border-bottom:1px solid #0d0f1222; }
.fx-out .fx-btn{ background:#0d0f12; color:var(--y); margin-top:auto; }
.fx-out .fx-btn:hover{ background:#000; }
.fx-sent{ display:flex; flex-direction:column; gap:10px; animation:fx-in .5s var(--ease); height:100%; }
.fx-sent strong{ font:700 30px/1.05 var(--disp); text-transform:uppercase; }
.fx-sent p{ font-size:14px; }
.fx-dealers{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center; }
.fx-map svg{ width:100%; height:auto; }
.fx-city{ cursor:pointer; outline:none; }
.fx-city .dot{ fill:var(--y); }
.fx-city .halo{ fill:var(--y); opacity:.15; }
.fx-city text{ font:500 13px var(--font-sans); fill:#c7cdd6; }
.fx-city.on text{ fill:#fff; font-weight:600; }
.fx-city.on .halo{ opacity:.35; }
.fx-city:focus-visible .halo{ opacity:.5; }
.fx-dcard{ padding:26px; background:var(--panel); border:1px solid var(--line); }
.fx-dcard strong{ display:block; font:600 30px var(--disp); text-transform:uppercase; }
.fx-dcard p{ color:var(--mute); margin-bottom:14px; }
.fx-dcard ul{ list-style:none; display:flex; flex-direction:column; gap:8px; font-size:14px; margin-bottom:20px; }
.fx-dcard li{ display:flex; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.fx-dcard li span{ color:var(--mute); }
.fx-dcard .fx-btn{ width:100%; }
.fx-foot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:30px var(--pad) 40px; color:var(--mute); font-size:13px; }
@container demo (max-width:760px){
  .fx-menu{ display:none; }
  .fx-lang{ margin-left:auto; }
  .fx-hero-in,.fx-calc,.fx-dealers,.fx-cat{ grid-template-columns:1fr; }
  .fx-filters{ position:static; display:grid; grid-template-columns:1fr 1fr; }
  .fx-title{ flex-direction:column; align-items:flex-start; gap:10px; }
  .fx-sec{ padding-block:48px; }
}
@container demo (max-width:480px){
  .fx-head{ gap:10px; height:60px; }
  .fx-head .fx-btn{ display:none; }
  .fx-logo{ font-size:17px; } .fx-logo i{ width:24px; height:24px; }
  .fx-hero-in{ padding-top:36px; padding-bottom:36px; }
  .fx-lead{ font-size:15px; }
  .fx-cta .fx-btn{ flex:1; padding:0 12px; }
  .fx-stat{ padding:14px; } .fx-stat b{ font-size:28px; }
  .fx-filters{ grid-template-columns:1fr; }
  .fx-item{ grid-template-columns:60px 1fr; gap:12px; padding:12px; }
  .fx-iimg{ width:60px; height:50px; }
  .fx-item .fx-stock{ grid-column:2; }
  .fx-item .fx-btn{ grid-column:1/-1; }
  .fx-form{ grid-template-columns:1fr; padding:18px; }
  .fx-out{ padding:20px; }
  .fx-seg{ grid-template-columns:1fr 1fr; }
  .fx-seg button:nth-child(2){ border-right:0; }
  .fx-seg button:nth-child(-n+2){ border-bottom:1px solid #ffffff22; }
}
.dm-dealer{ --bg:#f3f5f8; --ink:#0f1728; --mute:#5f6878; --line:#e3e8ef; --acc:#0b6fe6; --acc-soft:#e8f2ff; --ok:#11883f; --ok-soft:#e3f5e9; --warn:#b57300; --warn-soft:#fff2d6; background:var(--bg); color:var(--ink); font-family:var(--font-sans); font-size:14px; }
.dx-app{ position:absolute; inset:0; display:grid; grid-template-columns:210px minmax(0,1fr); }
.dx-side{ background:#0f1728; color:#c9d2e3; padding:18px 12px; display:flex; flex-direction:column; gap:4px; min-height:0; }
.dx-brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 18px; color:#fff; font-weight:700; font-size:15px; text-align:left; }
.dx-brand i{ flex:none; width:26px; height:26px; background:#f2b705; clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%); }
.dx-brand small{ display:block; font:500 10px var(--font-mono); color:#8793a8; letter-spacing:.1em; }
.dx-tab{ position:relative; display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:10px; font-weight:500; font-size:14px; text-align:left; transition:background .2s,color .2s; }
.dx-tab svg{ width:18px; height:18px; flex:none; }
.dx-tab:hover{ background:#ffffff0d; color:#fff; }
.dx-tab.on{ background:#ffffff17; color:#fff; }
.dx-badge{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--acc); color:#fff; font-size:11px; display:grid; place-items:center; }
.dx-badge[hidden]{ display:none; }
.dx-sfoot{ margin-top:auto; padding:12px; border-radius:12px; background:#ffffff0a; font-size:12px; }
.dx-sfoot b{ color:#fff; display:block; font-size:13px; }
.dx-sfoot span{ color:#8f9bb0; }
.dx-main{ min-width:0; overflow-y:auto; scrollbar-width:thin; }
.dx-top{ position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:14px; height:62px; padding:0 22px; background:#f3f5f8e6; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.dx-h{ font-size:19px; font-weight:600; letter-spacing:-.02em; }
.dx-sync{ display:flex; align-items:center; gap:7px; font:500 12px var(--font-mono); color:var(--ok); background:var(--ok-soft); padding:5px 10px; border-radius:999px; white-space:nowrap; }
.dx-sync i{ width:7px; height:7px; border-radius:50%; background:var(--ok); animation:dx-beat 2s infinite; }
@keyframes dx-beat{ 50%{ opacity:.3; } }
.dx-who{ margin-left:auto; display:flex; align-items:center; gap:10px; font-size:14px; white-space:nowrap; }
.dx-ava{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#0b7cff,#7c5cff); color:#fff; display:grid; place-items:center; font-weight:600; font-size:12px; }
.dx-tier{ font:600 11px var(--font-mono); color:#7a4f00; background:#ffe6a6; padding:4px 8px; border-radius:6px; }
.dx-view{ padding:20px 22px 40px; display:none; }
.dx-view.on{ display:block; animation:dx-fade .35s var(--ease); }
@keyframes dx-fade{ from{ opacity:0; transform:translateY(6px); } }
.dx-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.dx-kpi,.dx-card{ background:#fff; border:1px solid var(--line); border-radius:14px; min-width:0; }
.dx-kpi{ padding:16px; }
.dx-kpi small{ color:var(--mute); font-size:12px; }
.dx-kpi b{ display:block; font-size:22px; font-weight:700; letter-spacing:-.03em; margin:2px 0; transition:color .4s; white-space:nowrap; }
.dx-kpi b.flash{ color:var(--acc); }
.dx-kpi em{ font-style:normal; font-size:12px; color:var(--ok); }
.dx-bar{ height:6px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:8px; }
.dx-bar i{ display:block; height:100%; background:var(--acc); border-radius:3px; transition:width .6s var(--ease); }
.dx-row{ display:grid; grid-template-columns:1.3fr 1fr; gap:12px; }
.dx-card{ padding:18px; }
.dx-ch{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.dx-ch b{ font-size:15px; font-weight:600; }
.dx-ch small{ color:var(--mute); font-size:12px; text-align:right; }
.dx-link{ color:var(--acc); font-weight:600; font-size:13px; }
.dx-chart{ display:flex; align-items:flex-end; gap:10px; height:190px; }
.dx-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
.dx-col span{ width:100%; max-width:36px; border-radius:6px 6px 2px 2px; background:#cfe3ff; transition:height .8s var(--ease); }
.dx-col.cur span{ background:var(--acc); }
.dx-col small,.dx-col b{ font-size:11px; color:var(--mute); }
.dx-col b{ font-weight:600; }
.dx-scrollx{ overflow-x:auto; }
.dx-tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.dx-tbl th{ text-align:left; font-weight:500; color:var(--mute); font-size:12px; padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.dx-tbl td{ padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.dx-tbl tr:last-child td{ border-bottom:0; }
.dx-tbl tr.new td{ animation:dx-hl 2.4s ease; }
@keyframes dx-hl{ 0%,40%{ background:var(--acc-soft); } }
.dx-st{ display:inline-flex; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.dx-st.new{ background:var(--acc-soft); color:var(--acc); }
.dx-st.ok{ background:var(--ok-soft); color:var(--ok); }
.dx-st.way{ background:var(--warn-soft); color:var(--warn); }
.dx-mono{ font-family:var(--font-mono); font-size:12px; white-space:nowrap; }
.dx-catl{ display:grid; grid-template-columns:1fr 290px; gap:12px; align-items:start; }
.dx-old{ color:var(--mute); text-decoration:line-through; font-size:12px; display:block; white-space:nowrap; }
.dx-new{ font-weight:600; white-space:nowrap; }
.dx-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.dx-qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; width:max-content; }
.dx-qty button{ width:28px; height:30px; font-weight:600; color:var(--mute); }
.dx-qty input{ width:40px; height:30px; border:0; text-align:center; font-weight:600; -moz-appearance:textfield; appearance:textfield; background:transparent; }
.dx-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.dx-basket{ position:sticky; top:76px; }
.dx-bline{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:7px 0; border-bottom:1px dashed var(--line); }
.dx-bline span{ color:var(--mute); }
.dx-bempty{ color:var(--mute); font-size:13px; padding:14px 0; }
.dx-btotal{ display:flex; justify-content:space-between; font-size:18px; font-weight:700; margin:12px 0 2px; }
.dx-save{ font-size:13px; color:var(--ok); margin-bottom:8px; }
.dx-limit{ font-size:12px; color:var(--mute); margin-bottom:12px; }
.dx-limit.over{ color:#c62f2f; }
.dx-btn{ width:100%; height:46px; border-radius:10px; background:var(--acc); color:#fff; font-weight:600; transition:background .2s; }
.dx-btn:hover{ background:#0059c2; }
.dx-btn:disabled{ background:#b9c6d9; cursor:not-allowed; }
.dx-docs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.dx-doc{ display:flex; gap:12px; align-items:center; }
.dx-dico{ width:40px; height:48px; border-radius:8px; background:var(--acc-soft); color:var(--acc); display:grid; place-items:center; font:600 11px var(--font-mono); flex:none; }
.dx-doc b{ display:block; font-size:13px; }
.dx-doc small{ color:var(--mute); font-size:12px; }
.dx-doc button{ margin-left:auto; flex:none; width:34px; height:34px; border-radius:8px; border:1px solid var(--line); color:var(--acc); }
.dx-toast{ position:absolute; z-index:6; right:18px; top:74px; max-width:300px; background:var(--ink); color:#fff; padding:12px 14px; border-radius:12px; font-size:13px; box-shadow:0 18px 40px #0f172840; transform:translateY(-12px); opacity:0; transition:opacity .3s,transform .4s var(--ease); pointer-events:none; }
.dx-toast.on{ opacity:1; transform:none; }
.dx-toast b{ color:#8ccbff; }
@container demo (max-width:1100px){
  .dx-app{ grid-template-columns:180px minmax(0,1fr); }
  .dx-catl{ grid-template-columns:1fr 250px; }
  .dx-hide-l{ display:none; }
  .dx-tbl td,.dx-tbl th{ padding-inline:6px; }
}
@container demo (max-width:900px){
  .dx-kpis{ grid-template-columns:repeat(2,1fr); }
  .dx-row,.dx-catl{ grid-template-columns:1fr; }
  .dx-basket{ position:static; }
  .dx-docs{ grid-template-columns:1fr 1fr; }
}
@container demo (max-width:620px){
  .dx-app{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .dx-side{ order:2; flex-direction:row; justify-content:space-around; padding:6px 4px; gap:0; }
  .dx-brand,.dx-sfoot{ display:none; }
  .dx-tab{ flex:1; flex-direction:column; gap:3px; font-size:11px; padding:7px 4px; }
  .dx-tab .dx-badge{ position:absolute; top:2px; right:calc(50% - 22px); margin:0; min-width:16px; height:16px; font-size:10px; }
  .dx-top{ padding:0 14px; height:56px; gap:10px; }
  .dx-h{ font-size:16px; }
  .dx-nm,.dx-sync span{ display:none; }
  .dx-view{ padding:14px 12px 30px; }
  .dx-kpis{ gap:8px; }
  .dx-kpi{ padding:12px; } .dx-kpi b{ font-size:17px; }
  .dx-hide{ display:none; }
  .dx-docs{ grid-template-columns:1fr; }
  .dx-toast{ left:12px; right:12px; max-width:none; top:64px; }
}
@media(prefers-reduced-motion:reduce){
  .demo *,.demo *::before,.demo *::after{ animation:none !important; transition:none !important; }
}